attribute-mapping-002.html (5281B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Attribute mapping</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> 8 <meta name="assert" content="Verify that mathvariant, scriptlevel, displaystyle are mapped to CSS"> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <style> 11 #container { 12 /* Ahem font does not have a MATH table so the font-size scale factor 13 is always 0.71^{computed - inherited math script level} */ 14 font: 100px/1 Ahem; 15 } 16 </style> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script src="/mathml/support/mathml-fragments.js"></script> 20 <script> 21 setup({ explicit_done: true }); 22 window.addEventListener("load", runTests); 23 function fontSize(style) { 24 return parseFloat((/(.+)px/).exec(style.getPropertyValue("font-size"))[1]); 25 } 26 function runTests() { 27 var container = document.getElementById("container"); 28 for (tag in MathMLFragments) { 29 container.insertAdjacentHTML("beforeend", `<math><mrow>${MathMLFragments[tag]}</mrow></math>`); 30 } 31 Array.from(document.getElementsByClassName("element")).forEach(element => { 32 var tag = element.tagName; 33 var style = window.getComputedStyle(element); 34 35 test(function() { 36 assert_equals(style.getPropertyValue("text-transform"), 37 tag === "mi" ? "math-auto" : "none", 38 "no attribute"); 39 element.parentNode.setAttribute("style", "text-transform: uppercase"); 40 assert_equals(style.getPropertyValue("text-transform"), 41 tag === "mi" ? "math-auto" : "uppercase", 42 "text-transform on parent"); 43 element.setAttribute("mathvariant", "normal"); 44 assert_equals(style.getPropertyValue("text-transform"), 45 tag === "mi" ? "none" : "uppercase", "attribute specified"); 46 element.setAttribute("mathvariant", "NoRmAl"); 47 assert_equals(style.getPropertyValue("text-transform"), 48 tag === "mi" ? "none" : "uppercase", "case insensitive"); 49 }, `mathvariant on the ${tag} element is ${tag === "mi" ? "" : "not"} mapped to CSS text-transform`) 50 51 test(function() { 52 // none and mprescripts appear as scripts 53 assert_equals(style.getPropertyValue("math-depth"), tag === "none" || tag === "mprescripts" ? "1" : "0", "no attribute"); 54 55 var absoluteScriptlevel = 2; 56 element.setAttribute("scriptlevel", absoluteScriptlevel); 57 assert_equals(style.getPropertyValue("math-depth"), "" + absoluteScriptlevel, "attribute specified <U>"); 58 59 var positiveScriptlevelDelta = 1; 60 element.setAttribute("scriptlevel", `+${positiveScriptlevelDelta}`); 61 assert_equals(style.getPropertyValue("math-depth"), "" + positiveScriptlevelDelta, "attribute specified +<U>"); 62 63 var negativeScriptlevelDelta = -3; 64 element.setAttribute("scriptlevel", `${negativeScriptlevelDelta}`); 65 assert_equals(style.getPropertyValue("math-depth"), "" + negativeScriptlevelDelta, "attribute specified -<U>"); 66 67 element.setAttribute("scriptlevel", absoluteScriptlevel); 68 element.setAttribute("mathsize", "42px"); 69 assert_approx_equals(fontSize(style), 42, 1, "mathsize wins over scriptlevel"); 70 71 }, `scriptlevel on the ${tag} element is mapped to math-depth(...)`); 72 73 test(function() { 74 element.removeAttribute("scriptlevel"); 75 // none and mprescripts appear as scripts 76 let expected = `${tag === "none" || tag === "mprescripts" ? "1" : "0"}`; 77 assert_equals(style.getPropertyValue("math-depth"), expected, "no attribute"); 78 79 // FIXME: Should we test values " +1" and "+1 " here? 80 // See https://github.com/w3c/mathml/issues/122 81 ["+-1", "--1", "+z1", "+ 1", "2.0", "-3\"", "200px", "add(2)"].forEach(invalid_value => { 82 element.setAttribute("scriptlevel", invalid_value); 83 assert_equals(style.getPropertyValue("math-depth"), expected, `invalid scriptlevel value '${invalid_value}'`); 84 }); 85 }, `invalid scriptlevel values on the ${tag} element are not mapped to math-depth(...)`); 86 87 test(function() { 88 assert_equals(style.getPropertyValue("math-style"), "compact", "no attribute"); 89 element.setAttribute("displaystyle", "true"); 90 assert_equals(style.getPropertyValue("math-style"), "normal", "attribute specified"); 91 element.setAttribute("displaystyle", "TrUe"); 92 assert_equals(style.getPropertyValue("math-style"), "normal", "case insensitive"); 93 }, `displaystyle on the ${tag} element is mapped to CSS math-style`); 94 }); 95 96 done(); 97 } 98 </script> 99 </head> 100 <body> 101 <div id="log"></div> 102 <div id="container"> 103 <div><math class="element"></math></div> 104 </div> 105 </body> 106 </html>