| <!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> |