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;
|
||||
}
|
||||
|
||||
$style = '';
|
||||
$style = 'background-image: url(\''. $url. '\'); background-repeat: no-repeat; background-size: contain;';
|
||||
$this->correctSvgStyle( $this->getSvg(), $style );
|
||||
if ( $class ) { $attribs['class'] = $class; }
|
||||
if ( $style ) { $attribs['style'] = $style; }
|
||||
// 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. */
|
||||
/* Note: We had to use !important rules because of conflicts with the style
|
||||
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; }
|
||||
|
||||
/* Default style for the source fallback. */
|
||||
|
@ -1,7 +1,7 @@
|
||||
( function ( $ ) {
|
||||
'use strict';
|
||||
// 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 (navigator.userAgent.indexOf('MathPlayer') > -1) {
|
||||
@ -16,7 +16,8 @@
|
||||
$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).each(function() {
|
||||
// Create a new PNG image to use as the fallback.
|
||||
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( 'aria-hidden', 'true' );
|
||||
this.parentNode.insertBefore( img, this );
|
||||
|
Loading…
Reference in New Issue
Block a user