attribute-mapping-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /mathml/relations/css-styling/attribute-mapping-002.html - WPT Dashboard Interop Dashboard

<!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><mrow>${MathMLFragments[tag]}</mrow></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.parentNode.setAttribute("style", "text-transform: uppercase");

              assert_equals(style.getPropertyValue("text-transform"),

                            tag === "mi" ? "math-auto" : "uppercase",

                            "text-transform on parent");

              element.setAttribute("mathvariant", "normal");

              assert_equals(style.getPropertyValue("text-transform"),

                            tag === "mi" ? "none" : "uppercase", "attribute specified");

              element.setAttribute("mathvariant", "NoRmAl");

              assert_equals(style.getPropertyValue("text-transform"),

                            tag === "mi" ? "none" : "uppercase", "case insensitive");

          }, `mathvariant on the ${tag} element is ${tag === "mi" ? "" : "not"} 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() {

              element.removeAttribute("scriptlevel");

              // none and mprescripts appear as scripts

              let expected = `${tag === "none" || tag === "mprescripts" ? "1" : "0"}`;

              assert_equals(style.getPropertyValue("math-depth"), expected, "no attribute");

              // FIXME: Should we test values " +1" and "+1 " here?

              // See https://github.com/w3c/mathml/issues/122

              ["+-1", "--1", "+z1", "+ 1", "2.0", "-3\"", "200px", "add(2)"].forEach(invalid_value => {

                element.setAttribute("scriptlevel", invalid_value);

                assert_equals(style.getPropertyValue("math-depth"), expected, `invalid scriptlevel value '${invalid_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">

    <div><math class="element"></math></div>

  </div>

</body>

</html>