| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>writing mode</title> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms"> |
| <meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/mathml/support/feature-detection.js"></script> |
| <script src="/mathml/support/layout-comparison.js"></script> |
| <script src="/mathml/support/mathml-fragments.js"></script> |
| <script> |
| var epsilon = 1; |
| |
| setup({ explicit_done: true }); |
| window.addEventListener("load", runTests); |
| |
| function runTests() { |
| for (tag in MathMLFragments) { |
| if (tag == "annotation" || tag == "annotation-xml") |
| continue; // These tags have display: none. |
| |
| ["horizontal-tb_rtl"].forEach(id => { |
| var writingMode = id.split("_"); |
| var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`; |
| |
| document.body.insertAdjacentHTML("beforeend", `<div>\ |
| <math>${MathMLFragments[tag]}</math>\ |
| <math>${MathMLFragments[tag]}</math>\ |
| </div>`); |
| var div = document.body.lastElementChild; |
| |
| var styleMath = div.firstElementChild; |
| styleMath.setAttribute("style", writingModeString); |
| var styleElement = FragmentHelper.element(styleMath); |
| |
| var referenceMath = div.lastElementChild; |
| var referenceElement = FragmentHelper.element(referenceMath); |
| |
| [styleMath, referenceMath].forEach(math => { |
| Array.from(math.getElementsByClassName("mathml-container")).forEach(container => { |
| container.insertAdjacentHTML("beforeend", "\ |
| <mspace style='background: blue'\ |
| width='20px' height='30px' depth='40px'></mspace>\ |
| <mspace style='background: black'\ |
| width='50px' depth='60px'></mspace>\ |
| <mspace style='background: yellow'\ |
| width='70px' height='80px'></mspace>"); |
| }); |
| Array.from(math.getElementsByClassName("foreign-container")).forEach(container => { |
| container.insertAdjacentHTML("beforeend", "\ |
| <span style='display: inline-block; background: lightblue;\ |
| inline-size: 20px; block-size: 30px;\ |
| vertical-align: bottom;'></span>\ |
| <span style='display: inline-block; background: pink;\ |
| inline-size: 40px; block-size: 50px;\ |
| vertical-align: bottom;'></span>"); |
| }); |
| }); |
| |
| test(function() { |
| assert_true(MathMLFeatureDetection.has_mspace()); |
| var style = window.getComputedStyle(styleElement); |
| assert_equals(style.getPropertyValue("writing-mode"), |
| writingMode[0], "writing-mode"); |
| assert_equals(style.getPropertyValue("direction"), |
| writingMode[1], "direction"); |
| compareLayout(styleElement, referenceElement, epsilon); |
| }, `Layout of ${tag} (${writingModeString})`); |
| |
| div.style = "display: none;"; // Hide the div after testing. |
| }); |
| } |
| done(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| </body> |
| </html> |
