diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/mathml/presentation-markup/mrow | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/mathml/presentation-markup/mrow')
19 files changed, 1568 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001-ref.html new file mode 100644 index 0000000000..2f823ba955 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Dynamic mrow-like elements (reference)</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math { + font: 25px/1 Ahem; + background: lightblue; + } + li { + padding: 2px; + } +</style> +</head> +<body> + <ol> + <li><math class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></math></li> + <li><math class="testedElement"><mn>X</mn><mn>p</mn></math></li> + <li><math><mrow class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mrow></math></li> + <li><math><mrow class="testedElement"><mn>X</mn><mn>p</mn></mrow></math></li> + <li><math><maction class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></maction></math></li> + <li><math><maction class="testedElement"><mn>X</mn><mn>p</mn></maction></math></li> + <li><math><merror class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></merror></math></li> + <li><math><merror class="testedElement"><mn>X</mn><mn>p</mn></merror></math></li> + <li><math><mphantom class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mphantom></math></li> + <li><math><mphantom class="testedElement"><mn>X</mn><mn>p</mn></mphantom></math></li> + <li><math><mstyle class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mstyle></math></li> + <li><math><mstyle class="testedElement"><mn>X</mn><mn>p</mn></mstyle></math></li> + <li><math><semantics class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></semantics></math></li> + <li><math><semantics class="testedElement"><mn>X</mn><mn>p</mn></semantics></math></li> + <li><math><unknown class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></unknown></math></li> + <li><math><unknown class="testedElement"><mn>X</mn><mn>p</mn></unknown></math></li> + <li><math><none class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></none></math></li> + <li><math><none class="testedElement"><mn>X</mn><mn>p</mn></none></math></li> + <li><math><mprescripts class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mprescripts></math></li> + <li><math><mprescripts class="testedElement"><mn>X</mn><mn>p</mn></mprescripts></math></li> + </ol> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001.html new file mode 100644 index 0000000000..79de59feec --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Dynamic mrow-like elements</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<script src="/mathml/support/mathml-fragments.js"></script> +<meta name="assert" content="Dynamically set children of mrow-like elements."> +<style> + math { + font: 25px/1 Ahem; + background: lightblue; + } + li { + padding: 2px; + } +</style> +<link rel="match" href="dynamic-mrow-like-001-ref.html"> +<script> + window.addEventListener("load", function() { + + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + Array.from(document.getElementsByClassName("testedElement")).forEach(e => { + if (e.children.length == 0) { + // Add 3 children. + let mn = FragmentHelper.createElement("mn"); + mn.textContent = "X"; + e.appendChild(mn); + mn = FragmentHelper.createElement("mn"); + mn.textContent = "É"; + e.appendChild(mn); + mn = FragmentHelper.createElement("mn"); + mn.textContent = "p"; + e.insertBefore(mn, e.lastElementChild); + } else { + // Remove last child. + e.removeChild(e.lastElementChild); + } + }); + + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</head> +<body> + <ol> + <li><math class="testedElement"></math></li> + <li><math class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></math></li> + <li><math><mrow class="testedElement"></mrow></math></li> + <li><math><mrow class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mrow></math></li> + <li><math><maction class="testedElement"></maction></math></li> + <li><math><maction class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></maction></math></li> + <li><math><merror class="testedElement"></merror></math></li> + <li><math><merror class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></merror></math></li> + <li><math><mphantom class="testedElement"></mphantom></math></li> + <li><math><mphantom class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mphantom></math></li> + <li><math><mstyle class="testedElement"></mstyle></math></li> + <li><math><mstyle class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mstyle></math></li> + <li><math><semantics class="testedElement"></semantics></math></li> + <li><math><semantics class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></semantics></math></li> + <li><math><unknown class="testedElement"></unknown></math></li> + <li><math><unknown class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></unknown></math></li> + <li><math><none class="testedElement"></none></math></li> + <li><math><none class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></none></math></li> + <li><math><mprescripts class="testedElement"></mprescripts></math></li> + <li><math><mprescripts class="testedElement"><mn>X</mn><mn>p</mn><mn>É</mn></mprescripts></math></li> + </ol> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-baseline.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-baseline.html new file mode 100644 index 0000000000..0086646859 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-baseline.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Baseline of inferred mrows</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="help" href="https://w3c.github.io/mathml-core/#error-message-merror"> +<link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose"> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<meta name="assert" content="Baseline for mrow-like elements is correct."> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() + { + ["Mrow", "Sqrt", "Style", "Error", "Phantom", "Math", "Menclose", "Mpadded", "Unknown", "Mtd", "None", "Mprescripts"].forEach((tag) => { + var x = document.getElementById(`above${tag}`).getBoundingClientRect(); + var y = document.getElementById(`below${tag}`).getBoundingClientRect(); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_equals(x.bottom, y.top); + }, `baseline alignment inside ${tag}`); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math><mrow><mspace id="aboveMrow" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowMrow" width="10px" depth="30px" style="background: blue"></mspace></mrow></math> + <math><msqrt><mspace id="aboveSqrt" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowSqrt" width="10px" depth="30px" style="background: blue"></mspace></msqrt></math> + <math><mstyle><mspace id="aboveStyle" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowStyle" width="10px" depth="30px" style="background: blue"></mspace></mstyle></math> + <math><merror><mspace id="aboveError" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowError" width="10px" depth="30px" style="background: blue"></mspace></merror></math> + <math><mphantom><mspace style="visibility: visible;" id="abovePhantom" width="10px" height="30px" style="background: purple"></mspace><mspace style="visibility: visible;" id="belowPhantom" width="10px" depth="30px" style="background: blue"></mspace></mphantom></math> + <math><mspace id="aboveMath" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowMath" width="10px" depth="30px" style="background: blue"></mspace></math> + <!-- menclose is treated as <unknown> in MathML Core --> + <math><menclose notation="box"><mspace id="aboveMenclose" width="10px" height="30px" style="background: purple" +></mspace><mspace id="belowMenclose" width="10px" depth="30px" style="background: blue"></mspace></menclose></math> + <math><mpadded lspace="10px"><mspace id="aboveMpadded" width="10px" height="30px" style="background: purple" +></mspace><mspace id="belowMpadded" width="10px" depth="30px" style="background: blue"></mspace></mpadded></math> + <math><unknown><mspace id="aboveUnknown" width="10px" height="30px" style="background: purple" +></mspace><mspace id="belowUnknown" width="10px" depth="30px" style="background: blue"></mspace></unknown></math> + <math><mtable><mtr><mtd><mspace id="aboveMtd" width="10px" height="30px" style="background: purple" +></mspace><mspace id="belowMtd" width="10px" depth="30px" style="background: blue"></mspace></mtd></mtr></mtable></math> + <math><none><mspace id="aboveNone" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowNone" width="10px" depth="30px" style="background: blue"></mspace></none></math> + <math><mprescripts><mspace id="aboveMprescripts" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowMprescripts" width="10px" depth="30px" style="background: blue"></mspace></none></math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-stretchy.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-stretchy.html new file mode 100644 index 0000000000..614438deb3 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-stretchy.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Stretchy in inferred mrows</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="help" href="https://w3c.github.io/mathml-core/#error-message-merror"> +<link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose"> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<meta name="assert" content="Operators can stretch inside mrow-like elements."> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + mo { + font-size: 10px; + font-family: axisheight5000-verticalarrow14000; + } + @font-face { + font-family: axisheight5000-verticalarrow14000; + src: url("/fonts/math/axisheight5000-verticalarrow14000.woff"); + } +</style> +<script type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + function runTests() + { + ["Mrow", "Sqrt", "Style", "Error", "Phantom", "Math", "Menclose", "Mpadded", "Unknown", "Mtd", "None", "Mprescripts"].forEach((tag) => { + var mo = document.getElementById(`mo${tag}`); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_greater_than_equal(mo.getBoundingClientRect().height, 100); + }, `operator stretching inside ${tag}`); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math><mrow><mo id="moMrow">↨</mo><mspace width="1px" height="100px" style="background: blue"></mspace></mrow></math> + <math><msqrt><mo id="moSqrt">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></msqrt></math> + <math><mstyle><mo id="moStyle">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mstyle></math> + <math><merror><mo id="moError">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></merror></math> + <math><mphantom><mo style="visibilty: visible;" id="moPhantom">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mphantom></math> + <math><mo id="moMath">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></math> + <!-- menclose is treated as <unknown> in MathML Core --> + <math><menclose notation="box"><mo id="moMenclose">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></menclose></math> + <math><mpadded lspace="10px"><mo id="moMpadded">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mpadded></math> + <math><unknown><mo id="moUnknown">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></unknown></math> + <math><mtable><mtr><mtd><mo id="moMtd">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mtd></mtr></mtable></math> + <math><none><mo id="moNone">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></none></math> + <math><mprescripts><mo id="moMprescripts">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mprescripts></math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001-ref.html new file mode 100644 index 0000000000..00c781b6e4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mfenced element</title> + </head> + <body> + <p>Test passes if you see 6 green squares and no red.</p> + <p> + <math> + <mrow> + <mspace width="30px" height="30px" style="background: green"></mspace> + <mspace width="30px" height="30px" style="background: lightgreen"></mspace> + <mspace width="30px" height="30px" style="background: green"></mspace> + </mrow> + <mrow> + <mspace width="30px" height="30px" style="background: lightgreen"></mspace> + <mspace width="30px" height="30px" style="background: green"></mspace> + <mspace width="30px" height="30px" style="background: lightgreen"></mspace> + </mrow> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001.html new file mode 100644 index 0000000000..d39ff45f62 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mfenced element</title> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mfenced"> + <link rel="help" href="https://w3c.github.io/mathml-core/#new-display-math-value"> + <link rel="help" href="https://w3c.github.io/mathml-core/#mathml-elements"> + <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> + <meta name="assert" content="Verify that the mfenced element is not supported."> + <link rel="match" href="legacy-mfenced-element-001-ref.html"> + </head> + <body> + <p>Test passes if you see 6 green squares and no red.</p> + <p> + <math style="color: red"> + <mfenced> + <mspace width="30px" height="30px" style="background: green"></mspace> + <mspace width="30px" height="30px" style="background: lightgreen"></mspace> + <mspace width="30px" height="30px" style="background: green"></mspace> + </mfenced> + <mfenced open="{" close="]" separators="?!"> + <mspace width="30px" height="30px" style="background: lightgreen"></mspace> + <mspace width="30px" height="30px" style="background: green"></mspace> + <mspace width="30px" height="30px" style="background: lightgreen"></mspace> + </mfenced> + </math> + </p> + <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/presentation-markup/mrow/legacy-mrow-like-elements-001.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-001.html new file mode 100644 index 0000000000..277529d829 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-001.html @@ -0,0 +1,188 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Legacy maction and semantics elements</title> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.maction"> +<link rel="help" href="https://w3c.github.io/mathml-core/#enlivening-expressions"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.semantics"> +<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation"> +<meta name="assert" content="Legacy maction and semantics elements are handled as mrow with special style"> +<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 type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() + { + Array.from(document.getElementsByClassName("TestContainer")).forEach(container => { + const id = container.id; + const math = container.getElementsByTagName("math"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace(), "<mspace> is supported"); + const epsilon = 1; + compareLayout(math[0], math[1], epsilon); + }, `Element is laid out as an mrow with only first child displayed (id=${id})`); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace(), "<mspace> is supported"); + let firstChild = math[0].firstElementChild.firstElementChild; + for (var child = firstChild; child; child = child.nextElementSibling) { + var style = window.getComputedStyle(child).getPropertyValue("display"); + if (child == firstChild) { + assert_equals(style, "math", "First child has display: math"); + } else { + assert_equals(style, "none", "Other children have display: none"); + } + } + }, `Computed display of children (id=${id})`); + }); + done(); + } +</script> +<style> + mspace:nth-child(2n) { + background: lightblue; + } + mspace:nth-child(2n+1) { + background: lightgreen; + } + mrow.onlyShowFirstChild > :not(:first-child) { + display: none; + } +</style> +</head> +<body> + <div id="log"></div> + <p class="TestContainer" id="semantics"> + <math> + <semantics> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </semantics> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </mrow> + </math> + </p> + <p class="TestContainer" id="semantics-annotations"> + <math> + <semantics> + <mspace width="10px" height="10px"></mspace> + <annotation>ANNOTATION</annotation> + <annotation-xml>ANNOTATION-XML</annotation-xml> + </semantics> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <annotation>ANNOTATION</annotation> + <annotation-xml>ANNOTATION-XML</annotation-xml> + </mrow> + </math> + </p> + <p class="TestContainer" id="maction"> + <math> + <maction> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </maction> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </mrow> + </math> + </p> + <p class="TestContainer" id="maction-toggle"> + <math> + <maction actiontype="toggle"> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </maction> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </mrow> + </math> + </p> + <p class="TestContainer" id="maction-toggle-selection"> + <math> + <maction actiontype="toggle" selection="3"> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </maction> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <mspace width="10px" depth="10px"></mspace> + <mspace width="10px" height="15px" depth="5px"></mspace> + <mspace width="10px" height="5px" depth="15px"></mspace> + </mrow> + </math> + </p> + <p class="TestContainer" id="maction-statusline"> + <math> + <maction actiontype="statusline"> + <mspace width="10px" height="10px"></mspace> + <mtext>MESSAGE</mtext> + </maction> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <mtext>MESSAGE</mtext> + </mrow> + </math> + </p> + <p class="TestContainer" id="maction-tooltip"> + <math> + <maction actiontype="tooltip"> + <mspace width="10px" height="10px"></mspace> + <mtext>MESSAGE</mtext> + </maction> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + <mtext>MESSAGE</mtext> + </mrow> + </math> + </p> + <p class="TestContainer" id="maction-input"> + <math> + <maction actiontype="input"> + <mspace width="10px" height="10px"></mspace> + </maction> + </math> + <math> + <mrow class="onlyShowFirstChild"> + <mspace width="10px" height="10px"></mspace> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002-ref.html new file mode 100644 index 0000000000..4fd4b225f3 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Legacy maction and semantics elements (reference)</title> +</head> +<body> + <p>This test passes if you see 4 green squares and no red.</p> + <p> + <math> + <mrow> + <mtext> + <span style="display: inline-block; width: 50px; height: 50px; background: green;"></span> + </mtext> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow style="display: inline-block"> + <span style="display: inline-block; width: 50px; height: 50px; background: green;"></span> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mspace style="background: green" width="50px" height="50px"></mspace> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mspace style="background: green" width="50px" height="50px"></mspace> + </mrow> + </math> + </p> + <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/presentation-markup/mrow/legacy-mrow-like-elements-002.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002.html new file mode 100644 index 0000000000..99a5721bce --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Legacy maction and semantics elements</title> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.maction"> +<link rel="help" href="https://w3c.github.io/mathml-core/#enlivening-expressions"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.semantics"> +<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation"> +<meta name="assert" content="Verify that one can override the default rendering legacy maction and semantics elements using the display property"> +<link rel="match" href="legacy-mrow-like-elements-002-ref.html"> +</head> +<body> + <p>This test passes if you see 4 green squares and no red.</p> + <p> + <math> + <semantics> + <mspace style="display: none; background: red;" width="50px" height="50px"></mspace> + <mspace style="background: red;" width="50px" height="50px"></mspace> + <annotation style="display: math"> + <span style="display: inline-block; width: 50px; height: 50px; background: green;"></span> + </annotation> + </semantics> + </math> + </p> + <p> + <math> + <semantics> + <mspace style="display: none; background: red;" width="50px" height="50px"></mspace> + <mspace style="background: red;" width="50px" height="50px"></mspace> + <annotation-xml style="display: inline-block" encoding="text/html"> + <span style="display: inline-block; width: 50px; height: 50px; background: green;"></span> + </annotation-xml> + </semantics> + </math> + </p> + <p> + <math> + <maction actiontype="toggle"> + <mspace style="display: none; background: red" width="50px" height="50px"></mspace> + <mspace style="display: math; background: green" width="50px" height="50px"></mspace> + </maction> + </math> + </p> + <p> + <math> + <maction actiontype="toggle" selection="2"> + <mspace style="display: none; background: red" width="50px" height="50px"></mspace> + <mspace style="display: math; background: green" width="50px" height="50px"></mspace> + <mspace style="background: red" width="50px" height="50px"></mspace> + </maction> + </math> + </p> + <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/presentation-markup/mrow/legacy-mstyle-attributes.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mstyle-attributes.html new file mode 100644 index 0000000000..2463c40476 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mstyle-attributes.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Legacy mstyle attributes</title> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<link rel="help" href="https://w3c.github.io/mathml-core/#string-literal-ms"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose"> +<meta name="assert" content="Legacy mstyle attributes are ignored"> +<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 type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() + { + Array.from(document.getElementsByClassName("TestContainer")).forEach(container => { + const tag = container.id; + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + const epsilon = 1; + const math = container.getElementsByTagName("math"); + compareLayout(math[0], math[1], epsilon); + }, `Legacy mstyle attributes do not apply to ${tag}`); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <!-- Note: mpadded attributes are not tested since MathML3 did not allow to + set them from mstyle. Also, it is not clear whether munderover's + accent/accentunder could be applied from mstyle, given that the former + clashes with mo@accent. Other legacy mstyle attributes not in MathML + Core or without visual effect are not tested. + --> + <p class="TestContainer" id="mspace"> + <math> + <mstyle width="50px" height="50px" depth="50px"> + <mspace style="background: lightblue"></mspace> + </mstyle> + </math> + <math> + <mstyle> + <mspace style="background: lightblue"></mspace> + </mstyle> + </math> + </p> + <p class="TestContainer" id="mfrac"> + <math> + <mstyle linethickness="50px"> + <mfrac> + <mn>1</mn> + <mn>2</mn> + </mfrac> + </mstyle> + </math> + <math> + <mstyle> + <mfrac> + <mn>1</mn> + <mn>2</mn> + </mfrac> + </mstyle> + </math> + </p> + <p class="TestContainer" id="mo"> + <math displaystyle="true"> + <mstyle lspace="50px" rspace="50px"> + <mn>1</mn> + <mo>A</mo> + <mn>2</mn> + </mstyle> + <mstyle movablelimits="false" largeop="false"> + <munder> + <mo>∑</mo> + <mn>3</mn> + </munder> + </mstyle> + <mstyle accent="false"> + <mover> + <mn>4</mn> + <mo>⇀</mo> + </mover> + </mstyle> + <mstyle stretchy="false" symmetric="false" maxsize="20px"> + <mrow> + <mo>|</mo> + <mspace height="100px"></mspace> + </mrow> + </mstyle> + <mstyle minsize="100px"> + <mrow> + <mo>|</mo> + <mn>4</mn> + </mrow> + </mstyle> + </math> + <math displaystyle="true"> + <mstyle> + <mn>1</mn> + <mo>A</mo> + <mn>2</mn> + </mstyle> + <mstyle> + <munder> + <mo>∑</mo> + <mn>3</mn> + </munder> + </mstyle> + <mstyle> + <mover> + <mn>4</mn> + <mo>⇀</mo> + </mover> + </mstyle> + <mstyle> + <mrow> + <mo>|</mo> + <mspace height="100px"></mspace> + </mrow> + </mstyle> + <mstyle> + <mrow> + <mo>|</mo> + <mn>4</mn> + </mrow> + </mstyle> + </math> + </p> + <!-- notation attribute is from MathML3's menclose element --> + <p class="TestContainer" id="menclose"> + <math> + <mstyle notation="box"> + <mn>1</mn> + </mstyle> + </math> + <math> + <mstyle> + <mn>1</mn> + </mstyle> + </math> + </p> + <p class="TestContainer" id="ms"> + <math> + <mstyle lquote="AAAA" rquote="BBBB"> + <ms>1</ms> + </mstyle> + </math> + <math> + <mstyle> + <ms>1</ms> + </mstyle> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/merror-001.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/merror-001.html new file mode 100644 index 0000000000..a9a021c2e9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/merror-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test the merror element</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#error-message-merror"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Verify default merror style and size."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + math { + font: 25px/1 Ahem; + } +</style> +</head> +<body> + <div id="log"></div> + <div> + <math> + <mrow id="reference"><mtext>AN ERROR</mtext></mrow> + <merror id="merror"><mtext>AN ERROR</mtext></merror> + </math> + </div> + <script> + test(function () { + var style = window.getComputedStyle(document.getElementById("merror")); + assert_equals(style.borderWidth, "1px"); + assert_equals(style.borderColor, "rgb(255, 0, 0)"); + assert_equals(style.borderStyle, "solid"); + assert_equals(style.backgroundColor, "rgb(255, 255, 224)"); + }, "Default CSS properties on merror"); + + test(function () { + var merrorBox = document.getElementById("merror").getBoundingClientRect(); + var referenceBox = document.getElementById("reference").getBoundingClientRect(); + assert_equals(merrorBox.width, referenceBox.width + 2); + assert_equals(merrorBox.height, referenceBox.height + 2); + }, "Bounding box is the same as mrow + 1px border"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/mphantom-001.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/mphantom-001.html new file mode 100644 index 0000000000..771688cf19 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mphantom-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test the mphantom element</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="Verify default mphantom style and size."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + math { + font: 25px/1 Ahem; + } +</style> +</head> +<body> + <div id="log"></div> + <div> + <math> + <mrow id="reference"><mtext>AN ERROR</mtext></mrow> + <mphantom id="mphantom"><mtext>AN ERROR</mtext></mphantom> + </math> + </div> + <script> + test(function () { + var style = window.getComputedStyle(document.getElementById("mphantom")); + assert_equals(style.visibility, "hidden"); + }, "Default CSS properties on mphantom"); + + test(function () { + var mphantomBox = document.getElementById("mphantom").getBoundingClientRect(); + var referenceBox = document.getElementById("reference").getBoundingClientRect(); + assert_equals(mphantomBox.width, referenceBox.width); + assert_equals(mphantomBox.height, referenceBox.height); + }, "Bounding box is the same as mrow"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-fallback.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-fallback.html new file mode 100644 index 0000000000..3f9d466148 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-fallback.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test mrow fallback for some MathML elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#script-and-limit-schemata"> +<meta name="assert" content="Verify that invalid markup fallbacks to row layout."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function isValid(tagName, mspaceCount) { + switch (tagName) { + case "mfrac": + case "mroot": + case "munder": + case "mover": + case "msub": + case "msup": + return mspaceCount == 2; + case "munderover": + case "msubsup": + return mspaceCount == 3; + case "mmultiscripts": + return mspaceCount % 2 == 1; + } + } + + function runTests() { + let container = document.getElementById("container"); + const epsilon = 1; + ["mfrac", "mroot", "munder", "mover", "munderover", "msub", "msup", "msubsup", "mmultiscripts"].forEach(tag => { + let element = FragmentHelper.createElement(tag); + let reference = FragmentHelper.createElement("mrow"); + container.appendChild(element); + container.appendChild(reference); + let maxCount = tag == "mmultiscripts" ? 10 : 5; + let mspaceCount = 0; + for (let count = 0; count <= maxCount; count++) { + if (!isValid(tag, mspaceCount)) { + test(function() { + compareLayout(element, reference, epsilon); + }, `Invalid <${element.tagName}> should lay out as an mrow (count == ${count})`); + } + if (tag == "mmultiscripts" && count == maxCount / 2) { + [element, reference].forEach(el => { + el.insertAdjacentHTML("beforeend", `<mprescripts/>`); + }); + } else { + let width = (count + 1) * 10; + let height = (count + 1) * (count % 2 ? 15 : 5); + let depth = (count + 1) * (count % 2 ? 5 : 15); + [element, reference].forEach(el => { + el.insertAdjacentHTML("beforeend", `<mspace height="${height}px" depth="${depth}px" width="${width}px" style="background: black"/>`); + }); + mspaceCount++; + } + } + }); + Array.from(document.getElementById("invalidMultiscripts"). + getElementsByTagName("mmultiscripts")).forEach(element => { + let reference = element.nextElementSibling; + let description = element.dataset.description; + test(function() { + compareLayout(element, reference, epsilon); + }, `Invalid mmultiscripts should lay out as an mrow (${description})`); + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <div id="container"></div> + <div id="invalidMultiscripts"> + <math> + <mmultiscripts data-description="first in-flow child is an <mprescripts>"> + <mprescripts/> + <mspace height="5px" depth="15px" width="10px" style="background: black"/> + <mspace height="30px" depth="10px" width="20px" style="background: black"/> + <mspace height="15px" depth="45px" width="30px" style="background: black"/> + <mspace height="60px" depth="20px" width="40px" style="background: black"/> + + </mmultiscripts> + <mrow> + <mprescripts/> + <mspace height="5px" depth="15px" width="10px" style="background: black"/> + <mspace height="30px" depth="10px" width="20px" style="background: black"/> + <mspace height="15px" depth="45px" width="30px" style="background: black"/> + <mspace height="60px" depth="20px" width="40px" style="background: black"/> + + </mrow> + </math> + <math> + <mmultiscripts data-description="one of the even number of children after the first <mprescripts> is an <mprescripts>"> + <mspace height="5px" depth="15px" width="10px" style="background: black"/> + <mspace height="30px" depth="10px" width="20px" style="background: black"/> + <mspace height="15px" depth="45px" width="30px" style="background: black"/> + <mprescripts/> + <mspace height="60px" depth="20px" width="40px" style="background: black"/> + <mprescripts/> + <mspace height="25px" depth="75px" width="50px" style="background: black"/> + <mspace height="35px" depth="105px" width="70px" style="background: black"/> + </mmultiscripts> + <mrow> + <mspace height="5px" depth="15px" width="10px" style="background: black"/> + <mspace height="30px" depth="10px" width="20px" style="background: black"/> + <mspace height="15px" depth="45px" width="30px" style="background: black"/> + <mprescripts/> + <mspace height="60px" depth="20px" width="40px" style="background: black"/> + <mprescripts/> + <mspace height="25px" depth="75px" width="50px" style="background: black"/> + <mspace height="35px" depth="105px" width="70px" style="background: black"/> + </mrow> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order-ref.html new file mode 100644 index 0000000000..72694959a8 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order-ref.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mrow painting order (reference)</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + position: absolute; + left: 2em; + top: 10em; + } + math { + font: 50px/1 Ahem; + } + .hidden { + visibility: hidden; + } + </style> + </head> + <body> + <p>This test passes if there is no red and content is stacked such that</p> + <ul> + <li>foreground (dark colors) is above background (light colors)</li> + <li>yellow foreground is above green foreground which is itself above blue foreground</li> + <li>yellow background is above green background which is itself above blue background</li> + </ul> + <!-- Paint lightblue background --> + <div class="container"> + <math> + <mrow> + <mrow style="background: lightblue"><mn class="hidden">XXÉ</mn></mrow> + </mrow> + </math> + </div> + <!-- Paint lightgreen background --> + <div class="container"> + <math> + <mrow> + <mn class="hidden">XXÉX</mn> + <mrow style="background: lightgreen; margin-inline-start: -3em"><mn style="visibility: hidden">p XXÉ</mn></mrow> + </mrow> + </math> + </div> + <!-- Paint lightyellow background --> + <div class="container"> + <math> + <mrow> + <mn class="hidden">XXÉX</mn> + <mn class="hidden" style="margin-inline-start: -3em">p XXÉX</mn> + <mrow style="background: lightyellow; margin-inline-start: -3em"><mn style="visibility: hidden">p X</mn></mrow> + </mrow> + </math> + </div> + <!-- Paint blue foreground --> + <div class="container"> + <math> + <mrow> + <mn style="color: blue;">XXÉ</mn> + </mrow> + </math> + </div> + <!-- Paint green foreground --> + <div class="container"> + <math> + <mrow> + <mn class="hidden">XXÉX</mn> + <mn style="color: green; margin-inline-start: -3em">p XXÉ</mn> + </mrow> + </math> + </div> + <!-- Paint yellow foreground --> + <div class="container"> + <math> + <mrow> + <mn class="hidden">XXÉX</mn> + <mn class="hidden" style="margin-inline-start: -3em">p XXÉX</mn> + <mn style="color: yellow; margin-inline-start: -3em">p X</mn> + </mrow> + </math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order.html new file mode 100644 index 0000000000..516359a545 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mrow painting order</title> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mfenced"> + <link rel="help" href="https://w3c.github.io/mathml-core/#stacking-contexts"> + <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> + <meta name="assert" content="Verify in which order the children paint"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <link rel="match" href="mrow-painting-order-ref.html"> + <style> + .container { + position: absolute; + left: 2em; + top: 10em; + } + math { + font: 50px/1 Ahem; + } + </style> + </head> + <body> + <p>This test passes if there is no red and content is stacked such that</p> + <ul> + <li>foreground (dark colors) is above background (light colors)</li> + <li>yellow foreground is above green foreground which is itself above blue foreground</li> + <li>yellow background is above green background which is itself above blue background</li> + </ul> + <div class="container"> + <math> + <mrow> + <mn style="color: blue; background: lightblue">XXÉ</mn> + <mn style="color: red">X</mn> + <mn style="color: green; background: lightgreen; margin-inline-start: -3em">p XXÉ</mn> + <mn style="color: red">X</mn> + <mn style="color: yellow; background: lightyellow; margin-inline-start: -3em">p X</mn> + </mrow> + </math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-preferred-width.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-preferred-width.html new file mode 100644 index 0000000000..8f0e3216c1 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-preferred-width.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Preferred width of mrow-like elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<meta name="assert" content="The preferred width of mrow-like elements is the sum of children's width, modulo extra spacing."> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() + { + var epsilon = 1; + + function MrowWidthFromChildren(mrow) { + var first = mrow.firstElementChild.getBoundingClientRect(); + var last = mrow.lastElementChild.getBoundingClientRect(); + return last.right - first.left; + } + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + Array.from(document.getElementById("mspace-tests").getElementsByClassName("shrink-wrap")).forEach((container) => { + var containerWidth = container.getBoundingClientRect().width; + var mrow = container.getElementsByClassName("mrow-like")[0]; + var mrowWidth = MrowWidthFromChildren(mrow); + assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName); + }); + }, "Preferred width of mrow with mspace children"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + + Array.from(document.getElementById("tokens-tests").getElementsByClassName("shrink-wrap")).forEach((container) => { + var containerWidth = container.getBoundingClientRect().width; + var mrow = container.getElementsByClassName("mrow-like")[0]; + var mrowWidth = MrowWidthFromChildren(mrow); + assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName); + }); + }, "Preferred width of mrow with mn and mo children"); + + done(); + } +</script> +<style> +div.shrink-wrap { + background: yellow; + display: inline-block; + margin-top: 5px; + padding-top: 5px; +} +</style> +</head> +<body> + <div id="log"></div> + <div id="mspace-tests"> + <div><div class="shrink-wrap"> + <math><mrow class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mrow></math> + </div></div> + <div> + <div class="shrink-wrap"> + <math><mstyle class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mstyle></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math><mphantom class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mphantom></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math><unknown class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></unknown></math> + </div> + </div> + <div> + </div> + </div> + <div id="tokens-tests"> + <div> + <div class="shrink-wrap"> + <math><mrow class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mrow></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math><mstyle class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mstyle></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math><mphantom class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mphantom></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></math> + </div> + </div> + <div> + <div class="shrink-wrap"> + <math><unknown class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></unknown></math> + </div> + </div> + </div> +</p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/no-spacing.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/no-spacing.html new file mode 100644 index 0000000000..a2e7eb7d8d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/no-spacing.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>No spacing in elements</title> +<meta name="assert" content="Spacing is not added around operators when an element does not use mrow layout. However, when the element is embellished, spacing of the core mo is added around it."> +<link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + function runTests() + { + Array.from(document.getElementsByClassName("testedElement")).forEach((e) => { + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + let box = e.getBoundingClientRect(); + let spacing = 100; + assert_less_than_equal(box.width, spacing); + }, `Spacing inside <${e.tagName}>.`); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + let box = e.parentNode.getBoundingClientRect(); + let spacing = 100; + if (e.classList.contains("embellished")) + assert_greater_than_equal(box.width, spacing * 2); + else + assert_less_than_equal(box.width, spacing); + }, `Spacing around <${e.tagName}>.`); + }); + done(); + } +</script> +<style> + .testedElement { + background: lightgreen; + } + math { + background: lightblue; + } + math, math * { + font: 25px/1 Ahem; + } +</style> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mfrac class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </mfrac> + </math> + </p> + <p> + <math> + <msub class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </msub> + </math> + </p> + <p> + <math> + <msup class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </msup> + </math> + </p> + <p> + <math> + <msubsup class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </msubsup> + </math> + </p> + <p> + <math> + <mmultiscripts class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + <mprescripts/> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </mmultiscripts> + </math> + </p> + <p> + <math> + <munder class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </munder> + </math> + </p> + <p> + <math> + <mover class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </mover> + </math> + </p> + <p> + <math> + <munderover class="testedElement embellished"> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + <mo lspace="100px" rspace="100px">X</mo> + </munderover> + </math> + </p> + <p> + <math> + <mroot class="testedElement"> + <mtext>X</mtext> + <mo lspace="100px" rspace="100px">X</mo> + </mroot> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/spacing.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/spacing.html new file mode 100644 index 0000000000..c066f72cde --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/spacing.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Spacing in mrows</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="help" href="https://w3c.github.io/mathml-core/#error-message-merror"> +<link rel="help" href="https://w3c.github.io/mathml-core/#making-sub-expressions-invisible-mphantom"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose"> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<meta name="assert" content="Spacing is added around operators inside mrow-like elements."> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + function runTests() + { + ["Mrow", "Sqrt", "Style", "Error", "Phantom", "Math", "Menclose", "Mpadded", "Unknown", "Mtd"].forEach((tag) => { + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + var mrow = document.getElementById(tag); + var mn1 = mrow.firstElementChild.getBoundingClientRect(); + var mn2 = mrow.lastElementChild.getBoundingClientRect(); + assert_greater_than_equal(mn2.left - mn1.right, 50); + }, `operator spacing inside ${tag}`); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math><mrow id="Mrow"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mrow></math> + <math><msqrt id="Sqrt"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></msqrt></math> + <math><mstyle id="Style"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mstyle></math> + <math><merror id="Error"><mn>1</mn><mo lspace="50px"></mo><mn>2</mn></merror></math> + <math><mphantom id="Phantom"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mphantom></math> + <math id="Math"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></math> + <!-- menclose is treated as <unknown> in MathML Core --> + <math><menclose id="Menclose" notation="box"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></menclose></math> + <math><mpadded id="Mpadded" lspace="10px"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mpadded></math> + <math><unknown id="Unknown"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></unknown></math> + <math><mtable><mtr><mtd id="Mtd"><mn>1</mn><mo lspace="50px">|</mo><mn>2</mn></mtd></mtr></mtable></math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mrow/stretch-along-block-axis-001.html b/testing/web-platform/tests/mathml/presentation-markup/mrow/stretch-along-block-axis-001.html new file mode 100644 index 0000000000..31385f5388 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/stretch-along-block-axis-001.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Stretching operators along the block axis</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#dfn-algorithm-for-stretching-operators-along-the-block-axis"> +<meta name="assert" content=""> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/fonts.js"></script> +<style> + math { + font: 25px/1 Ahem; + } + @font-face { + font-family: stretchy; + src: url("/fonts/math/stretchy.woff"); + } + mo { + font-family: stretchy; + } +</style> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + + var epsilon = 2; + var emToPx = 25; + var element; + + test(function() { + element = document.getElementById("horizontal_arrow"); + assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "horizontal characters don't stretch vertically"); + + element = document.getElementById("vertical_arrow"); + assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "vertical characters stretch vertically"); + }, `Taking into account stretch axis.`); + + test(function() { + element = document.getElementById("non_stretchy_horizontal_arrow"); + assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "horizontal characters don't stretch vertically"); + + element = document.getElementById("non_stretchy_vertical_arrow"); + assert_approx_equals(element.getBoundingClientRect().height, 1 * emToPx, epsilon, "vertical characters stretch vertically"); + }, `Taking into account stretchy property.`); + + test(function() { + // There are only stretchy operators : the maximum of their base sizes + // is used as the target size. + let tallest_base_size = 2 * emToPx; + + element = document.getElementById("small_vertical"); + assert_approx_equals(element.getBoundingClientRect().width, .5 * emToPx, epsilon, "small width"); + assert_approx_equals(element.getBoundingClientRect().height, tallest_base_size, epsilon, "height is the max(.5em, 1em, 2em)"); + + element = document.getElementById("medium_vertical"); + assert_approx_equals(element.getBoundingClientRect().width, 1 * emToPx, epsilon, "normal width"); + assert_approx_equals(element.getBoundingClientRect().height, tallest_base_size, epsilon, "height is the max(.5em, 1em, 2em)"); + + element = document.getElementById("big_vertical"); + assert_approx_equals(element.getBoundingClientRect().width, 2 * emToPx, epsilon, "large width"); + assert_approx_equals(element.getBoundingClientRect().height, tallest_base_size, epsilon, "height is the max(.5em, 1em, 2em)"); + + }, `Only operators with a stretchy property and block stretch axis.`); + + test(function() { + // There are non-stretchy operators : the maximum of their base sizes + // is used as the target size. In any case, operators remain at least + // as large as their base size. + + element = document.getElementById("smaller_op"); + assert_approx_equals(element.getBoundingClientRect().width, .5 * emToPx, epsilon, "small width"); + assert_approx_equals(element.getBoundingClientRect().height, 1.5 * emToPx, epsilon, "height is the max(.5em, 1em)"); + + element = document.getElementById("bigger_op"); + assert_approx_equals(element.getBoundingClientRect().width, 2 * emToPx, epsilon, "large width"); + assert_approx_equals(element.getBoundingClientRect().height, 2 * emToPx, epsilon, "height is the max(1em, 2em)"); + + }, `Operators smaller and larger than non-stretchy siblings.`); + + test(function() { + element = document.getElementById("core_operator_1"); + assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "mrow"); + + element = document.getElementById("core_operator_2"); + assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "munder"); + + element = document.getElementById("core_operator_3"); + assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "mover"); + + element = document.getElementById("core_operator_4"); + assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "mundeover"); + + element = document.getElementById("core_operator_5"); + assert_approx_equals(element.getBoundingClientRect().height, 6 * emToPx, epsilon, "complex nesting"); + }, `Embellished operators`); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow> + <mspace width="1em" height="3em" depth="3em" style="background: blue"/> + <mo id="horizontal_arrow" stretchy="true">⥚</mo> + <mo id="vertical_arrow" stretchy="true">⥜</mo> + <mo id="non_stretchy_horizontal_arrow" stretchy="false">⥚</mo> + <mo id="non_stretchy_vertical_arrow" stretchy="false">⥜</mo> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <!-- This contains only vertical stretchy operators. --> + <mo style="font-size: 50%" id="small_vertical" stretchy="true">⥜</mo> + <mo style="font-size: 200%" id="big_vertical" stretchy="true">⥜</mo> + <mo style="font-size: 100%" id="medium_vertical" stretchy="true">⥜</mo> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mspace style="background: blue" width="1em" height=".75em"/> + <mo style="font-size: 50%" id="smaller_op" stretchy="true">⥜</mo> + <mspace style="background: blue" width="1em" height="1.5em"/> + <mo style="font-size: 200%" id="bigger_op" stretchy="true">⥜</mo> + <mspace style="background: blue" width="1em" height="1em"/> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mspace width="1em" height="3em" depth="3em" style="background: blue"/> + <mrow><mo id="core_operator_1" stretchy="true">⥜</mo></mrow> + <munder> + <mo id="core_operator_2" stretchy="true">⥜</mo> + <mspace></mspace> + </munder> + <mover> + <mo id="core_operator_3" stretchy="true">⥜</mo> + <mspace></mspace> + </mover> + <munderover> + <mo id="core_operator_4" stretchy="true">⥜</mo> + <mspace></mspace> + </munderover> + <mrow> + <mspace></mspace> + <munderover> + <mover> + <munder> + <mrow> + <mo id="core_operator_5" stretchy="true">⥜</mo> + </mrow> + <mspace></mspace> + </munder> + <mspace></mspace> + </mover> + <mspace></mspace> + <mspace></mspace> + </munderover> + </mrow> + </mrow> + </math> + </p> +</body> +</html> |