Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/mathml/relations
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
215 files changed, 12723 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html
new file mode 100644
index 0000000000..e423b16fd7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Attribute mapping</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<meta name="assert" content="Verify that dir, mathcolor, mathbackground and mathsize are mapped to CSS but that deprecated MathML3 attributes are not.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  #container {
+      color: blue;
+      font-size: 50px;
+  }
+</style>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function runTests() {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+          var tag = element.tagName;
+          var style = window.getComputedStyle(element);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute");
+              element.setAttribute("dir", "rtl");
+              assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified");
+              element.setAttribute("dir", "RtL");
+              assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive");
+              element.setAttribute("dir", "auto");
+              assert_equals(style.getPropertyValue("direction"), "ltr", "auto");
+              element.setAttribute("dir", "foo");
+              assert_equals(style.getPropertyValue("direction"), "ltr", "random value");
+          }, `dir on the ${tag} element is mapped to CSS direction`)
+
+          test(function() {
+              assert_equals(style.getPropertyValue("color"),
+                            "rgb(0, 0, 255)",
+                            "no attribute");
+              element.setAttribute("mathcolor", "black");
+              assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified");
+              // The color names are case-insensitive.
+              // See https://www.w3.org/TR/css-color-3/#html4
+              element.setAttribute("mathcolor", "GrEeN");
+              assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive");
+          }, `mathcolor on the ${tag} element is mapped to CSS color`);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("background-color"),
+                            tag === "merror" ?
+                            "rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)",
+                            "no attribute");
+              element.setAttribute("mathbackground", "lightblue");
+              assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified");
+              // The color names are case-insensitive.
+              // See https://www.w3.org/TR/css-color-3/#html4
+              element.setAttribute("mathbackground", "YeLlOw");
+              assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive");
+          }, `mathbackground on the ${tag} element is mapped to CSS background-color`);
+
+          test(function() {
+              // "none" and "mprescripts" can only be used as non-first children of mmultiscripts so font-size
+              // is incremented and the resulting fraction string is hard to test accurately, skip for now.
+              if (tag === "none" || tag === "mprescripts")
+                  return;
+              assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute");
+              element.setAttribute("mathsize", "20px");
+              assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified");
+              // unit identifiers are ASCII case-insensitive.
+              // https://www.w3.org/TR/css-values-3/#typedef-dimension
+              element.setAttribute("mathsize", "30Px");
+              assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive");
+          }, `mathsize on the ${tag} element is mapped to CSS font-size`);
+
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mathsize(), "Superseding attributes are supported");
+              var properties = ["background-color", "color", "fontfamily", "font-size", "font-style", "font-weight"];
+              var oldStyle = {};
+              properties.forEach(property => {
+                  oldStyle[property] = style.getPropertyValue(property);
+              });
+              element.setAttribute("background", "red");
+              element.setAttribute("color", "blue");
+              element.setAttribute("fontfamily", "monospace");
+              element.setAttribute("fontsize", "50px");
+              element.setAttribute("fontstyle", "italic");
+              element.setAttribute("fontweight", "bold");
+              properties.forEach(property => {
+                  assert_equals(style.getPropertyValue(property), oldStyle[property], `${property}`);
+              });
+          }, `deprecated MathML3 attributes on the ${tag} element are not mapped to CSS`);
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html
new file mode 100644
index 0000000000..e38f8560bf
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Attribute mapping</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<meta name="assert" content="Verify that mathvariant, scriptlevel, displaystyle are mapped to CSS">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  #container {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function fontSize(style) {
+      return parseFloat((/(.+)px/).exec(style.getPropertyValue("font-size"))[1]);
+  }
+  function runTests() {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+          var tag = element.tagName;
+          var style = window.getComputedStyle(element);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("text-transform"),
+                            tag === "mi" ? "math-auto" : "none",
+                            "no attribute");
+              element.setAttribute("mathvariant", "fraktur");
+              assert_equals(style.getPropertyValue("text-transform"), "math-fraktur", "attribute specified");
+              element.setAttribute("mathvariant", "DoUbLe-StRuCk");
+              assert_equals(style.getPropertyValue("text-transform"), "math-double-struck", "case insensitive");
+          }, `mathvariant on the ${tag} element is mapped to CSS text-transform`)
+
+          test(function() {
+              // none and mprescripts appear as scripts
+              assert_equals(style.getPropertyValue("math-depth"), tag === "none" || tag === "mprescripts" ? "1" : "0", "no attribute");
+
+              var absoluteScriptlevel = 2;
+              element.setAttribute("scriptlevel", absoluteScriptlevel);
+              assert_equals(style.getPropertyValue("math-depth"), "" + absoluteScriptlevel, "attribute specified <U>");
+
+              var positiveScriptlevelDelta = 1;
+              element.setAttribute("scriptlevel", `+${positiveScriptlevelDelta}`);
+              assert_equals(style.getPropertyValue("math-depth"), "" + positiveScriptlevelDelta, "attribute specified +<U>");
+
+              var negativeScriptlevelDelta = -3;
+              element.setAttribute("scriptlevel", `${negativeScriptlevelDelta}`);
+              assert_equals(style.getPropertyValue("math-depth"), "" + negativeScriptlevelDelta, "attribute specified -<U>");
+
+              element.setAttribute("scriptlevel", absoluteScriptlevel);
+              element.setAttribute("mathsize", "42px");
+              assert_approx_equals(fontSize(style), 42, 1, "mathsize wins over scriptlevel");
+
+          }, `scriptlevel on the ${tag} element is mapped to math-depth(...)`);
+
+          test(function() {
+              // none and mprescripts appear as scripts
+              let expected = 0;
+              element.setAttribute("scriptlevel", "" + expected);
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "no attribute");
+
+              element.setAttribute("scriptlevel", " +1");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", " + 1");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "2.0");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "-3\"");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "200px");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "add(2)");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+          }, `invalid scriptlevel values on the ${tag} element are not mapped to math-depth(...)`);
+
+          test(function() {
+              assert_equals(style.getPropertyValue("math-style"), "compact", "no attribute");
+              element.setAttribute("displaystyle", "true");
+              assert_equals(style.getPropertyValue("math-style"), "normal", "attribute specified");
+              element.setAttribute("displaystyle", "TrUe");
+              assert_equals(style.getPropertyValue("math-style"), "normal", "case insensitive");
+          }, `displaystyle on the ${tag} element is mapped to CSS math-style`);
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html
new file mode 100644
index 0000000000..21fc165b7d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Blur filter (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be blurred.</p>
+  <div style="background: green; filter: blur(5px); width: 200px; height: 200px;"></div>
+  <div style="background: green; filter: blur(5px); width: 200px; height: 200px; position: absolute; top: 300px"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html
new file mode 100644
index 0000000000..92a894bf34
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Blur filter</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="blur-filter-ref.html"/>
+<meta name="assert" content="Verify that 'filter: blur' works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be blurred.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="background: green; filter: blur(5px)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px">
+    <math style="filter: blur(5px)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html
new file mode 100644
index 0000000000..57935564bf
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be clipped to a polygon.</p>
+  <div style="background: green; width: 200px; height: 200px; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"></div>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html
new file mode 100644
index 0000000000..abe58e2261
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="clip-path-ref.html"/>
+<meta name="assert" content="Verify that the clip property works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be clipped to a polygon.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="background: green; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px; width: 200px; height: 200px">
+    <math style="position: absolute; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html
new file mode 100644
index 0000000000..7882ac8c31
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be clipped.</p>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 100px; clip: rect(0px 100px 100px 0px)"></div>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; clip: rect(0px 100px 100px 0px)"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip.html b/testing/web-platform/tests/mathml/relations/css-styling/clip.html
new file mode 100644
index 0000000000..48b7753fd8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/clip.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Clip property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="clip-ref.html"/>
+<meta name="assert" content="Verify that the clip property works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be clipped.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="position:absolute; top:100px; background: green; clip: rect(0px 100px 100px 0px)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px; width: 200px; height: 200px">
+    <math style="position: absolute; clip: rect(0px 100px 100px 0px)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-001.html b/testing/web-platform/tests/mathml/relations/css-styling/color-001.html
new file mode 100644
index 0000000000..76d65f579c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="color-001-ref.html"/>
+<meta name="assert" content="Verify that the color is used for the text of token elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><mi style="color: green">1</mi></math>
+    <math><mn style="color: green">2</mn></math>
+    <math><mo style="color: green">3</mo></math>
+    <math><mtext style="color: green">4</mtext></math>
+    <math><ms style="color: green">5</ms></math>
+    <div id="dynamic">
+      <math><mi>1</mi></math>
+      <math><mn>2</mn></math>
+      <math><mo>3</mo></math>
+      <math><mtext>4</mtext></math>
+      <math><ms>5</ms></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-002.html b/testing/web-platform/tests/mathml/relations/css-styling/color-002.html
new file mode 100644
index 0000000000..bce24f54c8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="match" href="color-002-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and fraction bar of the mfrac element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><mfrac style="color: green"><mn>1</mn><mn>2</mn></mfrac></math>
+    <div id="dynamic">
+      <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-003.html b/testing/web-platform/tests/mathml/relations/css-styling/color-003.html
new file mode 100644
index 0000000000..dd04b61054
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#radical-symbol">
+<link rel="match" href="color-003-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and radical symbol of the msqrt and mroot elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><msqrt style="color: green"><mn>1</mn></msqrt></math>
+    <math><mroot style="color: green"><mn>2</mn><mn>2</mn></mroot></math>
+    <div id="dynamic">
+      <math><msqrt><mn>1</mn></msqrt></math>
+      <math><mroot><mn>2</mn><mn>2</mn></mroot></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html
new file mode 100644
index 0000000000..4bd15e62a0
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://github.com/mathml-refresh/mathml-core/pull/24">
+<link rel="match" href="color-004.tentative-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and graphical elements of the menclose element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math><menclose notation="left" style="color: green"><mn>1</mn></menclose></math>
+    <math><menclose notation="right" style="color: green"><mn>2</mn></menclose></math>
+    <math><menclose notation="top" style="color: green"><mn>3</mn></menclose></math>
+    <math><menclose notation="bottom" style="color: green"><mn>4</mn></menclose></math>
+    <math><menclose notation="box" style="color: green"><mn>5</mn></menclose></math>
+    <math><menclose notation="roundedbox" style="color: green"><mn>6</mn></menclose></math>
+    <math><menclose notation="actuarial" style="color: green"><mn>7</mn></menclose></math>
+    <math><menclose notation="madruwb" style="color: green"><mn>8</mn></menclose></math>
+    <math><menclose notation="horizontalstrike" style="color: green"><mn>9</mn></menclose></math>
+    <math><menclose notation="verticalstrike" style="color: green"><mn>10</mn></menclose></math>
+    <math><menclose notation="updiagonalstrike" style="color: green"><mn>11</mn></menclose></math>
+    <math><menclose notation="downdiagonalstrike" style="color: green"><mn>12</mn></menclose></math>
+    <math><menclose notation="longdiv" style="color: green"><mn>13</mn></menclose></math>
+    <math><menclose notation="circle" style="color: green"><mn>14</mn></menclose></math>
+    <div id="dynamic">
+      <math><menclose notation="left"><mn>1</mn></menclose></math>
+      <math><menclose notation="right"><mn>2</mn></menclose></math>
+      <math><menclose notation="top"><mn>3</mn></menclose></math>
+      <math><menclose notation="bottom"><mn>4</mn></menclose></math>
+      <math><menclose notation="box"><mn>5</mn></menclose></math>
+      <math><menclose notation="roundedbox"><mn>6</mn></menclose></math>
+      <math><menclose notation="actuarial"><mn>7</mn></menclose></math>
+      <math><menclose notation="madruwb"><mn>8</mn></menclose></math>
+      <math><menclose notation="horizontalstrike"><mn>9</mn></menclose></math>
+      <math><menclose notation="verticalstrike"><mn>10</mn></menclose></math>
+      <math><menclose notation="updiagonalstrike"><mn>11</mn></menclose></math>
+      <math><menclose notation="downdiagonalstrike"><mn>12</mn></menclose></math>
+      <math><menclose notation="longdiv"><mn>13</mn></menclose></math>
+      <math><menclose notation="circle"><mn>14</mn></menclose></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html
new file mode 100644
index 0000000000..0efca480ee
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px; padding: 1px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-005.html b/testing/web-platform/tests/mathml/relations/css-styling/color-005.html
new file mode 100644
index 0000000000..f2660c9e62
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/color-005.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+<link rel="match" href="color-005-ref.html"/>
+<meta name="assert" content="Verify that the color is used for normal, stretchy and large operators.">
+<style>
+  math {
+      font: 20px/1 Ahem;
+  }
+  @font-face {
+      font-family: operators;
+      src: url("/fonts/math/operators.woff");
+  }
+  mo {
+      font-family: operators;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div id="square" style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+    <math>
+      <!-- unstretched operators -->
+      <mo style="color: green">⥯</mo>
+      <mo style="color: green">+</mo>
+      <mo style="color: green">-</mo>
+    </math>
+    <math displaystyle="true">
+      <!-- large operator -->
+      <mo largeop="true" style="color: green">⥯</mo>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, small size -->
+        <mspace height="2em"/>
+        <mo style="color: green">⥯</mo>
+      </mrow>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, large size -->
+        <mspace height="4em"/>
+        <mo style="color: green">⥯</mo>
+      </mrow>
+    </math>
+    <div id="dynamic">
+      <math>
+        <!-- unstretched operators -->
+        <mo stretchy="false">⥯</mo>
+        <mo>+</mo>
+        <mo>-</mo>
+      </math>
+      <math displaystyle="true">
+        <!-- large operator -->
+        <mo largeop="true">⥯</mo>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, small size -->
+          <mspace height="2em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, large size -->
+          <mspace height="4em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+    </div>
+  </div>
+  <script src="/mathml/support/fonts.js"></script>
+  <script>
+    window.addEventListener("load", () => loadAllFonts().then(() => {
+        document.getElementById("dynamic").style.color = "green";
+        document.documentElement.classList.remove("reftest-wait");
+    }));
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_operator_spacing");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html b/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html
new file mode 100644
index 0000000000..c471b0fc9d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Default font-family on the &lt;math&gt; root</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Verify that the default font-family is 'math'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="log"></div>
+  <div style="font-family: BB2F7F3E9FEE11EA96DF67A737751C2F;">
+    <div id="inherited-reference"></div>
+    <math id="math-not-inherited"></math>
+  </div>
+  <math id="math-default"></math>
+
+  <script>
+    function getFontFamily(id) {
+        return window.getComputedStyle(document.getElementById(id)).fontFamily;
+    }
+
+    test(function () {
+        assert_equals(getFontFamily("inherited-reference"), "BB2F7F3E9FEE11EA96DF67A737751C2F");
+        assert_not_equals(getFontFamily("math-not-inherited"), getFontFamily("inherited-reference"));
+    }, "Default font-family on <math> is not inherited");
+
+    test(function () {
+        assert_equals(getFontFamily("math-not-inherited"), "math");
+        assert_equals(getFontFamily("math-default"), "math");
+    }, "Default font-family on <math> is 'math'");
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html
new file mode 100644
index 0000000000..23f8b62dfa
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Default properties on &lt;semantics&gt; and &lt;maction&gt;</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation">
+<link rel="help" href="https://w3c.github.io/mathml-core/#enlivening-expressions">
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test that only the first children of semantics/maction are displayed.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="log"></div>
+  <div>
+    <math>
+      <semantics>
+        <mn>1</mn>
+        <mn>2</mn>
+        <mn>3</mn>
+        <mn>4</mn>
+        <mn>5</mn>
+      </semantics>
+      <maction>
+        <mn>1</mn>
+        <mn>2</mn>
+        <mn>3</mn>
+        <mn>4</mn>
+        <mn>5</mn>
+      </maction>
+    </math>
+  </div>
+
+  <script>
+    ["semantics", "maction"].forEach(name => {
+      let element = document.getElementsByTagName(name)[0];
+      test(() => {
+        let child = element.firstElementChild;
+        assert_not_equals(window.getComputedStyle(child).display, "none", `Child ${child.innerText} does not have display: none`);
+        for (child = child.nextElementSibling; child; child = child.nextElementSibling) {
+          assert_equals(window.getComputedStyle(child).display, "none", `Child ${child.innerText} has display: none`);
+        }
+      }, `Display value of children of the <${name}> element`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html
new file mode 100644
index 0000000000..c329935f2e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Default properties on the &lt;math&gt; root</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test properties on the math root set by the UA stylesheet.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  math {
+      font-size: 100px;
+  }
+  .styled {
+      direction: rtl;
+      writing-mode: vertical-lr;
+      text-indent: .5em;
+      letter-spacing: .5em;
+      line-height: .5em;
+      word-spacing: .5em;
+      font-style: italic;
+      font-weight: bold;
+  }
+</style>
+
+</head>
+<body>
+  <div id="log"></div>
+  <div class="styled">
+    <math id="ua"></math>
+    <math id="author" class="styled"></math>
+  </div>
+
+  <script>
+    function getProperty(id, property) {
+        return window.getComputedStyle(document.getElementById(id))[property];
+    }
+    [
+        // Property name, value when specified from the UA, from the author.
+        ["direction", "ltr", "rtl"],
+        ["writing-mode", "horizontal-tb", "horizontal-tb"], // MathML Core level 1 only supports horizontal mode.
+        ["text-indent", "0px", "50px"],
+        ["letter-spacing", "normal", "50px"],
+        ["line-height", "normal", "50px"],
+        ["word-spacing", "0px", "50px"],
+        ["font-style", "normal", "italic"],
+        ["font-weight", "400", "700"]
+    ].forEach(([name, ua_value, author_value]) => {
+        test(function () {
+            assert_equals(getProperty("ua", name), ua_value, "when specified from the UA sheet");
+            assert_equals(getProperty("author", name), author_value, "when specified by the author");
+        }, `Value of ${name} on the <math> root`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html
new file mode 100644
index 0000000000..ce65aba18c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>display (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-1.html b/testing/web-platform/tests/mathml/relations/css-styling/display-1.html
new file mode 100644
index 0000000000..5a9e4db687
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>display</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="display-1-ref.html"/>
+<meta name="assert" content="Verify that the 'display: none' property works on MathML elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math style="display: none;"><mspace width="200px" height="200px" style="background: red"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-2.html b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html
new file mode 100644
index 0000000000..36a02952eb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Verify that one can override the layout of MathML elements with the CSS display property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that one can override the display of a MathML element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      font-family: inherit;
+  }
+  mfrac {
+      padding: 0;
+  }
+</style>
+<script>
+  const Xsize = 25;
+  const templates = {
+      "block display": `<math style="display: block;">XXX</math>`,
+      "block display with contrained width": `<math style="display: block; width: ${2*Xsize}px;">XXX</math>`,
+      "list display inside display block": `<math style="display: block">\
+  <mmultiscripts style="display: list-item;">X</mmultiscripts>\
+  <maction style="display: list-item;">X</maction>\
+  <mpadded style="display: list-item;">X</mpadded>\
+</math>`,
+      "inline display": `<math style="display: inline;">XXX</math>`,
+      "inline-block display": `<math style="display: inline-block">XXX</math>`,
+      "table display (math)": `<math style="display: table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</math>`,
+      "table display (mrow)": `<math display="block">\
+<mrow style="display: table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</mrow></math>`,
+      "inline-table display (math)": `<math style="display: inline-table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</math>`,
+      "inline-table display (mrow)": `<math display="block">\
+<mrow style="display: inline-table">\
+  <mfrac style='display: table-row'>\
+    <msub style='display: table-cell'>X</msub>\
+    <msup style='display: table-cell'>X</msup>\
+    <msubsup style='display: table-cell'>X</msubsup>\
+  </mfrac>\
+  <mtable style='display: table-row'>\
+    <munder style='display: table-cell'>X</munder>\
+    <mover style='display: table-cell'>X</mover>\
+    <munderover style='display: table-cell'>X</munderover>\
+  </mtable>\
+</mrow></math>`,
+      "flexbox display (math)": `<math style="display: flex; flex-direction: column;">XXX</math>`,
+      "flexbox display (mrow)": `<math display="block"><mrow style="display: flex; flex-direction: column;">XXX</mrow></math>`,
+      "grid display (math)": `<math style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</math>`,
+      "grid display (mrow)": `<math display="block"><mrow style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</mrow></math>`,
+      "ruby display (math)": `<math style="display: ruby;">\
+<mrow style="display: ruby-base;">X</mrow>\
+<mrow style="display: ruby-text">XX</mrow>\
+</math>`,
+      "ruby display (mrow)": `<math display="block"><mrow style="display: ruby;">\
+<mrow style="display: ruby-base;">X</mrow>\
+<mrow style="display: ruby-text">XX</mrow>\
+</mrow></math>`,
+      "block display with column width (math)": `<math style="display: block; column-width: ${2*Xsize}px">\
+    <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\
+</math>`,
+      "block display with column width (mrow)": `<math style="display: block"><mrow style="display: block; column-width: ${2*Xsize}px">\
+    <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\
+</mrow></math>`,
+  };
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+
+      for (let key in templates) {
+          if (!templates.hasOwnProperty(key))
+              continue;
+          let mathtest = templates[key].
+              replace(/X/g, `<mspace style="display: inline-block; width: ${Xsize}px; height: ${Xsize}px; background: black"></mspace>`);
+          let reference = mathtest.
+              replace(/maction|math|mfrac|mmultiscripts|mover|mover|mpadded|mrow|mspace|msubsup|msub|msup|mtable|munderover|munder/g, "div");
+          document.body.insertAdjacentHTML("beforeend", `<div style="font: 20px/1 Ahem; position: absolute;">\
+<div><span>${key}:</span>${mathtest}</div>\
+<div><span>${key}:</span>${reference}</div>\
+</div>`);
+          let div = document.body.lastElementChild;
+          let elementDiv = div.firstElementChild;
+          let referenceDiv = div.lastElementChild;
+
+          test(function() {
+              const epsilon = 1;
+              compareLayout(elementDiv, referenceDiv, epsilon);
+          }, `${key}`);
+
+          div.style = "display: none;"; // Hide the div after measurement.
+      }
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html b/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html
new file mode 100644
index 0000000000..b18fdd6c8b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>display: contents</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<meta name="assert" content="Verify that display: contents computes to display: none">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function runTests() {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      test(function() {
+          Array.from(document.getElementsByClassName("element")).forEach(element => {
+              var style = window.getComputedStyle(element);
+              element.setAttribute("style", "display: contents");
+              assert_equals(style.getPropertyValue("display"), "none", `${tag}`);
+          });
+      }, "display: contents computes to display: none");
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html
new file mode 100644
index 0000000000..400c46a245
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test displaystyle on mstyle -->
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo>O</mo><mo>O</mo></munder>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <msub><mo>O</mo><mo>O</mo></munder>
+      </mstyle>
+    </math>
+
+    <!-- The mfrac element sets displaystyle to "false", or if it was already
+         false increments scriptlevel by 1, within numerator and denominator.
+      -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mfrac>
+      </mstyle>
+    </math>
+
+    <!--    The mroot element increments scriptlevel by 2, and sets
+            displaystyle to "false", within index, but leaves both attributes
+            unchanged within base.
+            The msqrt element leaves both attributes unchanged within its
+            argument. -->
+    <math>
+      <mstyle displaystyle="true">
+        <mroot>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mroot>
+        <msqrt>
+          <munder><mo>O</mo><mo>O</mo></munder>
+        </msqrt>
+      </mstyle>
+    </math>
+
+<!--
+    The msub element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within subscript, but leaves both attributes unchanged within base.
+
+   The msup element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within superscript, but leaves both attributes unchanged within
+   base.
+
+   The msubsup element [...] increments scriptlevel by 1, and sets displaystyle
+   to "false", within subscript and superscript, but leaves both attributes
+   unchanged within base.
+
+   The mmultiscripts element increments scriptlevel by 1, and sets displaystyle
+   to "false", within each of its arguments except base, but leaves both
+   attributes unchanged within base.
+   -->
+    <math>
+      <mstyle displaystyle="true">
+        <msub>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </msub>
+        <msup>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </msup>
+        <msubsup>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </msubsup>
+        <mmultiscripts>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <mprescripts/>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mmultiscripts>
+      </mstyle>
+    </math>
+
+<!--
+   The munder element [...] always sets displaystyle to "false" within the
+   underscript, but increments scriptlevel by 1 only when accentunder is
+   "false". Within base, it always leaves both attributes unchanged.
+
+   The mover element [...] always sets displaystyle to "false" within
+   overscript, but increments scriptlevel by 1 only when accent is "false".
+   Within base, it always leaves both attributes unchanged.
+
+   The munderover [..] always sets displaystyle to "false" within underscript
+   and overscript, but increments scriptlevel by 1 only when accentunder or
+   accent, respectively, are "false". Within base, it always leaves both
+   attributes unchanged.
+-->
+    <math>
+      <mstyle displaystyle="true">
+        <munder>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </munder>
+        <mover>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </mover>
+        <munderover>
+          <munder><mo>O</mo><mo>O</mo></munder>
+          <msub><mo>O</mo><mo>O</mo></msub>
+          <msub><mo>O</mo><mo>O</mo></msub>
+        </munderover>
+      </mstyle>
+    </math>
+
+<!--
+   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.
+-->
+    <math>
+      <mstyle displaystyle="false">
+        <mtable displaystyle="true">
+          <mtr>
+            <mtd>
+              <munder><mo>O</mo><mo>O</mo></munder>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mtable>
+          <mtr>
+            <mtd>
+              <msub><mo>O</mo><mo>O</mo></msub>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html
new file mode 100644
index 0000000000..a0bfc29ae5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="match" href="displaystyle-011-ref.html"/>
+    <meta name="assert" content="Test the effect on displaystyle and movablelimits">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test displaystyle on mstyle -->
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      </mstyle>
+    </math>
+
+    <!-- The mfrac element sets displaystyle to "false", or if it was already
+         false increments scriptlevel by 1, within numerator and denominator.
+      -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mfrac>
+      </mstyle>
+    </math>
+
+    <!--    The mroot element increments scriptlevel by 2, and sets
+            displaystyle to "false", within index, but leaves both attributes
+            unchanged within base.
+            The msqrt element leaves both attributes unchanged within its
+            argument. -->
+    <math>
+      <mstyle displaystyle="true">
+        <mroot>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mroot>
+        <msqrt>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msqrt>
+      </mstyle>
+    </math>
+
+<!--
+    The msub element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within subscript, but leaves both attributes unchanged within base.
+
+   The msup element [...] increments scriptlevel by 1, and sets displaystyle to
+   "false", within superscript, but leaves both attributes unchanged within
+   base.
+
+   The msubsup element [...] increments scriptlevel by 1, and sets displaystyle
+   to "false", within subscript and superscript, but leaves both attributes
+   unchanged within base.
+
+   The mmultiscripts element increments scriptlevel by 1, and sets displaystyle
+   to "false", within each of its arguments except base, but leaves both
+   attributes unchanged within base.
+   -->
+    <math>
+      <mstyle displaystyle="true">
+        <msub>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msub>
+        <msup>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msup>
+        <msubsup>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </msubsup>
+        <mmultiscripts>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <mprescripts/>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mmultiscripts>
+      </mstyle>
+    </math>
+
+<!--
+   The munder element [...] always sets displaystyle to "false" within the
+   underscript, but increments scriptlevel by 1 only when accentunder is
+   "false". Within base, it always leaves both attributes unchanged.
+
+   The mover element [...] always sets displaystyle to "false" within
+   overscript, but increments scriptlevel by 1 only when accent is "false".
+   Within base, it always leaves both attributes unchanged.
+
+   The munderover [..] always sets displaystyle to "false" within underscript
+   and overscript, but increments scriptlevel by 1 only when accentunder or
+   accent, respectively, are "false". Within base, it always leaves both
+   attributes unchanged.
+-->
+    <math>
+      <mstyle displaystyle="true">
+        <munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </munder>
+        <mover>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </mover>
+        <munderover>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+          <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        </munderover>
+      </mstyle>
+    </math>
+
+<!--
+   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.
+-->
+    <math>
+      <mstyle displaystyle="false">
+        <mtable displaystyle="true">
+          <mtr>
+            <mtd>
+              <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mtable>
+          <mtr>
+            <mtd>
+              <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            </mtd>
+          </mtr>
+        </mtable>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html
new file mode 100644
index 0000000000..96042b696f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test the effect of displaystyle on munder, mover and munderover -->
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo>O</mo><mo>O</mo></munder>
+        <mover><mo>O</mo><mo>O</mo></mover>
+        <munderover><mo>O</mo><mo>O</mo><mo>O</mo></munderover>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <msub><mo>O</mo><mo>O</mo></msub>
+        <msup><mo>O</mo><mo>O</mo></msup>
+        <msubsup><mo>O</mo><mo>O</mo><mo>O</mo></msubsup>
+      </mstyle>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html
new file mode 100644
index 0000000000..9fd4c784dd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="match" href="displaystyle-012-ref.html"/>
+    <meta name="assert" content="Test the effect on displaystyle on munder, mover and munderover">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <math>
+      <mstyle displaystyle="true">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mover><mo movablelimits="true">O</mo><mo>O</mo></mover>
+        <munderover><mo movablelimits="true">O</mo><mo>O</mo><mo>O</mo></munderover>
+      </mstyle>
+      <mstyle displaystyle="false">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mover><mo movablelimits="true">O</mo><mo>O</mo></mover>
+        <munderover><mo movablelimits="true">O</mo><mo>O</mo><mo>O</mo></munderover>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html
new file mode 100644
index 0000000000..9a580350de
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- Test dynamic change of displaystyle -->
+    <math id="m1" displaystyle="true">
+      <munder><mo>O</mo><mo>O</mo></munder>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m2" displaystyle="true">
+        <munder><mo>O</mo><mo>O</mo></munder>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m3" displaystyle="true">
+        <mtr>
+          <mtd>
+            <munder><mo>O</mo><mo>O</mo></munder>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+    <math id="m4" displaystyle="false">
+      <msub><mo>O</mo><mo>O</mo></msub>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m5" displaystyle="false">
+        <msub><mo>O</mo><mo>O</mo></msub>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m6" displaystyle="false">
+        <mtr>
+          <mtd>
+            <msub><mo>O</mo><mo>O</mo></msub>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html
new file mode 100644
index 0000000000..3ce9fff062
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable">
+    <link rel="match" href="displaystyle-013-ref.html"/>
+    <meta name="assert" content="Test dynamic change of displaystyle">
+    <script src="/mathml/support/fonts.js"></script>
+    <script type="text/javascript">
+      function doTest() {
+        document.body.offsetTop; // Update layout
+        document.getElementById("m1").setAttribute("displaystyle", "true");
+        document.getElementById("m2").setAttribute("displaystyle", "true");
+        document.getElementById("m3").setAttribute("displaystyle", "true");
+        document.getElementById("m4").removeAttribute("displaystyle");
+        document.getElementById("m5").removeAttribute("displaystyle");
+        document.getElementById("m6").removeAttribute("displaystyle");
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("load", () => { loadAllFonts().then(doTest); });
+    </script>
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <math id="m1">
+      <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m2">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m3">
+        <mtr>
+          <mtd>
+            <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+    <math id="m4" displaystyle="true">
+      <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+      <mfrac><mn>1</mn><mn>2</mn></mfrac>
+    </math>
+    <math>
+      <mstyle id="m5" displaystyle="true">
+        <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+        <mfrac><mn>1</mn><mn>2</mn></mfrac>
+      </mstyle>
+    </math>
+    <math>
+      <mtable id="m6" displaystyle="true">
+        <mtr>
+          <mtd>
+            <munder><mo movablelimits="true">O</mo><mo>O</mo></munder>
+            <mfrac><mn>1</mn><mn>2</mn></mfrac>
+          </mtd>
+        </mtr>
+      </mtable>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html
new file mode 100644
index 0000000000..085e2c429d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=832800 -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <mrow>
+            <mn>X</mn>
+            <mo id="mathOperator" mathbackground="red">+</mo>
+            <mfrac>
+              <mrow><mn>X</mn></mrow>
+              <mrow><mn>X</mn></mrow>
+            </mfrac>
+          </mrow>
+          <mrow>
+            <mn>X</mn>
+          </mrow>
+        </mfrac>
+      </mstyle>
+    </math>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html
new file mode 100644
index 0000000000..a4f1208e35
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>displaystyle</title>
+    <meta charset="utf-8">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+    <link rel="match" href="displaystyle-014-ref.html"/>
+    <meta name="assert" content="Test dynamic change of mathbackground on an operator does not interfer with its displaystyle">
+    <script src="/mathml/support/fonts.js"></script>
+    <script type="text/javascript">
+      function doTest() {
+        document.body.offsetTop; // Update layout
+        document.getElementById('mathOperator').
+                 setAttribute('mathbackground', 'red');
+        document.documentElement.removeAttribute("class");
+      }
+      window.addEventListener("load", () => { loadAllFonts().then(doTest); });
+    </script>
+    <link rel="stylesheet" href="/fonts/ahem.css">
+    <style>
+      math {
+          font: 25px Ahem;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=832800 -->
+    <math>
+      <mstyle displaystyle="true">
+        <mfrac>
+          <mrow>
+            <mn>X</mn>
+            <mo id="mathOperator">+</mo>
+            <mfrac>
+              <mrow><mn>X</mn></mrow>
+              <mrow><mn>X</mn></mrow>
+            </mfrac>
+          </mrow>
+          <mrow>
+            <mn>X</mn>
+          </mrow>
+        </mfrac>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html
new file mode 100644
index 0000000000..2e375c6886
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>displaystyle and display</title>
+  </head>
+  <body>
+    <math>
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math displaystyle="true">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="inline" displaystyle="true">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="block" displaystyle="true">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math displaystyle="false">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="inline" displaystyle="false">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+    <math display="block" displaystyle="false">
+      <munderover>
+        <mo>∑</mo>
+        <mi>b</mi>
+        <mi>c</mi>
+      </munderover>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html
new file mode 100644
index 0000000000..e4a747fb20
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>displaystyle and display</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#operator-dictionary">
+    <link rel="match" href="displaystyle-015-ref.html"/>
+    <meta name="assert" content="Test interaction of math@display and displaystyle on an operator with movablelimits">
+  </head>
+  <body>
+    <math>
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math>
+      <mstyle displaystyle="true">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="inline">
+      <mstyle displaystyle="true">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="block">
+      <mstyle displaystyle="true">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math>
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="inline">
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+    <math display="block">
+      <mstyle displaystyle="false">
+        <munderover>
+          <mo>∑</mo>
+          <mi>b</mi>
+          <mi>c</mi>
+        </munderover>
+      </mstyle>
+    </math>
+
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html
new file mode 100644
index 0000000000..26aed81d03
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>displaystyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<meta name="assert" content="Verify that the correct inheritance of the displaystyle value by measuring the size of large operators.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math  {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/attribute-values.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  setup({ explicit_done: true });
+  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+  var epsilon = 5;
+  function verify_displaystyle(elementId, displaystyle, description) {
+      var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
+      var elementSize = document.getElementById(elementId).
+          getBoundingClientRect().height;
+      assert_approx_equals(elementSize, expectedSize, epsilon, description);
+  }
+
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+      for (transform in AttributeValueTransforms) {
+          TransformAttributeValues(transform, ["display", "displaystyle"]);
+          test(function() {
+              verify_displaystyle("math_default", false, "default");
+              verify_displaystyle("math_false", false, "explicit displaystyle false");
+              verify_displaystyle("math_true", true, "explicit displaystyle true");
+          }, `math element (${transform})`);
+          test(function() {
+              verify_displaystyle("math_inline", false, "explicit display inline");
+              verify_displaystyle("math_block", true, "explicit display block");
+              verify_displaystyle("math_block_false", false, "explicit display block and displaystyle false");
+              verify_displaystyle("math_block_true", true, "explicit display block and displaystyle true");
+              verify_displaystyle("math_inline_false", false, "explicit display inline and displaystyle false");
+              verify_displaystyle("math_inline_true", true, "explicit display inline and displaystyle true");
+          }, `math element (explicit display, ${transform})`);
+          test(function() {
+              verify_displaystyle("mstyle_false", false, "explicit displaystyle false");
+              verify_displaystyle("mstyle_true", true, "explicit displaystyle true");
+          }, `mstyle element (${transform})`);
+          test(function() {
+              verify_displaystyle("mtable_default", false, "default");
+              verify_displaystyle("mtable_false", false, "explicit displaystyle false");
+              verify_displaystyle("mtable_true", true, "explicit displaystyle true");
+          }, `mtable element (${transform})`);
+          test(function() {
+              verify_displaystyle("mfrac_sibling", true, "sibling");
+              verify_displaystyle("mfrac_numerator", false, "numerator");
+              verify_displaystyle("mfrac_denominator", false, "denominator");
+          }, `mfrac element (${transform})`);
+          test(function() {
+              verify_displaystyle("mroot_base", true, "base");
+              verify_displaystyle("mroot_index", false, "index");
+          }, `mroot element (${transform})`);
+          test(function() {
+              verify_displaystyle("msub_base", true, "base");
+              verify_displaystyle("msub_subscript", false, "subscript");
+          }, `msub element (${transform})`);
+          test(function() {
+              verify_displaystyle("msup_base", true, "base");
+              verify_displaystyle("msup_supscript", false, "supscript");
+          }, `msup element (${transform})`);
+          test(function() {
+              verify_displaystyle("msubsup_base", true, "base");
+              verify_displaystyle("msubsup_subscript", false, "subscript");
+              verify_displaystyle("msubsup_supscript", false, "supscript");
+          }, `msubsup element (${transform})`);
+          test(function() {
+              verify_displaystyle("munder_base", true, "base");
+              verify_displaystyle("munder_underscript", false, "underscript");
+          }, `munder element (${transform})`);
+          test(function() {
+              verify_displaystyle("mover_base", true, "base");
+              verify_displaystyle("mover_overscript", false, "overscript");
+          }, `mover element (${transform})`);
+          test(function() {
+              verify_displaystyle("munderover_base", true, "base");
+              verify_displaystyle("munderover_underscript", false, "underscript");
+              verify_displaystyle("munderover_overscript", false, "overscript");
+          }, `munderover element (${transform})`);
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math><mo id="math_default">&#x2AFF;</mo></math>
+  <math display="inline"><mo id="math_inline">&#x2AFF;</mo></math>
+  <math display="block"><mo id="math_block">&#x2AFF;</mo></math>
+  <math displaystyle="false"><mo id="math_false">&#x2AFF;</mo></math>
+  <math displaystyle="true"><mo id="math_true">&#x2AFF;</mo></math>
+  <math display="block" displaystyle="false">
+    <mo id="math_block_false">&#x2AFF;</mo>
+  </math>
+  <math display="block" displaystyle="true">
+    <mo id="math_block_true">&#x2AFF;</mo>
+  </math>
+  <math display="inline" displaystyle="false">
+    <mo id="math_inline_false">&#x2AFF;</mo>
+  </math>
+  <math display="inline" displaystyle="true">
+    <mo id="math_inline_true">&#x2AFF;</mo>
+  </math>
+  <math><mstyle displaystyle="false"><mo id="mstyle_false">&#x2AFF;</mo></mstyle></math>
+  <math><mstyle displaystyle="true"><mo id="mstyle_true">&#x2AFF;</mo></mstyle></math>
+  <math displaystyle="true"><mtable><mtr><mtd><mo id="mtable_default">&#x2AFF;</mo></mtd></mtr></mtable></math>
+  <math><mtable displaystyle="true"><mtr><mtd><mo id="mtable_true">&#x2AFF;</mo></mtd></mtr></mtable></math>
+  <math displaystyle="true"><mtable displaystyle="false"><mtr><mtd><mo id="mtable_false">&#x2AFF;</mo></mtd></mtr></mtable></math>
+  <math displaystyle="true"><mo id="mfrac_sibling">&#x2AFF;</mo><mfrac><mo id="mfrac_numerator">&#x2AFF;</mo><mo id="mfrac_denominator">&#x2AFF;</mo></mfrac></math>
+  <math displaystyle="true"><mroot><mo id="mroot_base">&#x2AFF;</mo><mo id="mroot_index">&#x2AFF;</mo></mroot></math>
+  <math displaystyle="true"><msub><mo id="msub_base">&#x2AFF;</mo><mo id="msub_subscript">&#x2AFF;</mo></msub></math>
+  <math displaystyle="true"><msup><mo id="msup_base">&#x2AFF;</mo><mo id="msup_supscript">&#x2AFF;</mo></msup></math>
+  <math displaystyle="true"><msubsup><mo id="msubsup_base">&#x2AFF;</mo><mo id="msubsup_subscript">&#x2AFF;</mo><mo id="msubsup_supscript">&#x2AFF;</mo></msubsup></math>
+  <math displaystyle="true"><mmultiscripts><mo id="mmultiscripts_base">&#x2AFF;</mo><mo id="mmultiscripts_subscript">&#x2AFF;</mo><mo id="mmultiscripts_supscript">&#x2AFF;</mo><mprescripts/><mo id="mmultiscripts_presubscript">&#x2AFF;</mo><mo id="mmultiscripts_presupscript">&#x2AFF;</mo></mmultiscripts></math>
+  <math displaystyle="true"><munder><mo id="munder_base">&#x2AFF;</mo><mo id="munder_underscript">&#x2AFF;</mo></munder></math>
+  <math displaystyle="true"><mover><mo id="mover_base">&#x2AFF;</mo><mo id="mover_overscript">&#x2AFF;</mo></mover></math>
+  <math displaystyle="true"><munderover><mo id="munderover_base">&#x2AFF;</mo><mo id="munderover_underscript">&#x2AFF;</mo><mo id="munderover_overscript">&#x2AFF;</mo></munderover></math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html
new file mode 100644
index 0000000000..68566cfc25
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>displaystyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<meta name="assert" content="Verify interaction between automatic displaystyle and specified displaystyle on descendants.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math, math *  {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/attribute-values.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  setup({ explicit_done: true });
+  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
+  var epsilon = 5;
+  function verify_displaystyle(elementId, displaystyle, description) {
+      var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
+      var elementSize = document.getElementById(elementId).
+          getBoundingClientRect().height;
+      assert_approx_equals(elementSize, expectedSize, epsilon, description);
+  }
+
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+      for (transform in AttributeValueTransforms) {
+          TransformAttributeValues(transform, ["display", "displaystyle"]);
+          test(function() {
+              verify_displaystyle("cell_false", false, "cell with displaystyle false");
+              verify_displaystyle("cell_true", true, "cell with displaystyle true");
+          }, `mtable element (${transform})`);
+          test(function() {
+              verify_displaystyle("mfrac_numerator", true, "numerator");
+              verify_displaystyle("mfrac_denominator", true, "denominator");
+          }, `mfrac element (${transform})`);
+          test(function() {
+              verify_displaystyle("mroot_base", false, "base");
+              verify_displaystyle("mroot_index", true, "index");
+          }, `mroot element (${transform})`);
+          test(function() {
+              verify_displaystyle("msub_base", false, "base");
+              verify_displaystyle("msub_subscript", true, "subscript");
+          }, `msub element (${transform})`);
+          test(function() {
+              verify_displaystyle("msup_base", false, "base");
+              verify_displaystyle("msup_superscript", true, "superscript");
+          }, `msup element (${transform})`);
+          test(function() {
+              verify_displaystyle("msubsup_base", false, "base");
+              verify_displaystyle("msubsup_subscript", true, "subscript");
+              verify_displaystyle("msubsup_superscript", true, "superscript");
+          }, `msubsup element (${transform})`);
+          test(function() {
+              verify_displaystyle("munder_base", false, "base");
+              verify_displaystyle("munder_underscript", true, "underscript");
+          }, `munder element (${transform})`);
+          test(function() {
+              verify_displaystyle("mover_base", false, "base");
+              verify_displaystyle("mover_overscript", true, "overscript");
+          }, `mover element (${transform})`);
+          test(function() {
+              verify_displaystyle("munderover_base", false, "base");
+              verify_displaystyle("munderover_underscript", true, "underscript");
+              verify_displaystyle("munderover_overscript", true, "overscript");
+          }, `munderover element (${transform})`);
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math displaystyle="true">
+    <mtable>
+      <mtr>
+        <mtd>
+          <mstyle displaystyle="false">
+            <mo id="cell_false">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+        <mtd>
+          <mstyle displaystyle="true">
+            <mo id="cell_true">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+      </mtr>
+    </mtable>
+  </math>
+  <math>
+    <mfrac>
+      <mstyle displaystyle="true">
+        <mo id="mfrac_numerator">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mfrac_denominator">&#x2AFF;</mo>
+      </mstyle>
+    </mfrac>
+  </math>
+  <math displaystyle="true">
+    <mroot>
+      <mstyle displaystyle="false">
+        <mo id="mroot_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mroot_index">&#x2AFF;</mo>
+      </mstyle>
+    </mroot>
+  </math>
+  <math displaystyle="true">
+    <msub>
+      <mstyle displaystyle="false">
+        <mo id="msub_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msub_subscript">&#x2AFF;</mo>
+      </mstyle>
+    </msub>
+  </math>
+  <math displaystyle="true">
+    <msup>
+      <mstyle displaystyle="false">
+        <mo id="msup_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msup_superscript">&#x2AFF;</mo>
+      </mstyle>
+    </msup>
+  </math>
+  <math displaystyle="true">
+    <msubsup>
+      <mstyle displaystyle="false">
+        <mo id="msubsup_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msubsup_subscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="msubsup_superscript">&#x2AFF;</mo>
+      </mstyle>
+    </msubsup>
+  </math>
+  <math displaystyle="true">
+    <mmultiscripts>
+      <mstyle displaystyle="false">
+        <mo id="mmultiscripts_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_subscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_superscript">&#x2AFF;</mo>
+      </mstyle>
+      <mprescripts/>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_presubscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mmultiscripts_presuperscript">&#x2AFF;</mo>
+      </mstyle>
+    </mmultiscripts>
+  </math>
+  <math displaystyle="true">
+    <munder>
+      <mstyle displaystyle="false">
+        <mo id="munder_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="munder_underscript">&#x2AFF;</mo>
+      </mstyle>
+    </munder>
+  </math>
+  <math displaystyle="true">
+    <mover>
+      <mstyle displaystyle="false">
+        <mo id="mover_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="mover_overscript">&#x2AFF;</mo>
+      </mstyle>
+    </mover>
+  </math>
+  <math displaystyle="true">
+    <munderover>
+      <mstyle displaystyle="false">
+        <mo id="munderover_base">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="munderover_underscript">&#x2AFF;</mo>
+      </mstyle>
+      <mstyle displaystyle="true">
+        <mo id="munderover_overscript">&#x2AFF;</mo>
+      </mstyle>
+    </munderover>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html
new file mode 100644
index 0000000000..a5bcab2aaa
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>displaystyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<meta name="assert" content="Verify the displaystyle of the underover element is considered (not the one of its base) to determine whether to move limits.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  math, math *  {
+    font-family: Ahem;
+    font-size: 20px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+  function runTests() {
+      ["munder", "mover", "munderover"].forEach((tag) => {
+          Array.from(document.getElementsByTagName(tag)).forEach(e => {
+              var displaystyle = e.getAttribute('displaystyle') === "true";
+              test(function() {
+                  assert_true(MathMLFeatureDetection.has_movablelimits());
+                  var elementRight = e.getBoundingClientRect().right;
+                  var baseRight = e.firstElementChild.getBoundingClientRect().right;
+                  if (displaystyle)
+                      assert_approx_equals(elementRight, baseRight, 1);
+                  else
+                      assert_greater_than(elementRight, baseRight + 10);
+              }, `movablelimits for ${tag} element (displaystyle=${displaystyle})`);
+          });
+      });
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math>
+    <munder displaystyle="false">
+      <mo displaystyle="true" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </munder>
+  </math>
+  <math>
+    <mover displaystyle="false">
+      <mo displaystyle="true" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </mover>
+  </math>
+  <math>
+    <munderover displaystyle="false">
+      <mo displaystyle="true" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+      <mtext>X</mtext>
+    </munderover>
+  </math>
+  <math>
+    <munder displaystyle="true">
+      <mo displaystyle="false" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </munder>
+  </math>
+  <math>
+    <mover displaystyle="true">
+      <mo displaystyle="false" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+    </mover>
+  </math>
+  <math>
+    <munderover displaystyle="true">
+      <mo displaystyle="false" movablelimits="true">XX</mo>
+      <mtext>X</mtext>
+      <mtext>X</mtext>
+    </munderover>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html
new file mode 100644
index 0000000000..111ea79e24
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test dynamically changing dir attribute</title>
+</head>
+<body>
+    <p>
+      math:
+      <math dir="rtl">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math dir="rtl">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math>
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+    </p>
+    <p>
+      mstyle:
+      <math>
+        <mstyle dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+    </p>
+    <p>
+      mrow:
+      <math>
+        <mrow dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+    </p>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html
new file mode 100644
index 0000000000..d97505eff1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <meta charset="utf-8">
+  <title>Test dynamically changing dir attribute</title>
+  <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+  <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+  <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+  <meta name="assert" content="The dir attribute should update direction map to css properties dynamically">
+  <link rel="match" href="dynamic-dir-1-ref.html">
+  <script>
+      window.addEventListener("load", () => {
+
+        // force initial layout so we're sure what we're testing against
+        document.documentElement.getBoundingClientRect();
+
+        ["math", "mstyle", "mrow"].forEach((tag) => {
+          let elements = document.getElementsByTagName(tag);
+
+          // set an explicit rtl where there was none
+          elements[0].setAttribute("dir", "rtl");
+
+          // change explicit ltr to rtl
+          elements[1].setAttribute("dir", "rtl");
+
+          // remove an explicitly set dir="rtl"
+          elements[2].removeAttribute("dir");
+
+        })
+
+        document.documentElement.classList.remove('reftest-wait');
+      })
+    </script>
+</head>
+<body>
+    <p>
+      math:
+      <math>
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math dir="ltr">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+      <math dir="rtl">
+        <mi>a</mi>
+        <mi>b</mi>
+        <mi>c</mi>
+      </math>
+    </p>
+    <p>
+      mstyle:
+      <math>
+        <mstyle>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle dir="ltr">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+      <math>
+        <mstyle dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mstyle>
+      </math>
+    </p>
+    <p>
+      mrow:
+      <math>
+        <mrow>
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow dir="ltr">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+      <math>
+        <mrow dir="rtl">
+          <mi>a</mi>
+          <mi>b</mi>
+          <mi>c</mi>
+        </mrow>
+      </math>
+    </p>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html
new file mode 100644
index 0000000000..8f25c9db06
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating inside display: block MathML (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <div>
+    <div style="display: block">
+      <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div><div style="float: left; display: inline-block; width: 100px; height: 100px; background: blue"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html
new file mode 100644
index 0000000000..f398094e15
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating inside display: block MathML</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="floating-inside-mathml-with-block-display-ref.html"/>
+<meta name="assert" content="Verify that float works within a display: block MathML element.">
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <math>
+    <mrow style="display: block">
+      <mspace style="display: inline-block; width: 50px; height: 50px; background: magenta"/><mspace style="float: left; display: inline-block; width: 100px; height: 100px; background: blue"/>
+    </mrow>
+  </math>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html
new file mode 100644
index 0000000000..c82f395644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating math (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <div>
+    <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div>
+    <div style="float: left"><div style="width: 100px; height: 100px; background: blue"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html
new file mode 100644
index 0000000000..1de54ccdcf
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>floating math</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="floating-math-ref.html"/>
+<meta name="assert" content="Verify that float applies to the <math> element.">
+</head>
+<body>
+  <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p>
+  <div>
+    <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div>
+    <math style="float: left"><mspace width="100px" height="100px" style="background: blue"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html
new file mode 100644
index 0000000000..7166dea5f8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>float property in math layout</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Assert that float property is ignored for most math layout">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<style>
+  /* .element class defined in mathml-fragments.js */
+  .element > * {
+    padding: 10px;
+    background: black;
+  }
+  /* override display: none on children of maction/semantics */
+  maction > *, semantics > * {
+    display: math;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container"></div>
+
+  <script>
+    let container = document.getElementById("container");
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag))
+            continue;
+
+        // Skip mtable since it does not use display: math.
+        if (tag == "mtable")
+            continue;
+
+        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+        let div = document.body.lastElementChild;
+        let element =
+            FragmentHelper.element(div.firstElementChild);
+        let reference =
+            FragmentHelper.element(div.lastElementChild);
+        [element, reference].forEach(parent => {
+            if (parent.classList.contains("mathml-container") ||
+                parent.classList.contains("foreign-container")) {
+                FragmentHelper.appendChild(parent);
+                FragmentHelper.appendChild(parent);
+                FragmentHelper.appendChild(parent);
+            }
+        });
+
+        // Try to use float to invert the order in which children are normally
+        // laid out.
+        function layoutChildrenFromLeftToRight(tag) { tag != 'mroot'; }
+        element.firstElementChild.style =
+            `float: ${layoutChildrenFromLeftToRight(tag) ? 'right' : 'left'};`;
+        element.lastElementChild.style =
+            `float: ${layoutChildrenFromLeftToRight(tag) ? 'left' : 'right'};`;
+
+        test(function () {
+            let epsilon = 1;
+            compareLayout(element, reference, epsilon);
+        }, `float child ignored in ${tag}`);
+
+        div.style = "display: none;"; // Hide the div after measurement.
+    }
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html b/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html
new file mode 100644
index 0000000000..0966d96917
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Ignored CSS properties</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<meta name="assert" content="Verify style with ignored properties does not affect MathML layout.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+      for (tag in MathMLFragments) {
+          if (!FragmentHelper.isValidChildOfMrow(tag))
+              continue;
+
+          var ignoredProperties = [
+              "writing-mode: vertical-rl;",
+              "white-space: normal;",
+              "float: right;",
+              "align-content: end; justify-content: end;",
+              "align-self: end; justify-self: end;",
+          ];
+          if (tag !== "mtable") {
+              ignoredProperties.push("width: 100px !important; height: 200px !important;");
+          }
+
+          ignoredProperties.forEach(ignoredStyle => {
+              document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+              var div = document.body.lastElementChild;
+
+              // Create MathML structure with ignored style properties.
+              var elementContainer = div.firstElementChild;
+              var elementContainerWidth = elementContainer.getBoundingClientRect().width;
+              var element = FragmentHelper.element(elementContainer);
+              if (!FragmentHelper.isEmpty(tag))
+                  FragmentHelper.forceNonEmptyDescendants(element);
+              element.setAttribute("style", ignoredStyle);
+              Array.from(element.getElementsByTagNameNS("*", FragmentHelper.mathml_namespace)).forEach(descendant => {
+                  descendant.setAttribute("style", ignoredStyle);
+              });
+
+              var referenceContainer = div.lastElementChild;
+              var referenceContainerWidth = referenceContainer.getBoundingClientRect().width;
+              var reference = FragmentHelper.element(referenceContainer);
+              if (!FragmentHelper.isEmpty(tag))
+                  FragmentHelper.forceNonEmptyDescendants(reference);
+
+              test(function() {
+                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                  assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon);
+              }, `${tag} preferred width calculation is not affected by ${ignoredStyle}`);
+
+              test(function() {
+                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                  compareLayout(element, reference, epsilon);
+              }, `${tag} layout is not affected by ${ignoredStyle}`);
+
+              div.style = "display: none;"; // Hide the div after measurement.
+          });
+      }
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html
new file mode 100644
index 0000000000..8e3d7b1c21
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptminsize attribute (reference)</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle>
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html
new file mode 100644
index 0000000000..0ce87b6147
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptminsize attribute</title>
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle.attrs">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="legacy-scriptminsize-attribute-ref.html"/>
+<meta name="assert" content="Verify scriptminsize attribute is no longer parsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle scriptminsize="100px">
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html
new file mode 100644
index 0000000000..422325da28
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptsizemultiplier attribute (reference)</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle>
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html
new file mode 100644
index 0000000000..9a955612bc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>legacy scriptsizemultiplier attribute</title>
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle.attrs">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="legacy-scriptsizemultiplier-attribute-ref.html"/>
+<meta name="assert" content="Verify scriptsizemultiplier attribute is no longer parsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a square of size 71px.</p>
+  <div>
+    <math>
+      <mstyle scriptsizemultiplier="1">
+        <mstyle scriptlevel="1">
+          <mn>X</mn>
+        </mstyle>
+      </mstyle>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html
new file mode 100644
index 0000000000..9fca6f4963
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML lengths (reference)</title>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <div>
+    <div id="red" style="position: absolute; width: 200px; height: 200px; background: green;">
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html
new file mode 100644
index 0000000000..896f08d111
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML lengths</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
+<link rel="match" href="lengths-1-ref.html"/>
+<meta name="assert" content="Verify whether the different units are accepted for MathML lengths.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/xheight500.woff");
+  }
+  span, math {
+    font-family: TestFont;
+    font-size: 10px; /* 1em = 10px, 1ex is about 5px */
+  }
+  span {
+    position: absolute;
+    display: inline-block;
+    height: 10px;
+  }
+  #red > span {
+    background: red;
+  }
+  #green > span {
+    background: green;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <div>
+    <div id="red" style="position: absolute; width: 200px; height: 200px; background: green;">
+      <!-- px -->
+      <span style="top: 0px"><math><mspace width="200px"/></math></span>
+      <span style="top: 10px; width: 200px"></span>
+
+      <!-- cm -->
+      <span style="top: 20px"><math><mspace width="5.08cm"/></math></span>
+      <span style="top: 30px; width: 192px"></span>
+
+      <!-- em -->
+      <span style="top: 40px"><math><mspace width="20em"/></math></span>
+      <span style="top: 50px; width: 200px"></span>
+
+      <!-- ex -->
+      <span style="top: 60px"><math><mspace width="30ex"/></math></span>
+      <span style="top: 70px; width: 30ex"></span>
+
+      <!-- in -->
+      <span style="top: 80px"><math><mspace width="2in"/></math></span>
+      <span style="top: 90px; width: 192px"></span>
+
+      <!-- mm -->
+      <span style="top: 100px"><math><mspace width="50.8mm"/></math></span>
+      <span style="top: 110px; width: 192px"></span>
+
+      <!-- pc -->
+      <span style="top: 120px"><math><mspace width="12.5pc"/></math></span>
+      <span style="top: 130px; width: 200px"></span>
+
+      <!-- pt -->
+      <span style="top: 140px"><math><mspace width="150pt"/></math></span>
+      <span style="top: 150px; width: 200px"></span>
+
+      <!-- % -->
+      <span style="top: 160px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 170px; width: 200px"></span>
+
+      <!-- unitless nonzero values should be ignored -->
+      <span style="top: 180px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 190px; width: 10px"></span>
+    </div>
+
+    <div id="green" style="position: absolute; width: 200px; height: 200px;">
+      <!-- px -->
+      <span style="top: 10px"><math><mspace width="200px"/></math></span>
+      <span style="top: 0px; width: 200px"></span>
+
+      <!-- cm -->
+      <span style="top: 30px"><math><mspace width="5.08cm"/></math></span>
+      <span style="top: 20px; width: 192px"></span>
+
+      <!-- em -->
+      <span title="em" style="top: 50px"><math><mspace width="20em"/></math></span>
+      <span title="em" style="top: 40px; width: 200px"></span>
+
+      <!-- ex -->
+      <span title="ex" style="top: 70px"><math><mspace width="30ex"/></math></span>
+      <span title="ex" style="top: 60px; width: 30ex"></span>
+
+      <!-- in -->
+      <span style="top: 90px"><math><mspace width="2in"/></math></span>
+      <span style="top: 80px; width: 192px"></span>
+
+      <!-- mm -->
+      <span style="top: 110px"><math><mspace width="50.8mm"/></math></span>
+      <span style="top: 100px; width: 192px"></span>
+
+      <!-- pc -->
+      <span style="top: 130px"><math><mspace width="12.5pc"/></math></span>
+      <span style="top: 120px; width: 200px"></span>
+
+      <!-- pt -->
+      <span style="top: 150px"><math><mspace width="150pt"/></math></span>
+      <span style="top: 140px; width: 200px"></span>
+
+      <!-- % -->
+      <span style="top: 170px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 160px; width: 200px"></span>
+
+      <!-- unitless nonzero values should be ignored -->
+      <span style="top: 190px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span>
+      <span style="top: 180px; width: 10px"></span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html
new file mode 100644
index 0000000000..942611a8da
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>MathML lengths</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
+<meta name="assert" content="Verify various cases of the MathML length syntax.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/fonts.js"></script>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/xheight500.woff");
+  }
+  math {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<script>
+  var epsilon = .5;
+
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { loadAllFonts().then(runTests); });
+
+  function runTests() {
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      assert_equals(getBox("unitCm").width, 96, "cm");
+      assert_equals(getBox("unitEm").width, 120, "em");
+      assert_equals(getBox("unitEx").width, 500, "ex");
+      assert_equals(getBox("unitIn").width, 288, "in");
+      assert_equals(getBox("unitMm").width, 576, "mm");
+      assert_equals(getBox("unitPc").width, 96, "pc");
+      assert_equals(getBox("unitPercentage").width, 60, "%");
+      assert_equals(getBox("unitPt").width, 96, "pt");
+      assert_equals(getBox("unitPx").width, 123, "px");
+    }, "Units");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      assert_equals(getBox("spaceCm").width, 96, "cm");
+      assert_equals(getBox("spaceEm").width, 120, "em");
+      assert_equals(getBox("spaceEx").width, 500, "ex");
+      assert_equals(getBox("spaceIn").width, 288, "in");
+      assert_equals(getBox("spaceMm").width, 576, "mm");
+      assert_equals(getBox("spacePc").width, 96, "pc");
+      assert_equals(getBox("spacePercentage").width, 60, "%");
+      assert_equals(getBox("spacePt").width, 96, "pt");
+      assert_equals(getBox("spacePx").width, 123, "px");
+    }, "Trimming of space");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      assert_approx_equals(getBox("n0").width, 0, epsilon, "n0");
+      assert_approx_equals(getBox("n1").width, 90, epsilon, "n1");
+      assert_approx_equals(getBox("n2").width, 8, epsilon, "n2");
+      assert_approx_equals(getBox("n4").width, 650, epsilon, "n4");
+      assert_approx_equals(getBox("n5").width, 4320, epsilon, "n5");
+      assert_approx_equals(getBox("n6").width, 1, epsilon, "n6");
+      assert_approx_equals(getBox("n7").width, 8, epsilon, "n7");
+      assert_approx_equals(getBox("n8").width, 65, epsilon, "n8");
+      assert_approx_equals(getBox("n9").width, 432, epsilon, "n9");
+      assert_approx_equals(getBox("n10").width, 123, epsilon, "n10");
+    }, "Non-negative numbers");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      var topRef = getBox("ref").top;
+      assert_approx_equals(getBox("N0").top - topRef, -0, epsilon, "N0");
+      assert_approx_equals(topRef - getBox("N1").top, -90, epsilon, "N1");
+      assert_approx_equals(topRef - getBox("N2").top, -8, epsilon, "N2");
+      assert_approx_equals(topRef - getBox("N4").top, -650, epsilon, "N4");
+      assert_approx_equals(topRef - getBox("N5").top, -4320, epsilon, "N5");
+      assert_approx_equals(topRef - getBox("N6").top, -1, epsilon, "N6");
+      assert_approx_equals(topRef - getBox("N7").top, -8, epsilon, "N7");
+      assert_approx_equals(topRef - getBox("N8").top, -65, epsilon, "N8");
+      assert_approx_equals(topRef - getBox("N9").top, -432, epsilon, "N9");
+      assert_approx_equals(topRef - getBox("N10").top, -123, epsilon, "N10");
+    }, "Non-positive numbers");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      // Namedspace values are invalid in MathML Core.
+      ["veryverythinmathspace",
+       "verythinmathspace",
+       "thinmathspace",
+       "mediummathspace",
+       "thickmathspace",
+       "verythickmathspace",
+       "veryverythickmathspace",
+       "negativeveryverythinmathspace",
+       "negativeverythinmathspace",
+       "negativethinmathspace",
+       "negativemediummathspace",
+       "negativethickmathspace",
+       "negativeverythickmathspace",
+       "negativeveryverythickmathspace"
+      ].forEach(function(space) {
+          var mrow = document.getElementById(space);
+          var boxBefore = mrow.firstElementChild.getBoundingClientRect();
+          var boxAfter = mrow.lastElementChild.getBoundingClientRect();
+          assert_equals(boxAfter.left - boxBefore.right, 0, space);
+      });
+    }, "Legacy namedspaces");
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_mspace());
+      // These values are invalid in MathML Core.
+      assert_equals(getBox("unitNone").width, 30, "Unitless");
+      assert_approx_equals(getBox("n3").width, 0, epsilon, "n3");
+      var topRef = getBox("ref").top;
+      assert_approx_equals(topRef - getBox("N3").top, 0, epsilon, "N3");
+    }, "Legacy numbers");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mspace id="unitCm" width="2.54cm"/>
+      <mspace id="unitEm" width="12em"/>
+      <mspace id="unitEx" width="100ex"/>
+      <mspace id="unitIn" width="3in"/>
+      <mspace id="unitMm" width="152.4mm"/>
+      <mspace id="unitPc" width="6pc"/>
+      <mstyle mathsize="200%"><mspace id="unitPercentage" width="3em"/></mstyle>
+      <mspace id="unitPt" width="72pt"/>
+      <mspace id="unitPx" width="123px"/>
+      <mstyle mathsize="5"><mspace id="unitNone" width="3em"/></mstyle>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace id="spaceCm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;2.54cm&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceEm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;12em&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceEx" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;100ex&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceIn" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;3in&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spaceMm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;152.4mm&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spacePc" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;6pc&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mstyle mathsize="200%"><mspace id="spacePercentage" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;3em&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/></mstyle>
+      <mspace id="spacePt" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;72pt&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+      <mspace id="spacePx" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;123px&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace id="n0" width="0em"/>
+      <mspace id="n1" width="9em"/>
+      <mspace id="n2" width=".8em"/>
+      <mspace id="n3" width="7.em"/>
+      <mspace id="n4" width="65em"/>
+      <mspace id="n5" width="432em"/>
+      <mspace id="n6" width=".10em"/>
+      <mspace id="n7" width=".789em"/>
+      <mspace id="n8" width="6.5em"/>
+      <mspace id="n9" width="43.21em"/>
+      <mspace id="n10" width="012.345em"/>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace id="ref"></mspace>
+      <mpadded voffset="-0em"><mspace id="N0"/></mpadded>
+      <mpadded voffset="-9em"><mspace id="N1"/></mpadded>
+      <mpadded voffset="-.8em"><mspace id="N2"/></mpadded>
+      <mpadded voffset="-7.em"><mspace id="N3"/></mpadded>
+      <mpadded voffset="-65em"><mspace id="N4"/></mpadded>
+      <mpadded voffset="-432em"><mspace id="N5"/></mpadded>
+      <mpadded voffset="-.10em"><mspace id="N6"/></mpadded>
+      <mpadded voffset="-.789em"><mspace id="N7"/></mpadded>
+      <mpadded voffset="-6.5em"><mspace id="N8"/></mpadded>
+      <mpadded voffset="-43.21em"><mspace id="N9"/></mpadded>
+      <mpadded voffset="-012.345em"><mspace id="N10"/></mpadded>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow id="veryverythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="verythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="thinmathspace">
+        <mspace width="1em"/>
+        <mspace width="thinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="mediummathspace">
+        <mspace width="1em"/>
+        <mspace width="mediummathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="thickmathspace">
+        <mspace width="1em"/>
+        <mspace width="thickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="verythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="veryverythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythickmathspace"/>
+        <mspace/>
+      </mrow>
+    </math>
+    <math>
+      <mrow id="negativeveryverythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativeverythinmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativethinmathspace">
+        <mspace width="1em"/>
+        <mspace width="thinmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativemediummathspace">
+        <mspace width="1em"/>
+        <mspace width="mediummathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativethickmathspace">
+        <mspace width="1em"/>
+        <mspace width="thickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativeverythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="verythickmathspace"/>
+        <mspace/>
+      </mrow>
+      <mrow id="negativeveryverythickmathspace">
+        <mspace width="1em"/>
+        <mspace width="veryverythickmathspace"/>
+        <mspace/>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html
new file mode 100644
index 0000000000..65e2781c5e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mrow (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathbackground="green">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html
new file mode 100644
index 0000000000..e71fc53eaa
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mrow</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
+<link rel="mismatch" href="mathbackground-001-notref.html"/>
+<meta name="assert" content="mathbackground on a mrow has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathbackground="red">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html
new file mode 100644
index 0000000000..8c984c2619
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mstyle (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathbackground="green">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html
new file mode 100644
index 0000000000..09407d9269
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mstyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+<link rel="mismatch" href="mathbackground-002-notref.html"/>
+<meta name="assert" content="mathbackground on a mstyle has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathbackground="red">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html
new file mode 100644
index 0000000000..b6adaa8d4e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mtext (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathbackground="green">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html
new file mode 100644
index 0000000000..8cb11889db
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on mtext</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="mismatch" href="mathbackground-003-notref.html"/>
+<meta name="assert" content="mathbackground on a mtext has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathbackground="red">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html
new file mode 100644
index 0000000000..75465a6c38
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on semantics (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathbackground="red">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html
new file mode 100644
index 0000000000..be174cdbde
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathbackground on semantics</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation">
+<link rel="mismatch" href="mathbackground-004-notref.html"/>
+<meta name="assert" content="mathbackground on a semantics has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathbackground="green">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html
new file mode 100644
index 0000000000..9bc1ba5436
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mrow (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathcolor="green">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html
new file mode 100644
index 0000000000..2c463cac87
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mrow</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
+<link rel="mismatch" href="mathcolor-001-notref.html"/>
+<meta name="assert" content="mathcolor on a mrow has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mrow mathcolor="red">
+    <mtext>□■□■□■□</mtext>
+  </mrow>
+</math>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html
new file mode 100644
index 0000000000..5f9fd2bb9b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mstyle (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathcolor="green">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html
new file mode 100644
index 0000000000..147d41b46d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mstyle</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
+<link rel="mismatch" href="mathcolor-002-notref.html"/>
+<meta name="assert" content="mathcolor on a mstyle has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mstyle mathcolor="red">
+    <mtext>□■□■□■□</mtext>
+  </mstyle>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html
new file mode 100644
index 0000000000..11e018ebc1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mtext (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathcolor="green">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html
new file mode 100644
index 0000000000..5565b0d837
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on mtext</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="mismatch" href="mathcolor-003-notref.html"/>
+<meta name="assert" content="mathcolor on a mtext has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <mtext mathcolor="red">□■□■□■□</mtext>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html
new file mode 100644
index 0000000000..67a45249e5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on semantics (reference)</title>
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathcolor="red">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html
new file mode 100644
index 0000000000..3ea37fecdb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>mathcolor on semantics</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation">
+<link rel="mismatch" href="mathcolor-004-notref.html"/>
+<meta name="assert" content="mathcolor on a semantics has a visual effect.">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics mathcolor="green">
+    <mtext>□■□■□■□</mtext>
+  </semantics>
+</math>
+
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html
new file mode 100644
index 0000000000..682fa64233
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS color (reference)</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  math  {
+    font-family: Ahem;
+    font-size: 20px;
+  }
+</style>
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green rectangle:</p>
+  <p>
+    <math mathbackground="#0f0" mathcolor="#0f0">
+      <mtext>X X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html
new file mode 100644
index 0000000000..2f53215346
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS color</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="match" href="mathcolor-mathbackground-css-ref.html"/>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify that the mathcolor and mathbackground attributes use the CSS definition of colors.">
+<style>
+  math  {
+    font-family: Ahem;
+    font-size: 20px;
+  }
+</style>
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green rectangle:</p>
+  <p style="color: red">
+    <math mathbackground="rgb(0,255,0)" mathcolor="rgb(0,255,0)">
+      <mtext>X X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html
new file mode 100644
index 0000000000..ebb12a6c6c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathsize and css keywords</title>
+  </head>
+  <body>
+    <p>Test passes if you see 14 "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html
new file mode 100644
index 0000000000..2daed4cdea
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathsize and css keywords</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <meta name="assert" content="Verify that CSS font-size keywords are invalid for the mathsize attribute.">
+    <link rel="match" href="mathsize-attribute-css-keywords-ref.html">
+    <script src="/mathml/support/feature-detection.js"></script>
+  </head>
+  <body>
+    <p>Test passes if you see 14 "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext mathsize="xx-small">A</mtext>
+      <mtext mathsize="x-small">A</mtext>
+      <mtext mathsize="small">A</mtext>
+      <mtext mathsize="medium">A</mtext>
+      <mtext mathsize="large">A</mtext>
+      <mtext mathsize="x-large">A</mtext>
+      <mtext mathsize="xx-large">A</mtext>
+      <mtext mathsize="larger">A</mtext>
+      <mtext mathsize="smaller">A</mtext>
+      <mtext mathsize="xx-ſmall">A</mtext>
+      <mtext mathsize="x-ſmall">A</mtext>
+      <mtext mathsize="ſmall">A</mtext>
+      <mtext mathsize="ſmaller">A</mtext>
+    </math>
+   <script src="/mathml/support/feature-detection.js"></script>
+   <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mathsize");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html
new file mode 100644
index 0000000000..687efa49be
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Legacy mathsize values</title>
+  </head>
+  <body>
+    <p>Test passes if you see four "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+      <mtext>A</mtext>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html
new file mode 100644
index 0000000000..aebf09f9b8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Legacy mathsize values</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <meta name="assert" content="Verify that legacy values for mathsize have no effect.">
+    <link rel="match" href="mathsize-attribute-legacy-values-ref.html">
+    <script src="/mathml/support/feature-detection.js"></script>
+  </head>
+  <body>
+    <p>Test passes if you see four "A" of equal size:</p>
+    <math>
+      <mtext>A</mtext>
+      <mtext mathsize="small">A</mtext>
+      <mtext mathsize="medium">A</mtext>
+      <mtext mathsize="big">A</mtext>
+    </math>
+   <script src="/mathml/support/feature-detection.js"></script>
+   <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mathsize");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html
new file mode 100644
index 0000000000..7a0450e51e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify mathsize attribute</title>
+  </head>
+  <body>
+
+    <!-- The style attribute should have the same effect as the mathsize
+         attribute. -->
+    <div>
+      <math>
+        <mi style="font-size: 200%;">x</mi>
+        <mi style="font-size: 3em;">x</mi>
+      </math>
+    </div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html
new file mode 100644
index 0000000000..66bcb6dd25
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify mathsize attribute</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+    <meta name="assert" content="Verify mathsize attribute values.">
+    <link rel="match" href="mathsize-attribute-ref.html">
+  </head>
+  <body>
+
+    <!-- This verifies the effect of the mathsize attribute. -->
+    <div>
+      <math>
+        <mi mathsize="200%">x</mi>
+        <mi mathsize="3em">x</mi>
+      </math>
+    </div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html
new file mode 100644
index 0000000000..f8eaf7a775
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant auto (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mi>&#x1D715;</mi></math>=<span>1D715</span></span>
+  <span><math class="testfont"><mi>&#x1D6FB;</mi></math>=<span>1D6FB</span></span>
+  <span><math class="testfont"><mi>&#x1D6A5;</mi></math>=<span>1D6A5</span></span>
+  <span><math class="testfont"><mi>&#x1D434;</mi></math>=<span>1D434</span></span>
+  <span><math class="testfont"><mi>&#x1D435;</mi></math>=<span>1D435</span></span>
+  <span><math class="testfont"><mi>&#x1D436;</mi></math>=<span>1D436</span></span>
+  <span><math class="testfont"><mi>&#x1D437;</mi></math>=<span>1D437</span></span>
+  <span><math class="testfont"><mi>&#x1D438;</mi></math>=<span>1D438</span></span>
+  <span><math class="testfont"><mi>&#x1D439;</mi></math>=<span>1D439</span></span>
+  <span><math class="testfont"><mi>&#x1D43A;</mi></math>=<span>1D43A</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D43B;</mi></math>=<span>1D43B</span></span>
+  <span><math class="testfont"><mi>&#x1D43C;</mi></math>=<span>1D43C</span></span>
+  <span><math class="testfont"><mi>&#x1D43D;</mi></math>=<span>1D43D</span></span>
+  <span><math class="testfont"><mi>&#x1D43E;</mi></math>=<span>1D43E</span></span>
+  <span><math class="testfont"><mi>&#x1D43F;</mi></math>=<span>1D43F</span></span>
+  <span><math class="testfont"><mi>&#x1D440;</mi></math>=<span>1D440</span></span>
+  <span><math class="testfont"><mi>&#x1D441;</mi></math>=<span>1D441</span></span>
+  <span><math class="testfont"><mi>&#x1D442;</mi></math>=<span>1D442</span></span>
+  <span><math class="testfont"><mi>&#x1D443;</mi></math>=<span>1D443</span></span>
+  <span><math class="testfont"><mi>&#x1D444;</mi></math>=<span>1D444</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D445;</mi></math>=<span>1D445</span></span>
+  <span><math class="testfont"><mi>&#x1D446;</mi></math>=<span>1D446</span></span>
+  <span><math class="testfont"><mi>&#x1D447;</mi></math>=<span>1D447</span></span>
+  <span><math class="testfont"><mi>&#x1D448;</mi></math>=<span>1D448</span></span>
+  <span><math class="testfont"><mi>&#x1D449;</mi></math>=<span>1D449</span></span>
+  <span><math class="testfont"><mi>&#x1D44A;</mi></math>=<span>1D44A</span></span>
+  <span><math class="testfont"><mi>&#x1D44B;</mi></math>=<span>1D44B</span></span>
+  <span><math class="testfont"><mi>&#x1D44C;</mi></math>=<span>1D44C</span></span>
+  <span><math class="testfont"><mi>&#x1D44D;</mi></math>=<span>1D44D</span></span>
+  <span><math class="testfont"><mi>&#x1D44E;</mi></math>=<span>1D44E</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D44F;</mi></math>=<span>1D44F</span></span>
+  <span><math class="testfont"><mi>&#x1D450;</mi></math>=<span>1D450</span></span>
+  <span><math class="testfont"><mi>&#x1D451;</mi></math>=<span>1D451</span></span>
+  <span><math class="testfont"><mi>&#x1D452;</mi></math>=<span>1D452</span></span>
+  <span><math class="testfont"><mi>&#x1D453;</mi></math>=<span>1D453</span></span>
+  <span><math class="testfont"><mi>&#x1D454;</mi></math>=<span>1D454</span></span>
+  <span><math class="testfont"><mi>&#x210E;</mi></math>=<span>0210E</span></span>
+  <span><math class="testfont"><mi>&#x1D456;</mi></math>=<span>1D456</span></span>
+  <span><math class="testfont"><mi>&#x1D457;</mi></math>=<span>1D457</span></span>
+  <span><math class="testfont"><mi>&#x1D458;</mi></math>=<span>1D458</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D459;</mi></math>=<span>1D459</span></span>
+  <span><math class="testfont"><mi>&#x1D45A;</mi></math>=<span>1D45A</span></span>
+  <span><math class="testfont"><mi>&#x1D45B;</mi></math>=<span>1D45B</span></span>
+  <span><math class="testfont"><mi>&#x1D45C;</mi></math>=<span>1D45C</span></span>
+  <span><math class="testfont"><mi>&#x1D45D;</mi></math>=<span>1D45D</span></span>
+  <span><math class="testfont"><mi>&#x1D45E;</mi></math>=<span>1D45E</span></span>
+  <span><math class="testfont"><mi>&#x1D45F;</mi></math>=<span>1D45F</span></span>
+  <span><math class="testfont"><mi>&#x1D460;</mi></math>=<span>1D460</span></span>
+  <span><math class="testfont"><mi>&#x1D461;</mi></math>=<span>1D461</span></span>
+  <span><math class="testfont"><mi>&#x1D462;</mi></math>=<span>1D462</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D463;</mi></math>=<span>1D463</span></span>
+  <span><math class="testfont"><mi>&#x1D464;</mi></math>=<span>1D464</span></span>
+  <span><math class="testfont"><mi>&#x1D465;</mi></math>=<span>1D465</span></span>
+  <span><math class="testfont"><mi>&#x1D466;</mi></math>=<span>1D466</span></span>
+  <span><math class="testfont"><mi>&#x1D467;</mi></math>=<span>1D467</span></span>
+  <span><math class="testfont"><mi>&#x1D6A4;</mi></math>=<span>1D6A4</span></span>
+  <span><math class="testfont"><mi>&#x1D6E2;</mi></math>=<span>1D6E2</span></span>
+  <span><math class="testfont"><mi>&#x1D6E3;</mi></math>=<span>1D6E3</span></span>
+  <span><math class="testfont"><mi>&#x1D6E4;</mi></math>=<span>1D6E4</span></span>
+  <span><math class="testfont"><mi>&#x1D6E5;</mi></math>=<span>1D6E5</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6E6;</mi></math>=<span>1D6E6</span></span>
+  <span><math class="testfont"><mi>&#x1D6E7;</mi></math>=<span>1D6E7</span></span>
+  <span><math class="testfont"><mi>&#x1D6E8;</mi></math>=<span>1D6E8</span></span>
+  <span><math class="testfont"><mi>&#x1D6E9;</mi></math>=<span>1D6E9</span></span>
+  <span><math class="testfont"><mi>&#x1D6EA;</mi></math>=<span>1D6EA</span></span>
+  <span><math class="testfont"><mi>&#x1D6EB;</mi></math>=<span>1D6EB</span></span>
+  <span><math class="testfont"><mi>&#x1D6EC;</mi></math>=<span>1D6EC</span></span>
+  <span><math class="testfont"><mi>&#x1D6ED;</mi></math>=<span>1D6ED</span></span>
+  <span><math class="testfont"><mi>&#x1D6EE;</mi></math>=<span>1D6EE</span></span>
+  <span><math class="testfont"><mi>&#x1D6EF;</mi></math>=<span>1D6EF</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6F0;</mi></math>=<span>1D6F0</span></span>
+  <span><math class="testfont"><mi>&#x1D6F1;</mi></math>=<span>1D6F1</span></span>
+  <span><math class="testfont"><mi>&#x1D6F2;</mi></math>=<span>1D6F2</span></span>
+  <span><math class="testfont"><mi>&#x1D6F4;</mi></math>=<span>1D6F4</span></span>
+  <span><math class="testfont"><mi>&#x1D6F5;</mi></math>=<span>1D6F5</span></span>
+  <span><math class="testfont"><mi>&#x1D6F6;</mi></math>=<span>1D6F6</span></span>
+  <span><math class="testfont"><mi>&#x1D6F7;</mi></math>=<span>1D6F7</span></span>
+  <span><math class="testfont"><mi>&#x1D6F8;</mi></math>=<span>1D6F8</span></span>
+  <span><math class="testfont"><mi>&#x1D6F9;</mi></math>=<span>1D6F9</span></span>
+  <span><math class="testfont"><mi>&#x1D6FA;</mi></math>=<span>1D6FA</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6FC;</mi></math>=<span>1D6FC</span></span>
+  <span><math class="testfont"><mi>&#x1D6FD;</mi></math>=<span>1D6FD</span></span>
+  <span><math class="testfont"><mi>&#x1D6FE;</mi></math>=<span>1D6FE</span></span>
+  <span><math class="testfont"><mi>&#x1D6FF;</mi></math>=<span>1D6FF</span></span>
+  <span><math class="testfont"><mi>&#x1D700;</mi></math>=<span>1D700</span></span>
+  <span><math class="testfont"><mi>&#x1D701;</mi></math>=<span>1D701</span></span>
+  <span><math class="testfont"><mi>&#x1D702;</mi></math>=<span>1D702</span></span>
+  <span><math class="testfont"><mi>&#x1D703;</mi></math>=<span>1D703</span></span>
+  <span><math class="testfont"><mi>&#x1D704;</mi></math>=<span>1D704</span></span>
+  <span><math class="testfont"><mi>&#x1D705;</mi></math>=<span>1D705</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D706;</mi></math>=<span>1D706</span></span>
+  <span><math class="testfont"><mi>&#x1D707;</mi></math>=<span>1D707</span></span>
+  <span><math class="testfont"><mi>&#x1D708;</mi></math>=<span>1D708</span></span>
+  <span><math class="testfont"><mi>&#x1D709;</mi></math>=<span>1D709</span></span>
+  <span><math class="testfont"><mi>&#x1D70A;</mi></math>=<span>1D70A</span></span>
+  <span><math class="testfont"><mi>&#x1D70B;</mi></math>=<span>1D70B</span></span>
+  <span><math class="testfont"><mi>&#x1D70C;</mi></math>=<span>1D70C</span></span>
+  <span><math class="testfont"><mi>&#x1D70D;</mi></math>=<span>1D70D</span></span>
+  <span><math class="testfont"><mi>&#x1D70E;</mi></math>=<span>1D70E</span></span>
+  <span><math class="testfont"><mi>&#x1D70F;</mi></math>=<span>1D70F</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D710;</mi></math>=<span>1D710</span></span>
+  <span><math class="testfont"><mi>&#x1D711;</mi></math>=<span>1D711</span></span>
+  <span><math class="testfont"><mi>&#x1D712;</mi></math>=<span>1D712</span></span>
+  <span><math class="testfont"><mi>&#x1D713;</mi></math>=<span>1D713</span></span>
+  <span><math class="testfont"><mi>&#x1D714;</mi></math>=<span>1D714</span></span>
+  <span><math class="testfont"><mi>&#x1D717;</mi></math>=<span>1D717</span></span>
+  <span><math class="testfont"><mi>&#x1D719;</mi></math>=<span>1D719</span></span>
+  <span><math class="testfont"><mi>&#x1D71B;</mi></math>=<span>1D71B</span></span>
+  <span><math class="testfont"><mi>&#x1D718;</mi></math>=<span>1D718</span></span>
+  <span><math class="testfont"><mi>&#x1D71A;</mi></math>=<span>1D71A</span></span><br/>
+  <span><math class="testfont"><mi>&#x1D6F3;</mi></math>=<span>1D6F3</span></span>
+  <span><math class="testfont"><mi>&#x1D716;</mi></math>=<span>1D716</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html
new file mode 100644
index 0000000000..98f99ad6ed
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant auto</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
+<link rel="match" href="mathvariant-auto-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mi> is equivalent to an <mi> with the transformed italic unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mi>&#x2202;</mi></math>=<span>1D715</span></span>
+  <span><math class="testfont"><mi>&#x2207;</mi></math>=<span>1D6FB</span></span>
+  <span><math class="testfont"><mi>&#x237;</mi></math>=<span>1D6A5</span></span>
+  <span><math class="testfont"><mi>&#x41;</mi></math>=<span>1D434</span></span>
+  <span><math class="testfont"><mi>&#x42;</mi></math>=<span>1D435</span></span>
+  <span><math class="testfont"><mi>&#x43;</mi></math>=<span>1D436</span></span>
+  <span><math class="testfont"><mi>&#x44;</mi></math>=<span>1D437</span></span>
+  <span><math class="testfont"><mi>&#x45;</mi></math>=<span>1D438</span></span>
+  <span><math class="testfont"><mi>&#x46;</mi></math>=<span>1D439</span></span>
+  <span><math class="testfont"><mi>&#x47;</mi></math>=<span>1D43A</span></span><br/>
+  <span><math class="testfont"><mi>&#x48;</mi></math>=<span>1D43B</span></span>
+  <span><math class="testfont"><mi>&#x49;</mi></math>=<span>1D43C</span></span>
+  <span><math class="testfont"><mi>&#x4A;</mi></math>=<span>1D43D</span></span>
+  <span><math class="testfont"><mi>&#x4B;</mi></math>=<span>1D43E</span></span>
+  <span><math class="testfont"><mi>&#x4C;</mi></math>=<span>1D43F</span></span>
+  <span><math class="testfont"><mi>&#x4D;</mi></math>=<span>1D440</span></span>
+  <span><math class="testfont"><mi>&#x4E;</mi></math>=<span>1D441</span></span>
+  <span><math class="testfont"><mi>&#x4F;</mi></math>=<span>1D442</span></span>
+  <span><math class="testfont"><mi>&#x50;</mi></math>=<span>1D443</span></span>
+  <span><math class="testfont"><mi>&#x51;</mi></math>=<span>1D444</span></span><br/>
+  <span><math class="testfont"><mi>&#x52;</mi></math>=<span>1D445</span></span>
+  <span><math class="testfont"><mi>&#x53;</mi></math>=<span>1D446</span></span>
+  <span><math class="testfont"><mi>&#x54;</mi></math>=<span>1D447</span></span>
+  <span><math class="testfont"><mi>&#x55;</mi></math>=<span>1D448</span></span>
+  <span><math class="testfont"><mi>&#x56;</mi></math>=<span>1D449</span></span>
+  <span><math class="testfont"><mi>&#x57;</mi></math>=<span>1D44A</span></span>
+  <span><math class="testfont"><mi>&#x58;</mi></math>=<span>1D44B</span></span>
+  <span><math class="testfont"><mi>&#x59;</mi></math>=<span>1D44C</span></span>
+  <span><math class="testfont"><mi>&#x5A;</mi></math>=<span>1D44D</span></span>
+  <span><math class="testfont"><mi>&#x61;</mi></math>=<span>1D44E</span></span><br/>
+  <span><math class="testfont"><mi>&#x62;</mi></math>=<span>1D44F</span></span>
+  <span><math class="testfont"><mi>&#x63;</mi></math>=<span>1D450</span></span>
+  <span><math class="testfont"><mi>&#x64;</mi></math>=<span>1D451</span></span>
+  <span><math class="testfont"><mi>&#x65;</mi></math>=<span>1D452</span></span>
+  <span><math class="testfont"><mi>&#x66;</mi></math>=<span>1D453</span></span>
+  <span><math class="testfont"><mi>&#x67;</mi></math>=<span>1D454</span></span>
+  <span><math class="testfont"><mi>&#x68;</mi></math>=<span>0210E</span></span>
+  <span><math class="testfont"><mi>&#x69;</mi></math>=<span>1D456</span></span>
+  <span><math class="testfont"><mi>&#x6A;</mi></math>=<span>1D457</span></span>
+  <span><math class="testfont"><mi>&#x6B;</mi></math>=<span>1D458</span></span><br/>
+  <span><math class="testfont"><mi>&#x6C;</mi></math>=<span>1D459</span></span>
+  <span><math class="testfont"><mi>&#x6D;</mi></math>=<span>1D45A</span></span>
+  <span><math class="testfont"><mi>&#x6E;</mi></math>=<span>1D45B</span></span>
+  <span><math class="testfont"><mi>&#x6F;</mi></math>=<span>1D45C</span></span>
+  <span><math class="testfont"><mi>&#x70;</mi></math>=<span>1D45D</span></span>
+  <span><math class="testfont"><mi>&#x71;</mi></math>=<span>1D45E</span></span>
+  <span><math class="testfont"><mi>&#x72;</mi></math>=<span>1D45F</span></span>
+  <span><math class="testfont"><mi>&#x73;</mi></math>=<span>1D460</span></span>
+  <span><math class="testfont"><mi>&#x74;</mi></math>=<span>1D461</span></span>
+  <span><math class="testfont"><mi>&#x75;</mi></math>=<span>1D462</span></span><br/>
+  <span><math class="testfont"><mi>&#x76;</mi></math>=<span>1D463</span></span>
+  <span><math class="testfont"><mi>&#x77;</mi></math>=<span>1D464</span></span>
+  <span><math class="testfont"><mi>&#x78;</mi></math>=<span>1D465</span></span>
+  <span><math class="testfont"><mi>&#x79;</mi></math>=<span>1D466</span></span>
+  <span><math class="testfont"><mi>&#x7A;</mi></math>=<span>1D467</span></span>
+  <span><math class="testfont"><mi>&#x131;</mi></math>=<span>1D6A4</span></span>
+  <span><math class="testfont"><mi>&#x391;</mi></math>=<span>1D6E2</span></span>
+  <span><math class="testfont"><mi>&#x392;</mi></math>=<span>1D6E3</span></span>
+  <span><math class="testfont"><mi>&#x393;</mi></math>=<span>1D6E4</span></span>
+  <span><math class="testfont"><mi>&#x394;</mi></math>=<span>1D6E5</span></span><br/>
+  <span><math class="testfont"><mi>&#x395;</mi></math>=<span>1D6E6</span></span>
+  <span><math class="testfont"><mi>&#x396;</mi></math>=<span>1D6E7</span></span>
+  <span><math class="testfont"><mi>&#x397;</mi></math>=<span>1D6E8</span></span>
+  <span><math class="testfont"><mi>&#x398;</mi></math>=<span>1D6E9</span></span>
+  <span><math class="testfont"><mi>&#x399;</mi></math>=<span>1D6EA</span></span>
+  <span><math class="testfont"><mi>&#x39A;</mi></math>=<span>1D6EB</span></span>
+  <span><math class="testfont"><mi>&#x39B;</mi></math>=<span>1D6EC</span></span>
+  <span><math class="testfont"><mi>&#x39C;</mi></math>=<span>1D6ED</span></span>
+  <span><math class="testfont"><mi>&#x39D;</mi></math>=<span>1D6EE</span></span>
+  <span><math class="testfont"><mi>&#x39E;</mi></math>=<span>1D6EF</span></span><br/>
+  <span><math class="testfont"><mi>&#x39F;</mi></math>=<span>1D6F0</span></span>
+  <span><math class="testfont"><mi>&#x3A0;</mi></math>=<span>1D6F1</span></span>
+  <span><math class="testfont"><mi>&#x3A1;</mi></math>=<span>1D6F2</span></span>
+  <span><math class="testfont"><mi>&#x3A3;</mi></math>=<span>1D6F4</span></span>
+  <span><math class="testfont"><mi>&#x3A4;</mi></math>=<span>1D6F5</span></span>
+  <span><math class="testfont"><mi>&#x3A5;</mi></math>=<span>1D6F6</span></span>
+  <span><math class="testfont"><mi>&#x3A6;</mi></math>=<span>1D6F7</span></span>
+  <span><math class="testfont"><mi>&#x3A7;</mi></math>=<span>1D6F8</span></span>
+  <span><math class="testfont"><mi>&#x3A8;</mi></math>=<span>1D6F9</span></span>
+  <span><math class="testfont"><mi>&#x3A9;</mi></math>=<span>1D6FA</span></span><br/>
+  <span><math class="testfont"><mi>&#x3B1;</mi></math>=<span>1D6FC</span></span>
+  <span><math class="testfont"><mi>&#x3B2;</mi></math>=<span>1D6FD</span></span>
+  <span><math class="testfont"><mi>&#x3B3;</mi></math>=<span>1D6FE</span></span>
+  <span><math class="testfont"><mi>&#x3B4;</mi></math>=<span>1D6FF</span></span>
+  <span><math class="testfont"><mi>&#x3B5;</mi></math>=<span>1D700</span></span>
+  <span><math class="testfont"><mi>&#x3B6;</mi></math>=<span>1D701</span></span>
+  <span><math class="testfont"><mi>&#x3B7;</mi></math>=<span>1D702</span></span>
+  <span><math class="testfont"><mi>&#x3B8;</mi></math>=<span>1D703</span></span>
+  <span><math class="testfont"><mi>&#x3B9;</mi></math>=<span>1D704</span></span>
+  <span><math class="testfont"><mi>&#x3BA;</mi></math>=<span>1D705</span></span><br/>
+  <span><math class="testfont"><mi>&#x3BB;</mi></math>=<span>1D706</span></span>
+  <span><math class="testfont"><mi>&#x3BC;</mi></math>=<span>1D707</span></span>
+  <span><math class="testfont"><mi>&#x3BD;</mi></math>=<span>1D708</span></span>
+  <span><math class="testfont"><mi>&#x3BE;</mi></math>=<span>1D709</span></span>
+  <span><math class="testfont"><mi>&#x3BF;</mi></math>=<span>1D70A</span></span>
+  <span><math class="testfont"><mi>&#x3C0;</mi></math>=<span>1D70B</span></span>
+  <span><math class="testfont"><mi>&#x3C1;</mi></math>=<span>1D70C</span></span>
+  <span><math class="testfont"><mi>&#x3C2;</mi></math>=<span>1D70D</span></span>
+  <span><math class="testfont"><mi>&#x3C3;</mi></math>=<span>1D70E</span></span>
+  <span><math class="testfont"><mi>&#x3C4;</mi></math>=<span>1D70F</span></span><br/>
+  <span><math class="testfont"><mi>&#x3C5;</mi></math>=<span>1D710</span></span>
+  <span><math class="testfont"><mi>&#x3C6;</mi></math>=<span>1D711</span></span>
+  <span><math class="testfont"><mi>&#x3C7;</mi></math>=<span>1D712</span></span>
+  <span><math class="testfont"><mi>&#x3C8;</mi></math>=<span>1D713</span></span>
+  <span><math class="testfont"><mi>&#x3C9;</mi></math>=<span>1D714</span></span>
+  <span><math class="testfont"><mi>&#x3D1;</mi></math>=<span>1D717</span></span>
+  <span><math class="testfont"><mi>&#x3D5;</mi></math>=<span>1D719</span></span>
+  <span><math class="testfont"><mi>&#x3D6;</mi></math>=<span>1D71B</span></span>
+  <span><math class="testfont"><mi>&#x3F0;</mi></math>=<span>1D718</span></span>
+  <span><math class="testfont"><mi>&#x3F1;</mi></math>=<span>1D71A</span></span><br/>
+  <span><math class="testfont"><mi>&#x3F4;</mi></math>=<span>1D6F3</span></span>
+  <span><math class="testfont"><mi>&#x3F5;</mi></math>=<span>1D716</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font-ref.html
new file mode 100644
index 0000000000..6ebfd75c2f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Basic mathvariant transforms with the default font (reference)</title>
+  </head>
+  <body>
+    <p>Test passes if you see three lines of text rendered with corresponding
+      italic, bold, bold-italic characters from the
+      Mathematical Alphanumeric Symbols block:</p>
+    <p><math><mtext>𝐼𝑡𝑎𝑙𝑖𝑐</mtext></math></p>
+    <p><math><mtext>𝐁𝐨𝐥𝐝</mtext></math></p>
+    <p><math><mtext>𝑩𝒐𝒍𝒅𝑰𝒕𝒂𝒍𝒊𝒄</mtext></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font.html
new file mode 100644
index 0000000000..24c868c495
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Basic mathvariant transforms with the default font</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1789083">
+    <link rel="match" href="mathvariant-basic-transforms-with-default-font-ref.html"/>
+    <meta name="assert" content="Verify that the default font provides Mathematical Alphanumeric Symbols to perform basic mathvariant transforms (italic, bold, bold-italic), without requiring some kind of style fallback.">
+  </head>
+  <body>
+    <p>Test passes if you see three lines of text rendered with corresponding
+      italic, bold, bold-italic characters from the
+      Mathematical Alphanumeric Symbols block:</p>
+    <p><math><mtext mathvariant="italic">Italic</mtext></math></p>
+    <p><math><mtext mathvariant="bold">Bold</mtext></math></p>
+    <p><math><mtext mathvariant="bold-italic">BoldItalic</mtext></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-fraktur-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-fraktur-ref.html
new file mode 100644
index 0000000000..44588948e7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-fraktur-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-fraktur (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-fraktur.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D56C;</mtext></math>=<span>1D56C</span></span>
+  <span><math class="testfont"><mtext>&#x1D56D;</mtext></math>=<span>1D56D</span></span>
+  <span><math class="testfont"><mtext>&#x1D56E;</mtext></math>=<span>1D56E</span></span>
+  <span><math class="testfont"><mtext>&#x1D56F;</mtext></math>=<span>1D56F</span></span>
+  <span><math class="testfont"><mtext>&#x1D570;</mtext></math>=<span>1D570</span></span>
+  <span><math class="testfont"><mtext>&#x1D571;</mtext></math>=<span>1D571</span></span>
+  <span><math class="testfont"><mtext>&#x1D572;</mtext></math>=<span>1D572</span></span>
+  <span><math class="testfont"><mtext>&#x1D573;</mtext></math>=<span>1D573</span></span>
+  <span><math class="testfont"><mtext>&#x1D574;</mtext></math>=<span>1D574</span></span>
+  <span><math class="testfont"><mtext>&#x1D575;</mtext></math>=<span>1D575</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D576;</mtext></math>=<span>1D576</span></span>
+  <span><math class="testfont"><mtext>&#x1D577;</mtext></math>=<span>1D577</span></span>
+  <span><math class="testfont"><mtext>&#x1D578;</mtext></math>=<span>1D578</span></span>
+  <span><math class="testfont"><mtext>&#x1D579;</mtext></math>=<span>1D579</span></span>
+  <span><math class="testfont"><mtext>&#x1D57A;</mtext></math>=<span>1D57A</span></span>
+  <span><math class="testfont"><mtext>&#x1D57B;</mtext></math>=<span>1D57B</span></span>
+  <span><math class="testfont"><mtext>&#x1D57C;</mtext></math>=<span>1D57C</span></span>
+  <span><math class="testfont"><mtext>&#x1D57D;</mtext></math>=<span>1D57D</span></span>
+  <span><math class="testfont"><mtext>&#x1D57E;</mtext></math>=<span>1D57E</span></span>
+  <span><math class="testfont"><mtext>&#x1D57F;</mtext></math>=<span>1D57F</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D580;</mtext></math>=<span>1D580</span></span>
+  <span><math class="testfont"><mtext>&#x1D581;</mtext></math>=<span>1D581</span></span>
+  <span><math class="testfont"><mtext>&#x1D582;</mtext></math>=<span>1D582</span></span>
+  <span><math class="testfont"><mtext>&#x1D583;</mtext></math>=<span>1D583</span></span>
+  <span><math class="testfont"><mtext>&#x1D584;</mtext></math>=<span>1D584</span></span>
+  <span><math class="testfont"><mtext>&#x1D585;</mtext></math>=<span>1D585</span></span>
+  <span><math class="testfont"><mtext>&#x1D586;</mtext></math>=<span>1D586</span></span>
+  <span><math class="testfont"><mtext>&#x1D587;</mtext></math>=<span>1D587</span></span>
+  <span><math class="testfont"><mtext>&#x1D588;</mtext></math>=<span>1D588</span></span>
+  <span><math class="testfont"><mtext>&#x1D589;</mtext></math>=<span>1D589</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D58A;</mtext></math>=<span>1D58A</span></span>
+  <span><math class="testfont"><mtext>&#x1D58B;</mtext></math>=<span>1D58B</span></span>
+  <span><math class="testfont"><mtext>&#x1D58C;</mtext></math>=<span>1D58C</span></span>
+  <span><math class="testfont"><mtext>&#x1D58D;</mtext></math>=<span>1D58D</span></span>
+  <span><math class="testfont"><mtext>&#x1D58E;</mtext></math>=<span>1D58E</span></span>
+  <span><math class="testfont"><mtext>&#x1D58F;</mtext></math>=<span>1D58F</span></span>
+  <span><math class="testfont"><mtext>&#x1D590;</mtext></math>=<span>1D590</span></span>
+  <span><math class="testfont"><mtext>&#x1D591;</mtext></math>=<span>1D591</span></span>
+  <span><math class="testfont"><mtext>&#x1D592;</mtext></math>=<span>1D592</span></span>
+  <span><math class="testfont"><mtext>&#x1D593;</mtext></math>=<span>1D593</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D594;</mtext></math>=<span>1D594</span></span>
+  <span><math class="testfont"><mtext>&#x1D595;</mtext></math>=<span>1D595</span></span>
+  <span><math class="testfont"><mtext>&#x1D596;</mtext></math>=<span>1D596</span></span>
+  <span><math class="testfont"><mtext>&#x1D597;</mtext></math>=<span>1D597</span></span>
+  <span><math class="testfont"><mtext>&#x1D598;</mtext></math>=<span>1D598</span></span>
+  <span><math class="testfont"><mtext>&#x1D599;</mtext></math>=<span>1D599</span></span>
+  <span><math class="testfont"><mtext>&#x1D59A;</mtext></math>=<span>1D59A</span></span>
+  <span><math class="testfont"><mtext>&#x1D59B;</mtext></math>=<span>1D59B</span></span>
+  <span><math class="testfont"><mtext>&#x1D59C;</mtext></math>=<span>1D59C</span></span>
+  <span><math class="testfont"><mtext>&#x1D59D;</mtext></math>=<span>1D59D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D59E;</mtext></math>=<span>1D59E</span></span>
+  <span><math class="testfont"><mtext>&#x1D59F;</mtext></math>=<span>1D59F</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-fraktur.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-fraktur.html
new file mode 100644
index 0000000000..32d037603b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-fraktur.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-fraktur</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#bold-fraktur-mappings">
+<link rel="match" href="mathvariant-bold-fraktur-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a bold-fraktur mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-fraktur.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x41;</mtext></math>=<span>1D56C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x42;</mtext></math>=<span>1D56D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x43;</mtext></math>=<span>1D56E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x44;</mtext></math>=<span>1D56F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x45;</mtext></math>=<span>1D570</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x46;</mtext></math>=<span>1D571</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x47;</mtext></math>=<span>1D572</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x48;</mtext></math>=<span>1D573</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x49;</mtext></math>=<span>1D574</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x4A;</mtext></math>=<span>1D575</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x4B;</mtext></math>=<span>1D576</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x4C;</mtext></math>=<span>1D577</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x4D;</mtext></math>=<span>1D578</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x4E;</mtext></math>=<span>1D579</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x4F;</mtext></math>=<span>1D57A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x50;</mtext></math>=<span>1D57B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x51;</mtext></math>=<span>1D57C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x52;</mtext></math>=<span>1D57D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x53;</mtext></math>=<span>1D57E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x54;</mtext></math>=<span>1D57F</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x55;</mtext></math>=<span>1D580</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x56;</mtext></math>=<span>1D581</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x57;</mtext></math>=<span>1D582</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x58;</mtext></math>=<span>1D583</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x59;</mtext></math>=<span>1D584</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x5A;</mtext></math>=<span>1D585</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x61;</mtext></math>=<span>1D586</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x62;</mtext></math>=<span>1D587</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x63;</mtext></math>=<span>1D588</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x64;</mtext></math>=<span>1D589</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x65;</mtext></math>=<span>1D58A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x66;</mtext></math>=<span>1D58B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x67;</mtext></math>=<span>1D58C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x68;</mtext></math>=<span>1D58D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x69;</mtext></math>=<span>1D58E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x6A;</mtext></math>=<span>1D58F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x6B;</mtext></math>=<span>1D590</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x6C;</mtext></math>=<span>1D591</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x6D;</mtext></math>=<span>1D592</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x6E;</mtext></math>=<span>1D593</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x6F;</mtext></math>=<span>1D594</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x70;</mtext></math>=<span>1D595</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x71;</mtext></math>=<span>1D596</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x72;</mtext></math>=<span>1D597</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x73;</mtext></math>=<span>1D598</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x74;</mtext></math>=<span>1D599</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x75;</mtext></math>=<span>1D59A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x76;</mtext></math>=<span>1D59B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x77;</mtext></math>=<span>1D59C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x78;</mtext></math>=<span>1D59D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x79;</mtext></math>=<span>1D59E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-fraktur">&#x7A;</mtext></math>=<span>1D59F</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-italic-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-italic-ref.html
new file mode 100644
index 0000000000..c5eaa22e19
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-italic-ref.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-italic (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D74F;</mtext></math>=<span>1D74F</span></span>
+  <span><math class="testfont"><mtext>&#x1D735;</mtext></math>=<span>1D735</span></span>
+  <span><math class="testfont"><mtext>&#x1D468;</mtext></math>=<span>1D468</span></span>
+  <span><math class="testfont"><mtext>&#x1D469;</mtext></math>=<span>1D469</span></span>
+  <span><math class="testfont"><mtext>&#x1D46A;</mtext></math>=<span>1D46A</span></span>
+  <span><math class="testfont"><mtext>&#x1D46B;</mtext></math>=<span>1D46B</span></span>
+  <span><math class="testfont"><mtext>&#x1D46C;</mtext></math>=<span>1D46C</span></span>
+  <span><math class="testfont"><mtext>&#x1D46D;</mtext></math>=<span>1D46D</span></span>
+  <span><math class="testfont"><mtext>&#x1D46E;</mtext></math>=<span>1D46E</span></span>
+  <span><math class="testfont"><mtext>&#x1D46F;</mtext></math>=<span>1D46F</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D470;</mtext></math>=<span>1D470</span></span>
+  <span><math class="testfont"><mtext>&#x1D471;</mtext></math>=<span>1D471</span></span>
+  <span><math class="testfont"><mtext>&#x1D472;</mtext></math>=<span>1D472</span></span>
+  <span><math class="testfont"><mtext>&#x1D473;</mtext></math>=<span>1D473</span></span>
+  <span><math class="testfont"><mtext>&#x1D474;</mtext></math>=<span>1D474</span></span>
+  <span><math class="testfont"><mtext>&#x1D475;</mtext></math>=<span>1D475</span></span>
+  <span><math class="testfont"><mtext>&#x1D476;</mtext></math>=<span>1D476</span></span>
+  <span><math class="testfont"><mtext>&#x1D477;</mtext></math>=<span>1D477</span></span>
+  <span><math class="testfont"><mtext>&#x1D478;</mtext></math>=<span>1D478</span></span>
+  <span><math class="testfont"><mtext>&#x1D479;</mtext></math>=<span>1D479</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D47A;</mtext></math>=<span>1D47A</span></span>
+  <span><math class="testfont"><mtext>&#x1D47B;</mtext></math>=<span>1D47B</span></span>
+  <span><math class="testfont"><mtext>&#x1D47C;</mtext></math>=<span>1D47C</span></span>
+  <span><math class="testfont"><mtext>&#x1D47D;</mtext></math>=<span>1D47D</span></span>
+  <span><math class="testfont"><mtext>&#x1D47E;</mtext></math>=<span>1D47E</span></span>
+  <span><math class="testfont"><mtext>&#x1D47F;</mtext></math>=<span>1D47F</span></span>
+  <span><math class="testfont"><mtext>&#x1D480;</mtext></math>=<span>1D480</span></span>
+  <span><math class="testfont"><mtext>&#x1D481;</mtext></math>=<span>1D481</span></span>
+  <span><math class="testfont"><mtext>&#x1D482;</mtext></math>=<span>1D482</span></span>
+  <span><math class="testfont"><mtext>&#x1D483;</mtext></math>=<span>1D483</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D484;</mtext></math>=<span>1D484</span></span>
+  <span><math class="testfont"><mtext>&#x1D485;</mtext></math>=<span>1D485</span></span>
+  <span><math class="testfont"><mtext>&#x1D486;</mtext></math>=<span>1D486</span></span>
+  <span><math class="testfont"><mtext>&#x1D487;</mtext></math>=<span>1D487</span></span>
+  <span><math class="testfont"><mtext>&#x1D488;</mtext></math>=<span>1D488</span></span>
+  <span><math class="testfont"><mtext>&#x1D489;</mtext></math>=<span>1D489</span></span>
+  <span><math class="testfont"><mtext>&#x1D48A;</mtext></math>=<span>1D48A</span></span>
+  <span><math class="testfont"><mtext>&#x1D48B;</mtext></math>=<span>1D48B</span></span>
+  <span><math class="testfont"><mtext>&#x1D48C;</mtext></math>=<span>1D48C</span></span>
+  <span><math class="testfont"><mtext>&#x1D48D;</mtext></math>=<span>1D48D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D48E;</mtext></math>=<span>1D48E</span></span>
+  <span><math class="testfont"><mtext>&#x1D48F;</mtext></math>=<span>1D48F</span></span>
+  <span><math class="testfont"><mtext>&#x1D490;</mtext></math>=<span>1D490</span></span>
+  <span><math class="testfont"><mtext>&#x1D491;</mtext></math>=<span>1D491</span></span>
+  <span><math class="testfont"><mtext>&#x1D492;</mtext></math>=<span>1D492</span></span>
+  <span><math class="testfont"><mtext>&#x1D493;</mtext></math>=<span>1D493</span></span>
+  <span><math class="testfont"><mtext>&#x1D494;</mtext></math>=<span>1D494</span></span>
+  <span><math class="testfont"><mtext>&#x1D495;</mtext></math>=<span>1D495</span></span>
+  <span><math class="testfont"><mtext>&#x1D496;</mtext></math>=<span>1D496</span></span>
+  <span><math class="testfont"><mtext>&#x1D497;</mtext></math>=<span>1D497</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D498;</mtext></math>=<span>1D498</span></span>
+  <span><math class="testfont"><mtext>&#x1D499;</mtext></math>=<span>1D499</span></span>
+  <span><math class="testfont"><mtext>&#x1D49A;</mtext></math>=<span>1D49A</span></span>
+  <span><math class="testfont"><mtext>&#x1D49B;</mtext></math>=<span>1D49B</span></span>
+  <span><math class="testfont"><mtext>&#x1D71C;</mtext></math>=<span>1D71C</span></span>
+  <span><math class="testfont"><mtext>&#x1D71D;</mtext></math>=<span>1D71D</span></span>
+  <span><math class="testfont"><mtext>&#x1D71E;</mtext></math>=<span>1D71E</span></span>
+  <span><math class="testfont"><mtext>&#x1D71F;</mtext></math>=<span>1D71F</span></span>
+  <span><math class="testfont"><mtext>&#x1D720;</mtext></math>=<span>1D720</span></span>
+  <span><math class="testfont"><mtext>&#x1D721;</mtext></math>=<span>1D721</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D722;</mtext></math>=<span>1D722</span></span>
+  <span><math class="testfont"><mtext>&#x1D723;</mtext></math>=<span>1D723</span></span>
+  <span><math class="testfont"><mtext>&#x1D724;</mtext></math>=<span>1D724</span></span>
+  <span><math class="testfont"><mtext>&#x1D725;</mtext></math>=<span>1D725</span></span>
+  <span><math class="testfont"><mtext>&#x1D726;</mtext></math>=<span>1D726</span></span>
+  <span><math class="testfont"><mtext>&#x1D727;</mtext></math>=<span>1D727</span></span>
+  <span><math class="testfont"><mtext>&#x1D728;</mtext></math>=<span>1D728</span></span>
+  <span><math class="testfont"><mtext>&#x1D729;</mtext></math>=<span>1D729</span></span>
+  <span><math class="testfont"><mtext>&#x1D72A;</mtext></math>=<span>1D72A</span></span>
+  <span><math class="testfont"><mtext>&#x1D72B;</mtext></math>=<span>1D72B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D72C;</mtext></math>=<span>1D72C</span></span>
+  <span><math class="testfont"><mtext>&#x1D72E;</mtext></math>=<span>1D72E</span></span>
+  <span><math class="testfont"><mtext>&#x1D72F;</mtext></math>=<span>1D72F</span></span>
+  <span><math class="testfont"><mtext>&#x1D730;</mtext></math>=<span>1D730</span></span>
+  <span><math class="testfont"><mtext>&#x1D731;</mtext></math>=<span>1D731</span></span>
+  <span><math class="testfont"><mtext>&#x1D732;</mtext></math>=<span>1D732</span></span>
+  <span><math class="testfont"><mtext>&#x1D733;</mtext></math>=<span>1D733</span></span>
+  <span><math class="testfont"><mtext>&#x1D734;</mtext></math>=<span>1D734</span></span>
+  <span><math class="testfont"><mtext>&#x1D736;</mtext></math>=<span>1D736</span></span>
+  <span><math class="testfont"><mtext>&#x1D737;</mtext></math>=<span>1D737</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D738;</mtext></math>=<span>1D738</span></span>
+  <span><math class="testfont"><mtext>&#x1D739;</mtext></math>=<span>1D739</span></span>
+  <span><math class="testfont"><mtext>&#x1D73A;</mtext></math>=<span>1D73A</span></span>
+  <span><math class="testfont"><mtext>&#x1D73B;</mtext></math>=<span>1D73B</span></span>
+  <span><math class="testfont"><mtext>&#x1D73C;</mtext></math>=<span>1D73C</span></span>
+  <span><math class="testfont"><mtext>&#x1D73D;</mtext></math>=<span>1D73D</span></span>
+  <span><math class="testfont"><mtext>&#x1D73E;</mtext></math>=<span>1D73E</span></span>
+  <span><math class="testfont"><mtext>&#x1D73F;</mtext></math>=<span>1D73F</span></span>
+  <span><math class="testfont"><mtext>&#x1D740;</mtext></math>=<span>1D740</span></span>
+  <span><math class="testfont"><mtext>&#x1D741;</mtext></math>=<span>1D741</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D742;</mtext></math>=<span>1D742</span></span>
+  <span><math class="testfont"><mtext>&#x1D743;</mtext></math>=<span>1D743</span></span>
+  <span><math class="testfont"><mtext>&#x1D744;</mtext></math>=<span>1D744</span></span>
+  <span><math class="testfont"><mtext>&#x1D745;</mtext></math>=<span>1D745</span></span>
+  <span><math class="testfont"><mtext>&#x1D746;</mtext></math>=<span>1D746</span></span>
+  <span><math class="testfont"><mtext>&#x1D747;</mtext></math>=<span>1D747</span></span>
+  <span><math class="testfont"><mtext>&#x1D748;</mtext></math>=<span>1D748</span></span>
+  <span><math class="testfont"><mtext>&#x1D749;</mtext></math>=<span>1D749</span></span>
+  <span><math class="testfont"><mtext>&#x1D74A;</mtext></math>=<span>1D74A</span></span>
+  <span><math class="testfont"><mtext>&#x1D74B;</mtext></math>=<span>1D74B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D74C;</mtext></math>=<span>1D74C</span></span>
+  <span><math class="testfont"><mtext>&#x1D74D;</mtext></math>=<span>1D74D</span></span>
+  <span><math class="testfont"><mtext>&#x1D74E;</mtext></math>=<span>1D74E</span></span>
+  <span><math class="testfont"><mtext>&#x1D751;</mtext></math>=<span>1D751</span></span>
+  <span><math class="testfont"><mtext>&#x1D753;</mtext></math>=<span>1D753</span></span>
+  <span><math class="testfont"><mtext>&#x1D755;</mtext></math>=<span>1D755</span></span>
+  <span><math class="testfont"><mtext>&#x1D752;</mtext></math>=<span>1D752</span></span>
+  <span><math class="testfont"><mtext>&#x1D754;</mtext></math>=<span>1D754</span></span>
+  <span><math class="testfont"><mtext>&#x1D72D;</mtext></math>=<span>1D72D</span></span>
+  <span><math class="testfont"><mtext>&#x1D750;</mtext></math>=<span>1D750</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-italic.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-italic.html
new file mode 100644
index 0000000000..1b8ab88595
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-italic.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-italic</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#bold-italic-mappings">
+<link rel="match" href="mathvariant-bold-italic-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a bold-italic mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x2202;</mtext></math>=<span>1D74F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x2207;</mtext></math>=<span>1D735</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x41;</mtext></math>=<span>1D468</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x42;</mtext></math>=<span>1D469</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x43;</mtext></math>=<span>1D46A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x44;</mtext></math>=<span>1D46B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x45;</mtext></math>=<span>1D46C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x46;</mtext></math>=<span>1D46D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x47;</mtext></math>=<span>1D46E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x48;</mtext></math>=<span>1D46F</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x49;</mtext></math>=<span>1D470</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x4A;</mtext></math>=<span>1D471</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x4B;</mtext></math>=<span>1D472</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x4C;</mtext></math>=<span>1D473</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x4D;</mtext></math>=<span>1D474</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x4E;</mtext></math>=<span>1D475</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x4F;</mtext></math>=<span>1D476</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x50;</mtext></math>=<span>1D477</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x51;</mtext></math>=<span>1D478</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x52;</mtext></math>=<span>1D479</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x53;</mtext></math>=<span>1D47A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x54;</mtext></math>=<span>1D47B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x55;</mtext></math>=<span>1D47C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x56;</mtext></math>=<span>1D47D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x57;</mtext></math>=<span>1D47E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x58;</mtext></math>=<span>1D47F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x59;</mtext></math>=<span>1D480</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x5A;</mtext></math>=<span>1D481</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x61;</mtext></math>=<span>1D482</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x62;</mtext></math>=<span>1D483</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x63;</mtext></math>=<span>1D484</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x64;</mtext></math>=<span>1D485</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x65;</mtext></math>=<span>1D486</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x66;</mtext></math>=<span>1D487</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x67;</mtext></math>=<span>1D488</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x68;</mtext></math>=<span>1D489</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x69;</mtext></math>=<span>1D48A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x6A;</mtext></math>=<span>1D48B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x6B;</mtext></math>=<span>1D48C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x6C;</mtext></math>=<span>1D48D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x6D;</mtext></math>=<span>1D48E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x6E;</mtext></math>=<span>1D48F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x6F;</mtext></math>=<span>1D490</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x70;</mtext></math>=<span>1D491</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x71;</mtext></math>=<span>1D492</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x72;</mtext></math>=<span>1D493</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x73;</mtext></math>=<span>1D494</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x74;</mtext></math>=<span>1D495</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x75;</mtext></math>=<span>1D496</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x76;</mtext></math>=<span>1D497</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x77;</mtext></math>=<span>1D498</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x78;</mtext></math>=<span>1D499</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x79;</mtext></math>=<span>1D49A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x7A;</mtext></math>=<span>1D49B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x391;</mtext></math>=<span>1D71C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x392;</mtext></math>=<span>1D71D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x393;</mtext></math>=<span>1D71E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x394;</mtext></math>=<span>1D71F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x395;</mtext></math>=<span>1D720</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x396;</mtext></math>=<span>1D721</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x397;</mtext></math>=<span>1D722</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x398;</mtext></math>=<span>1D723</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x399;</mtext></math>=<span>1D724</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x39A;</mtext></math>=<span>1D725</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x39B;</mtext></math>=<span>1D726</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x39C;</mtext></math>=<span>1D727</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x39D;</mtext></math>=<span>1D728</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x39E;</mtext></math>=<span>1D729</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x39F;</mtext></math>=<span>1D72A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A0;</mtext></math>=<span>1D72B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A1;</mtext></math>=<span>1D72C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A3;</mtext></math>=<span>1D72E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A4;</mtext></math>=<span>1D72F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A5;</mtext></math>=<span>1D730</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A6;</mtext></math>=<span>1D731</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A7;</mtext></math>=<span>1D732</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A8;</mtext></math>=<span>1D733</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3A9;</mtext></math>=<span>1D734</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B1;</mtext></math>=<span>1D736</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B2;</mtext></math>=<span>1D737</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B3;</mtext></math>=<span>1D738</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B4;</mtext></math>=<span>1D739</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B5;</mtext></math>=<span>1D73A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B6;</mtext></math>=<span>1D73B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B7;</mtext></math>=<span>1D73C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B8;</mtext></math>=<span>1D73D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3B9;</mtext></math>=<span>1D73E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3BA;</mtext></math>=<span>1D73F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3BB;</mtext></math>=<span>1D740</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3BC;</mtext></math>=<span>1D741</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3BD;</mtext></math>=<span>1D742</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3BE;</mtext></math>=<span>1D743</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3BF;</mtext></math>=<span>1D744</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C0;</mtext></math>=<span>1D745</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C1;</mtext></math>=<span>1D746</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C2;</mtext></math>=<span>1D747</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C3;</mtext></math>=<span>1D748</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C4;</mtext></math>=<span>1D749</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C5;</mtext></math>=<span>1D74A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C6;</mtext></math>=<span>1D74B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C7;</mtext></math>=<span>1D74C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C8;</mtext></math>=<span>1D74D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3C9;</mtext></math>=<span>1D74E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3D1;</mtext></math>=<span>1D751</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3D5;</mtext></math>=<span>1D753</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3D6;</mtext></math>=<span>1D755</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3F0;</mtext></math>=<span>1D752</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3F1;</mtext></math>=<span>1D754</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3F4;</mtext></math>=<span>1D72D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-italic">&#x3F5;</mtext></math>=<span>1D750</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-ref.html
new file mode 100644
index 0000000000..3a727872d6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-ref.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D6DB;</mtext></math>=<span>1D6DB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C1;</mtext></math>=<span>1D6C1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7CE;</mtext></math>=<span>1D7CE</span></span>
+  <span><math class="testfont"><mtext>&#x1D7CF;</mtext></math>=<span>1D7CF</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D0;</mtext></math>=<span>1D7D0</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D1;</mtext></math>=<span>1D7D1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D2;</mtext></math>=<span>1D7D2</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D3;</mtext></math>=<span>1D7D3</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D4;</mtext></math>=<span>1D7D4</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D5;</mtext></math>=<span>1D7D5</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7D6;</mtext></math>=<span>1D7D6</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D7;</mtext></math>=<span>1D7D7</span></span>
+  <span><math class="testfont"><mtext>&#x1D400;</mtext></math>=<span>1D400</span></span>
+  <span><math class="testfont"><mtext>&#x1D401;</mtext></math>=<span>1D401</span></span>
+  <span><math class="testfont"><mtext>&#x1D402;</mtext></math>=<span>1D402</span></span>
+  <span><math class="testfont"><mtext>&#x1D403;</mtext></math>=<span>1D403</span></span>
+  <span><math class="testfont"><mtext>&#x1D404;</mtext></math>=<span>1D404</span></span>
+  <span><math class="testfont"><mtext>&#x1D405;</mtext></math>=<span>1D405</span></span>
+  <span><math class="testfont"><mtext>&#x1D406;</mtext></math>=<span>1D406</span></span>
+  <span><math class="testfont"><mtext>&#x1D407;</mtext></math>=<span>1D407</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D408;</mtext></math>=<span>1D408</span></span>
+  <span><math class="testfont"><mtext>&#x1D409;</mtext></math>=<span>1D409</span></span>
+  <span><math class="testfont"><mtext>&#x1D40A;</mtext></math>=<span>1D40A</span></span>
+  <span><math class="testfont"><mtext>&#x1D40B;</mtext></math>=<span>1D40B</span></span>
+  <span><math class="testfont"><mtext>&#x1D40C;</mtext></math>=<span>1D40C</span></span>
+  <span><math class="testfont"><mtext>&#x1D40D;</mtext></math>=<span>1D40D</span></span>
+  <span><math class="testfont"><mtext>&#x1D40E;</mtext></math>=<span>1D40E</span></span>
+  <span><math class="testfont"><mtext>&#x1D40F;</mtext></math>=<span>1D40F</span></span>
+  <span><math class="testfont"><mtext>&#x1D410;</mtext></math>=<span>1D410</span></span>
+  <span><math class="testfont"><mtext>&#x1D411;</mtext></math>=<span>1D411</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D412;</mtext></math>=<span>1D412</span></span>
+  <span><math class="testfont"><mtext>&#x1D413;</mtext></math>=<span>1D413</span></span>
+  <span><math class="testfont"><mtext>&#x1D414;</mtext></math>=<span>1D414</span></span>
+  <span><math class="testfont"><mtext>&#x1D415;</mtext></math>=<span>1D415</span></span>
+  <span><math class="testfont"><mtext>&#x1D416;</mtext></math>=<span>1D416</span></span>
+  <span><math class="testfont"><mtext>&#x1D417;</mtext></math>=<span>1D417</span></span>
+  <span><math class="testfont"><mtext>&#x1D418;</mtext></math>=<span>1D418</span></span>
+  <span><math class="testfont"><mtext>&#x1D419;</mtext></math>=<span>1D419</span></span>
+  <span><math class="testfont"><mtext>&#x1D41A;</mtext></math>=<span>1D41A</span></span>
+  <span><math class="testfont"><mtext>&#x1D41B;</mtext></math>=<span>1D41B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D41C;</mtext></math>=<span>1D41C</span></span>
+  <span><math class="testfont"><mtext>&#x1D41D;</mtext></math>=<span>1D41D</span></span>
+  <span><math class="testfont"><mtext>&#x1D41E;</mtext></math>=<span>1D41E</span></span>
+  <span><math class="testfont"><mtext>&#x1D41F;</mtext></math>=<span>1D41F</span></span>
+  <span><math class="testfont"><mtext>&#x1D420;</mtext></math>=<span>1D420</span></span>
+  <span><math class="testfont"><mtext>&#x1D421;</mtext></math>=<span>1D421</span></span>
+  <span><math class="testfont"><mtext>&#x1D422;</mtext></math>=<span>1D422</span></span>
+  <span><math class="testfont"><mtext>&#x1D423;</mtext></math>=<span>1D423</span></span>
+  <span><math class="testfont"><mtext>&#x1D424;</mtext></math>=<span>1D424</span></span>
+  <span><math class="testfont"><mtext>&#x1D425;</mtext></math>=<span>1D425</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D426;</mtext></math>=<span>1D426</span></span>
+  <span><math class="testfont"><mtext>&#x1D427;</mtext></math>=<span>1D427</span></span>
+  <span><math class="testfont"><mtext>&#x1D428;</mtext></math>=<span>1D428</span></span>
+  <span><math class="testfont"><mtext>&#x1D429;</mtext></math>=<span>1D429</span></span>
+  <span><math class="testfont"><mtext>&#x1D42A;</mtext></math>=<span>1D42A</span></span>
+  <span><math class="testfont"><mtext>&#x1D42B;</mtext></math>=<span>1D42B</span></span>
+  <span><math class="testfont"><mtext>&#x1D42C;</mtext></math>=<span>1D42C</span></span>
+  <span><math class="testfont"><mtext>&#x1D42D;</mtext></math>=<span>1D42D</span></span>
+  <span><math class="testfont"><mtext>&#x1D42E;</mtext></math>=<span>1D42E</span></span>
+  <span><math class="testfont"><mtext>&#x1D42F;</mtext></math>=<span>1D42F</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D430;</mtext></math>=<span>1D430</span></span>
+  <span><math class="testfont"><mtext>&#x1D431;</mtext></math>=<span>1D431</span></span>
+  <span><math class="testfont"><mtext>&#x1D432;</mtext></math>=<span>1D432</span></span>
+  <span><math class="testfont"><mtext>&#x1D433;</mtext></math>=<span>1D433</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A8;</mtext></math>=<span>1D6A8</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A9;</mtext></math>=<span>1D6A9</span></span>
+  <span><math class="testfont"><mtext>&#x1D6AA;</mtext></math>=<span>1D6AA</span></span>
+  <span><math class="testfont"><mtext>&#x1D6AB;</mtext></math>=<span>1D6AB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6AC;</mtext></math>=<span>1D6AC</span></span>
+  <span><math class="testfont"><mtext>&#x1D6AD;</mtext></math>=<span>1D6AD</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6AE;</mtext></math>=<span>1D6AE</span></span>
+  <span><math class="testfont"><mtext>&#x1D6AF;</mtext></math>=<span>1D6AF</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B0;</mtext></math>=<span>1D6B0</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B1;</mtext></math>=<span>1D6B1</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B2;</mtext></math>=<span>1D6B2</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B3;</mtext></math>=<span>1D6B3</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B4;</mtext></math>=<span>1D6B4</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B5;</mtext></math>=<span>1D6B5</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B6;</mtext></math>=<span>1D6B6</span></span>
+  <span><math class="testfont"><mtext>&#x1D6B7;</mtext></math>=<span>1D6B7</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6B8;</mtext></math>=<span>1D6B8</span></span>
+  <span><math class="testfont"><mtext>&#x1D6BA;</mtext></math>=<span>1D6BA</span></span>
+  <span><math class="testfont"><mtext>&#x1D6BB;</mtext></math>=<span>1D6BB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6BC;</mtext></math>=<span>1D6BC</span></span>
+  <span><math class="testfont"><mtext>&#x1D6BD;</mtext></math>=<span>1D6BD</span></span>
+  <span><math class="testfont"><mtext>&#x1D6BE;</mtext></math>=<span>1D6BE</span></span>
+  <span><math class="testfont"><mtext>&#x1D6BF;</mtext></math>=<span>1D6BF</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C0;</mtext></math>=<span>1D6C0</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C2;</mtext></math>=<span>1D6C2</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C3;</mtext></math>=<span>1D6C3</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6C4;</mtext></math>=<span>1D6C4</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C5;</mtext></math>=<span>1D6C5</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C6;</mtext></math>=<span>1D6C6</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C7;</mtext></math>=<span>1D6C7</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C8;</mtext></math>=<span>1D6C8</span></span>
+  <span><math class="testfont"><mtext>&#x1D6C9;</mtext></math>=<span>1D6C9</span></span>
+  <span><math class="testfont"><mtext>&#x1D6CA;</mtext></math>=<span>1D6CA</span></span>
+  <span><math class="testfont"><mtext>&#x1D6CB;</mtext></math>=<span>1D6CB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6CC;</mtext></math>=<span>1D6CC</span></span>
+  <span><math class="testfont"><mtext>&#x1D6CD;</mtext></math>=<span>1D6CD</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6CE;</mtext></math>=<span>1D6CE</span></span>
+  <span><math class="testfont"><mtext>&#x1D6CF;</mtext></math>=<span>1D6CF</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D0;</mtext></math>=<span>1D6D0</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D1;</mtext></math>=<span>1D6D1</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D2;</mtext></math>=<span>1D6D2</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D3;</mtext></math>=<span>1D6D3</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D4;</mtext></math>=<span>1D6D4</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D5;</mtext></math>=<span>1D6D5</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D6;</mtext></math>=<span>1D6D6</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D7;</mtext></math>=<span>1D6D7</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6D8;</mtext></math>=<span>1D6D8</span></span>
+  <span><math class="testfont"><mtext>&#x1D6D9;</mtext></math>=<span>1D6D9</span></span>
+  <span><math class="testfont"><mtext>&#x1D6DA;</mtext></math>=<span>1D6DA</span></span>
+  <span><math class="testfont"><mtext>&#x1D6DD;</mtext></math>=<span>1D6DD</span></span>
+  <span><math class="testfont"><mtext>&#x1D6DF;</mtext></math>=<span>1D6DF</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E1;</mtext></math>=<span>1D6E1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7CA;</mtext></math>=<span>1D7CA</span></span>
+  <span><math class="testfont"><mtext>&#x1D7CB;</mtext></math>=<span>1D7CB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6DE;</mtext></math>=<span>1D6DE</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E0;</mtext></math>=<span>1D6E0</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6B9;</mtext></math>=<span>1D6B9</span></span>
+  <span><math class="testfont"><mtext>&#x1D6DC;</mtext></math>=<span>1D6DC</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-sans-serif-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-sans-serif-ref.html
new file mode 100644
index 0000000000..ec292b8e91
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-sans-serif-ref.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-sans-serif (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-sans-serif.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D789;</mtext></math>=<span>1D789</span></span>
+  <span><math class="testfont"><mtext>&#x1D76F;</mtext></math>=<span>1D76F</span></span>
+  <span><math class="testfont"><mtext>&#x1D7EC;</mtext></math>=<span>1D7EC</span></span>
+  <span><math class="testfont"><mtext>&#x1D7ED;</mtext></math>=<span>1D7ED</span></span>
+  <span><math class="testfont"><mtext>&#x1D7EE;</mtext></math>=<span>1D7EE</span></span>
+  <span><math class="testfont"><mtext>&#x1D7EF;</mtext></math>=<span>1D7EF</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F0;</mtext></math>=<span>1D7F0</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F1;</mtext></math>=<span>1D7F1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F2;</mtext></math>=<span>1D7F2</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F3;</mtext></math>=<span>1D7F3</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7F4;</mtext></math>=<span>1D7F4</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F5;</mtext></math>=<span>1D7F5</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D4;</mtext></math>=<span>1D5D4</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D5;</mtext></math>=<span>1D5D5</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D6;</mtext></math>=<span>1D5D6</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D7;</mtext></math>=<span>1D5D7</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D8;</mtext></math>=<span>1D5D8</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D9;</mtext></math>=<span>1D5D9</span></span>
+  <span><math class="testfont"><mtext>&#x1D5DA;</mtext></math>=<span>1D5DA</span></span>
+  <span><math class="testfont"><mtext>&#x1D5DB;</mtext></math>=<span>1D5DB</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5DC;</mtext></math>=<span>1D5DC</span></span>
+  <span><math class="testfont"><mtext>&#x1D5DD;</mtext></math>=<span>1D5DD</span></span>
+  <span><math class="testfont"><mtext>&#x1D5DE;</mtext></math>=<span>1D5DE</span></span>
+  <span><math class="testfont"><mtext>&#x1D5DF;</mtext></math>=<span>1D5DF</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E0;</mtext></math>=<span>1D5E0</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E1;</mtext></math>=<span>1D5E1</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E2;</mtext></math>=<span>1D5E2</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E3;</mtext></math>=<span>1D5E3</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E4;</mtext></math>=<span>1D5E4</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E5;</mtext></math>=<span>1D5E5</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5E6;</mtext></math>=<span>1D5E6</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E7;</mtext></math>=<span>1D5E7</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E8;</mtext></math>=<span>1D5E8</span></span>
+  <span><math class="testfont"><mtext>&#x1D5E9;</mtext></math>=<span>1D5E9</span></span>
+  <span><math class="testfont"><mtext>&#x1D5EA;</mtext></math>=<span>1D5EA</span></span>
+  <span><math class="testfont"><mtext>&#x1D5EB;</mtext></math>=<span>1D5EB</span></span>
+  <span><math class="testfont"><mtext>&#x1D5EC;</mtext></math>=<span>1D5EC</span></span>
+  <span><math class="testfont"><mtext>&#x1D5ED;</mtext></math>=<span>1D5ED</span></span>
+  <span><math class="testfont"><mtext>&#x1D5EE;</mtext></math>=<span>1D5EE</span></span>
+  <span><math class="testfont"><mtext>&#x1D5EF;</mtext></math>=<span>1D5EF</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5F0;</mtext></math>=<span>1D5F0</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F1;</mtext></math>=<span>1D5F1</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F2;</mtext></math>=<span>1D5F2</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F3;</mtext></math>=<span>1D5F3</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F4;</mtext></math>=<span>1D5F4</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F5;</mtext></math>=<span>1D5F5</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F6;</mtext></math>=<span>1D5F6</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F7;</mtext></math>=<span>1D5F7</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F8;</mtext></math>=<span>1D5F8</span></span>
+  <span><math class="testfont"><mtext>&#x1D5F9;</mtext></math>=<span>1D5F9</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5FA;</mtext></math>=<span>1D5FA</span></span>
+  <span><math class="testfont"><mtext>&#x1D5FB;</mtext></math>=<span>1D5FB</span></span>
+  <span><math class="testfont"><mtext>&#x1D5FC;</mtext></math>=<span>1D5FC</span></span>
+  <span><math class="testfont"><mtext>&#x1D5FD;</mtext></math>=<span>1D5FD</span></span>
+  <span><math class="testfont"><mtext>&#x1D5FE;</mtext></math>=<span>1D5FE</span></span>
+  <span><math class="testfont"><mtext>&#x1D5FF;</mtext></math>=<span>1D5FF</span></span>
+  <span><math class="testfont"><mtext>&#x1D600;</mtext></math>=<span>1D600</span></span>
+  <span><math class="testfont"><mtext>&#x1D601;</mtext></math>=<span>1D601</span></span>
+  <span><math class="testfont"><mtext>&#x1D602;</mtext></math>=<span>1D602</span></span>
+  <span><math class="testfont"><mtext>&#x1D603;</mtext></math>=<span>1D603</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D604;</mtext></math>=<span>1D604</span></span>
+  <span><math class="testfont"><mtext>&#x1D605;</mtext></math>=<span>1D605</span></span>
+  <span><math class="testfont"><mtext>&#x1D606;</mtext></math>=<span>1D606</span></span>
+  <span><math class="testfont"><mtext>&#x1D607;</mtext></math>=<span>1D607</span></span>
+  <span><math class="testfont"><mtext>&#x1D756;</mtext></math>=<span>1D756</span></span>
+  <span><math class="testfont"><mtext>&#x1D757;</mtext></math>=<span>1D757</span></span>
+  <span><math class="testfont"><mtext>&#x1D758;</mtext></math>=<span>1D758</span></span>
+  <span><math class="testfont"><mtext>&#x1D759;</mtext></math>=<span>1D759</span></span>
+  <span><math class="testfont"><mtext>&#x1D75A;</mtext></math>=<span>1D75A</span></span>
+  <span><math class="testfont"><mtext>&#x1D75B;</mtext></math>=<span>1D75B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D75C;</mtext></math>=<span>1D75C</span></span>
+  <span><math class="testfont"><mtext>&#x1D75D;</mtext></math>=<span>1D75D</span></span>
+  <span><math class="testfont"><mtext>&#x1D75E;</mtext></math>=<span>1D75E</span></span>
+  <span><math class="testfont"><mtext>&#x1D75F;</mtext></math>=<span>1D75F</span></span>
+  <span><math class="testfont"><mtext>&#x1D760;</mtext></math>=<span>1D760</span></span>
+  <span><math class="testfont"><mtext>&#x1D761;</mtext></math>=<span>1D761</span></span>
+  <span><math class="testfont"><mtext>&#x1D762;</mtext></math>=<span>1D762</span></span>
+  <span><math class="testfont"><mtext>&#x1D763;</mtext></math>=<span>1D763</span></span>
+  <span><math class="testfont"><mtext>&#x1D764;</mtext></math>=<span>1D764</span></span>
+  <span><math class="testfont"><mtext>&#x1D765;</mtext></math>=<span>1D765</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D766;</mtext></math>=<span>1D766</span></span>
+  <span><math class="testfont"><mtext>&#x1D768;</mtext></math>=<span>1D768</span></span>
+  <span><math class="testfont"><mtext>&#x1D769;</mtext></math>=<span>1D769</span></span>
+  <span><math class="testfont"><mtext>&#x1D76A;</mtext></math>=<span>1D76A</span></span>
+  <span><math class="testfont"><mtext>&#x1D76B;</mtext></math>=<span>1D76B</span></span>
+  <span><math class="testfont"><mtext>&#x1D76C;</mtext></math>=<span>1D76C</span></span>
+  <span><math class="testfont"><mtext>&#x1D76D;</mtext></math>=<span>1D76D</span></span>
+  <span><math class="testfont"><mtext>&#x1D76E;</mtext></math>=<span>1D76E</span></span>
+  <span><math class="testfont"><mtext>&#x1D770;</mtext></math>=<span>1D770</span></span>
+  <span><math class="testfont"><mtext>&#x1D771;</mtext></math>=<span>1D771</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D772;</mtext></math>=<span>1D772</span></span>
+  <span><math class="testfont"><mtext>&#x1D773;</mtext></math>=<span>1D773</span></span>
+  <span><math class="testfont"><mtext>&#x1D774;</mtext></math>=<span>1D774</span></span>
+  <span><math class="testfont"><mtext>&#x1D775;</mtext></math>=<span>1D775</span></span>
+  <span><math class="testfont"><mtext>&#x1D776;</mtext></math>=<span>1D776</span></span>
+  <span><math class="testfont"><mtext>&#x1D777;</mtext></math>=<span>1D777</span></span>
+  <span><math class="testfont"><mtext>&#x1D778;</mtext></math>=<span>1D778</span></span>
+  <span><math class="testfont"><mtext>&#x1D779;</mtext></math>=<span>1D779</span></span>
+  <span><math class="testfont"><mtext>&#x1D77A;</mtext></math>=<span>1D77A</span></span>
+  <span><math class="testfont"><mtext>&#x1D77B;</mtext></math>=<span>1D77B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D77C;</mtext></math>=<span>1D77C</span></span>
+  <span><math class="testfont"><mtext>&#x1D77D;</mtext></math>=<span>1D77D</span></span>
+  <span><math class="testfont"><mtext>&#x1D77E;</mtext></math>=<span>1D77E</span></span>
+  <span><math class="testfont"><mtext>&#x1D77F;</mtext></math>=<span>1D77F</span></span>
+  <span><math class="testfont"><mtext>&#x1D780;</mtext></math>=<span>1D780</span></span>
+  <span><math class="testfont"><mtext>&#x1D781;</mtext></math>=<span>1D781</span></span>
+  <span><math class="testfont"><mtext>&#x1D782;</mtext></math>=<span>1D782</span></span>
+  <span><math class="testfont"><mtext>&#x1D783;</mtext></math>=<span>1D783</span></span>
+  <span><math class="testfont"><mtext>&#x1D784;</mtext></math>=<span>1D784</span></span>
+  <span><math class="testfont"><mtext>&#x1D785;</mtext></math>=<span>1D785</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D786;</mtext></math>=<span>1D786</span></span>
+  <span><math class="testfont"><mtext>&#x1D787;</mtext></math>=<span>1D787</span></span>
+  <span><math class="testfont"><mtext>&#x1D788;</mtext></math>=<span>1D788</span></span>
+  <span><math class="testfont"><mtext>&#x1D78B;</mtext></math>=<span>1D78B</span></span>
+  <span><math class="testfont"><mtext>&#x1D78D;</mtext></math>=<span>1D78D</span></span>
+  <span><math class="testfont"><mtext>&#x1D78F;</mtext></math>=<span>1D78F</span></span>
+  <span><math class="testfont"><mtext>&#x1D78C;</mtext></math>=<span>1D78C</span></span>
+  <span><math class="testfont"><mtext>&#x1D78E;</mtext></math>=<span>1D78E</span></span>
+  <span><math class="testfont"><mtext>&#x1D767;</mtext></math>=<span>1D767</span></span>
+  <span><math class="testfont"><mtext>&#x1D78A;</mtext></math>=<span>1D78A</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-sans-serif.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-sans-serif.html
new file mode 100644
index 0000000000..cd7fdfaef8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-sans-serif.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-sans-serif</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#bold-sans-serif-mappings">
+<link rel="match" href="mathvariant-bold-sans-serif-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a bold-sans-serif mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-sans-serif.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x2202;</mtext></math>=<span>1D789</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x2207;</mtext></math>=<span>1D76F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x30;</mtext></math>=<span>1D7EC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x31;</mtext></math>=<span>1D7ED</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x32;</mtext></math>=<span>1D7EE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x33;</mtext></math>=<span>1D7EF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x34;</mtext></math>=<span>1D7F0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x35;</mtext></math>=<span>1D7F1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x36;</mtext></math>=<span>1D7F2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x37;</mtext></math>=<span>1D7F3</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x38;</mtext></math>=<span>1D7F4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39;</mtext></math>=<span>1D7F5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x41;</mtext></math>=<span>1D5D4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x42;</mtext></math>=<span>1D5D5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x43;</mtext></math>=<span>1D5D6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x44;</mtext></math>=<span>1D5D7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x45;</mtext></math>=<span>1D5D8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x46;</mtext></math>=<span>1D5D9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x47;</mtext></math>=<span>1D5DA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x48;</mtext></math>=<span>1D5DB</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x49;</mtext></math>=<span>1D5DC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x4A;</mtext></math>=<span>1D5DD</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x4B;</mtext></math>=<span>1D5DE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x4C;</mtext></math>=<span>1D5DF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x4D;</mtext></math>=<span>1D5E0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x4E;</mtext></math>=<span>1D5E1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x4F;</mtext></math>=<span>1D5E2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x50;</mtext></math>=<span>1D5E3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x51;</mtext></math>=<span>1D5E4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x52;</mtext></math>=<span>1D5E5</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x53;</mtext></math>=<span>1D5E6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x54;</mtext></math>=<span>1D5E7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x55;</mtext></math>=<span>1D5E8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x56;</mtext></math>=<span>1D5E9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x57;</mtext></math>=<span>1D5EA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x58;</mtext></math>=<span>1D5EB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x59;</mtext></math>=<span>1D5EC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x5A;</mtext></math>=<span>1D5ED</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x61;</mtext></math>=<span>1D5EE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x62;</mtext></math>=<span>1D5EF</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x63;</mtext></math>=<span>1D5F0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x64;</mtext></math>=<span>1D5F1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x65;</mtext></math>=<span>1D5F2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x66;</mtext></math>=<span>1D5F3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x67;</mtext></math>=<span>1D5F4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x68;</mtext></math>=<span>1D5F5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x69;</mtext></math>=<span>1D5F6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x6A;</mtext></math>=<span>1D5F7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x6B;</mtext></math>=<span>1D5F8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x6C;</mtext></math>=<span>1D5F9</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x6D;</mtext></math>=<span>1D5FA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x6E;</mtext></math>=<span>1D5FB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x6F;</mtext></math>=<span>1D5FC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x70;</mtext></math>=<span>1D5FD</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x71;</mtext></math>=<span>1D5FE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x72;</mtext></math>=<span>1D5FF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x73;</mtext></math>=<span>1D600</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x74;</mtext></math>=<span>1D601</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x75;</mtext></math>=<span>1D602</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x76;</mtext></math>=<span>1D603</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x77;</mtext></math>=<span>1D604</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x78;</mtext></math>=<span>1D605</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x79;</mtext></math>=<span>1D606</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x7A;</mtext></math>=<span>1D607</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x391;</mtext></math>=<span>1D756</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x392;</mtext></math>=<span>1D757</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x393;</mtext></math>=<span>1D758</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x394;</mtext></math>=<span>1D759</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x395;</mtext></math>=<span>1D75A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x396;</mtext></math>=<span>1D75B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x397;</mtext></math>=<span>1D75C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x398;</mtext></math>=<span>1D75D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x399;</mtext></math>=<span>1D75E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39A;</mtext></math>=<span>1D75F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39B;</mtext></math>=<span>1D760</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39C;</mtext></math>=<span>1D761</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39D;</mtext></math>=<span>1D762</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39E;</mtext></math>=<span>1D763</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x39F;</mtext></math>=<span>1D764</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A0;</mtext></math>=<span>1D765</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A1;</mtext></math>=<span>1D766</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A3;</mtext></math>=<span>1D768</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A4;</mtext></math>=<span>1D769</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A5;</mtext></math>=<span>1D76A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A6;</mtext></math>=<span>1D76B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A7;</mtext></math>=<span>1D76C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A8;</mtext></math>=<span>1D76D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3A9;</mtext></math>=<span>1D76E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B1;</mtext></math>=<span>1D770</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B2;</mtext></math>=<span>1D771</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B3;</mtext></math>=<span>1D772</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B4;</mtext></math>=<span>1D773</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B5;</mtext></math>=<span>1D774</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B6;</mtext></math>=<span>1D775</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B7;</mtext></math>=<span>1D776</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B8;</mtext></math>=<span>1D777</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3B9;</mtext></math>=<span>1D778</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3BA;</mtext></math>=<span>1D779</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3BB;</mtext></math>=<span>1D77A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3BC;</mtext></math>=<span>1D77B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3BD;</mtext></math>=<span>1D77C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3BE;</mtext></math>=<span>1D77D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3BF;</mtext></math>=<span>1D77E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C0;</mtext></math>=<span>1D77F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C1;</mtext></math>=<span>1D780</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C2;</mtext></math>=<span>1D781</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C3;</mtext></math>=<span>1D782</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C4;</mtext></math>=<span>1D783</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C5;</mtext></math>=<span>1D784</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C6;</mtext></math>=<span>1D785</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C7;</mtext></math>=<span>1D786</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C8;</mtext></math>=<span>1D787</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3C9;</mtext></math>=<span>1D788</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3D1;</mtext></math>=<span>1D78B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3D5;</mtext></math>=<span>1D78D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3D6;</mtext></math>=<span>1D78F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3F0;</mtext></math>=<span>1D78C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3F1;</mtext></math>=<span>1D78E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3F4;</mtext></math>=<span>1D767</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-sans-serif">&#x3F5;</mtext></math>=<span>1D78A</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-script-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-script-ref.html
new file mode 100644
index 0000000000..ef11f7fb8f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-script-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-script (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-script.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D4D0;</mtext></math>=<span>1D4D0</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D1;</mtext></math>=<span>1D4D1</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D2;</mtext></math>=<span>1D4D2</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D3;</mtext></math>=<span>1D4D3</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D4;</mtext></math>=<span>1D4D4</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D5;</mtext></math>=<span>1D4D5</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D6;</mtext></math>=<span>1D4D6</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D7;</mtext></math>=<span>1D4D7</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D8;</mtext></math>=<span>1D4D8</span></span>
+  <span><math class="testfont"><mtext>&#x1D4D9;</mtext></math>=<span>1D4D9</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4DA;</mtext></math>=<span>1D4DA</span></span>
+  <span><math class="testfont"><mtext>&#x1D4DB;</mtext></math>=<span>1D4DB</span></span>
+  <span><math class="testfont"><mtext>&#x1D4DC;</mtext></math>=<span>1D4DC</span></span>
+  <span><math class="testfont"><mtext>&#x1D4DD;</mtext></math>=<span>1D4DD</span></span>
+  <span><math class="testfont"><mtext>&#x1D4DE;</mtext></math>=<span>1D4DE</span></span>
+  <span><math class="testfont"><mtext>&#x1D4DF;</mtext></math>=<span>1D4DF</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E0;</mtext></math>=<span>1D4E0</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E1;</mtext></math>=<span>1D4E1</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E2;</mtext></math>=<span>1D4E2</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E3;</mtext></math>=<span>1D4E3</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4E4;</mtext></math>=<span>1D4E4</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E5;</mtext></math>=<span>1D4E5</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E6;</mtext></math>=<span>1D4E6</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E7;</mtext></math>=<span>1D4E7</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E8;</mtext></math>=<span>1D4E8</span></span>
+  <span><math class="testfont"><mtext>&#x1D4E9;</mtext></math>=<span>1D4E9</span></span>
+  <span><math class="testfont"><mtext>&#x1D4EA;</mtext></math>=<span>1D4EA</span></span>
+  <span><math class="testfont"><mtext>&#x1D4EB;</mtext></math>=<span>1D4EB</span></span>
+  <span><math class="testfont"><mtext>&#x1D4EC;</mtext></math>=<span>1D4EC</span></span>
+  <span><math class="testfont"><mtext>&#x1D4ED;</mtext></math>=<span>1D4ED</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4EE;</mtext></math>=<span>1D4EE</span></span>
+  <span><math class="testfont"><mtext>&#x1D4EF;</mtext></math>=<span>1D4EF</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F0;</mtext></math>=<span>1D4F0</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F1;</mtext></math>=<span>1D4F1</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F2;</mtext></math>=<span>1D4F2</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F3;</mtext></math>=<span>1D4F3</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F4;</mtext></math>=<span>1D4F4</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F5;</mtext></math>=<span>1D4F5</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F6;</mtext></math>=<span>1D4F6</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F7;</mtext></math>=<span>1D4F7</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4F8;</mtext></math>=<span>1D4F8</span></span>
+  <span><math class="testfont"><mtext>&#x1D4F9;</mtext></math>=<span>1D4F9</span></span>
+  <span><math class="testfont"><mtext>&#x1D4FA;</mtext></math>=<span>1D4FA</span></span>
+  <span><math class="testfont"><mtext>&#x1D4FB;</mtext></math>=<span>1D4FB</span></span>
+  <span><math class="testfont"><mtext>&#x1D4FC;</mtext></math>=<span>1D4FC</span></span>
+  <span><math class="testfont"><mtext>&#x1D4FD;</mtext></math>=<span>1D4FD</span></span>
+  <span><math class="testfont"><mtext>&#x1D4FE;</mtext></math>=<span>1D4FE</span></span>
+  <span><math class="testfont"><mtext>&#x1D4FF;</mtext></math>=<span>1D4FF</span></span>
+  <span><math class="testfont"><mtext>&#x1D500;</mtext></math>=<span>1D500</span></span>
+  <span><math class="testfont"><mtext>&#x1D501;</mtext></math>=<span>1D501</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D502;</mtext></math>=<span>1D502</span></span>
+  <span><math class="testfont"><mtext>&#x1D503;</mtext></math>=<span>1D503</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-script.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-script.html
new file mode 100644
index 0000000000..0e775949f9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold-script.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold-script</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#bold-script-mappings">
+<link rel="match" href="mathvariant-bold-script-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a bold-script mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold-script.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x41;</mtext></math>=<span>1D4D0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x42;</mtext></math>=<span>1D4D1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x43;</mtext></math>=<span>1D4D2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x44;</mtext></math>=<span>1D4D3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x45;</mtext></math>=<span>1D4D4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x46;</mtext></math>=<span>1D4D5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x47;</mtext></math>=<span>1D4D6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x48;</mtext></math>=<span>1D4D7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x49;</mtext></math>=<span>1D4D8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x4A;</mtext></math>=<span>1D4D9</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x4B;</mtext></math>=<span>1D4DA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x4C;</mtext></math>=<span>1D4DB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x4D;</mtext></math>=<span>1D4DC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x4E;</mtext></math>=<span>1D4DD</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x4F;</mtext></math>=<span>1D4DE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x50;</mtext></math>=<span>1D4DF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x51;</mtext></math>=<span>1D4E0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x52;</mtext></math>=<span>1D4E1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x53;</mtext></math>=<span>1D4E2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x54;</mtext></math>=<span>1D4E3</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x55;</mtext></math>=<span>1D4E4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x56;</mtext></math>=<span>1D4E5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x57;</mtext></math>=<span>1D4E6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x58;</mtext></math>=<span>1D4E7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x59;</mtext></math>=<span>1D4E8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x5A;</mtext></math>=<span>1D4E9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x61;</mtext></math>=<span>1D4EA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x62;</mtext></math>=<span>1D4EB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x63;</mtext></math>=<span>1D4EC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x64;</mtext></math>=<span>1D4ED</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x65;</mtext></math>=<span>1D4EE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x66;</mtext></math>=<span>1D4EF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x67;</mtext></math>=<span>1D4F0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x68;</mtext></math>=<span>1D4F1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x69;</mtext></math>=<span>1D4F2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x6A;</mtext></math>=<span>1D4F3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x6B;</mtext></math>=<span>1D4F4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x6C;</mtext></math>=<span>1D4F5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x6D;</mtext></math>=<span>1D4F6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x6E;</mtext></math>=<span>1D4F7</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x6F;</mtext></math>=<span>1D4F8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x70;</mtext></math>=<span>1D4F9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x71;</mtext></math>=<span>1D4FA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x72;</mtext></math>=<span>1D4FB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x73;</mtext></math>=<span>1D4FC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x74;</mtext></math>=<span>1D4FD</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x75;</mtext></math>=<span>1D4FE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x76;</mtext></math>=<span>1D4FF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x77;</mtext></math>=<span>1D500</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x78;</mtext></math>=<span>1D501</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x79;</mtext></math>=<span>1D502</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold-script">&#x7A;</mtext></math>=<span>1D503</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold.html
new file mode 100644
index 0000000000..513eac7f87
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-bold.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant bold</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#bold-mappings">
+<link rel="match" href="mathvariant-bold-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a bold mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-bold.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x2202;</mtext></math>=<span>1D6DB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x2207;</mtext></math>=<span>1D6C1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x30;</mtext></math>=<span>1D7CE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x31;</mtext></math>=<span>1D7CF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x32;</mtext></math>=<span>1D7D0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x33;</mtext></math>=<span>1D7D1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x34;</mtext></math>=<span>1D7D2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x35;</mtext></math>=<span>1D7D3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x36;</mtext></math>=<span>1D7D4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x37;</mtext></math>=<span>1D7D5</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x38;</mtext></math>=<span>1D7D6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39;</mtext></math>=<span>1D7D7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x41;</mtext></math>=<span>1D400</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x42;</mtext></math>=<span>1D401</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x43;</mtext></math>=<span>1D402</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x44;</mtext></math>=<span>1D403</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x45;</mtext></math>=<span>1D404</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x46;</mtext></math>=<span>1D405</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x47;</mtext></math>=<span>1D406</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x48;</mtext></math>=<span>1D407</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x49;</mtext></math>=<span>1D408</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x4A;</mtext></math>=<span>1D409</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x4B;</mtext></math>=<span>1D40A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x4C;</mtext></math>=<span>1D40B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x4D;</mtext></math>=<span>1D40C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x4E;</mtext></math>=<span>1D40D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x4F;</mtext></math>=<span>1D40E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x50;</mtext></math>=<span>1D40F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x51;</mtext></math>=<span>1D410</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x52;</mtext></math>=<span>1D411</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x53;</mtext></math>=<span>1D412</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x54;</mtext></math>=<span>1D413</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x55;</mtext></math>=<span>1D414</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x56;</mtext></math>=<span>1D415</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x57;</mtext></math>=<span>1D416</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x58;</mtext></math>=<span>1D417</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x59;</mtext></math>=<span>1D418</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x5A;</mtext></math>=<span>1D419</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x61;</mtext></math>=<span>1D41A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x62;</mtext></math>=<span>1D41B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x63;</mtext></math>=<span>1D41C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x64;</mtext></math>=<span>1D41D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x65;</mtext></math>=<span>1D41E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x66;</mtext></math>=<span>1D41F</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x67;</mtext></math>=<span>1D420</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x68;</mtext></math>=<span>1D421</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x69;</mtext></math>=<span>1D422</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x6A;</mtext></math>=<span>1D423</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x6B;</mtext></math>=<span>1D424</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x6C;</mtext></math>=<span>1D425</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x6D;</mtext></math>=<span>1D426</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x6E;</mtext></math>=<span>1D427</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x6F;</mtext></math>=<span>1D428</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x70;</mtext></math>=<span>1D429</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x71;</mtext></math>=<span>1D42A</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x72;</mtext></math>=<span>1D42B</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x73;</mtext></math>=<span>1D42C</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x74;</mtext></math>=<span>1D42D</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x75;</mtext></math>=<span>1D42E</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x76;</mtext></math>=<span>1D42F</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x77;</mtext></math>=<span>1D430</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x78;</mtext></math>=<span>1D431</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x79;</mtext></math>=<span>1D432</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x7A;</mtext></math>=<span>1D433</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x391;</mtext></math>=<span>1D6A8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x392;</mtext></math>=<span>1D6A9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x393;</mtext></math>=<span>1D6AA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x394;</mtext></math>=<span>1D6AB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x395;</mtext></math>=<span>1D6AC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x396;</mtext></math>=<span>1D6AD</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x397;</mtext></math>=<span>1D6AE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x398;</mtext></math>=<span>1D6AF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x399;</mtext></math>=<span>1D6B0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39A;</mtext></math>=<span>1D6B1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39B;</mtext></math>=<span>1D6B2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39C;</mtext></math>=<span>1D6B3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39D;</mtext></math>=<span>1D6B4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39E;</mtext></math>=<span>1D6B5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x39F;</mtext></math>=<span>1D6B6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A0;</mtext></math>=<span>1D6B7</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A1;</mtext></math>=<span>1D6B8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A3;</mtext></math>=<span>1D6BA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A4;</mtext></math>=<span>1D6BB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A5;</mtext></math>=<span>1D6BC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A6;</mtext></math>=<span>1D6BD</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A7;</mtext></math>=<span>1D6BE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A8;</mtext></math>=<span>1D6BF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3A9;</mtext></math>=<span>1D6C0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B1;</mtext></math>=<span>1D6C2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B2;</mtext></math>=<span>1D6C3</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B3;</mtext></math>=<span>1D6C4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B4;</mtext></math>=<span>1D6C5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B5;</mtext></math>=<span>1D6C6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B6;</mtext></math>=<span>1D6C7</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B7;</mtext></math>=<span>1D6C8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B8;</mtext></math>=<span>1D6C9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3B9;</mtext></math>=<span>1D6CA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3BA;</mtext></math>=<span>1D6CB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3BB;</mtext></math>=<span>1D6CC</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3BC;</mtext></math>=<span>1D6CD</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3BD;</mtext></math>=<span>1D6CE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3BE;</mtext></math>=<span>1D6CF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3BF;</mtext></math>=<span>1D6D0</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C0;</mtext></math>=<span>1D6D1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C1;</mtext></math>=<span>1D6D2</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C2;</mtext></math>=<span>1D6D3</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C3;</mtext></math>=<span>1D6D4</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C4;</mtext></math>=<span>1D6D5</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C5;</mtext></math>=<span>1D6D6</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C6;</mtext></math>=<span>1D6D7</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C7;</mtext></math>=<span>1D6D8</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C8;</mtext></math>=<span>1D6D9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3C9;</mtext></math>=<span>1D6DA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3D1;</mtext></math>=<span>1D6DD</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3D5;</mtext></math>=<span>1D6DF</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3D6;</mtext></math>=<span>1D6E1</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3DC;</mtext></math>=<span>1D7CA</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3DD;</mtext></math>=<span>1D7CB</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3F0;</mtext></math>=<span>1D6DE</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3F1;</mtext></math>=<span>1D6E0</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3F4;</mtext></math>=<span>1D6B9</span></span>
+  <span><math class="testfont"><mtext mathvariant="bold">&#x3F5;</mtext></math>=<span>1D6DC</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity-ref.html
new file mode 100644
index 0000000000..28d9acc1f4
--- /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>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-case-sensitivity.html
new file mode 100644
index 0000000000..21c8300a7a
--- /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://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.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>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight-ref.html
new file mode 100644
index 0000000000..817723a62d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathvariant="double-struck" and font-style/font-weight (reference)</title>
+    <style>
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/mathvariant-double-struck.woff");
+      }
+      .testfont {
+        font-family: TestFont;
+        font-size: 32px;
+      }
+      .italic { font-style: italic; }
+      .bold { font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see three lines with text <span class="testfont">&#x1EEA1;</span> respectively rendered with italic, bold and bold-italic style:</p>
+    <p><math class="testfont"><mtext class="italic">&#x1EEA1;</mtext></math></p>
+    <p><math class="testfont"><mtext class="bold">&#x1EEA1;</mtext></math></p>
+    <p><math class="testfont"><mtext class="bold italic">&#x1EEA1;</mtext></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight.html
new file mode 100644
index 0000000000..2e283e1d70
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathvariant="double-struck" and font-style/font-weight</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1789081">
+    <link rel="match" href="mathvariant-double-struck-font-style-font-weight-ref.html"/>
+    <meta name="assert" content="Verify that mathvariant='double-struck' don't reset the font-style/font-weight properties.">
+    <style>
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/mathvariant-double-struck.woff");
+      }
+      .testfont {
+        font-family: TestFont;
+        font-size: 32px;
+      }
+      .italic { font-style: italic; }
+      .bold { font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see three lines with text <span class="testfont">&#x1EEA1;</span> respectively rendered with italic, bold and bold-italic style:</p>
+    <p><math class="testfont"><mtext mathvariant="double-struck" class="italic">&#x628;</mtext></math></p>
+    <p><math class="testfont"><mtext mathvariant="double-struck" class="bold">&#x628;</mtext></math></p>
+    <p><math class="testfont"><mtext mathvariant="double-struck" class="bold italic">&#x628;</mtext></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-ref.html
new file mode 100644
index 0000000000..686aa492e0
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant double-struck (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1EEA1;</mtext></math>=<span>1EEA1</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB5;</mtext></math>=<span>1EEB5</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB6;</mtext></math>=<span>1EEB6</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA2;</mtext></math>=<span>1EEA2</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA7;</mtext></math>=<span>1EEA7</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB7;</mtext></math>=<span>1EEB7</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA3;</mtext></math>=<span>1EEA3</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB8;</mtext></math>=<span>1EEB8</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB3;</mtext></math>=<span>1EEB3</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA6;</mtext></math>=<span>1EEA6</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7DB;</mtext></math>=<span>1D7DB</span></span>
+  <span><math class="testfont"><mtext>&#x1D7DC;</mtext></math>=<span>1D7DC</span></span>
+  <span><math class="testfont"><mtext>&#x1D7DD;</mtext></math>=<span>1D7DD</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB9;</mtext></math>=<span>1EEB9</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA8;</mtext></math>=<span>1EEA8</span></span>
+  <span><math class="testfont"><mtext>&#x1EEBA;</mtext></math>=<span>1EEBA</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E1;</mtext></math>=<span>1D7E1</span></span>
+  <span><math class="testfont"><mtext>&#x1EEBB;</mtext></math>=<span>1EEBB</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB0;</mtext></math>=<span>1EEB0</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB2;</mtext></math>=<span>1EEB2</span></span><br/>
+  <span><math class="testfont"><mtext>&#x2102;</mtext></math>=<span>02102</span></span>
+  <span><math class="testfont"><mtext>&#x1EEAB;</mtext></math>=<span>1EEAB</span></span>
+  <span><math class="testfont"><mtext>&#x1EEAC;</mtext></math>=<span>1EEAC</span></span>
+  <span><math class="testfont"><mtext>&#x1EEAD;</mtext></math>=<span>1EEAD</span></span>
+  <span><math class="testfont"><mtext>&#x1D53E;</mtext></math>=<span>1D53E</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA5;</mtext></math>=<span>1EEA5</span></span>
+  <span><math class="testfont"><mtext>&#x1D540;</mtext></math>=<span>1D540</span></span>
+  <span><math class="testfont"><mtext>&#x1EEA9;</mtext></math>=<span>1EEA9</span></span>
+  <span><math class="testfont"><mtext>&#x1D542;</mtext></math>=<span>1D542</span></span>
+  <span><math class="testfont"><mtext>&#x1D543;</mtext></math>=<span>1D543</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D544;</mtext></math>=<span>1D544</span></span>
+  <span><math class="testfont"><mtext>&#x2115;</mtext></math>=<span>02115</span></span>
+  <span><math class="testfont"><mtext>&#x1D546;</mtext></math>=<span>1D546</span></span>
+  <span><math class="testfont"><mtext>&#x2119;</mtext></math>=<span>02119</span></span>
+  <span><math class="testfont"><mtext>&#x211A;</mtext></math>=<span>0211A</span></span>
+  <span><math class="testfont"><mtext>&#x211D;</mtext></math>=<span>0211D</span></span>
+  <span><math class="testfont"><mtext>&#x1D54A;</mtext></math>=<span>1D54A</span></span>
+  <span><math class="testfont"><mtext>&#x1D54B;</mtext></math>=<span>1D54B</span></span>
+  <span><math class="testfont"><mtext>&#x1D54C;</mtext></math>=<span>1D54C</span></span>
+  <span><math class="testfont"><mtext>&#x1D54D;</mtext></math>=<span>1D54D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D54E;</mtext></math>=<span>1D54E</span></span>
+  <span><math class="testfont"><mtext>&#x1D54F;</mtext></math>=<span>1D54F</span></span>
+  <span><math class="testfont"><mtext>&#x1D550;</mtext></math>=<span>1D550</span></span>
+  <span><math class="testfont"><mtext>&#x2124;</mtext></math>=<span>02124</span></span>
+  <span><math class="testfont"><mtext>&#x1D552;</mtext></math>=<span>1D552</span></span>
+  <span><math class="testfont"><mtext>&#x1D553;</mtext></math>=<span>1D553</span></span>
+  <span><math class="testfont"><mtext>&#x1D554;</mtext></math>=<span>1D554</span></span>
+  <span><math class="testfont"><mtext>&#x1D555;</mtext></math>=<span>1D555</span></span>
+  <span><math class="testfont"><mtext>&#x1D556;</mtext></math>=<span>1D556</span></span>
+  <span><math class="testfont"><mtext>&#x1D557;</mtext></math>=<span>1D557</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D558;</mtext></math>=<span>1D558</span></span>
+  <span><math class="testfont"><mtext>&#x1D559;</mtext></math>=<span>1D559</span></span>
+  <span><math class="testfont"><mtext>&#x1D55A;</mtext></math>=<span>1D55A</span></span>
+  <span><math class="testfont"><mtext>&#x1D55B;</mtext></math>=<span>1D55B</span></span>
+  <span><math class="testfont"><mtext>&#x1D55C;</mtext></math>=<span>1D55C</span></span>
+  <span><math class="testfont"><mtext>&#x1D55D;</mtext></math>=<span>1D55D</span></span>
+  <span><math class="testfont"><mtext>&#x1D55E;</mtext></math>=<span>1D55E</span></span>
+  <span><math class="testfont"><mtext>&#x1D55F;</mtext></math>=<span>1D55F</span></span>
+  <span><math class="testfont"><mtext>&#x1D560;</mtext></math>=<span>1D560</span></span>
+  <span><math class="testfont"><mtext>&#x1D561;</mtext></math>=<span>1D561</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D562;</mtext></math>=<span>1D562</span></span>
+  <span><math class="testfont"><mtext>&#x1D563;</mtext></math>=<span>1D563</span></span>
+  <span><math class="testfont"><mtext>&#x1D564;</mtext></math>=<span>1D564</span></span>
+  <span><math class="testfont"><mtext>&#x1D565;</mtext></math>=<span>1D565</span></span>
+  <span><math class="testfont"><mtext>&#x1D566;</mtext></math>=<span>1D566</span></span>
+  <span><math class="testfont"><mtext>&#x1D567;</mtext></math>=<span>1D567</span></span>
+  <span><math class="testfont"><mtext>&#x1D568;</mtext></math>=<span>1D568</span></span>
+  <span><math class="testfont"><mtext>&#x1D569;</mtext></math>=<span>1D569</span></span>
+  <span><math class="testfont"><mtext>&#x1D56A;</mtext></math>=<span>1D56A</span></span>
+  <span><math class="testfont"><mtext>&#x1D56B;</mtext></math>=<span>1D56B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7D8;</mtext></math>=<span>1D7D8</span></span>
+  <span><math class="testfont"><mtext>&#x1D7D9;</mtext></math>=<span>1D7D9</span></span>
+  <span><math class="testfont"><mtext>&#x1D7DA;</mtext></math>=<span>1D7DA</span></span>
+  <span><math class="testfont"><mtext>&#x1EEAE;</mtext></math>=<span>1EEAE</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB4;</mtext></math>=<span>1EEB4</span></span>
+  <span><math class="testfont"><mtext>&#x1EEB1;</mtext></math>=<span>1EEB1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7DE;</mtext></math>=<span>1D7DE</span></span>
+  <span><math class="testfont"><mtext>&#x1D7DF;</mtext></math>=<span>1D7DF</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E0;</mtext></math>=<span>1D7E0</span></span>
+  <span><math class="testfont"><mtext>&#x1EEAF;</mtext></math>=<span>1EEAF</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D538;</mtext></math>=<span>1D538</span></span>
+  <span><math class="testfont"><mtext>&#x1D539;</mtext></math>=<span>1D539</span></span>
+  <span><math class="testfont"><mtext>&#x1D53B;</mtext></math>=<span>1D53B</span></span>
+  <span><math class="testfont"><mtext>&#x1D53C;</mtext></math>=<span>1D53C</span></span>
+  <span><math class="testfont"><mtext>&#x1D53D;</mtext></math>=<span>1D53D</span></span>
+  <span><math class="testfont"><mtext>&#x210D;</mtext></math>=<span>0210D</span></span>
+  <span><math class="testfont"><mtext>&#x1D541;</mtext></math>=<span>1D541</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck.html
new file mode 100644
index 0000000000..8592c2136a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-double-struck.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant double-struck</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings">
+<link rel="match" href="mathvariant-double-struck-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a double-struck mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x628;</mtext></math>=<span>1EEA1</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62A;</mtext></math>=<span>1EEB5</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62B;</mtext></math>=<span>1EEB6</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62C;</mtext></math>=<span>1EEA2</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62D;</mtext></math>=<span>1EEA7</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62E;</mtext></math>=<span>1EEB7</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62F;</mtext></math>=<span>1EEA3</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x630;</mtext></math>=<span>1EEB8</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x631;</mtext></math>=<span>1EEB3</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x632;</mtext></math>=<span>1EEA6</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x33;</mtext></math>=<span>1D7DB</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x34;</mtext></math>=<span>1D7DC</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x35;</mtext></math>=<span>1D7DD</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x636;</mtext></math>=<span>1EEB9</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x637;</mtext></math>=<span>1EEA8</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x638;</mtext></math>=<span>1EEBA</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x39;</mtext></math>=<span>1D7E1</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x63A;</mtext></math>=<span>1EEBB</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x641;</mtext></math>=<span>1EEB0</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x642;</mtext></math>=<span>1EEB2</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x43;</mtext></math>=<span>02102</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x644;</mtext></math>=<span>1EEAB</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x645;</mtext></math>=<span>1EEAC</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x646;</mtext></math>=<span>1EEAD</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x47;</mtext></math>=<span>1D53E</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x648;</mtext></math>=<span>1EEA5</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x49;</mtext></math>=<span>1D540</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x64A;</mtext></math>=<span>1EEA9</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x4B;</mtext></math>=<span>1D542</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x4C;</mtext></math>=<span>1D543</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x4D;</mtext></math>=<span>1D544</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x4E;</mtext></math>=<span>02115</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x4F;</mtext></math>=<span>1D546</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x50;</mtext></math>=<span>02119</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x51;</mtext></math>=<span>0211A</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x52;</mtext></math>=<span>0211D</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x53;</mtext></math>=<span>1D54A</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x54;</mtext></math>=<span>1D54B</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x55;</mtext></math>=<span>1D54C</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x56;</mtext></math>=<span>1D54D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x57;</mtext></math>=<span>1D54E</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x58;</mtext></math>=<span>1D54F</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x59;</mtext></math>=<span>1D550</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x5A;</mtext></math>=<span>02124</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x61;</mtext></math>=<span>1D552</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x62;</mtext></math>=<span>1D553</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x63;</mtext></math>=<span>1D554</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x64;</mtext></math>=<span>1D555</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x65;</mtext></math>=<span>1D556</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x66;</mtext></math>=<span>1D557</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x67;</mtext></math>=<span>1D558</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x68;</mtext></math>=<span>1D559</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x69;</mtext></math>=<span>1D55A</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x6A;</mtext></math>=<span>1D55B</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x6B;</mtext></math>=<span>1D55C</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x6C;</mtext></math>=<span>1D55D</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x6D;</mtext></math>=<span>1D55E</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x6E;</mtext></math>=<span>1D55F</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x6F;</mtext></math>=<span>1D560</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x70;</mtext></math>=<span>1D561</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x71;</mtext></math>=<span>1D562</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x72;</mtext></math>=<span>1D563</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x73;</mtext></math>=<span>1D564</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x74;</mtext></math>=<span>1D565</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x75;</mtext></math>=<span>1D566</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x76;</mtext></math>=<span>1D567</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x77;</mtext></math>=<span>1D568</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x78;</mtext></math>=<span>1D569</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x79;</mtext></math>=<span>1D56A</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x7A;</mtext></math>=<span>1D56B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x30;</mtext></math>=<span>1D7D8</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x31;</mtext></math>=<span>1D7D9</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x32;</mtext></math>=<span>1D7DA</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x633;</mtext></math>=<span>1EEAE</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x634;</mtext></math>=<span>1EEB4</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x635;</mtext></math>=<span>1EEB1</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x36;</mtext></math>=<span>1D7DE</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x37;</mtext></math>=<span>1D7DF</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x38;</mtext></math>=<span>1D7E0</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x639;</mtext></math>=<span>1EEAF</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x41;</mtext></math>=<span>1D538</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x42;</mtext></math>=<span>1D539</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x44;</mtext></math>=<span>1D53B</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x45;</mtext></math>=<span>1D53C</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x46;</mtext></math>=<span>1D53D</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x48;</mtext></math>=<span>0210D</span></span>
+  <span><math class="testfont"><mtext mathvariant="double-struck">&#x4A;</mtext></math>=<span>1D541</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html
new file mode 100644
index 0000000000..c3e586f4dd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathvariant attribute and font-style/font-weight (reference)</title>
+    <style>
+      .italic { font-style: italic; }
+      .bold { font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see six lines of text (italic, italic, bold, bold, bold italic and bold italic) with the corresponding style applied:</p>
+    <p>
+      <math>
+        <mtext class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html
new file mode 100644
index 0000000000..793c687b09
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>mathvariant attribute and font-style/font-weight</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1788645">
+    <link rel="match" href="mathvariant-font-style-font-weight-ref.html"/>
+    <meta name="assert" content="Verify that a mathvariant attribute does not cancel the effect of font-style/font-weight.">
+    <style>
+      .italic { font-style: italic; }
+      .bold { font-weight: bold; }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if you see six lines of text (italic, italic, bold, bold, bold italic and bold italic) with the corresponding style applied:</p>
+    <p>
+      <math mathvariant="normal">
+        <mtext class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext mathvariant="normal" class="italic">italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math mathvariant="normal">
+        <mtext class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext mathvariant="normal" class="bold">bold</mtext>
+      </math>
+    </p>
+    <p>
+      <math mathvariant="normal">
+        <mtext class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mtext mathvariant="normal" class="bold italic">bold italic</mtext>
+      </math>
+    </p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-fraktur-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-fraktur-ref.html
new file mode 100644
index 0000000000..3d1dd50a7d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-fraktur-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant fraktur (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-fraktur.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D504;</mtext></math>=<span>1D504</span></span>
+  <span><math class="testfont"><mtext>&#x1D505;</mtext></math>=<span>1D505</span></span>
+  <span><math class="testfont"><mtext>&#x212D;</mtext></math>=<span>0212D</span></span>
+  <span><math class="testfont"><mtext>&#x1D507;</mtext></math>=<span>1D507</span></span>
+  <span><math class="testfont"><mtext>&#x1D508;</mtext></math>=<span>1D508</span></span>
+  <span><math class="testfont"><mtext>&#x1D509;</mtext></math>=<span>1D509</span></span>
+  <span><math class="testfont"><mtext>&#x1D50A;</mtext></math>=<span>1D50A</span></span>
+  <span><math class="testfont"><mtext>&#x210C;</mtext></math>=<span>0210C</span></span>
+  <span><math class="testfont"><mtext>&#x2111;</mtext></math>=<span>02111</span></span>
+  <span><math class="testfont"><mtext>&#x1D50D;</mtext></math>=<span>1D50D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D50E;</mtext></math>=<span>1D50E</span></span>
+  <span><math class="testfont"><mtext>&#x1D50F;</mtext></math>=<span>1D50F</span></span>
+  <span><math class="testfont"><mtext>&#x1D510;</mtext></math>=<span>1D510</span></span>
+  <span><math class="testfont"><mtext>&#x1D511;</mtext></math>=<span>1D511</span></span>
+  <span><math class="testfont"><mtext>&#x1D512;</mtext></math>=<span>1D512</span></span>
+  <span><math class="testfont"><mtext>&#x1D513;</mtext></math>=<span>1D513</span></span>
+  <span><math class="testfont"><mtext>&#x1D514;</mtext></math>=<span>1D514</span></span>
+  <span><math class="testfont"><mtext>&#x211C;</mtext></math>=<span>0211C</span></span>
+  <span><math class="testfont"><mtext>&#x1D516;</mtext></math>=<span>1D516</span></span>
+  <span><math class="testfont"><mtext>&#x1D517;</mtext></math>=<span>1D517</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D518;</mtext></math>=<span>1D518</span></span>
+  <span><math class="testfont"><mtext>&#x1D519;</mtext></math>=<span>1D519</span></span>
+  <span><math class="testfont"><mtext>&#x1D51A;</mtext></math>=<span>1D51A</span></span>
+  <span><math class="testfont"><mtext>&#x1D51B;</mtext></math>=<span>1D51B</span></span>
+  <span><math class="testfont"><mtext>&#x1D51C;</mtext></math>=<span>1D51C</span></span>
+  <span><math class="testfont"><mtext>&#x2128;</mtext></math>=<span>02128</span></span>
+  <span><math class="testfont"><mtext>&#x1D51E;</mtext></math>=<span>1D51E</span></span>
+  <span><math class="testfont"><mtext>&#x1D51F;</mtext></math>=<span>1D51F</span></span>
+  <span><math class="testfont"><mtext>&#x1D520;</mtext></math>=<span>1D520</span></span>
+  <span><math class="testfont"><mtext>&#x1D521;</mtext></math>=<span>1D521</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D522;</mtext></math>=<span>1D522</span></span>
+  <span><math class="testfont"><mtext>&#x1D523;</mtext></math>=<span>1D523</span></span>
+  <span><math class="testfont"><mtext>&#x1D524;</mtext></math>=<span>1D524</span></span>
+  <span><math class="testfont"><mtext>&#x1D525;</mtext></math>=<span>1D525</span></span>
+  <span><math class="testfont"><mtext>&#x1D526;</mtext></math>=<span>1D526</span></span>
+  <span><math class="testfont"><mtext>&#x1D527;</mtext></math>=<span>1D527</span></span>
+  <span><math class="testfont"><mtext>&#x1D528;</mtext></math>=<span>1D528</span></span>
+  <span><math class="testfont"><mtext>&#x1D529;</mtext></math>=<span>1D529</span></span>
+  <span><math class="testfont"><mtext>&#x1D52A;</mtext></math>=<span>1D52A</span></span>
+  <span><math class="testfont"><mtext>&#x1D52B;</mtext></math>=<span>1D52B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D52C;</mtext></math>=<span>1D52C</span></span>
+  <span><math class="testfont"><mtext>&#x1D52D;</mtext></math>=<span>1D52D</span></span>
+  <span><math class="testfont"><mtext>&#x1D52E;</mtext></math>=<span>1D52E</span></span>
+  <span><math class="testfont"><mtext>&#x1D52F;</mtext></math>=<span>1D52F</span></span>
+  <span><math class="testfont"><mtext>&#x1D530;</mtext></math>=<span>1D530</span></span>
+  <span><math class="testfont"><mtext>&#x1D531;</mtext></math>=<span>1D531</span></span>
+  <span><math class="testfont"><mtext>&#x1D532;</mtext></math>=<span>1D532</span></span>
+  <span><math class="testfont"><mtext>&#x1D533;</mtext></math>=<span>1D533</span></span>
+  <span><math class="testfont"><mtext>&#x1D534;</mtext></math>=<span>1D534</span></span>
+  <span><math class="testfont"><mtext>&#x1D535;</mtext></math>=<span>1D535</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D536;</mtext></math>=<span>1D536</span></span>
+  <span><math class="testfont"><mtext>&#x1D537;</mtext></math>=<span>1D537</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-fraktur.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-fraktur.html
new file mode 100644
index 0000000000..9c95cd06e7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-fraktur.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant fraktur</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraktur-mappings">
+<link rel="match" href="mathvariant-fraktur-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a fraktur mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-fraktur.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x41;</mtext></math>=<span>1D504</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x42;</mtext></math>=<span>1D505</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x43;</mtext></math>=<span>0212D</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x44;</mtext></math>=<span>1D507</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x45;</mtext></math>=<span>1D508</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x46;</mtext></math>=<span>1D509</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x47;</mtext></math>=<span>1D50A</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x48;</mtext></math>=<span>0210C</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x49;</mtext></math>=<span>02111</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x4A;</mtext></math>=<span>1D50D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x4B;</mtext></math>=<span>1D50E</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x4C;</mtext></math>=<span>1D50F</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x4D;</mtext></math>=<span>1D510</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x4E;</mtext></math>=<span>1D511</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x4F;</mtext></math>=<span>1D512</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x50;</mtext></math>=<span>1D513</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x51;</mtext></math>=<span>1D514</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x52;</mtext></math>=<span>0211C</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x53;</mtext></math>=<span>1D516</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x54;</mtext></math>=<span>1D517</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x55;</mtext></math>=<span>1D518</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x56;</mtext></math>=<span>1D519</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x57;</mtext></math>=<span>1D51A</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x58;</mtext></math>=<span>1D51B</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x59;</mtext></math>=<span>1D51C</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x5A;</mtext></math>=<span>02128</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x61;</mtext></math>=<span>1D51E</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x62;</mtext></math>=<span>1D51F</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x63;</mtext></math>=<span>1D520</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x64;</mtext></math>=<span>1D521</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x65;</mtext></math>=<span>1D522</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x66;</mtext></math>=<span>1D523</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x67;</mtext></math>=<span>1D524</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x68;</mtext></math>=<span>1D525</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x69;</mtext></math>=<span>1D526</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x6A;</mtext></math>=<span>1D527</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x6B;</mtext></math>=<span>1D528</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x6C;</mtext></math>=<span>1D529</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x6D;</mtext></math>=<span>1D52A</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x6E;</mtext></math>=<span>1D52B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x6F;</mtext></math>=<span>1D52C</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x70;</mtext></math>=<span>1D52D</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x71;</mtext></math>=<span>1D52E</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x72;</mtext></math>=<span>1D52F</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x73;</mtext></math>=<span>1D530</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x74;</mtext></math>=<span>1D531</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x75;</mtext></math>=<span>1D532</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x76;</mtext></math>=<span>1D533</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x77;</mtext></math>=<span>1D534</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x78;</mtext></math>=<span>1D535</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x79;</mtext></math>=<span>1D536</span></span>
+  <span><math class="testfont"><mtext mathvariant="fraktur">&#x7A;</mtext></math>=<span>1D537</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-initial-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-initial-ref.html
new file mode 100644
index 0000000000..597277aaec
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-initial-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant initial (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-initial.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1EE30;</mtext></math>=<span>1EE30</span></span>
+  <span><math class="testfont"><mtext>&#x1EE32;</mtext></math>=<span>1EE32</span></span>
+  <span><math class="testfont"><mtext>&#x1EE2A;</mtext></math>=<span>1EE2A</span></span>
+  <span><math class="testfont"><mtext>&#x1EE2B;</mtext></math>=<span>1EE2B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE2C;</mtext></math>=<span>1EE2C</span></span>
+  <span><math class="testfont"><mtext>&#x1EE2D;</mtext></math>=<span>1EE2D</span></span>
+  <span><math class="testfont"><mtext>&#x1EE24;</mtext></math>=<span>1EE24</span></span>
+  <span><math class="testfont"><mtext>&#x1EE21;</mtext></math>=<span>1EE21</span></span>
+  <span><math class="testfont"><mtext>&#x1EE29;</mtext></math>=<span>1EE29</span></span>
+  <span><math class="testfont"><mtext>&#x1EE36;</mtext></math>=<span>1EE36</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1EE22;</mtext></math>=<span>1EE22</span></span>
+  <span><math class="testfont"><mtext>&#x1EE27;</mtext></math>=<span>1EE27</span></span>
+  <span><math class="testfont"><mtext>&#x1EE37;</mtext></math>=<span>1EE37</span></span>
+  <span><math class="testfont"><mtext>&#x1EE2E;</mtext></math>=<span>1EE2E</span></span>
+  <span><math class="testfont"><mtext>&#x1EE34;</mtext></math>=<span>1EE34</span></span>
+  <span><math class="testfont"><mtext>&#x1EE31;</mtext></math>=<span>1EE31</span></span>
+  <span><math class="testfont"><mtext>&#x1EE39;</mtext></math>=<span>1EE39</span></span>
+  <span><math class="testfont"><mtext>&#x1EE2F;</mtext></math>=<span>1EE2F</span></span>
+  <span><math class="testfont"><mtext>&#x1EE3B;</mtext></math>=<span>1EE3B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE35;</mtext></math>=<span>1EE35</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-initial.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-initial.html
new file mode 100644
index 0000000000..5f54a5cf88
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-initial.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant initial</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#initial-mappings">
+<link rel="match" href="mathvariant-initial-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a initial mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-initial.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x641;</mtext></math>=<span>1EE30</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x642;</mtext></math>=<span>1EE32</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x643;</mtext></math>=<span>1EE2A</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x644;</mtext></math>=<span>1EE2B</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x645;</mtext></math>=<span>1EE2C</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x646;</mtext></math>=<span>1EE2D</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x647;</mtext></math>=<span>1EE24</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x628;</mtext></math>=<span>1EE21</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x64A;</mtext></math>=<span>1EE29</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x62B;</mtext></math>=<span>1EE36</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x62C;</mtext></math>=<span>1EE22</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x62D;</mtext></math>=<span>1EE27</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x62E;</mtext></math>=<span>1EE37</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x633;</mtext></math>=<span>1EE2E</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x634;</mtext></math>=<span>1EE34</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x635;</mtext></math>=<span>1EE31</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x636;</mtext></math>=<span>1EE39</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x639;</mtext></math>=<span>1EE2F</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x63A;</mtext></math>=<span>1EE3B</span></span>
+  <span><math class="testfont"><mtext mathvariant="initial">&#x62A;</mtext></math>=<span>1EE35</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-italic-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-italic-ref.html
new file mode 100644
index 0000000000..f503794efb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-italic-ref.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant italic (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D715;</mtext></math>=<span>1D715</span></span>
+  <span><math class="testfont"><mtext>&#x1D6FB;</mtext></math>=<span>1D6FB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A5;</mtext></math>=<span>1D6A5</span></span>
+  <span><math class="testfont"><mtext>&#x1D434;</mtext></math>=<span>1D434</span></span>
+  <span><math class="testfont"><mtext>&#x1D435;</mtext></math>=<span>1D435</span></span>
+  <span><math class="testfont"><mtext>&#x1D436;</mtext></math>=<span>1D436</span></span>
+  <span><math class="testfont"><mtext>&#x1D437;</mtext></math>=<span>1D437</span></span>
+  <span><math class="testfont"><mtext>&#x1D438;</mtext></math>=<span>1D438</span></span>
+  <span><math class="testfont"><mtext>&#x1D439;</mtext></math>=<span>1D439</span></span>
+  <span><math class="testfont"><mtext>&#x1D43A;</mtext></math>=<span>1D43A</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D43B;</mtext></math>=<span>1D43B</span></span>
+  <span><math class="testfont"><mtext>&#x1D43C;</mtext></math>=<span>1D43C</span></span>
+  <span><math class="testfont"><mtext>&#x1D43D;</mtext></math>=<span>1D43D</span></span>
+  <span><math class="testfont"><mtext>&#x1D43E;</mtext></math>=<span>1D43E</span></span>
+  <span><math class="testfont"><mtext>&#x1D43F;</mtext></math>=<span>1D43F</span></span>
+  <span><math class="testfont"><mtext>&#x1D440;</mtext></math>=<span>1D440</span></span>
+  <span><math class="testfont"><mtext>&#x1D441;</mtext></math>=<span>1D441</span></span>
+  <span><math class="testfont"><mtext>&#x1D442;</mtext></math>=<span>1D442</span></span>
+  <span><math class="testfont"><mtext>&#x1D443;</mtext></math>=<span>1D443</span></span>
+  <span><math class="testfont"><mtext>&#x1D444;</mtext></math>=<span>1D444</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D445;</mtext></math>=<span>1D445</span></span>
+  <span><math class="testfont"><mtext>&#x1D446;</mtext></math>=<span>1D446</span></span>
+  <span><math class="testfont"><mtext>&#x1D447;</mtext></math>=<span>1D447</span></span>
+  <span><math class="testfont"><mtext>&#x1D448;</mtext></math>=<span>1D448</span></span>
+  <span><math class="testfont"><mtext>&#x1D449;</mtext></math>=<span>1D449</span></span>
+  <span><math class="testfont"><mtext>&#x1D44A;</mtext></math>=<span>1D44A</span></span>
+  <span><math class="testfont"><mtext>&#x1D44B;</mtext></math>=<span>1D44B</span></span>
+  <span><math class="testfont"><mtext>&#x1D44C;</mtext></math>=<span>1D44C</span></span>
+  <span><math class="testfont"><mtext>&#x1D44D;</mtext></math>=<span>1D44D</span></span>
+  <span><math class="testfont"><mtext>&#x1D44E;</mtext></math>=<span>1D44E</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D44F;</mtext></math>=<span>1D44F</span></span>
+  <span><math class="testfont"><mtext>&#x1D450;</mtext></math>=<span>1D450</span></span>
+  <span><math class="testfont"><mtext>&#x1D451;</mtext></math>=<span>1D451</span></span>
+  <span><math class="testfont"><mtext>&#x1D452;</mtext></math>=<span>1D452</span></span>
+  <span><math class="testfont"><mtext>&#x1D453;</mtext></math>=<span>1D453</span></span>
+  <span><math class="testfont"><mtext>&#x1D454;</mtext></math>=<span>1D454</span></span>
+  <span><math class="testfont"><mtext>&#x210E;</mtext></math>=<span>0210E</span></span>
+  <span><math class="testfont"><mtext>&#x1D456;</mtext></math>=<span>1D456</span></span>
+  <span><math class="testfont"><mtext>&#x1D457;</mtext></math>=<span>1D457</span></span>
+  <span><math class="testfont"><mtext>&#x1D458;</mtext></math>=<span>1D458</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D459;</mtext></math>=<span>1D459</span></span>
+  <span><math class="testfont"><mtext>&#x1D45A;</mtext></math>=<span>1D45A</span></span>
+  <span><math class="testfont"><mtext>&#x1D45B;</mtext></math>=<span>1D45B</span></span>
+  <span><math class="testfont"><mtext>&#x1D45C;</mtext></math>=<span>1D45C</span></span>
+  <span><math class="testfont"><mtext>&#x1D45D;</mtext></math>=<span>1D45D</span></span>
+  <span><math class="testfont"><mtext>&#x1D45E;</mtext></math>=<span>1D45E</span></span>
+  <span><math class="testfont"><mtext>&#x1D45F;</mtext></math>=<span>1D45F</span></span>
+  <span><math class="testfont"><mtext>&#x1D460;</mtext></math>=<span>1D460</span></span>
+  <span><math class="testfont"><mtext>&#x1D461;</mtext></math>=<span>1D461</span></span>
+  <span><math class="testfont"><mtext>&#x1D462;</mtext></math>=<span>1D462</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D463;</mtext></math>=<span>1D463</span></span>
+  <span><math class="testfont"><mtext>&#x1D464;</mtext></math>=<span>1D464</span></span>
+  <span><math class="testfont"><mtext>&#x1D465;</mtext></math>=<span>1D465</span></span>
+  <span><math class="testfont"><mtext>&#x1D466;</mtext></math>=<span>1D466</span></span>
+  <span><math class="testfont"><mtext>&#x1D467;</mtext></math>=<span>1D467</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A4;</mtext></math>=<span>1D6A4</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E2;</mtext></math>=<span>1D6E2</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E3;</mtext></math>=<span>1D6E3</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E4;</mtext></math>=<span>1D6E4</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E5;</mtext></math>=<span>1D6E5</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6E6;</mtext></math>=<span>1D6E6</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E7;</mtext></math>=<span>1D6E7</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E8;</mtext></math>=<span>1D6E8</span></span>
+  <span><math class="testfont"><mtext>&#x1D6E9;</mtext></math>=<span>1D6E9</span></span>
+  <span><math class="testfont"><mtext>&#x1D6EA;</mtext></math>=<span>1D6EA</span></span>
+  <span><math class="testfont"><mtext>&#x1D6EB;</mtext></math>=<span>1D6EB</span></span>
+  <span><math class="testfont"><mtext>&#x1D6EC;</mtext></math>=<span>1D6EC</span></span>
+  <span><math class="testfont"><mtext>&#x1D6ED;</mtext></math>=<span>1D6ED</span></span>
+  <span><math class="testfont"><mtext>&#x1D6EE;</mtext></math>=<span>1D6EE</span></span>
+  <span><math class="testfont"><mtext>&#x1D6EF;</mtext></math>=<span>1D6EF</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6F0;</mtext></math>=<span>1D6F0</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F1;</mtext></math>=<span>1D6F1</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F2;</mtext></math>=<span>1D6F2</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F4;</mtext></math>=<span>1D6F4</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F5;</mtext></math>=<span>1D6F5</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F6;</mtext></math>=<span>1D6F6</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F7;</mtext></math>=<span>1D6F7</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F8;</mtext></math>=<span>1D6F8</span></span>
+  <span><math class="testfont"><mtext>&#x1D6F9;</mtext></math>=<span>1D6F9</span></span>
+  <span><math class="testfont"><mtext>&#x1D6FA;</mtext></math>=<span>1D6FA</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6FC;</mtext></math>=<span>1D6FC</span></span>
+  <span><math class="testfont"><mtext>&#x1D6FD;</mtext></math>=<span>1D6FD</span></span>
+  <span><math class="testfont"><mtext>&#x1D6FE;</mtext></math>=<span>1D6FE</span></span>
+  <span><math class="testfont"><mtext>&#x1D6FF;</mtext></math>=<span>1D6FF</span></span>
+  <span><math class="testfont"><mtext>&#x1D700;</mtext></math>=<span>1D700</span></span>
+  <span><math class="testfont"><mtext>&#x1D701;</mtext></math>=<span>1D701</span></span>
+  <span><math class="testfont"><mtext>&#x1D702;</mtext></math>=<span>1D702</span></span>
+  <span><math class="testfont"><mtext>&#x1D703;</mtext></math>=<span>1D703</span></span>
+  <span><math class="testfont"><mtext>&#x1D704;</mtext></math>=<span>1D704</span></span>
+  <span><math class="testfont"><mtext>&#x1D705;</mtext></math>=<span>1D705</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D706;</mtext></math>=<span>1D706</span></span>
+  <span><math class="testfont"><mtext>&#x1D707;</mtext></math>=<span>1D707</span></span>
+  <span><math class="testfont"><mtext>&#x1D708;</mtext></math>=<span>1D708</span></span>
+  <span><math class="testfont"><mtext>&#x1D709;</mtext></math>=<span>1D709</span></span>
+  <span><math class="testfont"><mtext>&#x1D70A;</mtext></math>=<span>1D70A</span></span>
+  <span><math class="testfont"><mtext>&#x1D70B;</mtext></math>=<span>1D70B</span></span>
+  <span><math class="testfont"><mtext>&#x1D70C;</mtext></math>=<span>1D70C</span></span>
+  <span><math class="testfont"><mtext>&#x1D70D;</mtext></math>=<span>1D70D</span></span>
+  <span><math class="testfont"><mtext>&#x1D70E;</mtext></math>=<span>1D70E</span></span>
+  <span><math class="testfont"><mtext>&#x1D70F;</mtext></math>=<span>1D70F</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D710;</mtext></math>=<span>1D710</span></span>
+  <span><math class="testfont"><mtext>&#x1D711;</mtext></math>=<span>1D711</span></span>
+  <span><math class="testfont"><mtext>&#x1D712;</mtext></math>=<span>1D712</span></span>
+  <span><math class="testfont"><mtext>&#x1D713;</mtext></math>=<span>1D713</span></span>
+  <span><math class="testfont"><mtext>&#x1D714;</mtext></math>=<span>1D714</span></span>
+  <span><math class="testfont"><mtext>&#x1D717;</mtext></math>=<span>1D717</span></span>
+  <span><math class="testfont"><mtext>&#x1D719;</mtext></math>=<span>1D719</span></span>
+  <span><math class="testfont"><mtext>&#x1D71B;</mtext></math>=<span>1D71B</span></span>
+  <span><math class="testfont"><mtext>&#x1D718;</mtext></math>=<span>1D718</span></span>
+  <span><math class="testfont"><mtext>&#x1D71A;</mtext></math>=<span>1D71A</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6F3;</mtext></math>=<span>1D6F3</span></span>
+  <span><math class="testfont"><mtext>&#x1D716;</mtext></math>=<span>1D716</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-italic.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-italic.html
new file mode 100644
index 0000000000..f22f23f82b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-italic.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant italic</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
+<link rel="match" href="mathvariant-italic-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a italic mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x2202;</mtext></math>=<span>1D715</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x2207;</mtext></math>=<span>1D6FB</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x237;</mtext></math>=<span>1D6A5</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x41;</mtext></math>=<span>1D434</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x42;</mtext></math>=<span>1D435</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x43;</mtext></math>=<span>1D436</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x44;</mtext></math>=<span>1D437</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x45;</mtext></math>=<span>1D438</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x46;</mtext></math>=<span>1D439</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x47;</mtext></math>=<span>1D43A</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x48;</mtext></math>=<span>1D43B</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x49;</mtext></math>=<span>1D43C</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x4A;</mtext></math>=<span>1D43D</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x4B;</mtext></math>=<span>1D43E</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x4C;</mtext></math>=<span>1D43F</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x4D;</mtext></math>=<span>1D440</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x4E;</mtext></math>=<span>1D441</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x4F;</mtext></math>=<span>1D442</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x50;</mtext></math>=<span>1D443</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x51;</mtext></math>=<span>1D444</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x52;</mtext></math>=<span>1D445</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x53;</mtext></math>=<span>1D446</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x54;</mtext></math>=<span>1D447</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x55;</mtext></math>=<span>1D448</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x56;</mtext></math>=<span>1D449</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x57;</mtext></math>=<span>1D44A</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x58;</mtext></math>=<span>1D44B</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x59;</mtext></math>=<span>1D44C</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x5A;</mtext></math>=<span>1D44D</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x61;</mtext></math>=<span>1D44E</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x62;</mtext></math>=<span>1D44F</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x63;</mtext></math>=<span>1D450</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x64;</mtext></math>=<span>1D451</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x65;</mtext></math>=<span>1D452</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x66;</mtext></math>=<span>1D453</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x67;</mtext></math>=<span>1D454</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x68;</mtext></math>=<span>0210E</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x69;</mtext></math>=<span>1D456</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x6A;</mtext></math>=<span>1D457</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x6B;</mtext></math>=<span>1D458</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x6C;</mtext></math>=<span>1D459</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x6D;</mtext></math>=<span>1D45A</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x6E;</mtext></math>=<span>1D45B</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x6F;</mtext></math>=<span>1D45C</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x70;</mtext></math>=<span>1D45D</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x71;</mtext></math>=<span>1D45E</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x72;</mtext></math>=<span>1D45F</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x73;</mtext></math>=<span>1D460</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x74;</mtext></math>=<span>1D461</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x75;</mtext></math>=<span>1D462</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x76;</mtext></math>=<span>1D463</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x77;</mtext></math>=<span>1D464</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x78;</mtext></math>=<span>1D465</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x79;</mtext></math>=<span>1D466</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x7A;</mtext></math>=<span>1D467</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x131;</mtext></math>=<span>1D6A4</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x391;</mtext></math>=<span>1D6E2</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x392;</mtext></math>=<span>1D6E3</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x393;</mtext></math>=<span>1D6E4</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x394;</mtext></math>=<span>1D6E5</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x395;</mtext></math>=<span>1D6E6</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x396;</mtext></math>=<span>1D6E7</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x397;</mtext></math>=<span>1D6E8</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x398;</mtext></math>=<span>1D6E9</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x399;</mtext></math>=<span>1D6EA</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x39A;</mtext></math>=<span>1D6EB</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x39B;</mtext></math>=<span>1D6EC</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x39C;</mtext></math>=<span>1D6ED</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x39D;</mtext></math>=<span>1D6EE</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x39E;</mtext></math>=<span>1D6EF</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x39F;</mtext></math>=<span>1D6F0</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A0;</mtext></math>=<span>1D6F1</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A1;</mtext></math>=<span>1D6F2</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A3;</mtext></math>=<span>1D6F4</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A4;</mtext></math>=<span>1D6F5</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A5;</mtext></math>=<span>1D6F6</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A6;</mtext></math>=<span>1D6F7</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A7;</mtext></math>=<span>1D6F8</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A8;</mtext></math>=<span>1D6F9</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3A9;</mtext></math>=<span>1D6FA</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B1;</mtext></math>=<span>1D6FC</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B2;</mtext></math>=<span>1D6FD</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B3;</mtext></math>=<span>1D6FE</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B4;</mtext></math>=<span>1D6FF</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B5;</mtext></math>=<span>1D700</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B6;</mtext></math>=<span>1D701</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B7;</mtext></math>=<span>1D702</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B8;</mtext></math>=<span>1D703</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3B9;</mtext></math>=<span>1D704</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3BA;</mtext></math>=<span>1D705</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3BB;</mtext></math>=<span>1D706</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3BC;</mtext></math>=<span>1D707</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3BD;</mtext></math>=<span>1D708</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3BE;</mtext></math>=<span>1D709</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3BF;</mtext></math>=<span>1D70A</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C0;</mtext></math>=<span>1D70B</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C1;</mtext></math>=<span>1D70C</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C2;</mtext></math>=<span>1D70D</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C3;</mtext></math>=<span>1D70E</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C4;</mtext></math>=<span>1D70F</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C5;</mtext></math>=<span>1D710</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C6;</mtext></math>=<span>1D711</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C7;</mtext></math>=<span>1D712</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C8;</mtext></math>=<span>1D713</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3C9;</mtext></math>=<span>1D714</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3D1;</mtext></math>=<span>1D717</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3D5;</mtext></math>=<span>1D719</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3D6;</mtext></math>=<span>1D71B</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3F0;</mtext></math>=<span>1D718</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3F1;</mtext></math>=<span>1D71A</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3F4;</mtext></math>=<span>1D6F3</span></span>
+  <span><math class="testfont"><mtext mathvariant="italic">&#x3F5;</mtext></math>=<span>1D716</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-looped-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-looped-ref.html
new file mode 100644
index 0000000000..12ccb490a1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-looped-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant looped (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-looped.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1EE80;</mtext></math>=<span>1EE80</span></span>
+  <span><math class="testfont"><mtext>&#x1EE81;</mtext></math>=<span>1EE81</span></span>
+  <span><math class="testfont"><mtext>&#x1EE95;</mtext></math>=<span>1EE95</span></span>
+  <span><math class="testfont"><mtext>&#x1EE96;</mtext></math>=<span>1EE96</span></span>
+  <span><math class="testfont"><mtext>&#x1EE82;</mtext></math>=<span>1EE82</span></span>
+  <span><math class="testfont"><mtext>&#x1EE87;</mtext></math>=<span>1EE87</span></span>
+  <span><math class="testfont"><mtext>&#x1EE97;</mtext></math>=<span>1EE97</span></span>
+  <span><math class="testfont"><mtext>&#x1EE83;</mtext></math>=<span>1EE83</span></span>
+  <span><math class="testfont"><mtext>&#x1EE98;</mtext></math>=<span>1EE98</span></span>
+  <span><math class="testfont"><mtext>&#x1EE93;</mtext></math>=<span>1EE93</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1EE86;</mtext></math>=<span>1EE86</span></span>
+  <span><math class="testfont"><mtext>&#x1EE8E;</mtext></math>=<span>1EE8E</span></span>
+  <span><math class="testfont"><mtext>&#x1EE94;</mtext></math>=<span>1EE94</span></span>
+  <span><math class="testfont"><mtext>&#x1EE91;</mtext></math>=<span>1EE91</span></span>
+  <span><math class="testfont"><mtext>&#x1EE99;</mtext></math>=<span>1EE99</span></span>
+  <span><math class="testfont"><mtext>&#x1EE88;</mtext></math>=<span>1EE88</span></span>
+  <span><math class="testfont"><mtext>&#x1EE9A;</mtext></math>=<span>1EE9A</span></span>
+  <span><math class="testfont"><mtext>&#x1EE8F;</mtext></math>=<span>1EE8F</span></span>
+  <span><math class="testfont"><mtext>&#x1EE9B;</mtext></math>=<span>1EE9B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE90;</mtext></math>=<span>1EE90</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1EE92;</mtext></math>=<span>1EE92</span></span>
+  <span><math class="testfont"><mtext>&#x1EE8B;</mtext></math>=<span>1EE8B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE8C;</mtext></math>=<span>1EE8C</span></span>
+  <span><math class="testfont"><mtext>&#x1EE8D;</mtext></math>=<span>1EE8D</span></span>
+  <span><math class="testfont"><mtext>&#x1EE84;</mtext></math>=<span>1EE84</span></span>
+  <span><math class="testfont"><mtext>&#x1EE85;</mtext></math>=<span>1EE85</span></span>
+  <span><math class="testfont"><mtext>&#x1EE89;</mtext></math>=<span>1EE89</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-looped.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-looped.html
new file mode 100644
index 0000000000..1e9b4f1e21
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-looped.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant looped</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#looped-mappings">
+<link rel="match" href="mathvariant-looped-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a looped mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-looped.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x627;</mtext></math>=<span>1EE80</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x628;</mtext></math>=<span>1EE81</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x62A;</mtext></math>=<span>1EE95</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x62B;</mtext></math>=<span>1EE96</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x62C;</mtext></math>=<span>1EE82</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x62D;</mtext></math>=<span>1EE87</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x62E;</mtext></math>=<span>1EE97</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x62F;</mtext></math>=<span>1EE83</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x630;</mtext></math>=<span>1EE98</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x631;</mtext></math>=<span>1EE93</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x632;</mtext></math>=<span>1EE86</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x633;</mtext></math>=<span>1EE8E</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x634;</mtext></math>=<span>1EE94</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x635;</mtext></math>=<span>1EE91</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x636;</mtext></math>=<span>1EE99</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x637;</mtext></math>=<span>1EE88</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x638;</mtext></math>=<span>1EE9A</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x639;</mtext></math>=<span>1EE8F</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x63A;</mtext></math>=<span>1EE9B</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x641;</mtext></math>=<span>1EE90</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x642;</mtext></math>=<span>1EE92</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x644;</mtext></math>=<span>1EE8B</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x645;</mtext></math>=<span>1EE8C</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x646;</mtext></math>=<span>1EE8D</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x647;</mtext></math>=<span>1EE84</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x648;</mtext></math>=<span>1EE85</span></span>
+  <span><math class="testfont"><mtext mathvariant="looped">&#x64A;</mtext></math>=<span>1EE89</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-monospace-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-monospace-ref.html
new file mode 100644
index 0000000000..bfa672afe5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-monospace-ref.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant monospace (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-monospace.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D7F6;</mtext></math>=<span>1D7F6</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F7;</mtext></math>=<span>1D7F7</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F8;</mtext></math>=<span>1D7F8</span></span>
+  <span><math class="testfont"><mtext>&#x1D7F9;</mtext></math>=<span>1D7F9</span></span>
+  <span><math class="testfont"><mtext>&#x1D7FA;</mtext></math>=<span>1D7FA</span></span>
+  <span><math class="testfont"><mtext>&#x1D7FB;</mtext></math>=<span>1D7FB</span></span>
+  <span><math class="testfont"><mtext>&#x1D7FC;</mtext></math>=<span>1D7FC</span></span>
+  <span><math class="testfont"><mtext>&#x1D7FD;</mtext></math>=<span>1D7FD</span></span>
+  <span><math class="testfont"><mtext>&#x1D7FE;</mtext></math>=<span>1D7FE</span></span>
+  <span><math class="testfont"><mtext>&#x1D7FF;</mtext></math>=<span>1D7FF</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D670;</mtext></math>=<span>1D670</span></span>
+  <span><math class="testfont"><mtext>&#x1D671;</mtext></math>=<span>1D671</span></span>
+  <span><math class="testfont"><mtext>&#x1D672;</mtext></math>=<span>1D672</span></span>
+  <span><math class="testfont"><mtext>&#x1D673;</mtext></math>=<span>1D673</span></span>
+  <span><math class="testfont"><mtext>&#x1D674;</mtext></math>=<span>1D674</span></span>
+  <span><math class="testfont"><mtext>&#x1D675;</mtext></math>=<span>1D675</span></span>
+  <span><math class="testfont"><mtext>&#x1D676;</mtext></math>=<span>1D676</span></span>
+  <span><math class="testfont"><mtext>&#x1D677;</mtext></math>=<span>1D677</span></span>
+  <span><math class="testfont"><mtext>&#x1D678;</mtext></math>=<span>1D678</span></span>
+  <span><math class="testfont"><mtext>&#x1D679;</mtext></math>=<span>1D679</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D67A;</mtext></math>=<span>1D67A</span></span>
+  <span><math class="testfont"><mtext>&#x1D67B;</mtext></math>=<span>1D67B</span></span>
+  <span><math class="testfont"><mtext>&#x1D67C;</mtext></math>=<span>1D67C</span></span>
+  <span><math class="testfont"><mtext>&#x1D67D;</mtext></math>=<span>1D67D</span></span>
+  <span><math class="testfont"><mtext>&#x1D67E;</mtext></math>=<span>1D67E</span></span>
+  <span><math class="testfont"><mtext>&#x1D67F;</mtext></math>=<span>1D67F</span></span>
+  <span><math class="testfont"><mtext>&#x1D680;</mtext></math>=<span>1D680</span></span>
+  <span><math class="testfont"><mtext>&#x1D681;</mtext></math>=<span>1D681</span></span>
+  <span><math class="testfont"><mtext>&#x1D682;</mtext></math>=<span>1D682</span></span>
+  <span><math class="testfont"><mtext>&#x1D683;</mtext></math>=<span>1D683</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D684;</mtext></math>=<span>1D684</span></span>
+  <span><math class="testfont"><mtext>&#x1D685;</mtext></math>=<span>1D685</span></span>
+  <span><math class="testfont"><mtext>&#x1D686;</mtext></math>=<span>1D686</span></span>
+  <span><math class="testfont"><mtext>&#x1D687;</mtext></math>=<span>1D687</span></span>
+  <span><math class="testfont"><mtext>&#x1D688;</mtext></math>=<span>1D688</span></span>
+  <span><math class="testfont"><mtext>&#x1D689;</mtext></math>=<span>1D689</span></span>
+  <span><math class="testfont"><mtext>&#x1D68A;</mtext></math>=<span>1D68A</span></span>
+  <span><math class="testfont"><mtext>&#x1D68B;</mtext></math>=<span>1D68B</span></span>
+  <span><math class="testfont"><mtext>&#x1D68C;</mtext></math>=<span>1D68C</span></span>
+  <span><math class="testfont"><mtext>&#x1D68D;</mtext></math>=<span>1D68D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D68E;</mtext></math>=<span>1D68E</span></span>
+  <span><math class="testfont"><mtext>&#x1D68F;</mtext></math>=<span>1D68F</span></span>
+  <span><math class="testfont"><mtext>&#x1D690;</mtext></math>=<span>1D690</span></span>
+  <span><math class="testfont"><mtext>&#x1D691;</mtext></math>=<span>1D691</span></span>
+  <span><math class="testfont"><mtext>&#x1D692;</mtext></math>=<span>1D692</span></span>
+  <span><math class="testfont"><mtext>&#x1D693;</mtext></math>=<span>1D693</span></span>
+  <span><math class="testfont"><mtext>&#x1D694;</mtext></math>=<span>1D694</span></span>
+  <span><math class="testfont"><mtext>&#x1D695;</mtext></math>=<span>1D695</span></span>
+  <span><math class="testfont"><mtext>&#x1D696;</mtext></math>=<span>1D696</span></span>
+  <span><math class="testfont"><mtext>&#x1D697;</mtext></math>=<span>1D697</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D698;</mtext></math>=<span>1D698</span></span>
+  <span><math class="testfont"><mtext>&#x1D699;</mtext></math>=<span>1D699</span></span>
+  <span><math class="testfont"><mtext>&#x1D69A;</mtext></math>=<span>1D69A</span></span>
+  <span><math class="testfont"><mtext>&#x1D69B;</mtext></math>=<span>1D69B</span></span>
+  <span><math class="testfont"><mtext>&#x1D69C;</mtext></math>=<span>1D69C</span></span>
+  <span><math class="testfont"><mtext>&#x1D69D;</mtext></math>=<span>1D69D</span></span>
+  <span><math class="testfont"><mtext>&#x1D69E;</mtext></math>=<span>1D69E</span></span>
+  <span><math class="testfont"><mtext>&#x1D69F;</mtext></math>=<span>1D69F</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A0;</mtext></math>=<span>1D6A0</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A1;</mtext></math>=<span>1D6A1</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D6A2;</mtext></math>=<span>1D6A2</span></span>
+  <span><math class="testfont"><mtext>&#x1D6A3;</mtext></math>=<span>1D6A3</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-monospace.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-monospace.html
new file mode 100644
index 0000000000..a1a5c2d3c3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-monospace.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant monospace</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#monospace-mappings">
+<link rel="match" href="mathvariant-monospace-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a monospace mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-monospace.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x30;</mtext></math>=<span>1D7F6</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x31;</mtext></math>=<span>1D7F7</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x32;</mtext></math>=<span>1D7F8</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x33;</mtext></math>=<span>1D7F9</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x34;</mtext></math>=<span>1D7FA</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x35;</mtext></math>=<span>1D7FB</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x36;</mtext></math>=<span>1D7FC</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x37;</mtext></math>=<span>1D7FD</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x38;</mtext></math>=<span>1D7FE</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x39;</mtext></math>=<span>1D7FF</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x41;</mtext></math>=<span>1D670</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x42;</mtext></math>=<span>1D671</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x43;</mtext></math>=<span>1D672</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x44;</mtext></math>=<span>1D673</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x45;</mtext></math>=<span>1D674</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x46;</mtext></math>=<span>1D675</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x47;</mtext></math>=<span>1D676</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x48;</mtext></math>=<span>1D677</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x49;</mtext></math>=<span>1D678</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x4A;</mtext></math>=<span>1D679</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x4B;</mtext></math>=<span>1D67A</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x4C;</mtext></math>=<span>1D67B</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x4D;</mtext></math>=<span>1D67C</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x4E;</mtext></math>=<span>1D67D</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x4F;</mtext></math>=<span>1D67E</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x50;</mtext></math>=<span>1D67F</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x51;</mtext></math>=<span>1D680</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x52;</mtext></math>=<span>1D681</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x53;</mtext></math>=<span>1D682</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x54;</mtext></math>=<span>1D683</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x55;</mtext></math>=<span>1D684</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x56;</mtext></math>=<span>1D685</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x57;</mtext></math>=<span>1D686</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x58;</mtext></math>=<span>1D687</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x59;</mtext></math>=<span>1D688</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x5A;</mtext></math>=<span>1D689</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x61;</mtext></math>=<span>1D68A</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x62;</mtext></math>=<span>1D68B</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x63;</mtext></math>=<span>1D68C</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x64;</mtext></math>=<span>1D68D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x65;</mtext></math>=<span>1D68E</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x66;</mtext></math>=<span>1D68F</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x67;</mtext></math>=<span>1D690</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x68;</mtext></math>=<span>1D691</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x69;</mtext></math>=<span>1D692</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x6A;</mtext></math>=<span>1D693</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x6B;</mtext></math>=<span>1D694</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x6C;</mtext></math>=<span>1D695</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x6D;</mtext></math>=<span>1D696</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x6E;</mtext></math>=<span>1D697</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x6F;</mtext></math>=<span>1D698</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x70;</mtext></math>=<span>1D699</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x71;</mtext></math>=<span>1D69A</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x72;</mtext></math>=<span>1D69B</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x73;</mtext></math>=<span>1D69C</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x74;</mtext></math>=<span>1D69D</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x75;</mtext></math>=<span>1D69E</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x76;</mtext></math>=<span>1D69F</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x77;</mtext></math>=<span>1D6A0</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x78;</mtext></math>=<span>1D6A1</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x79;</mtext></math>=<span>1D6A2</span></span>
+  <span><math class="testfont"><mtext mathvariant="monospace">&#x7A;</mtext></math>=<span>1D6A3</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-bold-italic-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-bold-italic-ref.html
new file mode 100644
index 0000000000..2b992affe5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-bold-italic-ref.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant sans-serif-bold-italic (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-sans-serif-bold-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D7C3;</mtext></math>=<span>1D7C3</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A9;</mtext></math>=<span>1D7A9</span></span>
+  <span><math class="testfont"><mtext>&#x1D63C;</mtext></math>=<span>1D63C</span></span>
+  <span><math class="testfont"><mtext>&#x1D63D;</mtext></math>=<span>1D63D</span></span>
+  <span><math class="testfont"><mtext>&#x1D63E;</mtext></math>=<span>1D63E</span></span>
+  <span><math class="testfont"><mtext>&#x1D63F;</mtext></math>=<span>1D63F</span></span>
+  <span><math class="testfont"><mtext>&#x1D640;</mtext></math>=<span>1D640</span></span>
+  <span><math class="testfont"><mtext>&#x1D641;</mtext></math>=<span>1D641</span></span>
+  <span><math class="testfont"><mtext>&#x1D642;</mtext></math>=<span>1D642</span></span>
+  <span><math class="testfont"><mtext>&#x1D643;</mtext></math>=<span>1D643</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D644;</mtext></math>=<span>1D644</span></span>
+  <span><math class="testfont"><mtext>&#x1D645;</mtext></math>=<span>1D645</span></span>
+  <span><math class="testfont"><mtext>&#x1D646;</mtext></math>=<span>1D646</span></span>
+  <span><math class="testfont"><mtext>&#x1D647;</mtext></math>=<span>1D647</span></span>
+  <span><math class="testfont"><mtext>&#x1D648;</mtext></math>=<span>1D648</span></span>
+  <span><math class="testfont"><mtext>&#x1D649;</mtext></math>=<span>1D649</span></span>
+  <span><math class="testfont"><mtext>&#x1D64A;</mtext></math>=<span>1D64A</span></span>
+  <span><math class="testfont"><mtext>&#x1D64B;</mtext></math>=<span>1D64B</span></span>
+  <span><math class="testfont"><mtext>&#x1D64C;</mtext></math>=<span>1D64C</span></span>
+  <span><math class="testfont"><mtext>&#x1D64D;</mtext></math>=<span>1D64D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D64E;</mtext></math>=<span>1D64E</span></span>
+  <span><math class="testfont"><mtext>&#x1D64F;</mtext></math>=<span>1D64F</span></span>
+  <span><math class="testfont"><mtext>&#x1D650;</mtext></math>=<span>1D650</span></span>
+  <span><math class="testfont"><mtext>&#x1D651;</mtext></math>=<span>1D651</span></span>
+  <span><math class="testfont"><mtext>&#x1D652;</mtext></math>=<span>1D652</span></span>
+  <span><math class="testfont"><mtext>&#x1D653;</mtext></math>=<span>1D653</span></span>
+  <span><math class="testfont"><mtext>&#x1D654;</mtext></math>=<span>1D654</span></span>
+  <span><math class="testfont"><mtext>&#x1D655;</mtext></math>=<span>1D655</span></span>
+  <span><math class="testfont"><mtext>&#x1D656;</mtext></math>=<span>1D656</span></span>
+  <span><math class="testfont"><mtext>&#x1D657;</mtext></math>=<span>1D657</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D658;</mtext></math>=<span>1D658</span></span>
+  <span><math class="testfont"><mtext>&#x1D659;</mtext></math>=<span>1D659</span></span>
+  <span><math class="testfont"><mtext>&#x1D65A;</mtext></math>=<span>1D65A</span></span>
+  <span><math class="testfont"><mtext>&#x1D65B;</mtext></math>=<span>1D65B</span></span>
+  <span><math class="testfont"><mtext>&#x1D65C;</mtext></math>=<span>1D65C</span></span>
+  <span><math class="testfont"><mtext>&#x1D65D;</mtext></math>=<span>1D65D</span></span>
+  <span><math class="testfont"><mtext>&#x1D65E;</mtext></math>=<span>1D65E</span></span>
+  <span><math class="testfont"><mtext>&#x1D65F;</mtext></math>=<span>1D65F</span></span>
+  <span><math class="testfont"><mtext>&#x1D660;</mtext></math>=<span>1D660</span></span>
+  <span><math class="testfont"><mtext>&#x1D661;</mtext></math>=<span>1D661</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D662;</mtext></math>=<span>1D662</span></span>
+  <span><math class="testfont"><mtext>&#x1D663;</mtext></math>=<span>1D663</span></span>
+  <span><math class="testfont"><mtext>&#x1D664;</mtext></math>=<span>1D664</span></span>
+  <span><math class="testfont"><mtext>&#x1D665;</mtext></math>=<span>1D665</span></span>
+  <span><math class="testfont"><mtext>&#x1D666;</mtext></math>=<span>1D666</span></span>
+  <span><math class="testfont"><mtext>&#x1D667;</mtext></math>=<span>1D667</span></span>
+  <span><math class="testfont"><mtext>&#x1D668;</mtext></math>=<span>1D668</span></span>
+  <span><math class="testfont"><mtext>&#x1D669;</mtext></math>=<span>1D669</span></span>
+  <span><math class="testfont"><mtext>&#x1D66A;</mtext></math>=<span>1D66A</span></span>
+  <span><math class="testfont"><mtext>&#x1D66B;</mtext></math>=<span>1D66B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D66C;</mtext></math>=<span>1D66C</span></span>
+  <span><math class="testfont"><mtext>&#x1D66D;</mtext></math>=<span>1D66D</span></span>
+  <span><math class="testfont"><mtext>&#x1D66E;</mtext></math>=<span>1D66E</span></span>
+  <span><math class="testfont"><mtext>&#x1D66F;</mtext></math>=<span>1D66F</span></span>
+  <span><math class="testfont"><mtext>&#x1D790;</mtext></math>=<span>1D790</span></span>
+  <span><math class="testfont"><mtext>&#x1D791;</mtext></math>=<span>1D791</span></span>
+  <span><math class="testfont"><mtext>&#x1D792;</mtext></math>=<span>1D792</span></span>
+  <span><math class="testfont"><mtext>&#x1D793;</mtext></math>=<span>1D793</span></span>
+  <span><math class="testfont"><mtext>&#x1D794;</mtext></math>=<span>1D794</span></span>
+  <span><math class="testfont"><mtext>&#x1D795;</mtext></math>=<span>1D795</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D796;</mtext></math>=<span>1D796</span></span>
+  <span><math class="testfont"><mtext>&#x1D797;</mtext></math>=<span>1D797</span></span>
+  <span><math class="testfont"><mtext>&#x1D798;</mtext></math>=<span>1D798</span></span>
+  <span><math class="testfont"><mtext>&#x1D799;</mtext></math>=<span>1D799</span></span>
+  <span><math class="testfont"><mtext>&#x1D79A;</mtext></math>=<span>1D79A</span></span>
+  <span><math class="testfont"><mtext>&#x1D79B;</mtext></math>=<span>1D79B</span></span>
+  <span><math class="testfont"><mtext>&#x1D79C;</mtext></math>=<span>1D79C</span></span>
+  <span><math class="testfont"><mtext>&#x1D79D;</mtext></math>=<span>1D79D</span></span>
+  <span><math class="testfont"><mtext>&#x1D79E;</mtext></math>=<span>1D79E</span></span>
+  <span><math class="testfont"><mtext>&#x1D79F;</mtext></math>=<span>1D79F</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7A0;</mtext></math>=<span>1D7A0</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A2;</mtext></math>=<span>1D7A2</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A3;</mtext></math>=<span>1D7A3</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A4;</mtext></math>=<span>1D7A4</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A5;</mtext></math>=<span>1D7A5</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A6;</mtext></math>=<span>1D7A6</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A7;</mtext></math>=<span>1D7A7</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A8;</mtext></math>=<span>1D7A8</span></span>
+  <span><math class="testfont"><mtext>&#x1D7AA;</mtext></math>=<span>1D7AA</span></span>
+  <span><math class="testfont"><mtext>&#x1D7AB;</mtext></math>=<span>1D7AB</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7AC;</mtext></math>=<span>1D7AC</span></span>
+  <span><math class="testfont"><mtext>&#x1D7AD;</mtext></math>=<span>1D7AD</span></span>
+  <span><math class="testfont"><mtext>&#x1D7AE;</mtext></math>=<span>1D7AE</span></span>
+  <span><math class="testfont"><mtext>&#x1D7AF;</mtext></math>=<span>1D7AF</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B0;</mtext></math>=<span>1D7B0</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B1;</mtext></math>=<span>1D7B1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B2;</mtext></math>=<span>1D7B2</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B3;</mtext></math>=<span>1D7B3</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B4;</mtext></math>=<span>1D7B4</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B5;</mtext></math>=<span>1D7B5</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7B6;</mtext></math>=<span>1D7B6</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B7;</mtext></math>=<span>1D7B7</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B8;</mtext></math>=<span>1D7B8</span></span>
+  <span><math class="testfont"><mtext>&#x1D7B9;</mtext></math>=<span>1D7B9</span></span>
+  <span><math class="testfont"><mtext>&#x1D7BA;</mtext></math>=<span>1D7BA</span></span>
+  <span><math class="testfont"><mtext>&#x1D7BB;</mtext></math>=<span>1D7BB</span></span>
+  <span><math class="testfont"><mtext>&#x1D7BC;</mtext></math>=<span>1D7BC</span></span>
+  <span><math class="testfont"><mtext>&#x1D7BD;</mtext></math>=<span>1D7BD</span></span>
+  <span><math class="testfont"><mtext>&#x1D7BE;</mtext></math>=<span>1D7BE</span></span>
+  <span><math class="testfont"><mtext>&#x1D7BF;</mtext></math>=<span>1D7BF</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D7C0;</mtext></math>=<span>1D7C0</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C1;</mtext></math>=<span>1D7C1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C2;</mtext></math>=<span>1D7C2</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C5;</mtext></math>=<span>1D7C5</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C7;</mtext></math>=<span>1D7C7</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C9;</mtext></math>=<span>1D7C9</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C6;</mtext></math>=<span>1D7C6</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C8;</mtext></math>=<span>1D7C8</span></span>
+  <span><math class="testfont"><mtext>&#x1D7A1;</mtext></math>=<span>1D7A1</span></span>
+  <span><math class="testfont"><mtext>&#x1D7C4;</mtext></math>=<span>1D7C4</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-bold-italic.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-bold-italic.html
new file mode 100644
index 0000000000..d1512bbce1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-bold-italic.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant sans-serif-bold-italic</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#sans-serif-bold-italic-mappings">
+<link rel="match" href="mathvariant-sans-serif-bold-italic-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a sans-serif-bold-italic mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-sans-serif-bold-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x2202;</mtext></math>=<span>1D7C3</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x2207;</mtext></math>=<span>1D7A9</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x41;</mtext></math>=<span>1D63C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x42;</mtext></math>=<span>1D63D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x43;</mtext></math>=<span>1D63E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x44;</mtext></math>=<span>1D63F</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x45;</mtext></math>=<span>1D640</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x46;</mtext></math>=<span>1D641</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x47;</mtext></math>=<span>1D642</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x48;</mtext></math>=<span>1D643</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x49;</mtext></math>=<span>1D644</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x4A;</mtext></math>=<span>1D645</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x4B;</mtext></math>=<span>1D646</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x4C;</mtext></math>=<span>1D647</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x4D;</mtext></math>=<span>1D648</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x4E;</mtext></math>=<span>1D649</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x4F;</mtext></math>=<span>1D64A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x50;</mtext></math>=<span>1D64B</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x51;</mtext></math>=<span>1D64C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x52;</mtext></math>=<span>1D64D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x53;</mtext></math>=<span>1D64E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x54;</mtext></math>=<span>1D64F</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x55;</mtext></math>=<span>1D650</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x56;</mtext></math>=<span>1D651</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x57;</mtext></math>=<span>1D652</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x58;</mtext></math>=<span>1D653</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x59;</mtext></math>=<span>1D654</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x5A;</mtext></math>=<span>1D655</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x61;</mtext></math>=<span>1D656</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x62;</mtext></math>=<span>1D657</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x63;</mtext></math>=<span>1D658</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x64;</mtext></math>=<span>1D659</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x65;</mtext></math>=<span>1D65A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x66;</mtext></math>=<span>1D65B</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x67;</mtext></math>=<span>1D65C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x68;</mtext></math>=<span>1D65D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x69;</mtext></math>=<span>1D65E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x6A;</mtext></math>=<span>1D65F</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x6B;</mtext></math>=<span>1D660</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x6C;</mtext></math>=<span>1D661</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x6D;</mtext></math>=<span>1D662</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x6E;</mtext></math>=<span>1D663</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x6F;</mtext></math>=<span>1D664</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x70;</mtext></math>=<span>1D665</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x71;</mtext></math>=<span>1D666</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x72;</mtext></math>=<span>1D667</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x73;</mtext></math>=<span>1D668</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x74;</mtext></math>=<span>1D669</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x75;</mtext></math>=<span>1D66A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x76;</mtext></math>=<span>1D66B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x77;</mtext></math>=<span>1D66C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x78;</mtext></math>=<span>1D66D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x79;</mtext></math>=<span>1D66E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x7A;</mtext></math>=<span>1D66F</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x391;</mtext></math>=<span>1D790</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x392;</mtext></math>=<span>1D791</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x393;</mtext></math>=<span>1D792</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x394;</mtext></math>=<span>1D793</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x395;</mtext></math>=<span>1D794</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x396;</mtext></math>=<span>1D795</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x397;</mtext></math>=<span>1D796</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x398;</mtext></math>=<span>1D797</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x399;</mtext></math>=<span>1D798</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x39A;</mtext></math>=<span>1D799</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x39B;</mtext></math>=<span>1D79A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x39C;</mtext></math>=<span>1D79B</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x39D;</mtext></math>=<span>1D79C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x39E;</mtext></math>=<span>1D79D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x39F;</mtext></math>=<span>1D79E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A0;</mtext></math>=<span>1D79F</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A1;</mtext></math>=<span>1D7A0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A3;</mtext></math>=<span>1D7A2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A4;</mtext></math>=<span>1D7A3</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A5;</mtext></math>=<span>1D7A4</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A6;</mtext></math>=<span>1D7A5</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A7;</mtext></math>=<span>1D7A6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A8;</mtext></math>=<span>1D7A7</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3A9;</mtext></math>=<span>1D7A8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B1;</mtext></math>=<span>1D7AA</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B2;</mtext></math>=<span>1D7AB</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B3;</mtext></math>=<span>1D7AC</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B4;</mtext></math>=<span>1D7AD</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B5;</mtext></math>=<span>1D7AE</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B6;</mtext></math>=<span>1D7AF</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B7;</mtext></math>=<span>1D7B0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B8;</mtext></math>=<span>1D7B1</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3B9;</mtext></math>=<span>1D7B2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3BA;</mtext></math>=<span>1D7B3</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3BB;</mtext></math>=<span>1D7B4</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3BC;</mtext></math>=<span>1D7B5</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3BD;</mtext></math>=<span>1D7B6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3BE;</mtext></math>=<span>1D7B7</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3BF;</mtext></math>=<span>1D7B8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C0;</mtext></math>=<span>1D7B9</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C1;</mtext></math>=<span>1D7BA</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C2;</mtext></math>=<span>1D7BB</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C3;</mtext></math>=<span>1D7BC</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C4;</mtext></math>=<span>1D7BD</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C5;</mtext></math>=<span>1D7BE</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C6;</mtext></math>=<span>1D7BF</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C7;</mtext></math>=<span>1D7C0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C8;</mtext></math>=<span>1D7C1</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3C9;</mtext></math>=<span>1D7C2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3D1;</mtext></math>=<span>1D7C5</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3D5;</mtext></math>=<span>1D7C7</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3D6;</mtext></math>=<span>1D7C9</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3F0;</mtext></math>=<span>1D7C6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3F1;</mtext></math>=<span>1D7C8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3F4;</mtext></math>=<span>1D7A1</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-bold-italic">&#x3F5;</mtext></math>=<span>1D7C4</span></span><br/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-italic-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-italic-ref.html
new file mode 100644
index 0000000000..d7e23248c6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-italic-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant sans-serif-italic (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-sans-serif-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D608;</mtext></math>=<span>1D608</span></span>
+  <span><math class="testfont"><mtext>&#x1D609;</mtext></math>=<span>1D609</span></span>
+  <span><math class="testfont"><mtext>&#x1D60A;</mtext></math>=<span>1D60A</span></span>
+  <span><math class="testfont"><mtext>&#x1D60B;</mtext></math>=<span>1D60B</span></span>
+  <span><math class="testfont"><mtext>&#x1D60C;</mtext></math>=<span>1D60C</span></span>
+  <span><math class="testfont"><mtext>&#x1D60D;</mtext></math>=<span>1D60D</span></span>
+  <span><math class="testfont"><mtext>&#x1D60E;</mtext></math>=<span>1D60E</span></span>
+  <span><math class="testfont"><mtext>&#x1D60F;</mtext></math>=<span>1D60F</span></span>
+  <span><math class="testfont"><mtext>&#x1D610;</mtext></math>=<span>1D610</span></span>
+  <span><math class="testfont"><mtext>&#x1D611;</mtext></math>=<span>1D611</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D612;</mtext></math>=<span>1D612</span></span>
+  <span><math class="testfont"><mtext>&#x1D613;</mtext></math>=<span>1D613</span></span>
+  <span><math class="testfont"><mtext>&#x1D614;</mtext></math>=<span>1D614</span></span>
+  <span><math class="testfont"><mtext>&#x1D615;</mtext></math>=<span>1D615</span></span>
+  <span><math class="testfont"><mtext>&#x1D616;</mtext></math>=<span>1D616</span></span>
+  <span><math class="testfont"><mtext>&#x1D617;</mtext></math>=<span>1D617</span></span>
+  <span><math class="testfont"><mtext>&#x1D618;</mtext></math>=<span>1D618</span></span>
+  <span><math class="testfont"><mtext>&#x1D619;</mtext></math>=<span>1D619</span></span>
+  <span><math class="testfont"><mtext>&#x1D61A;</mtext></math>=<span>1D61A</span></span>
+  <span><math class="testfont"><mtext>&#x1D61B;</mtext></math>=<span>1D61B</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D61C;</mtext></math>=<span>1D61C</span></span>
+  <span><math class="testfont"><mtext>&#x1D61D;</mtext></math>=<span>1D61D</span></span>
+  <span><math class="testfont"><mtext>&#x1D61E;</mtext></math>=<span>1D61E</span></span>
+  <span><math class="testfont"><mtext>&#x1D61F;</mtext></math>=<span>1D61F</span></span>
+  <span><math class="testfont"><mtext>&#x1D620;</mtext></math>=<span>1D620</span></span>
+  <span><math class="testfont"><mtext>&#x1D621;</mtext></math>=<span>1D621</span></span>
+  <span><math class="testfont"><mtext>&#x1D622;</mtext></math>=<span>1D622</span></span>
+  <span><math class="testfont"><mtext>&#x1D623;</mtext></math>=<span>1D623</span></span>
+  <span><math class="testfont"><mtext>&#x1D624;</mtext></math>=<span>1D624</span></span>
+  <span><math class="testfont"><mtext>&#x1D625;</mtext></math>=<span>1D625</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D626;</mtext></math>=<span>1D626</span></span>
+  <span><math class="testfont"><mtext>&#x1D627;</mtext></math>=<span>1D627</span></span>
+  <span><math class="testfont"><mtext>&#x1D628;</mtext></math>=<span>1D628</span></span>
+  <span><math class="testfont"><mtext>&#x1D629;</mtext></math>=<span>1D629</span></span>
+  <span><math class="testfont"><mtext>&#x1D62A;</mtext></math>=<span>1D62A</span></span>
+  <span><math class="testfont"><mtext>&#x1D62B;</mtext></math>=<span>1D62B</span></span>
+  <span><math class="testfont"><mtext>&#x1D62C;</mtext></math>=<span>1D62C</span></span>
+  <span><math class="testfont"><mtext>&#x1D62D;</mtext></math>=<span>1D62D</span></span>
+  <span><math class="testfont"><mtext>&#x1D62E;</mtext></math>=<span>1D62E</span></span>
+  <span><math class="testfont"><mtext>&#x1D62F;</mtext></math>=<span>1D62F</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D630;</mtext></math>=<span>1D630</span></span>
+  <span><math class="testfont"><mtext>&#x1D631;</mtext></math>=<span>1D631</span></span>
+  <span><math class="testfont"><mtext>&#x1D632;</mtext></math>=<span>1D632</span></span>
+  <span><math class="testfont"><mtext>&#x1D633;</mtext></math>=<span>1D633</span></span>
+  <span><math class="testfont"><mtext>&#x1D634;</mtext></math>=<span>1D634</span></span>
+  <span><math class="testfont"><mtext>&#x1D635;</mtext></math>=<span>1D635</span></span>
+  <span><math class="testfont"><mtext>&#x1D636;</mtext></math>=<span>1D636</span></span>
+  <span><math class="testfont"><mtext>&#x1D637;</mtext></math>=<span>1D637</span></span>
+  <span><math class="testfont"><mtext>&#x1D638;</mtext></math>=<span>1D638</span></span>
+  <span><math class="testfont"><mtext>&#x1D639;</mtext></math>=<span>1D639</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D63A;</mtext></math>=<span>1D63A</span></span>
+  <span><math class="testfont"><mtext>&#x1D63B;</mtext></math>=<span>1D63B</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-italic.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-italic.html
new file mode 100644
index 0000000000..e847ca9bb8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-italic.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant sans-serif-italic</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#sans-serif-italic-mappings">
+<link rel="match" href="mathvariant-sans-serif-italic-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a sans-serif-italic mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-sans-serif-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x41;</mtext></math>=<span>1D608</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x42;</mtext></math>=<span>1D609</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x43;</mtext></math>=<span>1D60A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x44;</mtext></math>=<span>1D60B</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x45;</mtext></math>=<span>1D60C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x46;</mtext></math>=<span>1D60D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x47;</mtext></math>=<span>1D60E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x48;</mtext></math>=<span>1D60F</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x49;</mtext></math>=<span>1D610</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x4A;</mtext></math>=<span>1D611</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x4B;</mtext></math>=<span>1D612</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x4C;</mtext></math>=<span>1D613</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x4D;</mtext></math>=<span>1D614</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x4E;</mtext></math>=<span>1D615</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x4F;</mtext></math>=<span>1D616</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x50;</mtext></math>=<span>1D617</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x51;</mtext></math>=<span>1D618</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x52;</mtext></math>=<span>1D619</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x53;</mtext></math>=<span>1D61A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x54;</mtext></math>=<span>1D61B</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x55;</mtext></math>=<span>1D61C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x56;</mtext></math>=<span>1D61D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x57;</mtext></math>=<span>1D61E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x58;</mtext></math>=<span>1D61F</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x59;</mtext></math>=<span>1D620</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x5A;</mtext></math>=<span>1D621</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x61;</mtext></math>=<span>1D622</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x62;</mtext></math>=<span>1D623</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x63;</mtext></math>=<span>1D624</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x64;</mtext></math>=<span>1D625</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x65;</mtext></math>=<span>1D626</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x66;</mtext></math>=<span>1D627</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x67;</mtext></math>=<span>1D628</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x68;</mtext></math>=<span>1D629</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x69;</mtext></math>=<span>1D62A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x6A;</mtext></math>=<span>1D62B</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x6B;</mtext></math>=<span>1D62C</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x6C;</mtext></math>=<span>1D62D</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x6D;</mtext></math>=<span>1D62E</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x6E;</mtext></math>=<span>1D62F</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x6F;</mtext></math>=<span>1D630</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x70;</mtext></math>=<span>1D631</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x71;</mtext></math>=<span>1D632</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x72;</mtext></math>=<span>1D633</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x73;</mtext></math>=<span>1D634</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x74;</mtext></math>=<span>1D635</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x75;</mtext></math>=<span>1D636</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x76;</mtext></math>=<span>1D637</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x77;</mtext></math>=<span>1D638</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x78;</mtext></math>=<span>1D639</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x79;</mtext></math>=<span>1D63A</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif-italic">&#x7A;</mtext></math>=<span>1D63B</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-ref.html
new file mode 100644
index 0000000000..1087565b42
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif-ref.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant sans-serif (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-sans-serif.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D7E2;</mtext></math>=<span>1D7E2</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E3;</mtext></math>=<span>1D7E3</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E4;</mtext></math>=<span>1D7E4</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E5;</mtext></math>=<span>1D7E5</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E6;</mtext></math>=<span>1D7E6</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E7;</mtext></math>=<span>1D7E7</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E8;</mtext></math>=<span>1D7E8</span></span>
+  <span><math class="testfont"><mtext>&#x1D7E9;</mtext></math>=<span>1D7E9</span></span>
+  <span><math class="testfont"><mtext>&#x1D7EA;</mtext></math>=<span>1D7EA</span></span>
+  <span><math class="testfont"><mtext>&#x1D7EB;</mtext></math>=<span>1D7EB</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5A0;</mtext></math>=<span>1D5A0</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A1;</mtext></math>=<span>1D5A1</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A2;</mtext></math>=<span>1D5A2</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A3;</mtext></math>=<span>1D5A3</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A4;</mtext></math>=<span>1D5A4</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A5;</mtext></math>=<span>1D5A5</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A6;</mtext></math>=<span>1D5A6</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A7;</mtext></math>=<span>1D5A7</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A8;</mtext></math>=<span>1D5A8</span></span>
+  <span><math class="testfont"><mtext>&#x1D5A9;</mtext></math>=<span>1D5A9</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5AA;</mtext></math>=<span>1D5AA</span></span>
+  <span><math class="testfont"><mtext>&#x1D5AB;</mtext></math>=<span>1D5AB</span></span>
+  <span><math class="testfont"><mtext>&#x1D5AC;</mtext></math>=<span>1D5AC</span></span>
+  <span><math class="testfont"><mtext>&#x1D5AD;</mtext></math>=<span>1D5AD</span></span>
+  <span><math class="testfont"><mtext>&#x1D5AE;</mtext></math>=<span>1D5AE</span></span>
+  <span><math class="testfont"><mtext>&#x1D5AF;</mtext></math>=<span>1D5AF</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B0;</mtext></math>=<span>1D5B0</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B1;</mtext></math>=<span>1D5B1</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B2;</mtext></math>=<span>1D5B2</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B3;</mtext></math>=<span>1D5B3</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5B4;</mtext></math>=<span>1D5B4</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B5;</mtext></math>=<span>1D5B5</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B6;</mtext></math>=<span>1D5B6</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B7;</mtext></math>=<span>1D5B7</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B8;</mtext></math>=<span>1D5B8</span></span>
+  <span><math class="testfont"><mtext>&#x1D5B9;</mtext></math>=<span>1D5B9</span></span>
+  <span><math class="testfont"><mtext>&#x1D5BA;</mtext></math>=<span>1D5BA</span></span>
+  <span><math class="testfont"><mtext>&#x1D5BB;</mtext></math>=<span>1D5BB</span></span>
+  <span><math class="testfont"><mtext>&#x1D5BC;</mtext></math>=<span>1D5BC</span></span>
+  <span><math class="testfont"><mtext>&#x1D5BD;</mtext></math>=<span>1D5BD</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5BE;</mtext></math>=<span>1D5BE</span></span>
+  <span><math class="testfont"><mtext>&#x1D5BF;</mtext></math>=<span>1D5BF</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C0;</mtext></math>=<span>1D5C0</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C1;</mtext></math>=<span>1D5C1</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C2;</mtext></math>=<span>1D5C2</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C3;</mtext></math>=<span>1D5C3</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C4;</mtext></math>=<span>1D5C4</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C5;</mtext></math>=<span>1D5C5</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C6;</mtext></math>=<span>1D5C6</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C7;</mtext></math>=<span>1D5C7</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5C8;</mtext></math>=<span>1D5C8</span></span>
+  <span><math class="testfont"><mtext>&#x1D5C9;</mtext></math>=<span>1D5C9</span></span>
+  <span><math class="testfont"><mtext>&#x1D5CA;</mtext></math>=<span>1D5CA</span></span>
+  <span><math class="testfont"><mtext>&#x1D5CB;</mtext></math>=<span>1D5CB</span></span>
+  <span><math class="testfont"><mtext>&#x1D5CC;</mtext></math>=<span>1D5CC</span></span>
+  <span><math class="testfont"><mtext>&#x1D5CD;</mtext></math>=<span>1D5CD</span></span>
+  <span><math class="testfont"><mtext>&#x1D5CE;</mtext></math>=<span>1D5CE</span></span>
+  <span><math class="testfont"><mtext>&#x1D5CF;</mtext></math>=<span>1D5CF</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D0;</mtext></math>=<span>1D5D0</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D1;</mtext></math>=<span>1D5D1</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D5D2;</mtext></math>=<span>1D5D2</span></span>
+  <span><math class="testfont"><mtext>&#x1D5D3;</mtext></math>=<span>1D5D3</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif.html
new file mode 100644
index 0000000000..0b346aa178
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-sans-serif.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant sans-serif</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#sans-serif-mappings">
+<link rel="match" href="mathvariant-sans-serif-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a sans-serif mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-sans-serif.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x30;</mtext></math>=<span>1D7E2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x31;</mtext></math>=<span>1D7E3</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x32;</mtext></math>=<span>1D7E4</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x33;</mtext></math>=<span>1D7E5</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x34;</mtext></math>=<span>1D7E6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x35;</mtext></math>=<span>1D7E7</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x36;</mtext></math>=<span>1D7E8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x37;</mtext></math>=<span>1D7E9</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x38;</mtext></math>=<span>1D7EA</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x39;</mtext></math>=<span>1D7EB</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x41;</mtext></math>=<span>1D5A0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x42;</mtext></math>=<span>1D5A1</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x43;</mtext></math>=<span>1D5A2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x44;</mtext></math>=<span>1D5A3</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x45;</mtext></math>=<span>1D5A4</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x46;</mtext></math>=<span>1D5A5</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x47;</mtext></math>=<span>1D5A6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x48;</mtext></math>=<span>1D5A7</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x49;</mtext></math>=<span>1D5A8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x4A;</mtext></math>=<span>1D5A9</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x4B;</mtext></math>=<span>1D5AA</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x4C;</mtext></math>=<span>1D5AB</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x4D;</mtext></math>=<span>1D5AC</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x4E;</mtext></math>=<span>1D5AD</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x4F;</mtext></math>=<span>1D5AE</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x50;</mtext></math>=<span>1D5AF</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x51;</mtext></math>=<span>1D5B0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x52;</mtext></math>=<span>1D5B1</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x53;</mtext></math>=<span>1D5B2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x54;</mtext></math>=<span>1D5B3</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x55;</mtext></math>=<span>1D5B4</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x56;</mtext></math>=<span>1D5B5</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x57;</mtext></math>=<span>1D5B6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x58;</mtext></math>=<span>1D5B7</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x59;</mtext></math>=<span>1D5B8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x5A;</mtext></math>=<span>1D5B9</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x61;</mtext></math>=<span>1D5BA</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x62;</mtext></math>=<span>1D5BB</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x63;</mtext></math>=<span>1D5BC</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x64;</mtext></math>=<span>1D5BD</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x65;</mtext></math>=<span>1D5BE</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x66;</mtext></math>=<span>1D5BF</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x67;</mtext></math>=<span>1D5C0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x68;</mtext></math>=<span>1D5C1</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x69;</mtext></math>=<span>1D5C2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x6A;</mtext></math>=<span>1D5C3</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x6B;</mtext></math>=<span>1D5C4</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x6C;</mtext></math>=<span>1D5C5</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x6D;</mtext></math>=<span>1D5C6</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x6E;</mtext></math>=<span>1D5C7</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x6F;</mtext></math>=<span>1D5C8</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x70;</mtext></math>=<span>1D5C9</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x71;</mtext></math>=<span>1D5CA</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x72;</mtext></math>=<span>1D5CB</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x73;</mtext></math>=<span>1D5CC</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x74;</mtext></math>=<span>1D5CD</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x75;</mtext></math>=<span>1D5CE</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x76;</mtext></math>=<span>1D5CF</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x77;</mtext></math>=<span>1D5D0</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x78;</mtext></math>=<span>1D5D1</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x79;</mtext></math>=<span>1D5D2</span></span>
+  <span><math class="testfont"><mtext mathvariant="sans-serif">&#x7A;</mtext></math>=<span>1D5D3</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-script-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-script-ref.html
new file mode 100644
index 0000000000..60ced85bc3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-script-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant script (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-script.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1D49C;</mtext></math>=<span>1D49C</span></span>
+  <span><math class="testfont"><mtext>&#x212C;</mtext></math>=<span>0212C</span></span>
+  <span><math class="testfont"><mtext>&#x1D49E;</mtext></math>=<span>1D49E</span></span>
+  <span><math class="testfont"><mtext>&#x1D49F;</mtext></math>=<span>1D49F</span></span>
+  <span><math class="testfont"><mtext>&#x2130;</mtext></math>=<span>02130</span></span>
+  <span><math class="testfont"><mtext>&#x2131;</mtext></math>=<span>02131</span></span>
+  <span><math class="testfont"><mtext>&#x1D4A2;</mtext></math>=<span>1D4A2</span></span>
+  <span><math class="testfont"><mtext>&#x210B;</mtext></math>=<span>0210B</span></span>
+  <span><math class="testfont"><mtext>&#x2110;</mtext></math>=<span>02110</span></span>
+  <span><math class="testfont"><mtext>&#x1D4A5;</mtext></math>=<span>1D4A5</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4A6;</mtext></math>=<span>1D4A6</span></span>
+  <span><math class="testfont"><mtext>&#x2112;</mtext></math>=<span>02112</span></span>
+  <span><math class="testfont"><mtext>&#x2133;</mtext></math>=<span>02133</span></span>
+  <span><math class="testfont"><mtext>&#x1D4A9;</mtext></math>=<span>1D4A9</span></span>
+  <span><math class="testfont"><mtext>&#x1D4AA;</mtext></math>=<span>1D4AA</span></span>
+  <span><math class="testfont"><mtext>&#x1D4AB;</mtext></math>=<span>1D4AB</span></span>
+  <span><math class="testfont"><mtext>&#x1D4AC;</mtext></math>=<span>1D4AC</span></span>
+  <span><math class="testfont"><mtext>&#x211B;</mtext></math>=<span>0211B</span></span>
+  <span><math class="testfont"><mtext>&#x1D4AE;</mtext></math>=<span>1D4AE</span></span>
+  <span><math class="testfont"><mtext>&#x1D4AF;</mtext></math>=<span>1D4AF</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4B0;</mtext></math>=<span>1D4B0</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B1;</mtext></math>=<span>1D4B1</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B2;</mtext></math>=<span>1D4B2</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B3;</mtext></math>=<span>1D4B3</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B4;</mtext></math>=<span>1D4B4</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B5;</mtext></math>=<span>1D4B5</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B6;</mtext></math>=<span>1D4B6</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B7;</mtext></math>=<span>1D4B7</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B8;</mtext></math>=<span>1D4B8</span></span>
+  <span><math class="testfont"><mtext>&#x1D4B9;</mtext></math>=<span>1D4B9</span></span><br/>
+  <span><math class="testfont"><mtext>&#x212F;</mtext></math>=<span>0212F</span></span>
+  <span><math class="testfont"><mtext>&#x1D4BB;</mtext></math>=<span>1D4BB</span></span>
+  <span><math class="testfont"><mtext>&#x210A;</mtext></math>=<span>0210A</span></span>
+  <span><math class="testfont"><mtext>&#x1D4BD;</mtext></math>=<span>1D4BD</span></span>
+  <span><math class="testfont"><mtext>&#x1D4BE;</mtext></math>=<span>1D4BE</span></span>
+  <span><math class="testfont"><mtext>&#x1D4BF;</mtext></math>=<span>1D4BF</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C0;</mtext></math>=<span>1D4C0</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C1;</mtext></math>=<span>1D4C1</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C2;</mtext></math>=<span>1D4C2</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C3;</mtext></math>=<span>1D4C3</span></span><br/>
+  <span><math class="testfont"><mtext>&#x2134;</mtext></math>=<span>02134</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C5;</mtext></math>=<span>1D4C5</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C6;</mtext></math>=<span>1D4C6</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C7;</mtext></math>=<span>1D4C7</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C8;</mtext></math>=<span>1D4C8</span></span>
+  <span><math class="testfont"><mtext>&#x1D4C9;</mtext></math>=<span>1D4C9</span></span>
+  <span><math class="testfont"><mtext>&#x1D4CA;</mtext></math>=<span>1D4CA</span></span>
+  <span><math class="testfont"><mtext>&#x1D4CB;</mtext></math>=<span>1D4CB</span></span>
+  <span><math class="testfont"><mtext>&#x1D4CC;</mtext></math>=<span>1D4CC</span></span>
+  <span><math class="testfont"><mtext>&#x1D4CD;</mtext></math>=<span>1D4CD</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1D4CE;</mtext></math>=<span>1D4CE</span></span>
+  <span><math class="testfont"><mtext>&#x1D4CF;</mtext></math>=<span>1D4CF</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-script.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-script.html
new file mode 100644
index 0000000000..afbdfd9f94
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-script.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant script</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#script-mappings">
+<link rel="match" href="mathvariant-script-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a script mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-script.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="script">&#x41;</mtext></math>=<span>1D49C</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x42;</mtext></math>=<span>0212C</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x43;</mtext></math>=<span>1D49E</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x44;</mtext></math>=<span>1D49F</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x45;</mtext></math>=<span>02130</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x46;</mtext></math>=<span>02131</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x47;</mtext></math>=<span>1D4A2</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x48;</mtext></math>=<span>0210B</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x49;</mtext></math>=<span>02110</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x4A;</mtext></math>=<span>1D4A5</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="script">&#x4B;</mtext></math>=<span>1D4A6</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x4C;</mtext></math>=<span>02112</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x4D;</mtext></math>=<span>02133</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x4E;</mtext></math>=<span>1D4A9</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x4F;</mtext></math>=<span>1D4AA</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x50;</mtext></math>=<span>1D4AB</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x51;</mtext></math>=<span>1D4AC</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x52;</mtext></math>=<span>0211B</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x53;</mtext></math>=<span>1D4AE</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x54;</mtext></math>=<span>1D4AF</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="script">&#x55;</mtext></math>=<span>1D4B0</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x56;</mtext></math>=<span>1D4B1</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x57;</mtext></math>=<span>1D4B2</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x58;</mtext></math>=<span>1D4B3</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x59;</mtext></math>=<span>1D4B4</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x5A;</mtext></math>=<span>1D4B5</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x61;</mtext></math>=<span>1D4B6</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x62;</mtext></math>=<span>1D4B7</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x63;</mtext></math>=<span>1D4B8</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x64;</mtext></math>=<span>1D4B9</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="script">&#x65;</mtext></math>=<span>0212F</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x66;</mtext></math>=<span>1D4BB</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x67;</mtext></math>=<span>0210A</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x68;</mtext></math>=<span>1D4BD</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x69;</mtext></math>=<span>1D4BE</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x6A;</mtext></math>=<span>1D4BF</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x6B;</mtext></math>=<span>1D4C0</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x6C;</mtext></math>=<span>1D4C1</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x6D;</mtext></math>=<span>1D4C2</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x6E;</mtext></math>=<span>1D4C3</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="script">&#x6F;</mtext></math>=<span>02134</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x70;</mtext></math>=<span>1D4C5</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x71;</mtext></math>=<span>1D4C6</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x72;</mtext></math>=<span>1D4C7</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x73;</mtext></math>=<span>1D4C8</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x74;</mtext></math>=<span>1D4C9</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x75;</mtext></math>=<span>1D4CA</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x76;</mtext></math>=<span>1D4CB</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x77;</mtext></math>=<span>1D4CC</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x78;</mtext></math>=<span>1D4CD</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="script">&#x79;</mtext></math>=<span>1D4CE</span></span>
+  <span><math class="testfont"><mtext mathvariant="script">&#x7A;</mtext></math>=<span>1D4CF</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-stretched-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-stretched-ref.html
new file mode 100644
index 0000000000..8ad8f7b9bb
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-stretched-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant stretched (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-stretched.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1EE7E;</mtext></math>=<span>1EE7E</span></span>
+  <span><math class="testfont"><mtext>&#x1EE61;</mtext></math>=<span>1EE61</span></span>
+  <span><math class="testfont"><mtext>&#x1EE75;</mtext></math>=<span>1EE75</span></span>
+  <span><math class="testfont"><mtext>&#x1EE76;</mtext></math>=<span>1EE76</span></span>
+  <span><math class="testfont"><mtext>&#x1EE62;</mtext></math>=<span>1EE62</span></span>
+  <span><math class="testfont"><mtext>&#x1EE67;</mtext></math>=<span>1EE67</span></span>
+  <span><math class="testfont"><mtext>&#x1EE77;</mtext></math>=<span>1EE77</span></span>
+  <span><math class="testfont"><mtext>&#x1EE6E;</mtext></math>=<span>1EE6E</span></span>
+  <span><math class="testfont"><mtext>&#x1EE74;</mtext></math>=<span>1EE74</span></span>
+  <span><math class="testfont"><mtext>&#x1EE71;</mtext></math>=<span>1EE71</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1EE79;</mtext></math>=<span>1EE79</span></span>
+  <span><math class="testfont"><mtext>&#x1EE68;</mtext></math>=<span>1EE68</span></span>
+  <span><math class="testfont"><mtext>&#x1EE7A;</mtext></math>=<span>1EE7A</span></span>
+  <span><math class="testfont"><mtext>&#x1EE6F;</mtext></math>=<span>1EE6F</span></span>
+  <span><math class="testfont"><mtext>&#x1EE7B;</mtext></math>=<span>1EE7B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE70;</mtext></math>=<span>1EE70</span></span>
+  <span><math class="testfont"><mtext>&#x1EE72;</mtext></math>=<span>1EE72</span></span>
+  <span><math class="testfont"><mtext>&#x1EE6A;</mtext></math>=<span>1EE6A</span></span>
+  <span><math class="testfont"><mtext>&#x1EE6C;</mtext></math>=<span>1EE6C</span></span>
+  <span><math class="testfont"><mtext>&#x1EE6D;</mtext></math>=<span>1EE6D</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1EE64;</mtext></math>=<span>1EE64</span></span>
+  <span><math class="testfont"><mtext>&#x1EE69;</mtext></math>=<span>1EE69</span></span>
+  <span><math class="testfont"><mtext>&#x1EE7C;</mtext></math>=<span>1EE7C</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-stretched.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-stretched.html
new file mode 100644
index 0000000000..84210c339b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-stretched.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant stretched</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#stretched-mappings">
+<link rel="match" href="mathvariant-stretched-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a stretched mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-stretched.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x6A1;</mtext></math>=<span>1EE7E</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x628;</mtext></math>=<span>1EE61</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x62A;</mtext></math>=<span>1EE75</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x62B;</mtext></math>=<span>1EE76</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x62C;</mtext></math>=<span>1EE62</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x62D;</mtext></math>=<span>1EE67</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x62E;</mtext></math>=<span>1EE77</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x633;</mtext></math>=<span>1EE6E</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x634;</mtext></math>=<span>1EE74</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x635;</mtext></math>=<span>1EE71</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x636;</mtext></math>=<span>1EE79</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x637;</mtext></math>=<span>1EE68</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x638;</mtext></math>=<span>1EE7A</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x639;</mtext></math>=<span>1EE6F</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x63A;</mtext></math>=<span>1EE7B</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x641;</mtext></math>=<span>1EE70</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x642;</mtext></math>=<span>1EE72</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x643;</mtext></math>=<span>1EE6A</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x645;</mtext></math>=<span>1EE6C</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x646;</mtext></math>=<span>1EE6D</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x647;</mtext></math>=<span>1EE64</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x64A;</mtext></math>=<span>1EE69</span></span>
+  <span><math class="testfont"><mtext mathvariant="stretched">&#x66E;</mtext></math>=<span>1EE7C</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-tailed-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-tailed-ref.html
new file mode 100644
index 0000000000..5273a28e6b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-tailed-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant tailed (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-tailed.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext>&#x1EE52;</mtext></math>=<span>1EE52</span></span>
+  <span><math class="testfont"><mtext>&#x1EE4B;</mtext></math>=<span>1EE4B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE4D;</mtext></math>=<span>1EE4D</span></span>
+  <span><math class="testfont"><mtext>&#x1EE49;</mtext></math>=<span>1EE49</span></span>
+  <span><math class="testfont"><mtext>&#x1EE42;</mtext></math>=<span>1EE42</span></span>
+  <span><math class="testfont"><mtext>&#x1EE47;</mtext></math>=<span>1EE47</span></span>
+  <span><math class="testfont"><mtext>&#x1EE57;</mtext></math>=<span>1EE57</span></span>
+  <span><math class="testfont"><mtext>&#x1EE5F;</mtext></math>=<span>1EE5F</span></span>
+  <span><math class="testfont"><mtext>&#x1EE4E;</mtext></math>=<span>1EE4E</span></span>
+  <span><math class="testfont"><mtext>&#x1EE54;</mtext></math>=<span>1EE54</span></span><br/>
+  <span><math class="testfont"><mtext>&#x1EE51;</mtext></math>=<span>1EE51</span></span>
+  <span><math class="testfont"><mtext>&#x1EE59;</mtext></math>=<span>1EE59</span></span>
+  <span><math class="testfont"><mtext>&#x1EE4F;</mtext></math>=<span>1EE4F</span></span>
+  <span><math class="testfont"><mtext>&#x1EE5B;</mtext></math>=<span>1EE5B</span></span>
+  <span><math class="testfont"><mtext>&#x1EE5D;</mtext></math>=<span>1EE5D</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-tailed.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-tailed.html
new file mode 100644
index 0000000000..4590b76aa1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-tailed.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>mathvariant tailed</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#tailed-mappings">
+<link rel="match" href="mathvariant-tailed-ref.html"/>
+<meta name="assert" content="Verify that a single-char <mtext> with a tailed mathvariant is equivalent to an <mtext> with the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-tailed.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x642;</mtext></math>=<span>1EE52</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x644;</mtext></math>=<span>1EE4B</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x646;</mtext></math>=<span>1EE4D</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x64A;</mtext></math>=<span>1EE49</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x62C;</mtext></math>=<span>1EE42</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x62D;</mtext></math>=<span>1EE47</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x62E;</mtext></math>=<span>1EE57</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x66F;</mtext></math>=<span>1EE5F</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x633;</mtext></math>=<span>1EE4E</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x634;</mtext></math>=<span>1EE54</span></span><br/>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x635;</mtext></math>=<span>1EE51</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x636;</mtext></math>=<span>1EE59</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x639;</mtext></math>=<span>1EE4F</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x63A;</mtext></math>=<span>1EE5B</span></span>
+  <span><math class="testfont"><mtext mathvariant="tailed">&#x6BA;</mtext></math>=<span>1EE5D</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html
new file mode 100644
index 0000000000..63e6e2ba9c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>single-char mi and fontstyle/fontweight attributes (reference)</title>
+    <style>
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/mathvariant-italic.woff");
+      }
+      .testfont {
+        font-family: TestFont;
+        font-size: 32px;
+       }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see <span class="testfont">&#x1D715;</span> rendered twice, without any bold or italic style applied:</p>
+    <p><math class="testfont"><mi mathvariant="normal">&#x1D715;</mi></math></p>
+    <p><math class="testfont"><mi mathvariant="normal">&#x1D715;</mi></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html
new file mode 100644
index 0000000000..b6dd05ea20
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>single-char mi and fontstyle/fontweight attributes</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+    <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1789081">
+    <link rel="match" href="mi-fontstyle-fontweight-ref.html"/>
+    <meta name="assert" content="Verify that fontstyle/fontweight don't cancel the mathvariant transform on single-char mi elements.">
+    <style>
+      @font-face {
+        font-family: TestFont;
+        src: url("/fonts/math/mathvariant-italic.woff");
+      }
+      .testfont {
+        font-family: TestFont;
+        font-size: 32px;
+       }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if you see <span class="testfont">&#x1D715;</span> rendered twice, without any bold or italic style applied:</p>
+    <p><math class="testfont"><mi fontweight="bold">&#x2202;</mi></math></p>
+    <p><math class="testfont"><mi fontstyle="normal">&#x2202;</mi></math></p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html b/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html
new file mode 100644
index 0000000000..88db5047e9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML inside multi-column</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<meta name="assert" content="Verify that putting MathML inside a multi-column list shouldn't affect its layout.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+      var epsilon = 1;
+      var mfrac = document.getElementById("mfrac");
+      var num = mfrac.firstElementChild.getBoundingClientRect();
+      var denom = mfrac.lastElementChild.getBoundingClientRect();
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(num.width, 30, epsilon, "numerator width");
+          assert_approx_equals(num.height, 40, epsilon, "numerator height");
+          assert_approx_equals(denom.width, 50, epsilon, "numerator width");
+          assert_approx_equals(denom.height, 60, epsilon, "numerator height");
+      }, "mspace layout in multicol");
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mfrac());
+          assert_greater_than_equal(denom.bottom - num.top,
+                                    (40 + 60),
+                                    "numerator is above the denominator");
+          assert_approx_equals((num.left + num.right) / 2,
+                               (denom.left + denom.right) / 2,
+                               epsilon, "numerator and denominator are horizontally aligned");
+      }, "mfrac layout in multicol");
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div style="column-width: 10em; list-style-type: decimal;">
+    <ol>
+      <li>blah</li>
+      <li>
+        <math>
+          <mfrac id="mfrac">
+            <mspace width="30px" height="40px" style="background: cyan"></mspace>
+            <mspace width="50px" height="60px" style="background: yellow"></mspace>
+          </mfrac>
+      </li>
+      <li>blah</li>
+      <li>blah</li>
+      <li>blah</li>
+    </ol>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html b/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html
new file mode 100644
index 0000000000..0952679c62
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Elements not participating to the layout of their parent</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that display: none and out-of-flow positioned elements do not participate to layout of their parent.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag))
+            continue;
+        ["display: none",
+         "display: contents",
+         "position: absolute",
+         "position: fixed"
+        ].forEach(style => {
+            document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+            var div = document.body.lastElementChild;
+
+            var elementContainer = div.firstElementChild;
+            var elementContainerWidth = elementContainer.getBoundingClientRect().width;
+            var element = FragmentHelper.element(elementContainer);
+            if (style === "display: contents" &&
+                !element.classList.contains("mathml-container")) {
+                // A "display: contents" MathML child is not participating to
+                // parent layout because its computed style is "display: none".
+                // If we cannot append a MathML child then skip that test.
+                return;
+            }
+            FragmentHelper.forceNonEmptyElement(element);
+            var allowInvalid = true;
+            var child = FragmentHelper.appendChild(element, allowInvalid);
+            child.setAttribute("style", style);
+
+            var referenceContainer = div.lastElementChild;
+            var referenceContainerWidth = referenceContainer.getBoundingClientRect().width;
+            var reference = FragmentHelper.element(referenceContainer);
+            FragmentHelper.forceNonEmptyElement(reference);
+
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon);
+            }, `${tag} preferred width calculation is not affected by children with "${style}" style`);
+
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                compareLayout(element, reference, epsilon);
+            }, `${tag} layout is not affected by children with "${style}" style`);
+
+            div.style = "display: none;"; // Hide the div after measurement.
+        });
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html
new file mode 100644
index 0000000000..447c5b722a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Absolutely positioned (reference)</title>
+<body>
+  <p>Test passes if you see a green square and no red.</p>
+  <div style="position: absolute; left: 100px; top: 100px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+      </mrow>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html
new file mode 100644
index 0000000000..9a7851ba23
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Absolutely positioned</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
+<link rel="match" href="absolutely-positioned-001-ref.html"/>
+<meta name="assert" content="Verify visual rendering of absolutely positioned mtext elements.">
+<body>
+  <p>Test passes if you see a green square and no red.</p>
+  <div style="position: absolute; left: 100px; top: 100px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: red"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mtext style="position: absolute; left: 100px; top: 0px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext>
+        <mtext style="position: absolute; left: 150px; top: 0px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+        <mtext style="position: absolute; left: 150px; top: 150px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+      </mrow>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html
new file mode 100644
index 0000000000..9069b92637
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>absolutely positioned in all MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that absolutely positioned node works in all MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* override display: none on children of maction/semantics */
+  maction > *, semantics > * {
+    display: math;
+  }
+</style>
+<script>
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      ["absolute", "fixed"].forEach(positionValue => {
+          for (tag in MathMLFragments) {
+              if (!FragmentHelper.isValidChildOfMrow(tag) ||
+                  FragmentHelper.isEmpty(tag))
+                  continue;
+              document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\
+<math>${MathMLFragments[tag]}</math>\
+</div>`);
+              let div = document.body.lastElementChild;
+              let element = FragmentHelper.element(div.firstElementChild);
+              FragmentHelper.forceNonEmptyElement(element);
+              if (element.classList.contains("mathml-container") ||
+                  element.classList.contains("foreign-container")) {
+                  for (let i = 0; i < 5; i++) {
+                      FragmentHelper.appendChild(element);
+                  }
+              }
+
+              let middleChild;
+              if (element.children.length >= 2) {
+                  middleChild = FragmentHelper.appendChild(element, true /*allowInvalid*/);
+                  middleChild.setAttribute("style", `position: ${positionValue}; left: 300px; top: 400px`);
+                  let middlePosition = Math.floor(element.children.length/2);
+                  element.insertBefore(middleChild, element.children[middlePosition]);
+              }
+
+              let firstChild = FragmentHelper.appendChild(element, true /*allowInvalid*/);
+              firstChild.setAttribute("style", `position: ${positionValue}; left: 100px; top: 200px`);
+              element.insertBefore(firstChild, element.firstElementChild);
+
+              let lastChild = FragmentHelper.appendChild(element, true /*allowInvalid*/);
+              lastChild.setAttribute("style", `position: ${positionValue}; left: 500px; top: 600px`);
+
+              let referenceBox;
+              switch (positionValue) {
+              case "absolute":
+                  // Use the absolutely positioned div ancestor.
+                  referenceBox = div.getBoundingClientRect();
+                  break
+              case "fixed":
+                  // Use the viewport.
+                  referenceBox = {left: 0, top: 0};
+                  break;
+              default:
+                  throw "reference box not defined";
+              }
+
+              let firstChildBox = firstChild.getBoundingClientRect();
+              let lastChildBox = lastChild.getBoundingClientRect();
+              let middleChildBox;
+              if (middleChild) {
+                  middleChildBox = middleChild.getBoundingClientRect();
+              }
+
+              let epsilon = 1;
+
+              test(function() {
+                  assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                  assert_approx_equals(firstChildBox.left - referenceBox.left, 100, epsilon);
+                  assert_approx_equals(firstChildBox.top - referenceBox.top, 200, epsilon);
+                  if (middleChildBox) {
+                      assert_approx_equals(middleChildBox.left - referenceBox.left, 300, epsilon);
+                      assert_approx_equals(middleChildBox.top - referenceBox.top, 400, epsilon);
+                  }
+                  assert_approx_equals(lastChildBox.left - referenceBox.left, 500, epsilon);
+                  assert_approx_equals(lastChildBox.top - referenceBox.top, 600, epsilon);
+              }, `position: ${positionValue}; children in ${tag}`);
+
+              div.style = "display: none;"; // Hide the div after measurement.
+          }
+      });
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html
new file mode 100644
index 0000000000..03b9f56698
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>Fixed positioned (reference)</title>
+<style>
+  body { overflow: hidden; }
+</style>
+<body>
+  <div style="position: absolute; left: 100px; top: 200px;
+              height: 3000px; width: 3000px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+      </mrow>
+    </math>
+    <p>Test passes if you see a green square and no red.</p>
+  </div>
+  <script>
+    requestAnimationFrame(() => {
+      window.scrollTo(50, 100);
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html
new file mode 100644
index 0000000000..994174162c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>Fixed positioned</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
+<link rel="match" href="fixed-positioned-001-ref.html"/>
+<meta name="assert" content="Verify visual rendering of fixed positioned mtext elements.">
+<style>
+  body { overflow: hidden; }
+</style>
+<body>
+  <div style="position: absolute; left: 100px; top: 200px;
+              height: 3000px; width: 3000px;">
+    <math>
+      <mrow>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mspace width="100px" height="300px" style="background: red"/>
+        <mspace width="100px" height="300px" style="background: green"/>
+        <mtext style="position: fixed; left: 150px; top: 100px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext>
+        <mtext style="position: fixed; left: 200px; top: 100px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+        <mtext style="position: fixed; left: 200px; top: 250px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext>
+      </mrow>
+    </math>
+    <p>Test passes if you see a green square and no red.</p>
+  </div>
+  <script>
+    requestAnimationFrame(() => {
+      window.scrollTo(50, 100);
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html b/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html
new file mode 100644
index 0000000000..0510f1da6d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>overflow on MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="overflow can be overridden on MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* selector defined in mathml-fragments.js */
+  .element {
+    overflow: scroll;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+  <script>
+    test(function () {
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          // Skip mtable as browsers don't have interoperable behavior for
+          // display: table.
+          // See https://github.com/w3c/csswg-drafts/issues/8133
+          if (tag == "mtable")
+              continue;
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      let unknownElement = FragmentHelper.createElement("unknown");
+      unknownElement.setAttribute("class", "element");
+      container.appendChild(unknownElement);
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+        var tag = element.tagName;
+        var style = window.getComputedStyle(element);
+        assert_equals(style["overflow"], "scroll", `overflow on ${tag}`);
+      }, `overflow can be overridden on all MathML elements`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
new file mode 100644
index 0000000000..fd86388ccd
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>border</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that border is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-border-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 20, epsilon, "top border");
+          assert_approx_equals(s.bottom, 20, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
+      }, "Border properties on mrow (shorthand)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border-logical")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 30, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (logical)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-border-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 40, epsilon, "top border");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Border properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-border-logical-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left border");
+          assert_approx_equals(s.right, 20, epsilon, "right border");
+          assert_approx_equals(s.top, 30, epsilon, "top border");
+          assert_approx_equals(s.bottom, 30, epsilon, "bottom border");
+          var b = document.getElementById("mrow-border-logical-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
+      }, "Border properties on mrow (logical, shorthand)");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border"
+              style="border-left: 20px solid transparent;
+                     border-right: 30px solid transparent;
+                     border-top: 40px solid transparent;
+                     border-bottom: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-border-rtl"
+              style="border-left: 20px solid transparent;
+                     border-right: 30px solid transparent;
+                     border-top: 40px solid transparent;
+                     border-bottom: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border-shorthand"
+              style="border: 20px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border-logical"
+              style="border-inline-start: 20px solid transparent;
+                     border-inline-end: 30px solid transparent;
+                     border-block-start: 40px solid transparent;
+                     border-block-end: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-border-logical-rtl"
+              style="border-inline-start: 20px solid transparent;
+                     border-inline-end: 30px solid transparent;
+                     border-block-start: 40px solid transparent;
+                     border-block-end: 50px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-border-logical-shorthand"
+              style="border-inline: 20px solid transparent;
+                     border-block: 30px solid transparent;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
new file mode 100644
index 0000000000..bfb7f76adc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>border</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that border is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        var style = "border-left: 30px solid; border-right: 40px solid; border-top: 50px solid; border-bottom: 60px solid;";
+
+        if (FragmentHelper.isEmpty(tag)) {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var s = compareSizeWithAndWithoutStyle(tag, style);
+                assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right border");
+                assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom border");
+                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+            }, `Border properties on ${tag}`);
+            continue;
+        }
+
+        var default_border = tag === "merror" ? 1 : 0;
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border");
+            assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border");
+            assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border");
+            assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border");
+            assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width");
+        }, `Border properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
+            assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border");
+            assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border");
+            assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border");
+            assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border");
+            assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width");
+        }, `Border properties on ${tag} (rtl)`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
new file mode 100644
index 0000000000..eabb6f46c7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that margin is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-margin-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 20, epsilon, "right margin");
+          assert_approx_equals(s.top, 20, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 20, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (shorthand)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin-logical")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 30, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-margin-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left margin");
+          assert_approx_equals(s.right, 20, epsilon, "right margin");
+          assert_approx_equals(s.top, 40, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-margin-logical-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left margin");
+          assert_approx_equals(s.right, 20, epsilon, "right margin");
+          assert_approx_equals(s.top, 30, epsilon, "top margin");
+          assert_approx_equals(s.bottom, 30, epsilon, "bottom margin");
+          var b = document.getElementById("mrow-margin-logical-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 50, epsilon, "element width");
+          assert_approx_equals(b.height, 50, epsilon, "element height");
+      }, "Margin properties on mrow (logical, shorthand)");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin"
+              style="margin-left: 20px;
+                     margin-right: 30px;
+                     margin-top: 40px;
+                     margin-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-margin-rtl"
+              style="margin-left: 20px;
+                     margin-right: 30px;
+                     margin-top: 40px;
+                     margin-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin-shorthand"
+              style="margin: 20px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin-logical"
+              style="margin-inline-start: 20px;
+                     margin-inline-end: 30px;
+                     margin-block-start: 40px;
+                     margin-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-margin-logical-rtl"
+              style="margin-inline-start: 20px;
+                     margin-inline-end: 30px;
+                     margin-block-start: 40px;
+                     margin-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-margin-logical-shorthand"
+              style="margin-inline: 20px;
+                     margin-block: 30px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
new file mode 100644
index 0000000000..b560ed125c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that margin is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        var style = "margin-left: 30px; margin-right: 40px;  margin-top: 50px; margin-bottom: 60px;";
+
+        if (FragmentHelper.isEmpty(tag)) {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var s = compareSizeWithAndWithoutStyle(tag, style);
+                assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right margin");
+                assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom margin");
+                assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+                assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+            }, `Margin properties on ${tag}`);
+            continue;
+        }
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Margin properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
+            assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Margin properties on ${tag} (rtl)`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            // Apply the same margin style on the parent mrow.
+            // The margins are not collapsed so they should be added twice.
+            var s = compareSpaceWithAndWithoutStyle(tag, style, style);
+            assert_approx_equals(s.left_delta, 30 * 2, epsilon, "left margin");
+            assert_approx_equals(s.right_delta, 40 * 2, epsilon, "right margin");
+            assert_approx_equals(s.top_delta, 50 * 2, epsilon, "top margin");
+            assert_approx_equals(s.bottom_delta, 60 * 2, epsilon, "bottom margin");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, (30 + 40) * 2, epsilon, "preferred width");
+        }, `Margin properties on ${tag} (no margin-collapsing)`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html
new file mode 100644
index 0000000000..3b6b2a38db
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that margin is taken into account on children.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) ||
+            FragmentHelper.isEmpty(tag) ||
+            FragmentHelper.isTokenElement(tag) ||
+            tag == "semantics" ||
+            tag == "maction" ||
+            tag == "mtable")
+            continue;
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+
+            document.body.insertAdjacentHTML("beforeend", `<hr/><div>\
+<div style="display: inline-block; border: 1px dashed blue;"><math>${MathMLFragments[tag]}</math></div><br/>\
+<div style="display: inline-block; border: 1px dashed green;"><math>${MathMLFragments[tag]}</math></div>\
+</div>`);
+
+            var div = document.body.lastElementChild;
+            var elementShrinkWrapContainer = div.firstElementChild;
+            var element = elementShrinkWrapContainer.firstElementChild.firstElementChild;
+            var elementContainer = div.firstElementChild;
+            var referenceShrinkWrapContainer = div.lastElementChild;
+            var reference = referenceShrinkWrapContainer.firstElementChild.firstElementChild;
+
+            FragmentHelper.forceNonEmptyElement(element);
+            FragmentHelper.forceNonEmptyElement(reference);
+
+            var mspaceWidth = 20, mspaceHeight = 40, mspaceDepth = 30;
+            var marginLeft = 10, marginRight = 15, marginTop = 20, marginBottom = 25;
+            Array.from(element.children).forEach(mrow => {
+                mrow.outerHTML = `<mspace width="${mspaceWidth}px" height="${mspaceHeight}px" depth='${mspaceDepth}px' style='background: blue; margin-left: ${marginLeft}px; margin-right: ${marginRight}px;  margin-top: ${marginTop}px; margin-bottom: ${marginBottom}px;'></mspace>`;
+            });
+
+            Array.from(reference.children).forEach(mrow => {
+                mrow.outerHTML = `<mspace width="${marginLeft+mspaceWidth+marginRight}px" height="${mspaceHeight+marginTop}px" depth='${mspaceDepth+marginBottom}px' style='background: green;'></mspace>`;
+            });
+
+            // Compare sizes.
+            compareSize(element, reference, epsilon);
+
+            // Compare children positions.
+            var elementBox = element.getBoundingClientRect();
+            var referenceBox = reference.getBoundingClientRect();
+            for (var i = 0; i < element.children.length; i++) {
+                var childBox = element.children[i].getBoundingClientRect();
+                var referenceChildBox = reference.children[i].getBoundingClientRect();
+                assert_approx_equals(childBox.width + marginLeft + marginRight, referenceChildBox.width, epsilon, "inline size (child ${i})");
+                assert_approx_equals(childBox.height + marginTop + marginBottom, referenceChildBox.height, epsilon, "block size (child ${i})");
+
+                assert_approx_equals(childBox.left - marginLeft - elementBox.left,
+                                     referenceChildBox.left - referenceBox.left,
+                                     epsilon,
+                                     `inline position (child ${i})`);
+                assert_approx_equals(childBox.top - marginTop - elementBox.top,
+                                     referenceChildBox.top - referenceBox.top,
+                                     epsilon,
+                                     `block position (child ${i})`);
+            }
+
+            // Compare preferred widths.
+            assert_approx_equals(elementShrinkWrapContainer.offsetWidth, referenceShrinkWrapContainer.offsetWidth, epsilon, "preferred width");
+
+        }, `Margin properties on the children of ${tag}`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
new file mode 100644
index 0000000000..b6d4901f36
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>padding</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that padding is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-padding-rtl")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 20, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 20, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
+      }, "Padding properties on mrow (shorthand)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding-logical")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 30, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (logical)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_true(MathMLFeatureDetection.has_dir());
+          var s = measureSpaceAround("mrow-padding-logical-rtl")
+          assert_approx_equals(s.left, 30, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 40, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical-rtl").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
+          assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
+      }, "Padding properties on mrow (logical, rtl)");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          var s = measureSpaceAround("mrow-padding-logical-shorthand")
+          assert_approx_equals(s.left, 20, epsilon, "left padding");
+          assert_approx_equals(s.right, 20, epsilon, "right padding");
+          assert_approx_equals(s.top, 30, epsilon, "top padding");
+          assert_approx_equals(s.bottom, 30, epsilon, "bottom padding");
+          var b = document.getElementById("mrow-padding-logical-shorthand").
+              getBoundingClientRect();
+          assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
+          assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
+      }, "Padding properties on mrow (logical, shorthand)");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding"
+              style="padding-left: 20px;
+                     padding-right: 30px;
+                     padding-top: 40px;
+                     padding-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-padding-rtl"
+              style="padding-left: 20px;
+                     padding-right: 30px;
+                     padding-top: 40px;
+                     padding-bottom: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding-shorthand"
+              style="padding: 20px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding-logical"
+              style="padding-inline-start: 20px;
+                     padding-inline-end: 30px;
+                     padding-block-start: 40px;
+                     padding-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math dir="rtl">
+      <mrow>
+        <mrow id="mrow-padding-logical-rtl"
+              style="padding-inline-start: 20px;
+                     padding-inline-end: 30px;
+                     padding-block-start: 40px;
+                     padding-block-end: 50px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mrow>
+        <mrow id="mrow-padding-logical-shorthand"
+              style="padding-inline: 20px;
+                     padding-block: 30px;">
+          <mspace width="50px" height="50px"></mspace>
+        </mrow>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
new file mode 100644
index 0000000000..89d3bdc7ef
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>padding</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that padding is taken into account.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag))
+            continue;
+
+        var defaultInlinePadding = (tag === "mfrac" ? 1 : 0);
+        var style = `padding-left: ${defaultInlinePadding + 30}px; padding-right: ${defaultInlinePadding + 40}px;  padding-top: 50px; padding-bottom: 60px;`;
+
+        if (FragmentHelper.isEmpty(tag)) {
+            test(function() {
+                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+                var s = compareSizeWithAndWithoutStyle(tag, style);
+                assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right padding");
+                assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom padding");
+                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+            }, `Padding properties on ${tag}`);
+            continue;
+        }
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
+            assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Padding properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var s = compareSpaceWithAndWithoutStyle(tag, style, "rtl");
+            assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
+            assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
+            assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
+            assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
+            assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
+            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");
+        }, `Padding properties on ${tag} (rtl)`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html
new file mode 100644
index 0000000000..150a650bc2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin</title>
+<body>
+  <p>This test passes if you see a purple square of side 100px, surrounded by a
+    10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 3em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 100px; height: 100px; background: purple;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
new file mode 100644
index 0000000000..b0fb17c7d2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
+<link rel="match" href="padding-border-margin-001-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on the mrow element.">
+<body>
+  <p>This test passes if you see a purple square of side 100px, surrounded by a
+    10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 3em;">
+    <math>
+      <mrow style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <mspace width="100px" height="100px" style="background: purple;"></mspace>
+      </mrow>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html
new file mode 100644
index 0000000000..e13a9f47ff
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on largeop (reference)</title>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 300px; height: 1500px; background: cyan;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html
new file mode 100644
index 0000000000..4559fc49ce
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on largeop</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators">
+<link rel="match" href="padding-border-margin-002-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on a displaystyle mo element with the largeop property.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math  {
+    /* Largeop variant for U+2AFF has width 100px
+       and height 300 * 5000 / 1000 = 1500px */
+    font-family: TestFont;
+    font-size: 300px;
+  }
+</style>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+    <math displaystyle="true">
+      <mo largeop="true" lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">&#x2AFF;</mo>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html
new file mode 100644
index 0000000000..275494ddd8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on an operator, stretchy along the block axis (reference)</title>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 300px; height: 1500px; background: cyan;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html
new file mode 100644
index 0000000000..c54682f309
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on an operator, stretchy along the block axis</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dfn-algorithm-for-stretching-operators-along-the-block-axis">
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators">
+<link rel="match" href="padding-border-margin-003-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on an operator, stretchy along the block axis.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/stretchy.woff");
+  }
+  math  {
+    font-family: TestFont;
+    font-size: 300px;
+  }
+</style>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+    <math>
+      <mspace height="750px" depth="750px"/>
+      <mo lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">⥜</mo>
+    </math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html
new file mode 100644
index 0000000000..3d71d72fb3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  @font-face {
+    font-family: DoubleStruck;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  @font-face {
+    font-family: Italic;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  math {
+      font: 25px/1 Ahem;
+  }
+</style>
+<body>
+  <p>dir:
+    <math style="direction: ltr;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math style="color: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math style="background: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext style="font-size: 100%">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math style="font-family: DoubleStruck, Italic;">
+      <mtext style="text-transform: math-italic">&#x628;</mtext>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math style="math-style: compact">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext style="math-depth: 0;">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html
new file mode 100644
index 0000000000..842d04b40a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="match" href="presentational-hints-001-ref.html"/>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify that local author style wins over presentation hints attributes">
+<style>
+  @font-face {
+    font-family: DoubleStruck;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  @font-face {
+    font-family: Italic;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  math {
+      font: 25px/1 Ahem;
+  }
+</style>
+<body>
+  <p>dir:
+    <math dir="rtl" style="direction: ltr;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math mathcolor="red" style="color: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math mathbackground="red" style="background: green;">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext mathsize="300%" style="font-size: 100%">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math style="font-family: DoubleStruck, Italic;">
+      <mtext mathvariant="double-struck"
+             style="text-transform: math-italic">&#x628;</mtext>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math displaystyle="true" style="math-style: compact">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext scriptlevel="1" style="math-depth: 0;">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html
new file mode 100644
index 0000000000..b8f5458b9b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints (dynamic)</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  @font-face {
+    font-family: DoubleStruck;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  math {
+      font: 25px/1 Ahem;
+  }
+</style>
+</head>
+<body>
+  <p>dir:
+    <math dir="rtl">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math mathcolor="green">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math mathbackground="green">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext mathsize="300%">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math style="font-family: DoubleStruck;">
+      <mtext mathvariant="double-struck">&#x628;</mtext>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math displaystyle="true">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext scriptlevel="-1">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html
new file mode 100644
index 0000000000..fc89b07a37
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>presentational hints (dynamic)</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="match" href="presentational-hints-002-ref.html"/>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify dynamically setting attributes mapped to style.">
+<style>
+  @font-face {
+    font-family: DoubleStruck;
+    src: url("/fonts/math/mathvariant-double-struck.woff");
+  }
+  math {
+      font: 25px/1 Ahem;
+  }
+</style>
+<script>
+  window.addEventListener("load", function() {
+    // force initial layout so we're sure what we're testing against
+    document.documentElement.getBoundingClientRect();
+
+    document.getElementById("dir").setAttribute("dir", "rtl");
+    document.getElementById("mathcolor").setAttribute("mathcolor", "green");
+    document.getElementById("mathbackground").setAttribute("mathbackground", "green");
+    document.getElementById("mathsize").setAttribute("mathsize", "300%");
+    document.getElementById("mathvariant").setAttribute("mathvariant", "double-struck");
+    document.getElementById("displaystyle").setAttribute("displaystyle", "true");
+    document.getElementById("scriptlevel").setAttribute("scriptlevel", "-1");
+
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</head>
+<body>
+  <p>dir:
+    <math id="dir">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathcolor:
+    <math id="mathcolor">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+    </math>
+  </p>
+  <p>mathbackground:
+    <math id="mathbackground">
+      <mtext>X</mtext>
+      <mtext>p</mtext>
+  </p>
+  <p>mathsize:
+    <math>
+      <mtext id="mathsize">X</mtext>
+    </math>
+  </p>
+  <p>mathvariant:
+    <math style="font-family: DoubleStruck;">
+      <mtext id="mathvariant">&#x628;</mtext>
+    </math>
+  </p>
+  <p>displaystyle:
+    <math id="displaystyle">
+      <munder>
+        <mo movablelimits="true">X</mo>
+        <mo>X</mo>
+      </munder>
+    </math>
+  </p>
+  <p>scriptlevel:
+    <math>
+      <mtext id="scriptlevel">X</mtext>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html
new file mode 100644
index 0000000000..e9be1f2965
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Automatic scriptlevel</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="assert" content="Verify automatic scriptlevel changes">
+<style>
+  #container, math {
+      /* Ahem font does not have a MATH table so the font-size scale factor
+         is always 0.71^{computed - inherited math script level} */
+      font: 100px/1 Ahem;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+  function fontSize(element) {
+      return parseFloat((/(.+)px/).exec(window.getComputedStyle(element).getPropertyValue("font-size"))[1]);
+  }
+  function runTests() {
+      var container = document.getElementById("container");
+      var epsilon = .1
+      var fontSizeAtScriptLevelZero = fontSize(container);
+
+      test(function() {
+          var element = document.getElementById("mfrac_displaystyle");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "numerator");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "denominator");
+      }, "automatic scriptlevel on mfrac (displaystyle=true)");
+
+     test(function() {
+          var element = document.getElementById("mfrac_notdisplaystyle");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero * .71, epsilon, "numerator");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "denominator");
+      }, "automatic scriptlevel on mfrac (displaystyle=false)");
+
+      test(function() {
+          var element = document.getElementsByTagName("mroot")[0];
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71 * .71, epsilon, "index");
+      }, "automatic scriptlevel on mroot");
+
+      ["msub", "msup", "msubsup", "munder", "mover", "munderover", "mmultiscripts"].forEach(tag => {
+          test(function() {
+              var element = document.getElementsByTagName(tag)[0];
+              for (var i = 0; i < element.children.length; i++)
+                  assert_approx_equals(fontSize(element.children[i]), i > 0 ? fontSizeAtScriptLevelZero * .71 : fontSizeAtScriptLevelZero, epsilon, `child ${i}`);
+          }, `automatic scriptlevel on ${tag}`);
+      });
+
+      test(function() {
+          var element = document.querySelector("munder[accentunder='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
+      }, `automatic scriptlevel on munder (accentunder=true)`);
+
+      test(function() {
+          var element = document.querySelector("mover[accent='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "over");
+      }, `automatic scriptlevel on mover (accent=true)`);
+
+      test(function() {
+          var element = document.querySelector("munderover[accentunder='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over");
+      }, `automatic scriptlevel on munderover (accentunder=true)`);
+
+      test(function() {
+          var element = document.querySelector("munderover[accent='true']");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over");
+      }, `automatic scriptlevel on munderover (accent=true)`);
+
+      test(function() {
+          var element = document.getElementById("munderover-dynamic-case-insensitive")
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over");
+
+          element.removeAttribute("accent");
+          element.setAttribute("accentunder", "TrUe");
+          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
+          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
+          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over");
+       }, "checking dynamic/case-insensitive accent/accentunder");
+
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <p>
+      <math displaystyle="true">
+        <mfrac id="mfrac_displaystyle">
+          <mn>0</mn>
+          <mn>1</mn>
+        </mfrac>
+      </math>
+
+      <math displaystyle="false">
+        <mfrac id="mfrac_notdisplaystyle">
+          <mn>0</mn>
+          <mn>1</mn>
+        </mfrac>
+      </math>
+    </p>
+    <p>
+      <math>
+        <mroot>
+          <mn>0</mn>
+          <mn>1</mn>
+        </mroot>
+      </math>
+    </p>
+    <p>
+      <math>
+        <msub>
+          <mn>0</mn>
+          <mn>1</mn>
+        </msub>
+      </math>
+      <math>
+        <msup>
+          <mn>0</mn>
+          <mn>1</mn>
+        </msup>
+      </math>
+      <math>
+        <msubsup>
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </msubsup>
+      </math>
+      <math>
+        <munder>
+          <mn>0</mn>
+          <mn>1</mn>
+        </munder>
+      </math>
+      <math>
+        <mover>
+          <mn>0</mn>
+          <mn>1</mn>
+        </mover>
+      </math>
+      <math>
+        <munderover>
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+      <math>
+        <mmultiscripts>
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+          <mn>3</mn>
+          <mn>4</mn>
+          <mprescripts/>
+          <mn>6</mn>
+          <mn>7</mn>
+          <mn>8</mn>
+          <mn>9</mn>
+        </mmultiscripts>
+      </math>
+    </p>
+    <p>
+      <math>
+        <munder accentunder="true">
+          <mn>0</mn>
+          <mn>1</mn>
+        </munder>
+      </math>
+      <math>
+        <mover accent="true">
+          <mn>0</mn>
+          <mn>1</mn>
+        </mover>
+      </math>
+      <math>
+        <munderover accent="true">
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+      <math>
+        <munderover accentunder="true">
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+    </p>
+    <p>
+      <math>
+        <munderover id="munderover-dynamic-case-insensitive" accent="TrUe">
+          <mn>0</mn>
+          <mn>1</mn>
+          <mn>2</mn>
+        </munderover>
+      </math>
+    </p>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html
new file mode 100644
index 0000000000..005e8a7882
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Transform property (reference)</title>
+</head>
+<body>
+  <p>Rectangles should be rotated.</p>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 100px; transform: rotate(90deg)"></div>
+  <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; transform: rotate(90deg)"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/transform.html b/testing/web-platform/tests/mathml/relations/css-styling/transform.html
new file mode 100644
index 0000000000..c45fda3469
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/transform.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Transform property</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="transform-ref.html"/>
+<meta name="assert" content="Verify that the transform property works on MathML elements.">
+</head>
+<body>
+  <p>Rectangles should be rotated.</p>
+  <div>
+    <math><mspace width="200px" height="200px" style="position:absolute; top:100px; background: green; transform: rotate(90deg)"/></math>
+  </div>
+  <div style="position: absolute; top: 300px; width: 200px; height: 200px">
+    <math style="position: absolute; transform: rotate(90deg)"><mspace width="200px" height="200px" style="background: green"/></math>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html
new file mode 100644
index 0000000000..56bf7b7da2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="match" href="visibility-001-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text of token elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><mi style="visibility: hidden">1</mi></math>
+    <math><mn style="visibility: hidden">2</mn></math>
+    <math><mo style="visibility: hidden">3</mo></math>
+    <math><mtext style="visibility: hidden">4</mtext></math>
+    <math><ms style="visibility: hidden">5</ms></math>
+    <div id="dynamic">
+      <math><mi>1</mi></math>
+      <math><mn>2</mn></math>
+      <math><mo>3</mo></math>
+      <math><mtext>4</mtext></math>
+      <math><ms>5</ms></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html
new file mode 100644
index 0000000000..f92d0faf6d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="match" href="visibility-002-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and fraction bar of the mfrac element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><mfrac style="visibility: hidden"><mn>1</mn><mn>2</mn></mfrac></math>
+    <div id="dynamic">
+      <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>
+    </div>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html
new file mode 100644
index 0000000000..4bf4d45c81
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://w3c.github.io/mathml-core/#radical-symbol">
+<link rel="match" href="visibility-003-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and radical symbol of the msqrt and mroot elements.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><msqrt style="visibility: hidden"><mn>1</mn></msqrt></math>
+    <math><mroot style="visibility: hidden"><mn>2</mn><mn>3</mn></mroot></math>
+    <div id="dynamic">
+      <math><msqrt><mn>1</mn></msqrt></math>
+      <math><mroot><mn>2</mn><mn>3</mn></mroot></math>
+    </div>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html
new file mode 100644
index 0000000000..28678eaf0c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://github.com/mathml-refresh/mathml-core/pull/24">
+<link rel="match" href="visibility-004.tentative-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and graphical elements of the menclose element.">
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math><menclose notation="left" style="visibility: hidden"><mn>1</mn></menclose></math>
+    <math><menclose notation="right" style="visibility: hidden"><mn>2</mn></menclose></math>
+    <math><menclose notation="top" style="visibility: hidden"><mn>3</mn></menclose></math>
+    <math><menclose notation="bottom" style="visibility: hidden"><mn>4</mn></menclose></math>
+    <math><menclose notation="box" style="visibility: hidden"><mn>5</mn></menclose></math>
+    <math><menclose notation="roundedbox" style="visibility: hidden"><mn>6</mn></menclose></math>
+    <math><menclose notation="actuarial" style="visibility: hidden"><mn>7</mn></menclose></math>
+    <math><menclose notation="madruwb" style="visibility: hidden"><mn>8</mn></menclose></math>
+    <math><menclose notation="horizontalstrike" style="visibility: hidden"><mn>9</mn></menclose></math>
+    <math><menclose notation="verticalstrike" style="visibility: hidden"><mn>10</mn></menclose></math>
+    <math><menclose notation="updiagonalstrike" style="visibility: hidden"><mn>11</mn></menclose></math>
+    <math><menclose notation="downdiagonalstrike" style="visibility: hidden"><mn>12</mn></menclose></math>
+    <math><menclose notation="longdiv" style="visibility: hidden"><mn>13</mn></menclose></math>
+    <math><menclose notation="circle" style="visibility: hidden"><mn>14</mn></menclose></math>
+    <div id="dynamic">
+      <math><menclose notation="left"><mn>1</mn></menclose></math>
+      <math><menclose notation="right"><mn>2</mn></menclose></math>
+      <math><menclose notation="top"><mn>3</mn></menclose></math>
+      <math><menclose notation="bottom"><mn>4</mn></menclose></math>
+      <math><menclose notation="box"><mn>5</mn></menclose></math>
+      <math><menclose notation="roundedbox"><mn>6</mn></menclose></math>
+      <math><menclose notation="actuarial"><mn>7</mn></menclose></math>
+      <math><menclose notation="madruwb"><mn>8</mn></menclose></math>
+      <math><menclose notation="horizontalstrike"><mn>9</mn></menclose></math>
+      <math><menclose notation="verticalstrike"><mn>10</mn></menclose></math>
+      <math><menclose notation="updiagonalstrike"><mn>11</mn></menclose></math>
+      <math><menclose notation="downdiagonalstrike"><mn>12</mn></menclose></math>
+      <math><menclose notation="longdiv"><mn>13</mn></menclose></math>
+      <math><menclose notation="circle"><mn>14</mn></menclose></math>
+    </div>
+  </div>
+  <script>
+    window.addEventListener("load", () => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    });
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html
new file mode 100644
index 0000000000..fcaf5fe85b
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; width: 200px; height: 200px;">
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html
new file mode 100644
index 0000000000..a3af376fea
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
+<link rel="match" href="visibility-005-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for normal, stretchy and large operators.">
+<style>
+  math {
+      font: 20px/1 Ahem;
+  }
+  @font-face {
+      font-family: operators;
+      src: url("/fonts/math/operators.woff");
+  }
+  mo {
+      font-family: operators;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if you see a green square.</p>
+  <div style="background: green; color: red; width: 200px; height: 200px;">
+    <math>
+      <!-- unstretched operators -->
+      <mo style="visibility: hidden">⥯</mo>
+      <mo style="visibility: hidden">+</mo>
+      <mo style="visibility: hidden">-</mo>
+    </math>
+    <math displaystyle="true">
+      <!-- large operator -->
+      <mo largeop="true" style="visibility: hidden">⥯</mo>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, small size -->
+        <mspace height="2em"/>
+        <mo style="visibility: hidden">⥯</mo>
+      </mrow>
+    </math>
+    <math>
+      <mrow>
+        <!-- stretchy, large size -->
+        <mspace height="4em"/>
+        <mo style="visibility: hidden">⥯</mo>
+      </mrow>
+    </math>
+    <div id="dynamic">
+      <math>
+        <!-- unstretched operators -->
+        <mo stretchy="false">⥯</mo>
+        <mo>+</mo>
+        <mo>-</mo>
+      </math>
+      <math displaystyle="true">
+        <!-- large operator -->
+        <mo largeop="true">⥯</mo>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, small size -->
+          <mspace height="2em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+      <math>
+        <mrow>
+          <!-- stretchy, large size -->
+          <mspace height="4em"/>
+          <mo>⥯</mo>
+        </mrow>
+      </math>
+    </div>
+  </div>
+  <script src="/mathml/support/fonts.js"></script>
+  <script>
+    window.addEventListener("load", () => loadAllFonts().then(() => {
+        document.getElementById("dynamic").style.visibility = "hidden";
+        document.documentElement.classList.remove("reftest-wait");
+    }));
+  </script>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html
new file mode 100644
index 0000000000..e762b0060e
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>width, height, inline-size and block-size</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/mathml/support/box-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+
+    for (tag in MathMLFragments) {
+        if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtable")
+            continue;
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var style = "width: 500px; height: 400px;";
+            var s = compareSizeWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.width_delta, 0, epsilon, "width");
+            assert_approx_equals(s.height_delta, 0, epsilon, "height");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+        }, `width and height properties on ${tag}`);
+
+        test(function() {
+            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
+            var style = "inline-size: 500px; block-size: 400px;";
+            var s = compareSizeWithAndWithoutStyle(tag, style);
+            assert_approx_equals(s.width_delta, 0, epsilon, "width");
+            assert_approx_equals(s.height_delta, 0, epsilon, "height");
+            assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
+            assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
+        }, `inline-size and block-size properties on ${tag}`);
+    }
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
new file mode 100644
index 0000000000..e239cdca5a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Forced writing-mode on MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test that writing-mode is forced to horizontal-tb on MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+  /* selector defined in mathml-fragments.js */
+  .element {
+    writing-mode: vertical-lr;
+    padding-block-start: 10px;
+    padding-block-end: 15px;
+    padding-inline-start: 20px;
+    padding-inline-end: 25px;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <math class="element"></math>
+  </div>
+  <script>
+      var container = document.getElementById("container");
+      for (tag in MathMLFragments) {
+          container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+      }
+      let unknownElement = FragmentHelper.createElement("unknown");
+      unknownElement.setAttribute("class", "element");
+      container.appendChild(unknownElement);
+      Array.from(document.getElementsByClassName("element")).forEach(element => {
+        var tag = element.tagName;
+        var style = window.getComputedStyle(element);
+        test(function () {
+          assert_equals(style["writing-mode"], "horizontal-tb");
+        }, `writing-mode is forced to horizontal-tb on <${tag}> element`);
+        test(function () {
+          assert_equals(style["padding-block-start"], style["padding-top"]);
+          assert_equals(style["padding-block-end"], style["padding-bottom"]);
+          assert_equals(style["padding-inline-start"], style["padding-left"]);
+          assert_equals(style["padding-inline-end"], style["padding-right"]);
+        }, `logical properties interpreted in horizontal-tb on <${tag}> element`);
+      });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
new file mode 100644
index 0000000000..6eae88efb1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Reset writing-mode and logical property (reference)</title>
+  </head>
+  <body>
+    <p>Test passes if you see a green square.</p>
+    <math style="writing-mode: horizontal-tb;
+                 padding-top: 200px;
+                 background: green">
+      <mspace width="200px"/>
+    </math>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
new file mode 100644
index 0000000000..939cfc5ba6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Reset writing-mode and logical property</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="Verify how forced writing-mode is taken into account for logicial properties.">
+    <link rel="match" href="reset-and-logicial-property-ref.html">
+  </head>
+  <body>
+    <p>Test passes if you see a green square.</p>
+    <math style="writing-mode: vertical-lr;
+                 padding-block-start: 200px;
+                 background: green">
+      <mspace width="200px"/>
+    </math>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
new file mode 100644
index 0000000000..b751caf90d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>writing mode</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) for mrow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      var reference = document.getElementById("horizontal-tb_ltr");
+
+      ["horizontal-tb_rtl"].forEach(id => {
+           var element = document.getElementById(id);
+
+           test(function() {
+               var style = window.getComputedStyle(element);
+               var writingMode = id.split("_");
+               assert_equals(style.getPropertyValue("writing-mode"),
+                             writingMode[0], "writing-mode");
+               assert_equals(style.getPropertyValue("direction"),
+                             writingMode[1], "direction");
+           }, `Inheritance of CSS writing-mode and direction (id='${id}')`);
+
+           test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              compareLayout(element, reference, epsilon);
+           }, `Layout of mrow (id='${id}')`);
+      });
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mrow id="horizontal-tb_ltr">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+  <p>
+    <math style="direction: rtl;">
+      <mrow id="horizontal-tb_rtl">
+        <mspace style="background: blue"
+                width="20px" height="30px" depth="40px"></mspace>
+        <mspace style="background: black"
+                width="50px" depth="60px"></mspace>
+        <mspace style="background: yellow"
+                width="70px" height="80px"></mspace>
+      </mrow>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
new file mode 100644
index 0000000000..c0b64a917a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>writing mode</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
+<meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script>
+  var epsilon = 1;
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      for (tag in MathMLFragments) {
+          if (tag == "annotation" || tag == "annotation-xml")
+              continue; // These tags have display: none.
+
+          ["horizontal-tb_rtl"].forEach(id => {
+               var writingMode = id.split("_");
+               var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`;
+
+               document.body.insertAdjacentHTML("beforeend", `<div>\
+<math>${MathMLFragments[tag]}</math>\
+<math>${MathMLFragments[tag]}</math>\
+</div>`);
+               var div = document.body.lastElementChild;
+
+               var styleMath = div.firstElementChild;
+               styleMath.setAttribute("style", writingModeString);
+               var styleElement = FragmentHelper.element(styleMath);
+
+               var referenceMath = div.lastElementChild;
+               var referenceElement = FragmentHelper.element(referenceMath);
+
+               [styleMath, referenceMath].forEach(math => {
+                   Array.from(math.getElementsByClassName("mathml-container")).forEach(container => {
+                       container.insertAdjacentHTML("beforeend", "\
+<mspace style='background: blue'\
+        width='20px' height='30px' depth='40px'></mspace>\
+<mspace style='background: black'\
+        width='50px' depth='60px'></mspace>\
+<mspace style='background: yellow'\
+        width='70px' height='80px'></mspace>");
+                   });
+                   Array.from(math.getElementsByClassName("foreign-container")).forEach(container => {
+                       container.insertAdjacentHTML("beforeend", "\
+<span style='display: inline-block; background: lightblue;\
+             inline-size: 20px; block-size: 30px;\
+             vertical-align: bottom;'></span>\
+<span style='display: inline-block; background: pink;\
+             inline-size: 40px; block-size: 50px;\
+             vertical-align: bottom;'></span>");
+                   });
+               });
+
+               test(function() {
+                   assert_true(MathMLFeatureDetection.has_mspace());
+                   var style = window.getComputedStyle(styleElement);
+                   assert_equals(style.getPropertyValue("writing-mode"),
+                                 writingMode[0], "writing-mode");
+                   assert_equals(style.getPropertyValue("direction"),
+                             writingMode[1], "direction");
+                   compareLayout(styleElement, referenceElement, epsilon);
+               }, `Layout of ${tag} (${writingModeString})`);
+
+               div.style = "display: none;"; // Hide the div after testing.
+           });
+      }
+      done();
+  }
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/class-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/class-1-ref.html
new file mode 100644
index 0000000000..5afa59ecf2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/class-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Class (reference)</title>
+</head>
+<body>
+
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext style="background: green; color: white;">PASS</mtext>
+  </math>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/class-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/class-1.html
new file mode 100644
index 0000000000..fd1678d440
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/class-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Class</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="class-1-ref.html"/>
+<meta name="assert" content="Verify that the class attribute affects CSS selectors.">
+<style>
+  mtext.fail { display: none; }
+  mtext.pass { background: green; }
+</style>
+</head>
+<body>
+
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext class="fail" style="background: red; color: white;">FAIL</mtext>
+    <mtext class="pass" style="color: white;">PASS</mtext>
+  </math>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/class-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/class-2.html
new file mode 100644
index 0000000000..e694b063a6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/class-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Class</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="Verify whether the getElementsByClassName() works for MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+    var mtext = document.getElementsByClassName("cl");
+    test(function() {
+      assert_equals(mtext.length, 3);
+      var mtext_ref = document.body.lastElementChild.firstElementChild;
+      mtext_ref = mtext_ref.nextElementSibling.nextElementSibling
+      assert_equals(mtext[0], mtext_ref);
+      mtext_ref = mtext_ref.nextElementSibling.nextElementSibling;
+      assert_equals(mtext[1], mtext_ref);
+      mtext_ref = mtext_ref.nextElementSibling.nextElementSibling;
+      assert_equals(mtext[2], mtext_ref);
+    }, "getElementsByClassName()");
+    done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math>
+    <mtext class="cl_"></mtext>
+    <mtext class="c"></mtext>
+    <mtext class="cl"></mtext>
+    <mtext class="cl_"></mtext>
+    <mtext class="cl"></mtext>
+    <mtext class="c"></mtext>
+    <mtext class="cl"></mtext>
+    <mtext class="cl_"></mtext>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html
new file mode 100644
index 0000000000..bf2f8d11ed
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<title>clipboard event handlers for MathML</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"/>
+<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"/>
+<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut"/>
+<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste"/>
+<meta
+  name="assert"
+  content="MathMLElements incorporates oncopy / oncut / onpaste event handlers"
+/>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<math
+  oncopy="window.copyHappened1 = true"
+  oncut="window.cutHappened1 = true"
+  onpaste="window.pasteHappened1 = true"
+>
+  <mi>E</mi>
+</math>
+<script>
+  const EVENTS = ["copy", "cut", "paste"];
+  const el = document.querySelector("math");
+
+  function dispatchEventTest(name) {
+    const mathEl = document.createElementNS(
+        "http://www.w3.org/1998/Math/MathML",
+        "math"
+    );
+    test(() => {
+      let target = undefined;
+      mathEl[`on${name}`] = (e) => { target = e.currentTarget; }
+      const event = new ClipboardEvent(name, {
+        bubbles: true,
+        cancellable: true
+      });
+      mathEl.dispatchEvent(event);
+      assert_equals(target, mathEl, "The event must be fired at the <math> element");
+    }, `${name}: dispatching an Event at a <math> element must trigger element.on${name}`);
+  }
+
+  function evaluatedHandlerTest(name) {
+    const handlerName = "on" + name;
+
+    test(() => {
+      const compiledHandler = el[handlerName];
+
+      assert_equals(
+        typeof compiledHandler,
+        "function",
+        `The ${handlerName} property must be a function`
+      );
+      compiledHandler();
+      assert_true(
+        window[`${name}Happened1`],
+        "Calling the handler must run the code"
+      );
+    }, `${handlerName}: the content attribute must be compiled into a function as the corresponding property`);
+
+    test(() => {
+        const mathEl = document.createElementNS(
+            "http://www.w3.org/1998/Math/MathML",
+            "math"
+        );
+        assert_equals(mathEl[handlerName], null, `The ${handlerName} property must be null (no attribute)`);
+
+        mathEl.setAttribute(handlerName, `window.${handlerName}Happened2 = true;`);
+        const compiledHandler = mathEl[handlerName];
+        assert_equals(
+            typeof compiledHandler,
+            "function",
+            `The ${handlerName} property must be a function (set attribute)`
+        );
+        compiledHandler();
+        assert_true(
+            window[`${handlerName}Happened2`],
+            "Calling the handler must run the code (set attribute)"
+        );
+
+        window[`${handlerName}Happened2`] = false;
+        const clonedMathEl = mathEl.cloneNode(true);
+        const clonedCompiledHandler = clonedMathEl[handlerName];
+        assert_equals(
+            typeof clonedCompiledHandler,
+            "function",
+            `The ${handlerName} property must be a function (clone node)`
+        );
+        clonedCompiledHandler();
+        assert_true(
+            window[`${handlerName}Happened2`],
+            "Calling the handler must run the code (clone node)"
+        );
+
+        mathEl.setAttribute(handlerName, `window.${handlerName}Happened3 = true;`);
+        const newCompiledHandler = mathEl[handlerName];
+        assert_equals(
+            typeof newCompiledHandler,
+            "function",
+            `The ${handlerName} property must be a function (modify attribute)`
+        );
+        newCompiledHandler();
+        assert_true(
+            window[`${handlerName}Happened3`],
+            "Calling the handler must run the code (modify attribute)"
+        );
+
+        mathEl.removeAttribute(handlerName);
+        assert_equals(mathEl[handlerName], null, `The ${handlerName} property must be null (remove attribute)`);
+    }, `${handlerName}: dynamic changes on the attribute`);
+
+  }
+
+  EVENTS.forEach(name => {
+    dispatchEventTest(name);
+    evaluatedHandlerTest(name);
+  });
+</script>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1-ref.html
new file mode 100644
index 0000000000..71ee8cea9d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Color Attributes (reference)</title>
+<style>
+  #content > div {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+  <p>Test passes if you see the text below is written in white on a green
+    background.</p>
+
+  <div id="content">
+    <div>
+      <math style="background: green;">
+        <mtext style="color: white;">Hello World!</mtext>
+      </math>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1.html
new file mode 100644
index 0000000000..211bda7f85
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Color Attributes</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
+<meta name="assert" content="Verify that the mathcolor and mathbackground attributes are supported on the math element.">
+<link rel="match" href="color-attributes-1-ref.html"/>
+<style>
+  #content {
+    color: red;
+  }
+  #content > div {
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+
+  <p>Test passes if you see the text below is written in white on a green
+    background.</p>
+
+  <div id="content">
+    <div>
+      <math style="background: red;">
+        <mtext style="visibility: hidden;">Hello World!</mtext>
+      </math>
+    </div>
+    <div>
+      <math mathcolor="white" mathbackground="green">
+        <mtext>Hello World!</mtext>
+      </math>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/content-editable.html b/testing/web-platform/tests/mathml/relations/html5-tree/content-editable.html
new file mode 100644
index 0000000000..28e8630829
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/content-editable.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML inside content-editable</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<meta name="assert" content="Verify that putting MathML inside a content-editable div shouldn't affect its layout.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+      var epsilon = 1;
+      var mfrac = document.getElementById("mfrac");
+      var num = mfrac.firstElementChild.getBoundingClientRect();
+      var denom = mfrac.lastElementChild.getBoundingClientRect();
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(num.width, 30, epsilon, "numerator width");
+          assert_approx_equals(num.height, 40, epsilon, "numerator height");
+          assert_approx_equals(denom.width, 50, epsilon, "denominator width");
+          assert_approx_equals(denom.height, 60, epsilon, "denominator height");
+      }, "mspace layout in content-editable div");
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mfrac());
+          assert_greater_than_equal(denom.bottom - num.top,
+                                    (40 + 60),
+                                    "numerator is above the denominator");
+          assert_approx_equals((num.left + num.right) / 2,
+                               (denom.left + denom.right) / 2,
+                               epsilon, "numerator and denominator are horizontally aligned");
+      }, "mfrac layout in content-editable div");
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <div contenteditable="true">
+    This is
+    <math>
+      <mfrac id="mfrac">
+        <mspace width="30px" height="40px" style="background: cyan"></mspace>
+        <mspace width="50px" height="60px" style="background: yellow"></mspace>
+      </mfrac>
+    </math>
+    a content editable div
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative-ref.html
new file mode 100644
index 0000000000..19f3e6c82a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML 'ElementCSSInlineStyle` Dynamic Tests</title>
+<style>
+mspace {
+  background-color: green;
+}
+</style>
+</head>
+<body>
+  <span>This tests that `ElementCSSInlineStyle` interface changes update rendering.</span>
+  <div>
+    <math><mspace width="50px" height="100px"/><mspace width="50px" height="100px"/></math>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative.html
new file mode 100644
index 0000000000..5d27d6a7e6
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8" />
+    <title>MathML 'ElementCSSInlineStyle` Dynamic Tests</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+    <link rel="match" href="css-inline-style-dynamic.tentative-ref.html"/>
+    <script src="/mathml/support/feature-detection.js"></script>
+    <style>
+      #hidden  {
+        visibility: hidden;
+        background-color: green;
+      }
+      #red  {
+        background-color: red;
+      }
+    </style>
+    <meta
+      name="assert"
+      content="MathMLElements ElementCSSInlineStyle interface changes update rendering"
+    />
+    <script type="text/javascript">
+      function test()
+      {
+        MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");
+        document.body.offsetTop; // Update layout
+
+        var mspace = document.getElementById("hidden");
+        if (mspace.style)
+          mspace.style.visibility = "visible";
+
+        mspace = document.getElementById("red");
+        if (mspace.style)
+          mspace.style.backgroundColor = "green";
+
+        document.documentElement.className = "";
+      }
+    </script>
+  </head>
+  <body onload="test()">
+    <span>This tests that `ElementCSSInlineStyle` interface changes update rendering.</span>
+    <div>
+      <math><mspace width="50px" height="100px" id="hidden"/><mspace width="50px" height="100px" id="red"/></math>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html
new file mode 100644
index 0000000000..f8348c15b2
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>MathML 'ElementCSSInlineStyle` Mixin Tests</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+    <style>
+      math * {
+        background-color: red;
+      }
+    </style>
+    <meta
+      name="assert"
+      content="MathMLElements incorporate a functional ElementCSSInlineStyle interface"
+    />
+    <script src="/mathml/support/mathml-fragments.js"></script>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <span
+      >This tests the presence and functionality of features of the
+      `ElementCSSInlineStyle` interface for MathMLElements</span
+    >
+    <math></math>
+    <script>
+      let mathEl = document.querySelector("math");
+
+      test(function() {
+        mathEl.style.backgroundColor = "lime";
+        assert_equals(
+          getComputedStyle(mathEl).backgroundColor,
+          "rgb(0, 255, 0)",
+          "The applied background should be green."
+        );
+      }, `The <math> element style property should be present and be functional.`);
+
+      Object.keys(MathMLFragments).forEach(elName => {
+        mathEl.innerHTML = MathMLFragments[elName];
+
+        test(function() {
+          let el = FragmentHelper.element(mathEl);
+          el.style.backgroundColor = "blue";
+
+          assert_equals(
+            getComputedStyle(el).backgroundColor,
+            "rgb(0, 0, 255)",
+            "The applied background should be blue."
+          );
+        }, `The ${elName}'s style property should be present and be functional.`);
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/display-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/display-1.html
new file mode 100644
index 0000000000..e2d0c792f5
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/display-1.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML display attribute</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="Verify that the display attribute on the math element is supported and impacts centering and line breaking with surrounding content.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/attribute-values.js"></script>
+<script>
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+  window.addEventListener("DOMContentLoaded", function() {
+      for (transform in AttributeValueTransforms) {
+          TransformAttributeValues(transform, ["display"]);
+          var content = getBox("content");
+
+          var before_block = getBox("before_block");
+          var mspace_block = getBox("mspace_block");
+          var after_block = getBox("after_block");
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              assert_approx_equals(before_block.left, content.left, 1,
+                                   "content before must be left aligned");
+              assert_approx_equals((mspace_block.left + mspace_block.right) / 2,
+                                   (content.left + content.right) / 2,
+                                   1,
+                                   "math must be centered.");
+              assert_approx_equals(after_block.left, content.left, 1,
+                                   "content after must be left aligned");
+              assert_less_than_equal(before_block.bottom, mspace_block.top,
+                                     "new line before math");
+              assert_less_than_equal(mspace_block.bottom, after_block.top,
+                                     "new line after math");
+          }, `Test display math ${transform}`);
+
+          var before_inline = getBox("before_inline");
+          var mspace_inline = getBox("mspace_inline");
+          var after_inline = getBox("after_inline");
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              assert_approx_equals((before_inline.top + before_inline.bottom) / 2,
+                                   (mspace_inline.top + mspace_inline.bottom) / 2,
+                                   1,
+                                   "content before must be horizontally aligned with math");
+              assert_approx_equals((after_inline.top + after_inline.bottom) / 2,
+                                   (mspace_inline.top + mspace_inline.bottom) / 2,
+                                   1,
+                                   "content after must be horizontally aligned with math");
+              assert_less_than_equal(before_inline.right, mspace_inline.left,
+                                     "content before must be on the left of math");
+              assert_less_than_equal(mspace_inline.right, after_inline.left,
+                                     "content after must be on the right of math");
+          }, `Test inline math ${transform}`);
+
+          var before_block_and_specified_width = getBox("before_block_and_specified_width");
+          var mspace_width = getBox("mspace_width");
+          var after_block_and_specified_width = getBox("after_block_and_specified_width");
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              assert_approx_equals(before_block_and_specified_width.left, content.left, 1,
+                                   "content before must be left aligned");
+              assert_approx_equals((mspace_width.left + mspace_width.right) / 2,
+                                   (content.left + content.right) / 2,
+                                   1,
+                                   "math must be centered.");
+              assert_approx_equals(after_block_and_specified_width.left, content.left, 1,
+                                   "content after must be left aligned");
+              assert_less_than_equal(before_block_and_specified_width.bottom, mspace_width.top,
+                                     "new line before math");
+              assert_less_than_equal(mspace_width.bottom, after_block_and_specified_width.top,
+                                     "new line after math");
+          }, `Test width on display=block math ${transform}`);
+      }
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          document.getElementById("mspace_dynamic_block").parentNode.
+              setAttribute("display", "block");
+          var before_block = getBox("before_dynamic_block");
+          var mspace_block = getBox("mspace_dynamic_block");
+          var after_block = getBox("after_dynamic_block");
+
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(before_block.left, content.left, 1,
+                               "content before must be left aligned");
+          assert_approx_equals((mspace_block.left + mspace_block.right) / 2,
+                               (content.left + content.right) / 2,
+                               1,
+                               "math must be centered.");
+          assert_approx_equals(after_block.left, content.left, 1,
+                               "content after must be left aligned");
+          assert_less_than_equal(before_block.bottom, mspace_block.top,
+                                 "new line before math");
+          assert_less_than_equal(mspace_block.bottom, after_block.top,
+                                 "new line after math");
+      }, "Test dynamically setting display=block");
+
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          document.getElementById("mspace_dynamic_inline").parentNode.
+              removeAttribute("display");
+          var before_inline = getBox("before_dynamic_inline");
+          var mspace_inline = getBox("mspace_dynamic_inline");
+          var after_inline = getBox("after_dynamic_inline");
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals((before_inline.top + before_inline.bottom) / 2,
+                               (mspace_inline.top + mspace_inline.bottom) / 2,
+                               1,
+                               "content before must be horizontally aligned with math");
+          assert_approx_equals((after_inline.top + after_inline.bottom) / 2,
+                               (mspace_inline.top + mspace_inline.bottom) / 2,
+                               1,
+                               "content after must be horizontally aligned with math");
+          assert_less_than_equal(before_inline.right, mspace_inline.left,
+                                 "content before must be on the left of math");
+          assert_less_than_equal(mspace_inline.right, after_inline.left,
+                                 "content after must be on the right of math");
+      }, "Test dynamically setting display=inline");
+
+      done();
+  });
+</script>
+<style>
+  #content {
+    width: 600px;
+    background: #ccc;
+  }
+  span.square {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    background: black;
+  }
+  mspace {
+    background: blue;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="content">
+    <span id="before_block" class="square"></span>
+    <math display="block"><mspace id="mspace_block" width="50px" height="50px"/></math>
+    <span id="after_block" class="square"></span>
+    <br/>
+    <span id="before_inline" class="square"></span>
+    <math display="inline"><mspace id="mspace_inline" width="50px" height="50px"/></math>
+    <span id="after_inline" class="square"></span>
+    <br/>
+    <span id="before_block_and_specified_width" class="square"></span>
+    <math display="block" style="width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math>
+    <span id="after_block_and_specified_width" class="square"></span>
+    <br/>
+    <div>
+      <span id="before_dynamic_block" class="square"></span>
+      <math><mspace id="mspace_dynamic_block" width="50px" height="50px"/></math>
+      <span id="after_dynamic_block" class="square"></span>
+    </div>
+    <div>
+      <span id="before_dynamic_inline" class="square"></span>
+      <math display="block"><mspace id="mspace_dynamic_inline" width="50px" height="50px"/></math>
+      <span id="after_dynamic_inline" class="square"></span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/display-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/display-2-ref.html
new file mode 100644
index 0000000000..7864c04099
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/display-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>display attribute VS legacy mode attribute (reference)</title>
+</head>
+<body>
+  <p>Test passes if you see four green squares, the last one
+    centered and the others left-aligned.</p>
+  <p>
+    <math>
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <p>
+    <math display="inline">
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <p>
+    <math display="block">
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/display-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/display-2.html
new file mode 100644
index 0000000000..b4e79395a1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/display-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>display attribute VS legacy mode attribute</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter2.html#id.2.2.2">
+<link rel="match" href="display-2-ref.html"/>
+<meta name="assert" content="Verify that the legacy mode attribute has no effect.">
+</head>
+<body>
+  <p>Test passes if you see four green squares, the last one
+    centered and the others left-aligned.</p>
+  <p>
+    <math mode="inline">
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <p>
+    <math mode="display">
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <p>
+    <math display="inline" mode="display">
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <p>
+    <math display="block" mode="inline">
+      <mspace width="100px" height="100px" style="background: green"></mspace>
+    </math>
+  </p>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1-ref.html
new file mode 100644
index 0000000000..5fa90e9d2f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Dynamic MathML DOM (reference)</title>
+<style>
+  mtext.pass { background: green; color: white; }
+</style>
+</head>
+<body>
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext class="pass">PASS</mtext>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1.html
new file mode 100644
index 0000000000..59403196a8
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Dynamic MathML DOM</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+<link rel="match" href="dynamic-1-ref.html"/>
+<meta name="assert" content="Verify that the MathML DOM tree can be modified via javascript and that the rendering is correctly updated.">
+<style>
+  mtext.fail { background: red; color: white; }
+  mtext.pass { background: green; color: white; }
+</style>
+<script>
+  window.addEventListener("DOMContentLoaded", function() {
+    var kMathMLNamespace = "http://www.w3.org/1998/Math/MathML";
+    var mtext = document.createElementNS(kMathMLNamespace, "mtext");
+    mtext.setAttribute("class", "pass");
+    mtext.textContent = "PASS";
+    var math = document.getElementsByTagNameNS(kMathMLNamespace, "math")[0];
+    math.replaceChild(mtext, math.firstElementChild);
+  });
+</script>
+</head>
+<body>
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext class="fail">FAIL</mtext>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2-ref.html
new file mode 100644
index 0000000000..272e8b33ca
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Dynamic id and style (reference)</title>
+<style>
+  #pass { background: green; color: white; }
+</style>
+</head>
+<body>
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext id="pass">PASS</mtext>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2.html
new file mode 100644
index 0000000000..8ad47c5cd9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Dynamic id and style</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+<link rel="match" href="dynamic-2-ref.html"/>
+<meta name="assert" content="Verify dynamic change of id and style attributes.">
+<style>
+  #fail, #fail2 { background: red; color: white; }
+  #pass { background: green; color: white; }
+</style>
+<script>
+  window.addEventListener("DOMContentLoaded", function() {
+    document.getElementById("fail2").setAttribute("id", "pass");
+    document.getElementById("fail").setAttribute("style", "display: none");
+  });
+</script>
+</head>
+<body>
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext id="fail">FAIL</mtext>
+    <mtext id="fail2">PASS</mtext>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html
new file mode 100644
index 0000000000..ffd0ae239f
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html
@@ -0,0 +1,630 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Dynamic childlist of MathML elements</title>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
+<link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts">
+<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot">
+<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
+<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
+<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
+<meta name="assert" content="Dynamically modify DOM tree of some MathML elements by adding or removing children.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  function forceNumberOfChildren(element, count) {
+      while (element.children.length > count)
+          element.removeChild(element.lastElementChild);
+      for (let i = element.children.length; i < count; i++) {
+          if (element.tagName === "mmultiscripts" && i === 5) {
+              element.appendChild(FragmentHelper.createElement("mprescripts"));
+          } else {
+              let mspace = FragmentHelper.createElement("mspace");
+              mspace.setAttribute("width", `10px`);
+              mspace.setAttribute("height", `${10*(i+1)}px`);
+              mspace.setAttribute("style", `background: black;`);
+              element.appendChild(mspace);
+          }
+      }
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", function() {
+      // force initial layout so we're sure what we're testing against
+      document.documentElement.getBoundingClientRect();
+
+      let reference = document.getElementById("reference");
+
+      Array.from(document.querySelectorAll("[data-title]")).forEach(element => {
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              let reference = document.getElementById(`${element.getAttribute("data-reference")}`);
+              forceNumberOfChildren(element, reference.children.length);
+              const epsilon = 1;
+              if (element.tagName == "mspace") {
+                  compareSize(element, reference, epsilon);
+                  childrenHaveEmptyBoundingClientRects(element);
+                  childrenHaveEmptyBoundingClientRects(reference);
+              } else {
+                  compareLayout(element, reference, epsilon);
+              }
+          }, `${element.getAttribute("data-title")}`);
+      });
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <math>
+      <mfrac id="mfrac-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </mfrac>
+      <mfrac id="mfrac-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mfrac>
+      <mfrac id="mfrac-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mfrac>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mfrac data-reference="mfrac-reference-2" data-title="Adding missing children to mfrac">
+      </mfrac>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mfrac data-reference="mfrac-reference-1" data-title="Removing child from valid mfrac">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mfrac>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mfrac data-reference="mfrac-reference-3" data-title="Adding child to valid mfrac">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mfrac>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mfrac data-reference="mfrac-reference-2" data-title="Removing extra child from mfrac">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mfrac>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <munder id="munder-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </munder>
+      <munder id="munder-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </munder>
+      <munder id="munder-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </munder>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munder data-reference="munder-reference-2" data-title="Adding missing children to munder">
+      </munder>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munder data-reference="munder-reference-1" data-title="Removing child from valid munder">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </munder>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munder data-reference="munder-reference-3" data-title="Adding child to valid munder">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </munder>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munder data-reference="munder-reference-2" data-title="Removing extra child from munder">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </munder>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <mover id="mover-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </mover>
+      <mover id="mover-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mover>
+      <mover id="mover-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mover data-reference="mover-reference-2" data-title="Adding missing children to mover">
+      </mover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mover data-reference="mover-reference-1" data-title="Removing child from valid mover">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mover data-reference="mover-reference-3" data-title="Adding child to valid mover">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mover data-reference="mover-reference-2" data-title="Removing extra child from mover">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mover>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <munderover id="munderover-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </munderover>
+      <munderover id="munderover-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </munderover>
+      <munderover id="munderover-reference-4">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+        <mspace width="10px" height="40px" style="background: black;"/>
+      </munderover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munderover data-reference="munderover-reference-3" data-title="Adding missing children to munderover">
+      </munderover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munderover data-reference="munderover-reference-2" data-title="Removing child from valid munderover">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </munderover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munderover data-reference="munderover-reference-4" data-title="Adding child to valid munderover">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </munderover>
+    </math>
+  </p>
+  <p>
+    <math>
+      <munderover data-reference="munderover-reference-3" data-title="Removing extra child from munderover">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+        <mspace width="10px" height="40px" style="background: black;"/>
+      </munderover>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <msub id="msub-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </msub>
+      <msub id="msub-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msub>
+      <msub id="msub-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msub>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msub data-reference="msub-reference-2" data-title="Adding missing children to msub">
+      </msub>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msub data-reference="msub-reference-1" data-title="Removing child from valid msub">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msub>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msub data-reference="msub-reference-3" data-title="Adding child to valid msub">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msub>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msub data-reference="msub-reference-2" data-title="Removing extra child from msub">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msub>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <msup id="msup-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </msup>
+      <msup id="msup-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msup>
+      <msup id="msup-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msup data-reference="msup-reference-2" data-title="Adding missing children to msup">
+      </msup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msup data-reference="msup-reference-1" data-title="Removing child from valid msup">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msup data-reference="msup-reference-3" data-title="Adding child to valid msup">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msup data-reference="msup-reference-2" data-title="Removing extra child from msup">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msup>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <msubsup id="msubsup-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </msubsup>
+      <msubsup id="msubsup-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msubsup>
+      <msubsup id="msubsup-reference-4">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+        <mspace width="10px" height="40px" style="background: black;"/>
+      </msubsup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msubsup data-reference="msubsup-reference-3" data-title="Adding missing children to msubsup">
+      </msubsup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msubsup data-reference="msubsup-reference-2" data-title="Removing child from valid msubsup">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msubsup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msubsup data-reference="msubsup-reference-4" data-title="Adding child to valid msubsup">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msubsup>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msubsup data-reference="msubsup-reference-3" data-title="Removing extra child from msubsup">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+        <mspace width="10px" height="40px" style="background: black;"/>
+      </msubsup>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <mroot id="mroot-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </mroot>
+      <mroot id="mroot-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mroot>
+      <mroot id="mroot-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mroot>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mroot data-reference="mroot-reference-2" data-title="Adding missing children to mroot">
+      </mroot>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mroot data-reference="mroot-reference-1" data-title="Removing child from valid mroot">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mroot>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mroot data-reference="mroot-reference-3" data-title="Adding child to valid mroot">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mroot>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mroot data-reference="mroot-reference-2" data-title="Removing extra child from mroot">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mroot>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <msqrt id="msqrt-reference-0">
+      </msqrt>
+      <msqrt id="msqrt-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+       </msqrt>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msqrt data-reference="msqrt-reference-0" data-title="Removing children from msqrt">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </msqrt>
+    </math>
+  </p>
+  <p>
+    <math>
+      <msqrt data-reference="msqrt-reference-2" data-title="Adding children to msqrt">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </msqrt>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <mpadded id="mpadded-reference-0">
+      </mpadded>
+      <mpadded id="mpadded-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+       </mpadded>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mpadded data-reference="mpadded-reference-0" data-title="Removing children from mpadded">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mpadded data-reference="mpadded-reference-2" data-title="Adding children to mpadded">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </mpadded>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <mspace id="mspace-reference-0" width="30px" height="70px" style="background: blue">
+      </mspace>
+      <mspace id="mspace-reference-2" width="30px" height="70px" style="background: green">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+       </mspace>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace data-reference="mspace-reference-0" data-title="Removing children from mspace" width="30px" height="70px" style="background: lightblue">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mspace>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mspace data-reference="mspace-reference-2" data-title="Adding children to mspace" width="30px" height="70px" style="background: lightgreen">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </mspace>
+    </math>
+  </p>
+  <hr/>
+  <p>
+    <math>
+      <mmultiscripts id="mmultiscripts-reference-0">
+      </mmultiscripts>
+      <mmultiscripts id="mmultiscripts-reference-1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+      </mmultiscripts>
+      <mmultiscripts id="mmultiscripts-reference-2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+      </mmultiscripts>
+      <mmultiscripts id="mmultiscripts-reference-3">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mmultiscripts>
+      <mmultiscripts id="mmultiscripts-reference-6">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+        <mspace width="10px" height="40px" style="background: black;"/>
+        <mspace width="10px" height="50px" style="background: black;"/>
+        <mprescripts/>
+      </mmultiscripts>
+      <mmultiscripts id="mmultiscripts-reference-8">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+        <mspace width="10px" height="40px" style="background: black;"/>
+        <mspace width="10px" height="50px" style="background: black;"/>
+        <mprescripts/>
+        <mspace width="10px" height="70px" style="background: black;"/>
+        <mspace width="10px" height="80px" style="background: black;"/>
+      </mmultiscripts>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mmultiscripts data-reference="mmultiscripts-reference-0" data-title="multiscripts child count from 3 to 0">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mmultiscripts>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mmultiscripts data-reference="mmultiscripts-reference-1" data-title="multiscripts child count from 3 to 1">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mmultiscripts>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mmultiscripts data-reference="mmultiscripts-reference-2" data-title="multiscripts child count from 3 to 2">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mmultiscripts>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mmultiscripts data-reference="mmultiscripts-reference-3" data-title="multiscripts child count from 0 to 3">
+      </mmultiscripts>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mmultiscripts data-reference="mmultiscripts-reference-6" data-title="multiscripts child count from 3 to 6">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mmultiscripts>
+    </math>
+  </p>
+  <p>
+    <math>
+      <mmultiscripts data-reference="mmultiscripts-reference-8" data-title="multiscripts child count from 3 to 8">
+        <mspace width="10px" height="10px" style="background: black;"/>
+        <mspace width="10px" height="20px" style="background: black;"/>
+        <mspace width="10px" height="30px" style="background: black;"/>
+      </mmultiscripts>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html
new file mode 100644
index 0000000000..099401eacc
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Dynamic childlist of MathML elements</title>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="Dynamically modify DOM tree of some MathML elements by adding or removing children.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script src="/mathml/support/layout-comparison.js"></script>
+<script>
+  function generateMathForTag(tag, childCount) {
+      let math = FragmentHelper.createElement("math");
+      let element = FragmentHelper.createElement(tag);
+      // Add the children with different sizes at odd positions and OOF
+      // mrow at even position.
+      for (let i = 0; i < childCount; i++) {
+          if (i % 2) {
+              let mspace = FragmentHelper.createElement("mspace");
+              mspace.setAttribute("width", `10px`);
+              mspace.setAttribute("height", `${10*(i+1)}px`);
+              mspace.setAttribute("style", `background: black;`);
+              element.appendChild(mspace);
+          } else {
+              let mrow = FragmentHelper.createElement("mrow");
+              mrow.setAttribute("style", "position: absolute");
+              element.appendChild(mrow);
+          }
+      }
+      if (FragmentHelper.isValidChildOfMrow(tag)) {
+          math.appendChild(element);
+      } else if (tag === "mtd") {
+          let mtr = FragmentHelper.createElement("mtr");
+          mtr.appendChild(element);
+          let mtable = FragmentHelper.createElement("mtable");
+          mtable.appendChild(mtr);
+          math.appendChild(mtable);
+      } else {
+          throw `Invalid argument: ${tag}`;
+      }
+      return math;
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", function() {
+
+      for (tag in MathMLFragments) {
+          if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtd")
+              continue;
+
+          document.body.insertAdjacentHTML("beforeend", `<div style='display: none; background: pink;'>${tag}: <div></div><div></div><div></div></div>`);
+
+          let container = document.body.lastElementChild;
+          let referenceDiv = container.children[0];
+          const maxChild = 10;
+          const epsilon = 1;
+
+          // Create the references for different number of children as well
+          // as the element that will get the children added / removed.
+          for (let i = 0; i <= maxChild; i++)
+              referenceDiv.append(generateMathForTag(tag, i));
+          let fullReferenceMath = referenceDiv.lastElementChild;
+          let fullReferenceTag = fullReferenceMath.firstElementChild;
+
+          let removeChildrenMath = generateMathForTag(tag, maxChild);
+          container.children[1].append(removeChildrenMath);
+          let removeChildrenTag = removeChildrenMath.firstElementChild;
+
+          let appendChildrenMath = generateMathForTag(tag, 0);
+          container.children[2].append(appendChildrenMath);
+          let appendChildrenTag = appendChildrenMath.firstElementChild;
+
+          // Make content visible after the DOM is ready so that the layout
+          // only happens now.
+          container.style.display = "block";
+
+          test(function() {
+              assert_true(MathMLFeatureDetection.has_mspace());
+              assert_true(MathMLFeatureDetection[`has_${tag}`]());
+
+              for (let i = 0; i < maxChild; i++) {
+                  // append and remove children.
+                  appendChildrenTag.append(fullReferenceTag.children[i].cloneNode(true));
+                  removeChildrenTag.removeChild(removeChildrenTag.lastElementChild);
+
+                  // force layout so we're sure what we're testing against
+                  container.getBoundingClientRect();
+
+                  let appendCount = appendChildrenTag.children.length;
+                  let removeCount = removeChildrenTag.children.length;
+                  if (tag == "mspace") {
+                      compareSize(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon);
+                      childrenHaveEmptyBoundingClientRects(appendChildrenTag);
+                      childrenHaveEmptyBoundingClientRects(referenceDiv.children[appendCount].firstElementChild);
+                      childrenHaveEmptyBoundingClientRects(removeChildrenTag);
+                      childrenHaveEmptyBoundingClientRects(referenceDiv.children[removeCount].firstElementChild);
+                  } else {
+                      compareLayout(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon, `appending ${appendCount}-th child`);
+                      compareLayout(removeChildrenTag, referenceDiv.children[removeCount].firstElementChild, epsilon, `removing ${appendCount + 1}-th child`);
+                  }
+              }
+
+              // Hide back the div after successful testing.
+              container.style.display = "none";
+
+          }, `Appending and removing children to ${tag}`);
+      }
+
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-1-ref.html
new file mode 100644
index 0000000000..86952567c7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>href click (reference)</title>
+</head>
+<body>
+
+  <p>This test passes if you see a green square.</p>
+
+  <div style="width: 150px; height: 150px; background: green">
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-1.html
new file mode 100644
index 0000000000..c3e605cb72
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>href click</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<link rel="match" href="href-click-1-ref.html"/>
+<meta name="assert" content="Verify that a click on a link moves to the target.">
+<script type="text/javascript">
+  function test()
+  {
+    var event = new MouseEvent('click', {bubbles: true, cancelable: true});
+    document.getElementById('link').dispatchEvent(event);
+    document.documentElement.className = "";
+  }
+</script>
+</head>
+<body onload="test()">
+
+  <p>This test passes if you see a green square.</p>
+
+  <div style="width: 150px; height: 150px; overflow: hidden">
+    <math>
+      <mrow id="link" href="#target">
+        <mspace id="space" width="150px" height="150px" style="background: red"/>
+      </mrow>
+    </math>
+    <div style="height: 500px;"></div>
+    <math id="target">
+      <mspace width="150px" height="150px" style="background: green"/>
+    </math>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-2-ref.html
new file mode 100644
index 0000000000..86952567c7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>href click (reference)</title>
+</head>
+<body>
+
+  <p>This test passes if you see a green square.</p>
+
+  <div style="width: 150px; height: 150px; background: green">
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-2.html
new file mode 100644
index 0000000000..8ffec61cc7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8"/>
+<title>href click</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<link rel="match" href="href-click-2-ref.html"/>
+<meta name="assert" content="Verify that a click on an element bubbles to an ancestor link.">
+<script type="text/javascript">
+  function test()
+  {
+    var event = new MouseEvent('click', {bubbles: true, cancelable: true});
+    document.getElementById('space').dispatchEvent(event);
+    document.documentElement.className = "";
+  }
+</script>
+</head>
+<body onload="test()">
+
+  <p>This test passes if you see a green square.</p>
+
+  <div style="width: 150px; height: 150px; overflow: hidden">
+    <math>
+      <mrow href="#target">
+        <mrow>
+          <mrow>
+            <mspace id="space" width="150px" height="150px" style="background: red"/>
+          </mrow>
+        </mrow>
+      </mrow>
+    </math>
+    <div style="height: 500px;"></div>
+    <math id="target">
+      <mspace width="150px" height="150px" style="background: green"/>
+    </math>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-3.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-3.html
new file mode 100644
index 0000000000..f6f1ada6d7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>href click</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+</head>
+<body>
+  <p>To test manually, click the blue rectangle.</p>
+  <p>
+    <math>
+      <mspace width="50px" height="10px" style="background: gray"></mspace>
+      <mspace id="target" href="javascript:handler()" width="50px" height="10px" style="background: blue"></mspace>
+      <mspace width="50px" height="10px" style="background: gray"></mspace>
+    </math>
+  </p>
+  <a id="badTarget" href="javascript:badHandler()">DON'T CLICK ME</a>
+  <script>
+    var t = async_test("Click element with href");
+    function handler() { t.done(); }
+    function badHandler() {
+      t.step(() => { assert_unreached("Bad handler executed"); });
+      t.done();
+    }
+    test_driver.click(document.getElementById("target")).then(() => {
+      return test_driver.click(document.getElementById("badTarget"));
+    }).catch(() => {
+      t.step(() => { assert_unreached("Click failed"); });
+      t.done();
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html
new file mode 100644
index 0000000000..028428cd75
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>MathML 'HTMLOrForeignElement` Mixin Tests</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+    <style>
+      mi {
+        background-color: red;
+      }
+      :focus {
+        background-color: rgb(0, 255, 0);
+      }
+    </style>
+    <meta
+      name="assert"
+      content="MathMLElements incorporate a functional HTMLOrForeignElement interface"
+    />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body tabindex="-1">
+    <span tabindex="-1"
+      >This tests the presence and functionality of features of
+      `HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span
+    >
+    <math tabindex="-1">
+      <mi>E</mi>
+    </math>
+  </body>
+  <script>
+    // spot check the functionality of several interfaces
+    let el = document.querySelector("mi");
+    let mathEl = document.querySelector("math");
+
+    // this really belongs in
+    // https://github.com/web-platform-tests/wpt/blob/master/html/dom/elements/global-attributes/dataset.html
+    // it is here tentatively
+    test(function() {
+      var mathml = document.createElementNS(
+        "http://www.w3.org/1998/Math/MathML",
+        "math"
+      );
+      assert_true(mathml.dataset instanceof DOMStringMap);
+    }, "MathML elements should have a .dataset");
+
+    // exercise some basic tests on .dataset
+    test(function() {
+      assert_equals(
+        Object.keys(el.dataset).toString(),
+        "",
+        "The .dataset property should be present"
+      );
+
+      el.setAttribute("data-one", "x");
+      el.setAttribute("data-two", "y");
+
+      assert_equals(
+        el.dataset.one,
+        "x",
+        '.one should be "x" after setting the data-one attribute'
+      );
+      assert_equals(
+        el.dataset.two,
+        "y",
+        '.one should be "y" after setting the data-two attribute'
+      );
+
+      el.dataset.one = "o";
+      assert_equals(
+        el.getAttribute("data-one"),
+        "o",
+        'the data-one attribute should reflect a change to dataset.one and contain "o"'
+      );
+    }, "The dataset property should be present and be functional.");
+
+    test(function() {
+      assert_equals(mathEl.tabIndex, -1);
+    }, "MathML elements should have a tabIndex property");
+
+    promise_test(function() {
+      function focus() {
+        mathEl.focus();
+        return Promise.resolve();
+      }
+
+      return focus().then(() => {
+        assert_equals(
+          getComputedStyle(mathEl).backgroundColor,
+          "rgb(0, 255, 0)",
+          "MathML elements with tabindex=-1 should be programmatically focusable and apply :focus"
+        );
+      });
+    }, "MathML elements should work with focus predictably");
+
+    promise_test(function() {
+      function blur() {
+        mathEl.blur();
+        return Promise.resolve();
+      }
+
+      return blur().then(() => {
+        assert_equals(
+          getComputedStyle(mathEl).backgroundColor,
+          "rgba(0, 0, 0, 0)",
+          "MathML elements with tabindex=-1 be programmatically blur() able"
+        );
+      });
+    }, "MathML elements should work with blur predictably");
+  </script>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1-ref.html
new file mode 100644
index 0000000000..4987754967
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML inside foreignObject (reference)</title>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <div>
+    <div style="position: absolute; width: 200px; height: 200px; background: green"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1.html
new file mode 100644
index 0000000000..bc725e9d19
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML inside foreignObject</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<link rel="match" href="integration-point-1-ref.html"/>
+<meta name="assert" content="Verify that MathML can be used inside a foreignObject element.">
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <div>
+    <div style="position: absolute; width: 200px; height: 200px; background: red"></div>
+    <div style="position: absolute;">
+      <svg width="200px" height="200px">
+        <rect width="200px" height="100px" fill="red"/>
+        <foreignObject width="200px" height="200px"
+                       requiredExtensions="http://www.w3.org/1998/Math/MathML">
+          <div style="width: 200px; height: 200px; background: green"></div>
+        </foreignObject>
+      </svg>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2-ref.html
new file mode 100644
index 0000000000..33c4b7e910
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML as a phrasing content (reference)</title>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+
+  <div>
+    <div style="position: absolute; background: green; width: 300px; height: 300px;"></div>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2.html
new file mode 100644
index 0000000000..7e6c11a5ac
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML as a phrasing content</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<link rel="match" href="integration-point-2-ref.html"/>
+<meta name="assert" content="Verify that MathML can be used at positions where phrasing content is accepted.">
+<style type="text/css">
+  span, math { font-family: monospace; font-size: 10px; }
+  div {
+    color: green;
+  }
+  span.redsquare {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: red;
+  }
+  mspace {
+    background: green;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+
+  <div>
+
+    <div style="position: absolute; background: green; width: 300px; height: 300px;">
+      <p><span class="redsquare"></span></p>
+      <h1><span class="redsquare"></span></h1>
+      <h2><span class="redsquare"></span></h2>
+      <ul>
+        <li><span class="redsquare"></span></li>
+      </ul>
+      <ol>
+        <li><span class="redsquare"></span></li>
+      </ol>
+      <table><tr><td><span class="redsquare"></span></td></tr></table>
+      <a href="#id"><span class="redsquare"></span></a>
+      <em><span class="redsquare"></span></em>
+      <strong><span class="redsquare"></span></strong>
+      <small><span class="redsquare"></span></small>
+      <span><span class="redsquare"></span></span>
+      <u><span class="redsquare"></span></u>
+      <q><span class="redsquare"></span></q>
+    </div>
+    <div style="position: absolute; width: 400px;">
+      <p><math><mspace width="10px" height="10px"/></math></p>
+      <h1><math><mspace width="10px" height="10px"/></math></h1>
+      <h2><math><mspace width="10px" height="10px"/></math></h2>
+      <ul>
+        <li><math><mspace width="10px" height="10px"/></math></li>
+      </ul>
+      <ol>
+        <li><math><mspace width="10px" height="10px"/></math></li>
+      </ol>
+      <table><tr><td><math><mspace width="10px" height="10px"/></math></td></tr></table>
+      <a href="#id"><math><mspace width="10px" height="10px"/></math></a>
+      <em><math><mspace width="10px" height="10px"/></math></em>
+      <strong><math><mspace width="10px" height="10px"/></math></strong>
+      <small><math><mspace width="10px" height="10px"/></math></small>
+      <span><math><mspace width="10px" height="10px"/></math></span>
+      <u><math><mspace width="10px" height="10px"/></math></u>
+      <q><math><mspace width="10px" height="10px"/></math></q>
+    </div>
+
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3-ref.html
new file mode 100644
index 0000000000..8362ed28e3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>phrasing content inside mtext (reference)</title>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+
+  <div>
+
+    <div style="position: absolute; background: green; width: 200px; height: 200px;"></div>
+
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3.html
new file mode 100644
index 0000000000..4c6f89ee93
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>phrasing content inside mtext</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<link rel="match" href="integration-point-3-ref.html"/>
+<meta name="assert" content="Verify that <mtext> can contain phrasing content">
+<style type="text/css">
+  div {
+    color: green;
+  }
+  span, math, mtext { font-family: monospace; font-size: 10px; }
+  span.redsquare, span.greensquare {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+  }
+  span.redsquare {
+    background: red;
+  }
+  span.greensquare {
+    background: green;
+  }
+  mspace {
+    background: green;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+
+  <div>
+
+    <div style="position: absolute; background: green; width: 200px; height: 200px;">
+      <span><span><span><span class="redsquare"></span></span></span></span>
+      <span><span><u><span class="redsquare"></span></u></span></span>
+      <span><span><a href="#id"><span class="redsquare"></span></a></span></span>
+      <span><span><del><span class="redsquare"></span></del></span></span>
+      <span><span><em><span class="redsquare"></span></em></span></span>
+      <span><span><strong><span class="redsquare"></span></strong></span></span>
+      <span><span><q><span class="redsquare"></span></q></span></span>
+      <span><span><small><span class="redsquare"></span></small></span></span>
+      <span><span><var><span class="redsquare"></span></var></span></span>
+      <span><span><samp><span class="redsquare"></span></samp></span></span>
+    </div>
+    <div style="position: absolute; width: 200px;">
+      <math><mtext><span><span class="greensquare"></span></span></mtext></math>
+      <math><mtext><u><span class="greensquare"></span></u></mtext></math>
+      <math><mtext><a href="#id"><span class="greensquare"></span></a></mtext></math>
+      <math><mtext><del><span class="greensquare"></span></del></mtext></math>
+      <math><mtext><em><span class="greensquare"></span></em></mtext></math>
+      <math><mtext><strong><span class="greensquare"></span></strong></mtext></math>
+      <math><mtext><q><span class="greensquare"></span></q></mtext></math>
+      <math><mtext><small><span class="greensquare"></span></small></mtext></math>
+      <math><mtext><var><span class="greensquare"></span></var></mtext></math>
+      <math><mtext><samp><span class="greensquare"></span></samp></mtext></math>
+    </div>
+
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-4.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-4.html
new file mode 100644
index 0000000000..c3bc95d1ef
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-4.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML inside foreignObject</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<meta name="assert" content="Verify that MathML can be used inside a foreignObject element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+      var scale = 2;
+      var epsilon = 1;
+      var mfrac = document.getElementById("mfrac");
+      var num = mfrac.firstElementChild.getBoundingClientRect();
+      var denom = mfrac.lastElementChild.getBoundingClientRect();
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          // The values of width and height are inverted (because of the
+          // rotation) and multiplied by the scale factor.
+          assert_approx_equals(num.height, 30 * scale, epsilon, "numerator width");
+          assert_approx_equals(num.width, 40 * scale, epsilon, "numerator height");
+          assert_approx_equals(denom.height, 50 * scale, epsilon, "numerator width");
+          assert_approx_equals(denom.width, 60 * scale, epsilon, "numerator height");
+      }, "mspace layout in SVG foreignObject");
+      test(function() {
+          // The horizontal/vertical metrics are inverted (because of the
+          // rotation) and multiplied by the scale factor.
+          assert_true(MathMLFeatureDetection.has_mfrac());
+          assert_greater_than_equal(num.right - denom.left,
+                                    (40 + 60) * scale,
+                                    "numerator is on the right of denominator");
+          assert_approx_equals((num.top + num.bottom) / 2,
+                               (denom.top + denom.bottom) / 2,
+                               epsilon, "numerator and denominator are vertically aligned");
+      }, "mfrac layout in SVG foreignObject");
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <svg width="400px" height="400px">
+    <g transform="rotate(90, 200, 200) scale(2)">
+      <foreignObject width="400px" height="400px"
+                     requiredExtensions="http://www.w3.org/1998/Math/MathML">
+        <math>
+          <mfrac id="mfrac">
+            <mspace width="30px" height="40px" style="background: cyan"></mspace>
+            <mspace width="50px" height="60px" style="background: yellow"></mspace>
+          </mfrac>
+        </math>
+      </foreignObject>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-5.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-5.html
new file mode 100644
index 0000000000..b63ab7a63c
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-5.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML sibling of SVG with foreignObject[overflow=visible]</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=989920">
+<meta name="assert" content="Verify that an SVG containing a foreignObject with visible overflow does not affect layout of MathML siblings.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+      var scale = 2;
+      var epsilon = 1;
+      var mfrac = document.getElementById("mfrac");
+      var num = mfrac.firstElementChild.getBoundingClientRect();
+      var denom = mfrac.lastElementChild.getBoundingClientRect();
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          assert_approx_equals(num.width, 30, epsilon, "numerator width");
+          assert_approx_equals(num.height, 40, epsilon, "numerator height");
+          assert_approx_equals(denom.width, 50, epsilon, "denonimator width");
+          assert_approx_equals(denom.height, 60, epsilon, "denonimator height");
+      }, "mspace layout in sibling of SVG foreignObject[overflow=visible]");
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mfrac());
+          assert_greater_than_equal(denom.bottom - num.top,
+                                    (40 + 60),
+                                    "numerator above denominator");
+          assert_approx_equals((num.left + num.right) / 2,
+                               (denom.left + denom.right) / 2,
+                               epsilon, "numerator and denominator are horizontally aligned");
+      }, "mfrac layout in sibling of SVG with foreignObject[overflow=visible]");
+      done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math>
+    <mfrac id="mfrac">
+      <mspace width="30px" height="40px" style="background: cyan"></mspace>
+      <mspace width="50px" height="60px" style="background: yellow"></mspace>
+    </mfrac>
+  </math>
+  <svg width="200px" height="200px" style="background: lightblue">
+    <foreignObject width="200px" height="200px"
+                   overflow="visible">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        This is a foreignObject
+      </div>
+    </foreignObject>
+  </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html
new file mode 100644
index 0000000000..b924eefa7d
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<title>MathMLElement GlobalEventHandlers</title>
+<link rel="author" title="Brian Kardell" href="mailto:bkardell@igalia.com" />
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-idl-attributes"/>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-content-attributes"/>
+<meta name="timeout" content="long">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+
+<script>
+  "use strict";
+
+  // The prefixed animation events are special; their event types are
+  // camel-case.
+  const prefixedAnimationAttributeToEventType = new Map([
+    ["webkitanimationend", "webkitAnimationEnd"],
+    ["webkitanimationiteration", "webkitAnimationIteration"],
+    ["webkitanimationstart", "webkitAnimationStart"],
+    ["webkittransitionend", "webkitTransitionEnd"],
+  ]);
+
+  // basic pattern lifted from /html/webappapis/scripting/events/event-handler-all-global-events.html
+  promise_setup(async function() {
+    const res = await fetch("/interfaces/html.idl");
+    const htmlIDL = await res.text();
+    // Parsing the whole IDL file is slow, so use a small regexp to extract only
+    // the part that is relevant for this test.
+    const parsedHTMLIDL = WebIDL2.parse(htmlIDL.
+      match(/^interface mixin GlobalEventHandlers {[^{}]*};$/m)[0]);
+    const globalEventHandlers = parsedHTMLIDL.find(
+      idl => idl.name === "GlobalEventHandlers"
+    );
+
+    // onerror is too special
+    const names = globalEventHandlers.members
+      .map(member => member.name)
+      .filter(name => name !== "onerror");
+
+    for (const name of names) {
+      const withoutOn = name.substring(2);
+
+      promise_test(async () => {
+        const location = MathMLElement.prototype;
+        assert_true(
+          location.hasOwnProperty(name),
+          `${location.constructor.name} has an own property named "${name}"`
+        );
+
+        assert_false(
+          name in Element.prototype,
+          `Element.prototype must not contain a "${name}" property`
+        );
+      }, `${name}: must be on the appropriate locations for GlobalEventHandlers`);
+
+      promise_test(async () => {
+        const location = document.createElementNS(
+          "http://www.w3.org/1998/Math/MathML",
+          "math"
+        );
+
+        assert_equals(
+          location[name],
+          null,
+          `The default value of the property is null for a ${
+            location.constructor.name
+          } instance`
+        );
+      }, `${name}: the default value must be null`);
+
+      promise_test(async () => {
+        const div = document.createElement("div");
+        div.insertAdjacentHTML("beforeend", `<math ${name}="window.${name}Happened1 = true;"></math>`);
+        const compiledHandler = div.firstElementChild[name];
+        assert_equals(
+          typeof compiledHandler,
+          "function",
+          `The ${name} property must be a function`
+        );
+        compiledHandler();
+        assert_true(
+          window[`${name}Happened1`],
+          "Calling the handler must run the code"
+        );
+      }, `${name}: the content attribute must be compiled into a function as the corresponding property`);
+
+      promise_test(async () => {
+        const el = document.createElementNS(
+          "http://www.w3.org/1998/Math/MathML",
+          "math"
+        );
+        assert_equals(el[name], null, `The ${name} property must be null (no attribute)`);
+
+        el.setAttribute(name, `window.${name}Happened2 = true;`);
+        const compiledHandler = el[name];
+        assert_equals(
+          typeof compiledHandler,
+          "function",
+          `The ${name} property must be a function (set attribute)`
+        );
+        compiledHandler();
+        assert_true(
+          window[`${name}Happened2`],
+          "Calling the handler must run the code (set attribute)"
+        );
+
+        window[`${name}Happened2`] = false;
+        const clonedEl = el.cloneNode(true);
+        const clonedCompiledHandler = clonedEl[name];
+        assert_equals(
+          typeof clonedCompiledHandler,
+          "function",
+          `The ${name} property must be a function (clone node)`
+        );
+        clonedCompiledHandler();
+        assert_true(
+          window[`${name}Happened2`],
+          "Calling the handler must run the code (clone node)"
+        );
+
+        el.setAttribute(name, `window.${name}Happened3 = true;`);
+        const newCompiledHandler = el[name];
+        assert_equals(
+          typeof newCompiledHandler,
+          "function",
+          `The ${name} property must be a function (modify attribute)`
+        );
+        newCompiledHandler();
+        assert_true(
+          window[`${name}Happened3`],
+          "Calling the handler must run the code (modify attribute)"
+        );
+
+        el.removeAttribute(name);
+        assert_equals(el[name], null, `The ${name} property must be null (remove attribute)`);
+      }, `${name}: dynamic changes on the attribute`);
+
+      promise_test(async () => {
+        const element = document.createElementNS(
+          "http://www.w3.org/1998/Math/MathML",
+          "math"
+        );
+        let target = undefined;
+        element[name] = (e) => { target = e.currentTarget; }
+        let eventType = withoutOn;
+        if (prefixedAnimationAttributeToEventType.has(eventType)) {
+          eventType = prefixedAnimationAttributeToEventType.get(eventType);
+        }
+        element.dispatchEvent(new Event(eventType));
+        assert_equals(target, element, "The event must be fired at the <math> element");
+      }, `${name}: dispatching an Event at a <math> element must trigger element.${name}`);
+    }
+  });
+</script>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2-ref.html
new file mode 100644
index 0000000000..dcc5b2b7d3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>SVG requiredExtensions (reference)</title>
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <svg width="200px" height="200px">
+    <rect width="200px" height="200px" fill="green"/>
+  </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2.html
new file mode 100644
index 0000000000..738f125507
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>SVG requiredExtensions</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg">
+<link rel="match" href="required-extensions-2-ref.html"/>
+<meta name="assert" content="Verify that a foreignObject with MathML used as a requiredExtensions value is selected for display in a SVG switch element.">
+</head>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+  <svg width="200px" height="200px">
+    <rect width="200px" height="100px" fill="red"/>
+    <switch>
+      <foreignObject width="200px" height="200px"
+                     requiredExtensions="http://www.w3.org/1998/Math/MathML">
+        <div style="width: 200px; height: 200px; background: green"></div>
+      </foreignObject>
+      <rect y="100px" width="200px" height="100px" fill="red"/>
+    </switch>
+  </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-001.html b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-001.html
new file mode 100644
index 0000000000..3aaf0d955a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>MathML tabIndex attribute</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element">
+<meta name="assert" content="Verify default values for the tabIndex attribute">
+
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div id="log"></div>
+  <math>
+  </math>
+  <script>
+    const htmlLinkableElements =
+      new Set([
+        'mi', 'mo', 'mn', 'ms', 'mtext', 'mrow'
+      ]);
+
+    Object.keys(MathMLFragments).forEach(elName => {
+        const mathEl = document.querySelector('math');
+
+        mathEl.innerHTML = `
+        <${elName} id="el" onfocus="alert('fail')"></${elName}>
+        <${elName} id="el-link" href="javascript:alert('fail')" onfocus="alert('fail')"></${elName}>
+        `;
+
+        const el = mathEl.querySelector('#el');
+        const elLink = mathEl.querySelector('#el-link');
+
+        const expectedDefault = (htmlLinkableElements.has(elName)) ? 0 : -1;
+
+        test(() => {
+            assert_equals(el.tabIndex, expectedDefault, "no attribute");
+            el.setAttribute("tabindex", "invalid");
+            assert_equals(el.getAttribute("tabindex"), "invalid");
+            assert_equals(el.tabIndex, expectedDefault, "invalid");
+            el.setAttribute("tabindex", "9999999999");
+            assert_equals(el.getAttribute("tabindex"), "9999999999");
+            assert_equals(el.tabIndex, expectedDefault, "too large integer");
+        }, `default and invalid values for ${elName} without href`);
+        test(() => {
+            assert_equals(elLink.tabIndex, expectedDefault, "no attribute");
+            elLink.setAttribute("tabindex", "invalid");
+            assert_equals(elLink.getAttribute("tabindex"), "invalid");
+            assert_equals(elLink.tabIndex, expectedDefault, "invalid");
+            elLink.setAttribute("tabindex", "9999999999");
+            assert_equals(elLink.getAttribute("tabindex"), "9999999999");
+            assert_equals(elLink.tabIndex, expectedDefault, "too large integer");
+        }, `default and invalid values for ${elName} with href`);
+    });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-002.html b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-002.html
new file mode 100644
index 0000000000..d2144e3d01
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>MathML tabindex attribute</title>
+<meta name="timeout" content="long">
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<meta assert="flag" content="interact">
+<meta assert="assert" content="Check the sequential focus navigation order for MathML">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<div id="log"></div>
+<a href="#link">tabindex(html,href)</a>
+<math>
+  <mtext id="text1">tabindex(omitted)</mtext>
+  <mtext id="text2" tabindex="">tabindex(empty)</mtext>
+  <mtext id="text3" tabindex="a">tabindex(a)</mtext>
+  <mtext id="text4" tabindex="-1">tabindex(-1)</mtext>
+  <mtext id="text5" tabindex="0">tabindex(0)</mtext>
+  <mtext id="text6" href="#link">tabindex(href)</mtext>
+  <mtext id="text7" tabindex="3">tabindex(3)</mtext>
+  <mtext id="text8" tabindex="2">tabindex(2)</mtext>
+  <mtext id="text9" tabindex="2">tabindex(2)</mtext>
+  <mtext id="text10" tabindex="2">tabindex(2)</mtext>
+  <mtext id="text11" tabindex="1">tabindex(1)</mtext>
+</math>
+<script>
+
+var i = 0,
+    expectation = ["text11", "text8", "text9", "text10", "text7", "text5"],
+    results = [],
+    t = async_test("Elements with different tabindex must be focused sequentially when pressing 'Tab' keys");
+
+setup(function () {
+  document.body.focus();
+});
+
+document.querySelector("a").addEventListener("focus", function (evt) {
+    // Links are tab-navigable on that platform.
+    expectation.push("text6");
+    // TAB = '\ue004'
+    test_driver.send_keys(document.body, "\ue004");
+}, true);
+
+document.querySelector("math").addEventListener("focus", function (evt) {
+  results.push(evt.target.id);
+  i++;
+  if (i >= expectation.length) {
+    t.step(function () {
+      assert_array_equals(results, expectation);
+    });
+    t.done();
+  } else {
+    t.step(function () {
+      // TAB = '\ue004'
+      test_driver.send_keys(document.body, "\ue004");
+    });
+  }
+}, true);
+
+document.addEventListener("keydown", function (evt) {
+  t.step(function () {
+    assert_equals(evt.keyCode, 9, "Please press 'Tab' key.");
+  });
+}, true);
+
+t.step(function () {
+  // TAB = '\ue004'
+  test_driver.send_keys(document.body, "\ue004");
+});
+</script>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-1.html
new file mode 100644
index 0000000000..6b3ab07f1a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Unique Identifier (iframe)</title>
+</head>
+<body>
+
+  <div style="width: 100px; height: 500px;">
+    <math><mtext style="background: red; color: white;">FAIL</mtext></math>
+  </div>
+  <div style="width: 100px; height: 500px;">
+    <math><mtext style="background: green; color: white;"
+                 id="PASS">PASS</mtext></math>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-2.html
new file mode 100644
index 0000000000..ade0110a27
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Unique Identifier (iframe reference)</title>
+</head>
+<body>
+
+  <div style="width: 100px; height: 500px;">
+    <math><mtext style="background: green; color: white;"
+                 id="PASS" class="pass">PASS</mtext></math>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-ref.html
new file mode 100644
index 0000000000..a219b2c870
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Unique identifier (reference)</title>
+</head>
+<body>
+
+  <p>Test passes if you see the text "PASS".</p>
+
+  <iframe width="100" height="100" frameborder="0" scrolling="no"
+          marginheight="0" marginwidth="0"
+          src="unique-identifier-1-iframe-2.html#PASS"></iframe>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1.html
new file mode 100644
index 0000000000..f5de2757c3
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Unique identifier</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="match" href="unique-identifier-1-ref.html"/>
+<meta name="assert" content="Verify that the id on a MathML element can be used as a fragment identifier in order to force initial scrolling.">
+</head>
+<body>
+
+  <p>Test passes if you see the text "PASS".</p>
+
+  <iframe width="100" height="100" frameborder="0" scrolling="no"
+          marginheight="0" marginwidth="0"
+          src="unique-identifier-1-iframe-1.html#PASS"></iframe>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-2.html
new file mode 100644
index 0000000000..d4e69df324
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Unique Identifier</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript">
+<meta name="assert" content="Verify whether the getElementById() works for MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  setup({ explicit_done: true });
+  window.addEventListener("DOMContentLoaded", function() {
+    var mtext = document.getElementById("MTEXT");
+    test(function() {
+      assert_equals(mtext, document.body.lastElementChild.lastElementChild);
+    }, "getElementById()");
+    done();
+  });
+</script>
+</head>
+<body>
+  <div id="log"></div>
+  <math>
+    <mtext id="MTEXT_"></mtext>
+    <mtext id="MTEX"></mtext>
+    <mtext id="MTEXT"></mtext>
+  </math>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3-ref.html
new file mode 100644
index 0000000000..ef056e0082
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Unique identifier 3 (reference)</title>
+</head>
+<body>
+
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext style="background: green; color: white;">PASS</mtext>
+  </math>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3.html
new file mode 100644
index 0000000000..306ce41e25
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Unique Identifier</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+<link rel="match" href="unique-identifier-3-ref.html"/>
+<meta name="assert" content="Verify that the id attribute affects CSS selectors.">
+<style>
+  #fail { display: none; }
+  #pass { background: green; }
+</style>
+</head>
+<body>
+
+  <p>Test passes if you see the text "PASS".</p>
+  <math>
+    <mtext id="fail" style="background: red; color: white;">FAIL</mtext>
+    <mtext id="pass" style="color: white;">PASS</mtext>
+  </math>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html b/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html
new file mode 100644
index 0000000000..c1e8d409b9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Basic mathematical alphanumeric symbols with default font</title>
+    <meta name="assert" content="Verify whether the default font contains italic/bold/bold-italic characters from the Mathematical Alphanumeric Symbols block.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      span[data-name] {
+          font-size: 100px;
+          background: lightblue;
+          display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="log"></div>
+    <p><span id="frakturL" data-name="U+1D529 MATHEMATICAL FRAKTUR SMALL L">𝔩</span></p>
+    <p><span id="emSpace" data-name="U+2003 EM SPACE">&#x2003;</span></p>
+    <p><span data-test="Bold" data-name="U+1D416 MATHEMATICAL BOLD CAPITAL W">𝐖</span></p>
+    <p><span data-test="Italic" data-name="U+1D44A MATHEMATICAL ITALIC CAPITAL W">𝑊</span></p>
+    <p><span data-test="Bold-italic" data-name="U+1D47E MATHEMATICAL BOLD ITALIC CAPITAL">𝑾</span></p>
+    <script>
+      const frakturLWidth = document.getElementById("frakturL").getBoundingClientRect().width;
+      const emSpaceWidth = document.getElementById("emSpace").getBoundingClientRect().width;
+      Array.from(document.querySelectorAll('span[data-test]')).forEach(span => {
+        test(function() {
+          let spanWidth = span.getBoundingClientRect().width;
+            // This test expects the default font to provide a fraktur l than is much thiner than a bold/italic/bold-italic W.
+            // If the font lacks bold/italic/bold-italic W then a fortiori it is likely that its lacks fraktur l, so browsers
+            // will display "Tofu characters" for all of them (e.g. gray boxes or boxes containing the Unicode code points)
+            // with very similar widths, so the test is likely to fail.
+            assert_greater_than(spanWidth, frakturLWidth + emSpaceWidth / 4, `Width of '${span.dataset.name}' is much larger than '${frakturL.dataset.name}'`);
+        }, `${span.dataset.test} mathematical alphanumeric symbol with the default font`);
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html
new file mode 100644
index 0000000000..3f7f764045
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Open Font Format: USE_TYPO_METRICS (reference)</title>
+<style>
+  #green {
+     position: absolute;
+     background: green;
+     left: 10px;
+     width: 230px;
+     height: 230px;
+  }
+</style>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+
+  <div>
+    <div id="green"></div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html
new file mode 100644
index 0000000000..1af8fdfde1
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<title>Open Font Format: USE_TYPO_METRICS</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#text-layout"/>
+<link rel="match" href="use-typo-metrics-1-ref.html"/>
+<meta name="assert" content="Verify that the USE_TYPO_METRICS flag from the OS/2 table is taken into account to calculate line height.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/lineheight5000-typolineheight2300.woff");
+  }
+  .green {
+     position: absolute;
+     background: green;
+     width: 115px;
+  }
+  .red {
+     position: absolute;
+     background: red;
+     width: 115px;
+  }
+  .forceHeight {
+    height: 230px;
+  }
+  .leftSide {
+    left: 10px;
+  }
+  .rightSide {
+    left: 125px;
+  }
+  span {
+    /* em=1000, lineHeight=5000, typoLineHeight=2300 and font-size=100px
+       implies typoLineHeightPx = 230px < 500px = lineHeightPx */
+     font-family: TestFont;
+     font-size: 100px;
+     color: transparent;
+  }
+</style>
+<body>
+  <p>Test passes if there is a green square and no red.</p>
+
+  <div>
+    <!-- Left side verifies that typoLineHeightPx <= 230px -->
+    <div class="leftSide red"><span>O</span></div>
+    <div class="leftSide green forceHeight"></div>
+
+    <!-- Right side verifies that typoLineHeightPx => 230px -->
+    <div class="rightSide red forceHeight"></div>
+    <div class="rightSide green"><span>O</span></div>
+  </div>
+</body>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/mathml/relations
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip