Bug 1574087. Make MathML length, dir, display, displaystyle and mathvariant case insensitive. r=emilio
authorFrédéric Wang <fwang@igalia.com>
Thu, 15 Aug 2019 18:44:36 +0000
changeset 488436 2213833fcec3e1b7444a29d1ed038f39a3141cf7
parent 488435 3231c97680c749d65e53d63929c7c364b02e22b8
child 488437 cf52300e04c94da713159e613f6bfaf9aa0a6da4
push id113908
push userccoroiu@mozilla.com
push dateFri, 16 Aug 2019 09:57:53 +0000
treeherdermozilla-inbound@83fad6abe38a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1574087, 355548
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1574087. Make MathML length, dir, display, displaystyle and mathvariant case insensitive. r=emilio See https://github.com/mathml-refresh/mathml/issues/22 * mathml/relations/css-styling/attribute-mapping-001.html (length, dir) * mathml/relations/html5-tree/display-1.html (display) * mathml/relations/css-styling/displaystyle-1.html (displaystyle) * mathml/relations/css-styling/displaystyle-2.html (displaystyle) * mathml/relations/css-styling/mathvariant-case-sensitivity.html (mathvariant) layout/reftests/bugs/355548-3.xml has been updated now that units are case insensitive. Note: * mathml/relations/css-styling/attribute-mapping-002.html also checks case insensitiveness of mathvariant and displaystyle but for now we map these attributes to internal -moz-* CSS properties. * mathcolor and mathbackground values are already case insensitive, this is verified by mathml/relations/css-styling/attribute-mapping-001.html Differential Revision: https://phabricator.services.mozilla.com/D42081
dom/mathml/nsMathMLElement.cpp
layout/mathml/mathml.css
layout/reftests/bugs/355548-3-ref.xml
layout/reftests/bugs/355548-3.xml
testing/web-platform/meta/mathml/relations/css-styling/attribute-mapping-001.html.ini
testing/web-platform/meta/mathml/relations/css-styling/displaystyle-1.html.ini
testing/web-platform/meta/mathml/relations/css-styling/displaystyle-2.html.ini
testing/web-platform/meta/mathml/relations/html5-tree/display-1.html.ini
testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity-ref.html
testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity.html
--- a/dom/mathml/nsMathMLElement.cpp
+++ b/dom/mathml/nsMathMLElement.cpp
@@ -260,16 +260,18 @@ bool nsMathMLElement::ParseNamedSpaceVal
 // - unsigned-number: "a string of decimal digits with up to one decimal point
 //   (U+002E), representing a non-negative terminating decimal number (a type of
 //   rational number)"
 // - number: "an optional prefix of '-' (U+002D), followed by an unsigned
 //   number, representing a terminating decimal number (a type of rational
 //   number)"
 //
 /* static */
+// XXXfredw: Deprecate legacy MathML syntax and use the CSS parser instead.
+// See https://github.com/mathml-refresh/mathml/issues/63
 bool nsMathMLElement::ParseNumericValue(const nsString& aString,
                                         nsCSSValue& aCSSValue, uint32_t aFlags,
                                         Document* aDocument) {
   nsAutoString str(aString);
   str.CompressWhitespace();  // aString is const in this code...
 
   int32_t stringLength = str.Length();
   if (!stringLength) {
@@ -354,33 +356,33 @@ bool nsMathMLElement::ParseNumericValue(
         }
         return false;
       }
       cssUnit = eCSSUnit_Pixel;
     }
   } else if (unit.EqualsLiteral("%")) {
     aCSSValue.SetPercentValue(floatValue / 100.0f);
     return true;
-  } else if (unit.EqualsLiteral("em"))
+  } else if (unit.LowerCaseEqualsLiteral("em"))
     cssUnit = eCSSUnit_EM;
-  else if (unit.EqualsLiteral("ex"))
+  else if (unit.LowerCaseEqualsLiteral("ex"))
     cssUnit = eCSSUnit_XHeight;
-  else if (unit.EqualsLiteral("px"))
+  else if (unit.LowerCaseEqualsLiteral("px"))
     cssUnit = eCSSUnit_Pixel;
-  else if (unit.EqualsLiteral("in"))
+  else if (unit.LowerCaseEqualsLiteral("in"))
     cssUnit = eCSSUnit_Inch;
-  else if (unit.EqualsLiteral("cm"))
+  else if (unit.LowerCaseEqualsLiteral("cm"))
     cssUnit = eCSSUnit_Centimeter;
-  else if (unit.EqualsLiteral("mm"))
+  else if (unit.LowerCaseEqualsLiteral("mm"))
     cssUnit = eCSSUnit_Millimeter;
-  else if (unit.EqualsLiteral("pt"))
+  else if (unit.LowerCaseEqualsLiteral("pt"))
     cssUnit = eCSSUnit_Point;
-  else if (unit.EqualsLiteral("pc"))
+  else if (unit.LowerCaseEqualsLiteral("pc"))
     cssUnit = eCSSUnit_Pica;
-  else if (unit.EqualsLiteral("q"))
+  else if (unit.LowerCaseEqualsLiteral("q"))
     cssUnit = eCSSUnit_Quarter;
   else {  // unexpected unit
     if (!(aFlags & PARSE_SUPPRESS_WARNINGS)) {
       ReportLengthParseError(aString, aDocument);
     }
     return false;
   }
 
@@ -668,17 +670,17 @@ void nsMathMLElement::MapMathMLAttribute
         NS_MATHML_MATHVARIANT_SANS_SERIF_ITALIC,
         NS_MATHML_MATHVARIANT_SANS_SERIF_BOLD_ITALIC,
         NS_MATHML_MATHVARIANT_MONOSPACE,
         NS_MATHML_MATHVARIANT_INITIAL,
         NS_MATHML_MATHVARIANT_TAILED,
         NS_MATHML_MATHVARIANT_LOOPED,
         NS_MATHML_MATHVARIANT_STRETCHED};
     for (uint32_t i = 0; i < ArrayLength(sizes); ++i) {
-      if (str.EqualsASCII(sizes[i])) {
+      if (str.LowerCaseEqualsASCII(sizes[i])) {
         aDecls.SetKeywordValue(eCSSProperty__moz_math_variant, values[i]);
         break;
       }
     }
   }
 
   // mathbackground
   //
@@ -794,17 +796,17 @@ void nsMathMLElement::MapMathMLAttribute
   value = aAttributes->GetAttr(nsGkAtoms::dir);
   if (value && value->Type() == nsAttrValue::eString &&
       !aDecls.PropertyIsSet(eCSSProperty_direction)) {
     nsAutoString str(value->GetStringValue());
     static const char dirs[][4] = {"ltr", "rtl"};
     static const int32_t dirValues[MOZ_ARRAY_LENGTH(dirs)] = {
         NS_STYLE_DIRECTION_LTR, NS_STYLE_DIRECTION_RTL};
     for (uint32_t i = 0; i < ArrayLength(dirs); ++i) {
-      if (str.EqualsASCII(dirs[i])) {
+      if (str.LowerCaseEqualsASCII(dirs[i])) {
         aDecls.SetKeywordValue(eCSSProperty_direction, dirValues[i]);
         break;
       }
     }
   }
 }
 
 void nsMathMLElement::GetEventTargetParent(EventChainPreVisitor& aVisitor) {
--- a/layout/mathml/mathml.css
+++ b/layout/mathml/mathml.css
@@ -23,29 +23,29 @@ math {
   font-family: serif;
   line-height: normal;
   word-spacing: normal;
   letter-spacing: normal;
   text-rendering: optimizeLegibility;
   -moz-float-edge: margin-box;
   -moz-math-display: inline;
 }
-math[display="block"] {
+math[display="block" i] {
   display: block;
   text-align: -moz-center;
   -moz-math-display: block;
 }
-math[display="inline"] {
+math[display="inline" i] {
   display: inline;
   -moz-math-display: inline;
 }
-math[displaystyle="false"] {
+math[displaystyle="false" i] {
   -moz-math-display: inline;
 }
-math[displaystyle="true"] {
+math[displaystyle="true" i] {
   -moz-math-display: block;
 }
 
 /**************************************************************************/
 /* Token elements                                                         */
 /**************************************************************************/
 
 ms {
@@ -228,20 +228,20 @@ mtable[framespacing] > mtr > mtd {
 
   The determination of -moz-math-display for <math> involves the displaystyle
   and display attributes. See the <math> section above.
 */
 
 /*
   Map mstyle@displaystyle to -moz-math-display.
 */
-mstyle[displaystyle="false"] {
+mstyle[displaystyle="false" i] {
   -moz-math-display: inline;
 }
-mstyle[displaystyle="true"] {
+mstyle[displaystyle="true" i] {
   -moz-math-display: block;
 }
 
 /*  munder, mover and munderover change the scriptlevels of their children
    using -moz-math-increment-script-level because regular CSS rules are
    insufficient to control when the scriptlevel should be incremented. All other
    cases can be described using regular CSS, so we do it this way because it's
    more efficient and less code. */
@@ -311,17 +311,17 @@ munderover > :not(:first-child) {
 }
 
 /*
    The displaystyle attribute is allowed on the mtable element to set the
    inherited value of the attribute. If the attribute is not present, the
    mtable element sets displaystyle to "false" within the table elements.
 */
 mtable { -moz-math-display: inline; }
-mtable[displaystyle="true"] { -moz-math-display: block; }
+mtable[displaystyle="true" i] { -moz-math-display: block; }
 
 /*
    The mscarries element sets displaystyle to "false", and increments
    scriptlevel by 1, so the children are typically displayed in a smaller font.
    XXXfredw: This element is not implemented yet. See bug 534967.
 mscarries {
   -moz-script-level: +1;
   -moz-math-display: inline;
--- a/layout/reftests/bugs/355548-3-ref.xml
+++ b/layout/reftests/bugs/355548-3-ref.xml
@@ -44,24 +44,24 @@
   <m:mstyle><m:mi style="font-size:48px; color:green;">Id</m:mi></m:mstyle>
 </m:math></p>
 
 <p><m:math>
   <m:mstyle><m:mi style="font-size:48px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:48px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:48px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:48px;">Id</m:mi></m:mstyle>
-  <m:mstyle><m:mi style="font-size:48px;">Id</m:mi></m:mstyle>
 </m:math></p>
 
 <p><m:math>
   <m:mstyle><m:mi style="font-size:24px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:24px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:24px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:24px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:24px;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:0;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:0;">Id</m:mi></m:mstyle>
   <m:mstyle><m:mi style="font-size:0;">Id</m:mi></m:mstyle>
+  <m:mstyle><m:mi style="font-size:20px;">Id</m:mi></m:mstyle>
 </m:math></p>
 
 </body>
 </html>
--- a/layout/reftests/bugs/355548-3.xml
+++ b/layout/reftests/bugs/355548-3.xml
@@ -51,28 +51,28 @@
   <m:mstyle mathcolor="green" color="red"><m:mi>Id</m:mi></m:mstyle>
   <!-- CSS takes priority over mathsize and fontsize -->
   <m:mstyle mathcolor="red" color="yellow" style="color:green;"><m:mi>Id</m:mi></m:mstyle>
 </m:mstyle></m:math></p>
 
 <p><m:math><m:mstyle scriptlevel="0" scriptsizemultiplier="0.5" scriptminsize="18px" style="font-size:48px;">
   <!-- test invalid values for MathML length attributes -->
   <m:mstyle mathsize="20 px"><m:mi>Id</m:mi></m:mstyle>
-  <m:mstyle mathsize="20PX"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize=".px"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="..px"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="+20px"><m:mi>Id</m:mi></m:mstyle>
 </m:mstyle></m:math></p>
 
 <p><m:math><m:mstyle scriptlevel="0" scriptsizemultiplier="0.5" scriptminsize="18px" style="font-size:48px;">
   <!-- test valid values for MathML length attributes -->
   <m:mstyle mathsize=" 24px "><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="24.0px"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="24.px"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="0.5"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="50%"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize=".0px"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="-0px"><m:mi>Id</m:mi></m:mstyle>
   <m:mstyle mathsize="0"><m:mi>Id</m:mi></m:mstyle>
+  <m:mstyle mathsize="20PX"><m:mi>Id</m:mi></m:mstyle>
 </m:mstyle></m:math></p>
 
 </body>
 </html>
--- a/testing/web-platform/meta/mathml/relations/css-styling/attribute-mapping-001.html.ini
+++ b/testing/web-platform/meta/mathml/relations/css-styling/attribute-mapping-001.html.ini
@@ -1,196 +1,12 @@
 [attribute-mapping-001.html]
-  [mathsize on the msub element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the msup element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the mstyle element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the math element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the munder element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the munderover element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the maction element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mi element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the mover element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the mtable element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mn element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the msqrt element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mtr element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the msqrt element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mrow element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mfrac element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the munder element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mtr element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the annotation-xml element is mapped to CSS font-size]
-    expected: FAIL
-
   [mathsize on the none element is mapped to CSS font-size]
     expected: FAIL
 
-  [dir on the merror element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mfrac element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the menclose element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mroot element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the munderover element is mapped to CSS font-size]
-    expected: FAIL
-
   [mathcolor on the merror element is mapped to CSS color]
     expected: FAIL
 
-  [mathsize on the msubsup element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the mtd element is mapped to CSS direction]
-    expected: FAIL
-
   [mathsize on the mprescripts element is mapped to CSS font-size]
     expected: FAIL
 
-  [dir on the maction element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the annotation-xml element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the ms element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the mstyle element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mtext element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mspace element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mphantom element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the annotation element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the none element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mrow element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the menclose element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the mspace element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the mroot element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mo element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mprescripts element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the math element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mover element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mtd element is mapped to CSS font-size]
-    expected: FAIL
-
   [mathsize on the merror element is mapped to CSS font-size]
     expected: FAIL
-
-  [dir on the msub element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the mmultiscripts element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the mmultiscripts element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mi element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mn element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the msup element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mphantom element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mo element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the msubsup element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the mtext element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the ms element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the mpadded element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the annotation element is mapped to CSS font-size]
-    expected: FAIL
-
-  [mathsize on the mpadded element is mapped to CSS font-size]
-    expected: FAIL
-
-  [dir on the mtable element is mapped to CSS direction]
-    expected: FAIL
-
-  [dir on the semantics element is mapped to CSS direction]
-    expected: FAIL
-
-  [mathsize on the semantics element is mapped to CSS font-size]
-    expected: FAIL
-
deleted file mode 100644
--- a/testing/web-platform/meta/mathml/relations/css-styling/displaystyle-1.html.ini
+++ /dev/null
@@ -1,73 +0,0 @@
-[displaystyle-1.html]
-  [mover element (alternate_case)]
-    expected: FAIL
-
-  [mover element (uppercase)]
-    expected: FAIL
-
-  [munder element (uppercase)]
-    expected: FAIL
-
-  [msub element (uppercase)]
-    expected: FAIL
-
-  [math element (explicit display, alternate_case)]
-    expected: FAIL
-
-  [munderover element (alternate_case)]
-    expected: FAIL
-
-  [mroot element (uppercase)]
-    expected: FAIL
-
-  [mstyle element (uppercase)]
-    expected: FAIL
-
-  [mroot element (alternate_case)]
-    expected: FAIL
-
-  [mtable element (alternate_case)]
-    expected: FAIL
-
-  [munder element (alternate_case)]
-    expected: FAIL
-
-  [msubsup element (alternate_case)]
-    expected: FAIL
-
-  [math element (explicit display, uppercase)]
-    expected: FAIL
-
-  [mstyle element (alternate_case)]
-    expected: FAIL
-
-  [math element (uppercase)]
-    expected: FAIL
-
-  [mfrac element (uppercase)]
-    expected: FAIL
-
-  [mtable element (uppercase)]
-    expected: FAIL
-
-  [msub element (alternate_case)]
-    expected: FAIL
-
-  [mfrac element (alternate_case)]
-    expected: FAIL
-
-  [munderover element (uppercase)]
-    expected: FAIL
-
-  [msubsup element (uppercase)]
-    expected: FAIL
-
-  [math element (alternate_case)]
-    expected: FAIL
-
-  [msup element (uppercase)]
-    expected: FAIL
-
-  [msup element (alternate_case)]
-    expected: FAIL
-
--- a/testing/web-platform/meta/mathml/relations/css-styling/displaystyle-2.html.ini
+++ b/testing/web-platform/meta/mathml/relations/css-styling/displaystyle-2.html.ini
@@ -48,46 +48,34 @@
     expected: FAIL
 
   [munderover element (lowercase)]
     expected: FAIL
 
   [mroot element (alternate_case)]
     expected: FAIL
 
-  [mtable element (alternate_case)]
-    expected: FAIL
-
   [munder element (alternate_case)]
     expected: FAIL
 
   [msub element (alternate_case)]
     expected: FAIL
 
   [msubsup element (alternate_case)]
     expected: FAIL
 
-  [mfrac element (uppercase)]
-    expected: FAIL
-
-  [mtable element (uppercase)]
-    expected: FAIL
-
   [msubsup element (lowercase)]
     expected: FAIL
 
   [munder element (lowercase)]
     expected: FAIL
 
   [mover element (lowercase)]
     expected: FAIL
 
-  [mfrac element (alternate_case)]
-    expected: FAIL
-
   [munderover element (uppercase)]
     expected: FAIL
 
   [msubsup element (uppercase)]
     expected: FAIL
 
   [msup element (uppercase)]
     expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/mathml/relations/html5-tree/display-1.html.ini
+++ /dev/null
@@ -1,7 +0,0 @@
-[display-1.html]
-  [Test display math alternate_case]
-    expected: FAIL
-
-  [Test display math uppercase]
-    expected: FAIL
-
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant case sensitivity</title>
+<style>
+  @font-face {
+      font-family: mathvariant-bold-fraktur;
+      src: url("/fonts/math/mathvariant-bold-fraktur.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold;
+      src: url("/fonts/math/mathvariant-bold.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold-italic;
+      src: url("/fonts/math/mathvariant-bold-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold-sans-serif;
+      src: url("/fonts/math/mathvariant-bold-sans-serif.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold-script;
+      src: url("/fonts/math/mathvariant-bold-script.woff");
+  }
+  @font-face {
+      font-family: mathvariant-double-struck;
+      src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  @font-face {
+      font-family: mathvariant-fraktur;
+      src: url("/fonts/math/mathvariant-fraktur.woff");
+  }
+  @font-face {
+      font-family: mathvariant-initial;
+      src: url("/fonts/math/mathvariant-initial.woff");
+  }
+  @font-face {
+      font-family: mathvariant-italic;
+      src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-looped;
+      src: url("/fonts/math/mathvariant-looped.woff");
+  }
+  @font-face {
+      font-family: mathvariant-monospace;
+      src: url("/fonts/math/mathvariant-monospace.woff");
+  }
+  @font-face {
+      font-family: mathvariant-sans-serif-bold-italic;
+      src: url("/fonts/math/mathvariant-sans-serif-bold-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-sans-serif;
+      src: url("/fonts/math/mathvariant-sans-serif.woff");
+  }
+  @font-face {
+      font-family: mathvariant-sans-serif-italic;
+      src: url("/fonts/math/mathvariant-sans-serif-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-script;
+      src: url("/fonts/math/mathvariant-script.woff");
+  }
+  @font-face {
+      font-family: mathvariant-stretched;
+      src: url("/fonts/math/mathvariant-stretched.woff");
+  }
+  @font-face {
+      font-family: mathvariant-tailed;
+      src: url("/fonts/math/mathvariant-tailed.woff");
+  }
+</style>
+<body>
+  <p>
+    <math style="font-family: mathvariant-bold-fraktur">
+      <mtext>&#x1D56C;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold">
+      <mtext>&#x1D400;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold-italic">
+      <mtext>&#x1D468;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold-sans-serif">
+      <mtext>&#x1D5D4;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold-script">
+      <mtext>&#x1D4D0;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-double-struck">
+      <mtext>&#x1D538;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-fraktur">
+      <mtext>&#x1D504;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-initial">
+      <mtext>&#x1EE30;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-italic">
+      <mtext>&#x1D434;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-looped">
+      <mtext>&#x1EE90;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-monospace">
+      <mtext>&#x1D670;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-sans-serif-bold-italic">
+      <mtext>&#x1D63C;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-sans-serif">
+      <mtext>&#x1D5A0;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-sans-serif-italic">
+      <mtext>&#x1D608;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-script">
+      <mtext>&#x1D49C;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-stretched">
+      <mtext>&#x1EE70;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-tailed">
+      <mtext>&#x1EE52;</mtext>
+    </math>
+  </p>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant case sensitivity</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
+<link rel="match" href="mathvariant-case-sensitivity-ref.html"/>
+<meta name="assert" content="Verify that mathvariant value is case insensitive">
+<style>
+  @font-face {
+      font-family: mathvariant-bold-fraktur;
+      src: url("/fonts/math/mathvariant-bold-fraktur.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold;
+      src: url("/fonts/math/mathvariant-bold.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold-italic;
+      src: url("/fonts/math/mathvariant-bold-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold-sans-serif;
+      src: url("/fonts/math/mathvariant-bold-sans-serif.woff");
+  }
+  @font-face {
+      font-family: mathvariant-bold-script;
+      src: url("/fonts/math/mathvariant-bold-script.woff");
+  }
+  @font-face {
+      font-family: mathvariant-double-struck;
+      src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  @font-face {
+      font-family: mathvariant-fraktur;
+      src: url("/fonts/math/mathvariant-fraktur.woff");
+  }
+  @font-face {
+      font-family: mathvariant-initial;
+      src: url("/fonts/math/mathvariant-initial.woff");
+  }
+  @font-face {
+      font-family: mathvariant-italic;
+      src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-looped;
+      src: url("/fonts/math/mathvariant-looped.woff");
+  }
+  @font-face {
+      font-family: mathvariant-monospace;
+      src: url("/fonts/math/mathvariant-monospace.woff");
+  }
+  @font-face {
+      font-family: mathvariant-sans-serif-bold-italic;
+      src: url("/fonts/math/mathvariant-sans-serif-bold-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-sans-serif;
+      src: url("/fonts/math/mathvariant-sans-serif.woff");
+  }
+  @font-face {
+      font-family: mathvariant-sans-serif-italic;
+      src: url("/fonts/math/mathvariant-sans-serif-italic.woff");
+  }
+  @font-face {
+      font-family: mathvariant-script;
+      src: url("/fonts/math/mathvariant-script.woff");
+  }
+  @font-face {
+      font-family: mathvariant-stretched;
+      src: url("/fonts/math/mathvariant-stretched.woff");
+  }
+  @font-face {
+      font-family: mathvariant-tailed;
+      src: url("/fonts/math/mathvariant-tailed.woff");
+  }
+</style>
+<body>
+  <p>
+    <math style="font-family: mathvariant-bold-fraktur">
+      <mtext mathvariant="BoLd-fRaKtUr">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold">
+      <mtext mathvariant="BoLd">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold-italic">
+      <mtext mathvariant="BoLd-iTaLiC">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold-sans-serif">
+      <mtext mathvariant="BoLd-sAnS-SeRiF">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-bold-script">
+      <mtext mathvariant="BoLd-sCrIpT">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-double-struck">
+      <mtext mathvariant="DoUbLe-sTrUcK">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-fraktur">
+      <mtext mathvariant="FrAkTuR">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-initial">
+      <mtext mathvariant="InItIaL">&#x641;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-italic">
+      <mtext mathvariant="ItAlIc">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-looped">
+      <mtext mathvariant="LoOpEd">&#x641;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-monospace">
+      <mtext mathvariant="MoNoSpAcE">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-sans-serif-bold-italic">
+      <mtext mathvariant="SaNs-sErIf-bOlD-ItAlIc">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-sans-serif">
+      <mtext mathvariant="SaNs-sErIf">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-sans-serif-italic">
+      <mtext mathvariant="SaNs-sErIf-iTaLiC">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-script">
+      <mtext mathvariant="ScRiPt">&#x41;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-stretched">
+      <mtext mathvariant="StReTcHeD">&#x641;</mtext>
+    </math>
+  </p>
+  <p>
+    <math style="font-family: mathvariant-tailed">
+      <mtext mathvariant="TaIlEd">&#x642;</mtext>
+    </math>
+  </p>
+</body>
+</html>