| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Attribute mapping</title> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-mathvariant-attribute"> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#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> |
