diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations/css-styling/writing-mode')
5 files changed, 236 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html new file mode 100644 index 0000000000..e239cdca5a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Forced writing-mode on MathML elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Test that writing-mode is forced to horizontal-tb on MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + /* selector defined in mathml-fragments.js */ + .element { + writing-mode: vertical-lr; + padding-block-start: 10px; + padding-block-end: 15px; + padding-inline-start: 20px; + padding-inline-end: 25px; + } +</style> +</head> +<body> + <div id="log"></div> + <div id="container"> + <math class="element"></math> + </div> + <script> + var container = document.getElementById("container"); + for (tag in MathMLFragments) { + container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); + } + let unknownElement = FragmentHelper.createElement("unknown"); + unknownElement.setAttribute("class", "element"); + container.appendChild(unknownElement); + Array.from(document.getElementsByClassName("element")).forEach(element => { + var tag = element.tagName; + var style = window.getComputedStyle(element); + test(function () { + assert_equals(style["writing-mode"], "horizontal-tb"); + }, `writing-mode is forced to horizontal-tb on <${tag}> element`); + test(function () { + assert_equals(style["padding-block-start"], style["padding-top"]); + assert_equals(style["padding-block-end"], style["padding-bottom"]); + assert_equals(style["padding-inline-start"], style["padding-left"]); + assert_equals(style["padding-inline-end"], style["padding-right"]); + }, `logical properties interpreted in horizontal-tb on <${tag}> element`); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html new file mode 100644 index 0000000000..6eae88efb1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Reset writing-mode and logical property (reference)</title> + </head> + <body> + <p>Test passes if you see a green square.</p> + <math style="writing-mode: horizontal-tb; + padding-top: 200px; + background: green"> + <mspace width="200px"/> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html new file mode 100644 index 0000000000..939cfc5ba6 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Reset writing-mode and logical property</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <meta name="assert" content="Verify how forced writing-mode is taken into account for logicial properties."> + <link rel="match" href="reset-and-logicial-property-ref.html"> + </head> + <body> + <p>Test passes if you see a green square.</p> + <math style="writing-mode: vertical-lr; + padding-block-start: 200px; + background: green"> + <mspace width="200px"/> + </math> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html new file mode 100644 index 0000000000..b751caf90d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>writing mode</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) 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> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + var reference = document.getElementById("horizontal-tb_ltr"); + + ["horizontal-tb_rtl"].forEach(id => { + var element = document.getElementById(id); + + test(function() { + var style = window.getComputedStyle(element); + var writingMode = id.split("_"); + assert_equals(style.getPropertyValue("writing-mode"), + writingMode[0], "writing-mode"); + assert_equals(style.getPropertyValue("direction"), + writingMode[1], "direction"); + }, `Inheritance of CSS writing-mode and direction (id='${id}')`); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + compareLayout(element, reference, epsilon); + }, `Layout of mrow (id='${id}')`); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow id="horizontal-tb_ltr"> + <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> + </mrow> + </math> + </p> + <p> + <math style="direction: rtl;"> + <mrow id="horizontal-tb_rtl"> + <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> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html new file mode 100644 index 0000000000..c0b64a917a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>writing mode</title> +<link rel="help" href="https://w3c.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> |