Rename fallback-svg and fallback-png to fallback-image

- Merge fallback-svg and fallback-png into one fallback-image class.
- Move the vertical centering of PNG to MathTexvc and ext.math.js.
- Remove "img" from ext.math.css to reduce CSS specificity and make
  style easier to override by user stylesheets.
- Add a comment about the !important rules for centering in
  display mode.
- Only load ext.math.scripts in MathML mode.

Bug: 71955
Change-Id: If8ee1cf6453257a0a2f6aa186d4007954a8e5d8e

Math.hooks.php

@@ -134,8 +134,9 @@ class MathHooks {
 			$parser->getOutput()->addModules( array( 'ext.math.mathjax.enabler' ) );
 		}
 		$parser->getOutput()->addModuleStyles( array( 'ext.math.styles' ) );
-		$parser->getOutput()->addModules( array( 'ext.math.scripts' ) );
-
+		if ( $mode == MW_MATH_MATHML ) {
+			$parser->getOutput()->addModules( array( 'ext.math.scripts' ) );
+		}
 		// Writes cache if rendering was successful
 		$renderer->writeCache();
 		wfProfileOut( __METHOD__ );

MathMathML.php

@@ -399,7 +399,7 @@ class MathMathML extends MathRenderer {
 	private function getClassName( $fallback = false ) {
 		$class = "mwe-math-";
 		if ( $fallback ) {
-			$class .= 'fallback-svg-';
+			$class .= 'fallback-image-';
 		} else {
 			$class .= 'mathml-';
 		}

MathTexvc.php

@@ -135,12 +135,15 @@ class MathTexvc extends MathRenderer {
 		$attributes = array(
 			// the former class name was 'tex'
 			// for backwards compatibility we keep that classname
-			'class' => 'mwe-math-fallback-png-inline tex',
+			'class' => 'mwe-math-fallback-image-inline tex',
 			'alt' => $this->getTex()
 		);
 		if ( $this->getMathStyle() === MW_MATHSTYLE_DISPLAY ){
 			// if DisplayStyle is true, the equation will be centered in a new line
-			$attributes[ 'class' ] = 'mwe-math-fallback-png-display tex';
+			$attributes[ 'class' ] = 'mwe-math-fallback-image-display tex';
+		} else {
+			// Otherwise, do the vertical alignment.
+			$attributes[ 'style' ] = 'vertical-align: middle;';
 		}
 		return Xml::element( 'img',
 			$this->getAttributes(

modules/ext.math.css

@@ -33,13 +33,11 @@ m|math {
     src: url(./LatinModern/latinmodern-math.woff);
 }
 
-/* Default style for the SVG fallback. */
-img.mwe-math-fallback-svg-inline { display: inline; }
-img.mwe-math-fallback-svg-display { display: block; margin-left: auto !important; margin-right: auto !important; }
-
-/* Default style for the PNG fallback. */
-img.mwe-math-fallback-png-inline { display: inline; vertical-align: middle; }
-img.mwe-math-fallback-png-display { display: block; margin-left: auto; margin-right: auto; }
+/* 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; }
+.mwe-math-fallback-image-display { display: block; margin-left: auto !important; margin-right: auto !important; }
 
 /* Default style for the source fallback. */
 .mwe-math-fallback-source-inline { display: inline; vertical-align: middle; }
@@ -60,6 +58,6 @@ img.mwe-math-fallback-png-display { display: block; margin-left: auto; margin-ri
         height: auto;
         opacity: 1;
     }
-    .mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
-    .mwe-math-mathml-display + img.mwe-math-fallback-svg-display { display: none !important; }
+    .mwe-math-mathml-inline + .mwe-math-fallback-image-inline,
+    .mwe-math-mathml-display + .mwe-math-fallback-image-display { display: none !important; }
 }

modules/ext.math.js

@@ -6,18 +6,19 @@
 	// If MathPlayer is installed we show the MathML rendering.
 	if (navigator.userAgent.indexOf('MathPlayer') > -1) {
 		$( '.mwe-math-mathml-a11y' ).removeClass( 'mwe-math-mathml-a11y' );
-		$( 'img.mwe-math-fallback-svg-inline, img.mwe-math-fallback-svg-display' ).css( 'display', 'none' );
+		$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).css( 'display', 'none' );
 		return;
 	}
 
 	// We verify whether SVG as <img> is supported and otherwise use the
 	// PNG fallback. See https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
 	if (!document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1')) {
-		$( 'img.mwe-math-fallback-svg-inline, img.mwe-math-fallback-svg-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.
 			img = document.createElement('img');
 			img.setAttribute( 'src', this.src.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG) );
-			img.setAttribute( 'class', 'tex mwe-math-fallback-png-' + ($( this ).hasClass('mwe-math-fallback-svg-inline') ? 'inline' : 'display') );
+			img.setAttribute( 'class', 'tex mwe-math-fallback-image-' + ($( this ).hasClass('mwe-math-fallback-image-inline') ? 'inline' : 'display') );
+			img.setAttribute( 'style', 'vertical-align: center;' );
 			img.setAttribute( 'aria-hidden', 'true' );
 			this.parentNode.insertBefore( img, this );