SVG images should not be loaded when MathML is used
- Use span with a background-image instead of <img> for the fallback SVG so that they don't load in Gecko. - Make the image fallback a span inline-block so that it can have a dimension. Bug: 71929 Change-Id: I7f820cd5766db1fece452ebfc72915a55e42c82e
This commit is contained in:
parent
209f3218ad
commit
d4e928a486
@ -379,12 +379,12 @@ class MathMathML extends MathRenderer {
|
|||||||
$class = $classOverride;
|
$class = $classOverride;
|
||||||
}
|
}
|
||||||
|
|
||||||
$style = '';
|
$style = 'background-image: url(\''. $url. '\'); background-repeat: no-repeat; background-size: contain;';
|
||||||
$this->correctSvgStyle( $this->getSvg(), $style );
|
$this->correctSvgStyle( $this->getSvg(), $style );
|
||||||
if ( $class ) { $attribs['class'] = $class; }
|
if ( $class ) { $attribs['class'] = $class; }
|
||||||
if ( $style ) { $attribs['style'] = $style; }
|
if ( $style ) { $attribs['style'] = $style; }
|
||||||
// an alternative for svg might be an object with type="image/svg+xml"
|
// an alternative for svg might be an object with type="image/svg+xml"
|
||||||
return Xml::element( 'img', $this->getAttributes( 'img', $attribs , array( 'src' => $url, 'aria-hidden' => 'true' ) ) );
|
return Xml::element( 'span', $this->getAttributes( 'span', $attribs , array( 'aria-hidden' => 'true' ) ) );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ m|math {
|
|||||||
/* Default style for the image fallback. */
|
/* Default style for the image fallback. */
|
||||||
/* Note: We had to use !important rules because of conflicts with the style
|
/* Note: We had to use !important rules because of conflicts with the style
|
||||||
generated by Mathoid. See https://gerrit.wikimedia.org/r/#/c/166213/ */
|
generated by Mathoid. See https://gerrit.wikimedia.org/r/#/c/166213/ */
|
||||||
.mwe-math-fallback-image-inline { display: inline; vertical-align: middle; }
|
.mwe-math-fallback-image-inline { display: inline-block; vertical-align: middle; }
|
||||||
.mwe-math-fallback-image-display { display: block; margin-left: auto !important; margin-right: auto !important; }
|
.mwe-math-fallback-image-display { display: block; margin-left: auto !important; margin-right: auto !important; }
|
||||||
|
|
||||||
/* Default style for the source fallback. */
|
/* Default style for the source fallback. */
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
( function ( $ ) {
|
( function ( $ ) {
|
||||||
'use strict';
|
'use strict';
|
||||||
// The MW_MATH_PNG and MW_MATH_MATHML constants are taken from Math.php
|
// The MW_MATH_PNG and MW_MATH_MATHML constants are taken from Math.php
|
||||||
var MW_MATH_PNG = 0, MW_MATH_MATHML = 5, img;
|
var MW_MATH_PNG = 0, MW_MATH_MATHML = 5, img, url;
|
||||||
|
|
||||||
// If MathPlayer is installed we show the MathML rendering.
|
// If MathPlayer is installed we show the MathML rendering.
|
||||||
if (navigator.userAgent.indexOf('MathPlayer') > -1) {
|
if (navigator.userAgent.indexOf('MathPlayer') > -1) {
|
||||||
@ -16,7 +16,8 @@
|
|||||||
$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).each(function() {
|
$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).each(function() {
|
||||||
// Create a new PNG image to use as the fallback.
|
// Create a new PNG image to use as the fallback.
|
||||||
img = document.createElement('img');
|
img = document.createElement('img');
|
||||||
img.setAttribute( 'src', this.src.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG) );
|
url = this.style.backgroundImage.match(/url\('?([^']*)'?\)/)[1];
|
||||||
|
img.setAttribute( 'src', url.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG) );
|
||||||
img.setAttribute( 'class', 'tex mwe-math-fallback-image-' + ($( this ).hasClass('mwe-math-fallback-image-inline') ? 'inline' : 'display') );
|
img.setAttribute( 'class', 'tex mwe-math-fallback-image-' + ($( this ).hasClass('mwe-math-fallback-image-inline') ? 'inline' : 'display') );
|
||||||
img.setAttribute( 'aria-hidden', 'true' );
|
img.setAttribute( 'aria-hidden', 'true' );
|
||||||
this.parentNode.insertBefore( img, this );
|
this.parentNode.insertBefore( img, this );
|
||||||
|
Loading…
Reference in New Issue
Block a user