writing-mode-002.html (3380B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>writing mode</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script src="/mathml/support/layout-comparison.js"></script> 12 <script src="/mathml/support/mathml-fragments.js"></script> 13 <script> 14 var epsilon = 1; 15 16 setup({ explicit_done: true }); 17 window.addEventListener("load", runTests); 18 19 function runTests() { 20 for (tag in MathMLFragments) { 21 if (tag == "annotation" || tag == "annotation-xml") 22 continue; // These tags have display: none. 23 24 ["horizontal-tb_rtl"].forEach(id => { 25 var writingMode = id.split("_"); 26 var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`; 27 28 document.body.insertAdjacentHTML("beforeend", `<div>\ 29 <math>${MathMLFragments[tag]}</math>\ 30 <math>${MathMLFragments[tag]}</math>\ 31 </div>`); 32 var div = document.body.lastElementChild; 33 34 var styleMath = div.firstElementChild; 35 styleMath.setAttribute("style", writingModeString); 36 var styleElement = FragmentHelper.element(styleMath); 37 38 var referenceMath = div.lastElementChild; 39 var referenceElement = FragmentHelper.element(referenceMath); 40 41 [styleMath, referenceMath].forEach(math => { 42 Array.from(math.getElementsByClassName("mathml-container")).forEach(container => { 43 container.insertAdjacentHTML("beforeend", "\ 44 <mspace style='background: blue'\ 45 width='20px' height='30px' depth='40px'></mspace>\ 46 <mspace style='background: black'\ 47 width='50px' depth='60px'></mspace>\ 48 <mspace style='background: yellow'\ 49 width='70px' height='80px'></mspace>"); 50 }); 51 Array.from(math.getElementsByClassName("foreign-container")).forEach(container => { 52 container.insertAdjacentHTML("beforeend", "\ 53 <span style='display: inline-block; background: lightblue;\ 54 inline-size: 20px; block-size: 30px;\ 55 vertical-align: bottom;'></span>\ 56 <span style='display: inline-block; background: pink;\ 57 inline-size: 40px; block-size: 50px;\ 58 vertical-align: bottom;'></span>"); 59 }); 60 }); 61 62 test(function() { 63 assert_true(MathMLFeatureDetection.has_mspace()); 64 var style = window.getComputedStyle(styleElement); 65 assert_equals(style.getPropertyValue("writing-mode"), 66 writingMode[0], "writing-mode"); 67 assert_equals(style.getPropertyValue("direction"), 68 writingMode[1], "direction"); 69 compareLayout(styleElement, referenceElement, epsilon); 70 }, `Layout of ${tag} (${writingModeString})`); 71 72 div.style = "display: none;"; // Hide the div after testing. 73 }); 74 } 75 done(); 76 } 77 </script> 78 </head> 79 <body> 80 <div id="log"></div> 81 </body> 82 </html>