force-horizontal-tb.html (1970B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Forced writing-mode on MathML elements</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> 7 <meta name="assert" content="Test that writing-mode is forced to horizontal-tb on MathML elements."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/mathml-fragments.js"></script> 11 <style> 12 /* selector defined in mathml-fragments.js */ 13 .element { 14 writing-mode: vertical-lr; 15 padding-block-start: 10px; 16 padding-block-end: 15px; 17 padding-inline-start: 20px; 18 padding-inline-end: 25px; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="log"></div> 24 <div id="container"> 25 <math class="element"></math> 26 </div> 27 <script> 28 var container = document.getElementById("container"); 29 for (tag in MathMLFragments) { 30 container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); 31 } 32 let unknownElement = FragmentHelper.createElement("unknown"); 33 unknownElement.setAttribute("class", "element"); 34 container.appendChild(unknownElement); 35 Array.from(document.getElementsByClassName("element")).forEach(element => { 36 var tag = element.tagName; 37 var style = window.getComputedStyle(element); 38 test(function () { 39 assert_equals(style["writing-mode"], "horizontal-tb"); 40 }, `writing-mode is forced to horizontal-tb on <${tag}> element`); 41 test(function () { 42 assert_equals(style["padding-block-start"], style["padding-top"]); 43 assert_equals(style["padding-block-end"], style["padding-bottom"]); 44 assert_equals(style["padding-inline-start"], style["padding-left"]); 45 assert_equals(style["padding-inline-end"], style["padding-right"]); 46 }, `logical properties interpreted in horizontal-tb on <${tag}> element`); 47 }); 48 </script> 49 </body> 50 </html>