1 files changed, 111 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>