writing-mode-001.html (2343B)
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 directionproperties) 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> 13 var epsilon = 1; 14 15 setup({ explicit_done: true }); 16 window.addEventListener("load", runTests); 17 18 function runTests() { 19 var reference = document.getElementById("horizontal-tb_ltr"); 20 21 ["horizontal-tb_rtl"].forEach(id => { 22 var element = document.getElementById(id); 23 24 test(function() { 25 var style = window.getComputedStyle(element); 26 var writingMode = id.split("_"); 27 assert_equals(style.getPropertyValue("writing-mode"), 28 writingMode[0], "writing-mode"); 29 assert_equals(style.getPropertyValue("direction"), 30 writingMode[1], "direction"); 31 }, `Inheritance of CSS writing-mode and direction (id='${id}')`); 32 33 test(function() { 34 assert_true(MathMLFeatureDetection.has_mspace()); 35 compareLayout(element, reference, epsilon); 36 }, `Layout of mrow (id='${id}')`); 37 }); 38 done(); 39 } 40 </script> 41 </head> 42 <body> 43 <div id="log"></div> 44 <p> 45 <math> 46 <mrow id="horizontal-tb_ltr"> 47 <mspace style="background: blue" 48 width="20px" height="30px" depth="40px"></mspace> 49 <mspace style="background: black" 50 width="50px" depth="60px"></mspace> 51 <mspace style="background: yellow" 52 width="70px" height="80px"></mspace> 53 </mrow> 54 </math> 55 </p> 56 <p> 57 <math style="direction: rtl;"> 58 <mrow id="horizontal-tb_rtl"> 59 <mspace style="background: blue" 60 width="20px" height="30px" depth="40px"></mspace> 61 <mspace style="background: black" 62 width="50px" depth="60px"></mspace> 63 <mspace style="background: yellow" 64 width="70px" height="80px"></mspace> 65 </mrow> 66 </math> 67 </p> 68 </body> 69 </html>