summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/mathml/presentation-markup/mrow
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/mathml/presentation-markup/mrow')
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001-ref.html41
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/dynamic-mrow-like-001.html72
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-baseline.html57
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/inferred-mrow-stretchy.html64
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001-ref.html24
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mfenced-element-001.html34
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-001.html188
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002-ref.html44
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mrow-like-elements-002.html57
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/legacy-mstyle-attributes.html164
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/merror-001.html43
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-fallback.html125
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order-ref.html83
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order.html42
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-preferred-width.html121
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/no-spacing.html139
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/spacing.html54
-rw-r--r--testing/web-platform/tests/mathml/presentation-markup/mrow/stretch-along-block-axis-001.html176
18 files changed, 1528 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">&#x21A8;</mo><mspace width="1px" height="100px" style="background: blue"></mspace></mrow></math>
+ <math><msqrt><mo id="moSqrt">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></msqrt></math>
+ <math><mstyle><mo id="moStyle">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mstyle></math>
+ <math><merror><mo id="moError">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></merror></math>
+ <math><mphantom><mo style="visibilty: visible;" id="moPhantom">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mphantom></math>
+ <math><mo id="moMath">&#x21A8;</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">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></menclose></math>
+ <math><mpadded lspace="10px"><mo id="moMpadded">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mpadded></math>
+ <math><unknown><mo id="moUnknown">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></unknown></math>
+ <math><mtable><mtr><mtd><mo id="moMtd">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mtd></mtr></mtable></math>
+ <math><none><mo id="moNone">&#x21A8;</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></none></math>
+ <math><mprescripts><mo id="moMprescripts">&#x21A8;</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/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&#xA0;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&#xA0;XXÉX</mn>
+ <mrow style="background: lightyellow; margin-inline-start: -3em"><mn style="visibility: hidden">p&#xA0;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&#xA0;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&#xA0;XXÉX</mn>
+ <mn style="color: yellow; margin-inline-start: -3em">p&#xA0;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&#xA0;XXÉ</mn>
+ <mn style="color: red">X</mn>
+ <mn style="color: yellow; background: lightyellow; margin-inline-start: -3em">p&#xA0;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>