attribute-mapping-001.html (5612B)
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/#legacy-mathml-style-attributes"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> 8 <meta name="assert" content="Verify that dir, mathcolor, mathbackground and mathsize are mapped to CSS but that deprecated MathML3 attributes are not."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/feature-detection.js"></script> 12 <script src="/mathml/support/mathml-fragments.js"></script> 13 <style> 14 #container { 15 color: blue; 16 font-size: 50px; 17 } 18 </style> 19 <script> 20 setup({ explicit_done: true }); 21 window.addEventListener("load", runTests); 22 function runTests() { 23 var container = document.getElementById("container"); 24 for (tag in MathMLFragments) { 25 container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); 26 } 27 Array.from(document.getElementsByClassName("element")).forEach(element => { 28 var tag = element.tagName; 29 var style = window.getComputedStyle(element); 30 31 test(function() { 32 assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute"); 33 element.setAttribute("dir", "rtl"); 34 assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified"); 35 element.setAttribute("dir", "RtL"); 36 assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive"); 37 element.setAttribute("dir", "auto"); 38 assert_equals(style.getPropertyValue("direction"), "ltr", "auto"); 39 element.setAttribute("dir", "foo"); 40 assert_equals(style.getPropertyValue("direction"), "ltr", "random value"); 41 }, `dir on the ${tag} element is mapped to CSS direction`) 42 43 test(function() { 44 assert_equals(style.getPropertyValue("color"), 45 "rgb(0, 0, 255)", 46 "no attribute"); 47 element.setAttribute("mathcolor", "black"); 48 assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified"); 49 // The color names are case-insensitive. 50 // See https://www.w3.org/TR/css-color-3/#html4 51 element.setAttribute("mathcolor", "GrEeN"); 52 assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive"); 53 }, `mathcolor on the ${tag} element is mapped to CSS color`); 54 55 test(function() { 56 assert_equals(style.getPropertyValue("background-color"), 57 tag === "merror" ? 58 "rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)", 59 "no attribute"); 60 element.setAttribute("mathbackground", "lightblue"); 61 assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified"); 62 // The color names are case-insensitive. 63 // See https://www.w3.org/TR/css-color-3/#html4 64 element.setAttribute("mathbackground", "YeLlOw"); 65 assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive"); 66 }, `mathbackground on the ${tag} element is mapped to CSS background-color`); 67 68 test(function() { 69 // "none" and "mprescripts" can only be used as non-first children of mmultiscripts so font-size 70 // is incremented and the resulting fraction string is hard to test accurately, skip for now. 71 if (tag === "none" || tag === "mprescripts") 72 return; 73 assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute"); 74 element.setAttribute("mathsize", "20px"); 75 assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified"); 76 // unit identifiers are ASCII case-insensitive. 77 // https://www.w3.org/TR/css-values-3/#typedef-dimension 78 element.setAttribute("mathsize", "30Px"); 79 assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive"); 80 }, `mathsize on the ${tag} element is mapped to CSS font-size`); 81 82 test(function() { 83 assert_true(MathMLFeatureDetection.has_mathsize(), "Superseding attributes are supported"); 84 var properties = ["background-color", "color", "fontfamily", "font-size", "font-style", "font-weight"]; 85 var oldStyle = {}; 86 properties.forEach(property => { 87 oldStyle[property] = style.getPropertyValue(property); 88 }); 89 element.setAttribute("background", "red"); 90 element.setAttribute("color", "blue"); 91 element.setAttribute("fontfamily", "monospace"); 92 element.setAttribute("fontsize", "50px"); 93 element.setAttribute("fontstyle", "italic"); 94 element.setAttribute("fontweight", "bold"); 95 properties.forEach(property => { 96 assert_equals(style.getPropertyValue(property), oldStyle[property], `${property}`); 97 }); 98 }, `deprecated MathML3 attributes on the ${tag} element are not mapped to CSS`); 99 }); 100 101 done(); 102 } 103 </script> 104 </head> 105 <body> 106 <div id="log"></div> 107 <div id="container"> 108 <math class="element"></math> 109 </div> 110 </body> 111 </html>