diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations/css-styling/out-of-flow')
5 files changed, 209 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html new file mode 100644 index 0000000000..447c5b722a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Absolutely positioned (reference)</title> +<body> + <p>Test passes if you see a green square and no red.</p> + <div style="position: absolute; left: 100px; top: 100px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + </mrow> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html new file mode 100644 index 0000000000..9a7851ba23 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Absolutely positioned</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> +<link rel="match" href="absolutely-positioned-001-ref.html"/> +<meta name="assert" content="Verify visual rendering of absolutely positioned mtext elements."> +<body> + <p>Test passes if you see a green square and no red.</p> + <div style="position: absolute; left: 100px; top: 100px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: red"/> + <mspace width="100px" height="300px" style="background: green"/> + <mtext style="position: absolute; left: 100px; top: 0px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext> + <mtext style="position: absolute; left: 150px; top: 0px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + <mtext style="position: absolute; left: 150px; top: 150px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + </mrow> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html new file mode 100644 index 0000000000..9069b92637 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>absolutely positioned in all MathML elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that absolutely positioned node works in all MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + /* override display: none on children of maction/semantics */ + maction > *, semantics > * { + display: math; + } +</style> +<script> + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + ["absolute", "fixed"].forEach(positionValue => { + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || + FragmentHelper.isEmpty(tag)) + continue; + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ +<math>${MathMLFragments[tag]}</math>\ +</div>`); + let div = document.body.lastElementChild; + let element = FragmentHelper.element(div.firstElementChild); + FragmentHelper.forceNonEmptyElement(element); + if (element.classList.contains("mathml-container") || + element.classList.contains("foreign-container")) { + for (let i = 0; i < 5; i++) { + FragmentHelper.appendChild(element); + } + } + + let middleChild; + if (element.children.length >= 2) { + middleChild = FragmentHelper.appendChild(element, true /*allowInvalid*/); + middleChild.setAttribute("style", `position: ${positionValue}; left: 300px; top: 400px`); + let middlePosition = Math.floor(element.children.length/2); + element.insertBefore(middleChild, element.children[middlePosition]); + } + + let firstChild = FragmentHelper.appendChild(element, true /*allowInvalid*/); + firstChild.setAttribute("style", `position: ${positionValue}; left: 100px; top: 200px`); + element.insertBefore(firstChild, element.firstElementChild); + + let lastChild = FragmentHelper.appendChild(element, true /*allowInvalid*/); + lastChild.setAttribute("style", `position: ${positionValue}; left: 500px; top: 600px`); + + let referenceBox; + switch (positionValue) { + case "absolute": + // Use the absolutely positioned div ancestor. + referenceBox = div.getBoundingClientRect(); + break + case "fixed": + // Use the viewport. + referenceBox = {left: 0, top: 0}; + break; + default: + throw "reference box not defined"; + } + + let firstChildBox = firstChild.getBoundingClientRect(); + let lastChildBox = lastChild.getBoundingClientRect(); + let middleChildBox; + if (middleChild) { + middleChildBox = middleChild.getBoundingClientRect(); + } + + let epsilon = 1; + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + assert_approx_equals(firstChildBox.left - referenceBox.left, 100, epsilon); + assert_approx_equals(firstChildBox.top - referenceBox.top, 200, epsilon); + if (middleChildBox) { + assert_approx_equals(middleChildBox.left - referenceBox.left, 300, epsilon); + assert_approx_equals(middleChildBox.top - referenceBox.top, 400, epsilon); + } + assert_approx_equals(lastChildBox.left - referenceBox.left, 500, epsilon); + assert_approx_equals(lastChildBox.top - referenceBox.top, 600, epsilon); + }, `position: ${positionValue}; children in ${tag}`); + + div.style = "display: none;"; // Hide the div after measurement. + } + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html new file mode 100644 index 0000000000..03b9f56698 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>Fixed positioned (reference)</title> +<style> + body { overflow: hidden; } +</style> +<body> + <div style="position: absolute; left: 100px; top: 200px; + height: 3000px; width: 3000px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + </mrow> + </math> + <p>Test passes if you see a green square and no red.</p> + </div> + <script> + requestAnimationFrame(() => { + window.scrollTo(50, 100); + document.documentElement.classList.remove("reftest-wait"); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html new file mode 100644 index 0000000000..994174162c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>Fixed positioned</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> +<link rel="match" href="fixed-positioned-001-ref.html"/> +<meta name="assert" content="Verify visual rendering of fixed positioned mtext elements."> +<style> + body { overflow: hidden; } +</style> +<body> + <div style="position: absolute; left: 100px; top: 200px; + height: 3000px; width: 3000px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: red"/> + <mspace width="100px" height="300px" style="background: green"/> + <mtext style="position: fixed; left: 150px; top: 100px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext> + <mtext style="position: fixed; left: 200px; top: 100px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + <mtext style="position: fixed; left: 200px; top: 250px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + </mrow> + </math> + <p>Test passes if you see a green square and no red.</p> + </div> + <script> + requestAnimationFrame(() => { + window.scrollTo(50, 100); + document.documentElement.classList.remove("reftest-wait"); + }); + </script> +</body> +</html> |