| <!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() { |
| var epsilon = .1 |
| var fontSizeAtScriptLevelZero = fontSize(window.getComputedStyle(container)); |
| var inheritedSize = fontSize(window.getComputedStyle(element.parentNode)); |
| |
| // none and mprescripts appear as scripts |
| assert_approx_equals(fontSize(style), tag === "none" || tag === "mprescripts" ? inheritedSize * .71 : inheritedSize, epsilon, "no attribute"); |
| |
| var absoluteScriptlevel = 2; |
| element.setAttribute("scriptlevel", absoluteScriptlevel); |
| assert_approx_equals(fontSize(style), fontSizeAtScriptLevelZero * Math.pow(.71, absoluteScriptlevel), epsilon, "attribute specified (<U>)"); |
| |
| var positiveScriptlevelDelta = 1; |
| element.setAttribute("scriptlevel", `+${positiveScriptlevelDelta}`); |
| assert_approx_equals(fontSize(style), inheritedSize * Math.pow(.71, positiveScriptlevelDelta), epsilon, "attribute specified (+<U>)"); |
| |
| var negativeScriptlevelDelta = -3; |
| element.setAttribute("scriptlevel", negativeScriptlevelDelta); |
| assert_approx_equals(fontSize(style), inheritedSize * Math.pow(.71, negativeScriptlevelDelta), epsilon, "attribute specified (-<U>)"); |
| |
| element.setAttribute("scriptlevel", absoluteScriptlevel); |
| element.setAttribute("mathsize", "42px"); |
| assert_approx_equals(fontSize(style), 42, epsilon, "mathsize wins over scriptlevel"); |
| |
| }, `scriptlevel on the ${tag} element is mapped to font-size: scriptlevel(...)`); |
| |
| test(function() { |
| assert_equals(style.getPropertyValue("math-style"), "inline", "no attribute"); |
| element.setAttribute("displaystyle", "true"); |
| assert_equals(style.getPropertyValue("math-style"), "display", "attribute specified"); |
| element.setAttribute("displaystyle", "TrUe"); |
| assert_equals(style.getPropertyValue("math-style"), "display", "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> |
