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/spaces | |
| 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/spaces')
16 files changed, 1692 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-children-ref.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-children-ref.html new file mode 100644 index 0000000000..ae74024c2f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-children-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>space (reference)</title> +</head> +<body> + <p>Test passes if you see a green square and no text.</p> + <math><mspace width="200px" height="200px" style="background: green"></mspace></math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-children.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-children.html new file mode 100644 index 0000000000..8520f83d24 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-children.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<head> +<meta charset="utf-8"> +<title>space</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<link rel="match" href="mspace-children-ref.html"/> +<meta name="assert" content="Verify mspace visual rendering of its children"> +</head> +<body> + <p>Test passes if you see a green square and no text.</p> + <math><mspace width="200px" height="200px" style="background: green">Text Node <mtext>x</mtext></mspace></math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-percentage-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-percentage-001-ref.html new file mode 100644 index 0000000000..da4f1dd397 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-percentage-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mspace percentages (reference)</title> + <style> + .red { + background: red; + } + </style> + </head> + <body> + <p>This test passes if there is a green square with no red.</p> + <math display="block" + style="width: 200px; height: 200px; background: green"> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-percentage-001.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-percentage-001.html new file mode 100644 index 0000000000..758429e1db --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-percentage-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mspace percentages</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> + <meta name="assert" content="Verify that percentage values for mspace do not use refer to the containing block"> + <link rel="match" href="mspace-percentage-001-ref.html"> + <style> + .red { + background: red; + } + </style> + </head> + <body> + <p>This test passes if there is a green square with no red.</p> + <math display="block" + style="width: 200px; height: 200px; background: green"> + <mspace width="5%" height="10px" class="red"></mspace> + <mspace width=" 5%" height="10px" class="red"></mspace> + <mspace width="5% " height="10px" class="red"></mspace> + <mspace width="10px" height="5%" class="red"></mspace> + <mspace width="10px" height=" 5%" class="red"></mspace> + <mspace width="10px" height="5% " class="red"></mspace> + <mspace width="10px" depth="5%" class="red"></mspace> + <mspace width="10px" depth=" 5%" class="red"></mspace> + <mspace width="10px" depth="5% " class="red"></mspace> + <mspace width="10px" height="5%" depth="5%" class="red"></mspace> + <mspace width="10px" height=" 5%" depth=" 5%" class="red"></mspace> + <mspace width="10px" height="5% " depth="5% " class="red"></mspace> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-width-height-001.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-width-height-001.html new file mode 100644 index 0000000000..52b3eaa190 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/mspace-width-height-001.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Space</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<meta name="assert" content="Verify mspace metrics for different values of height, depth and width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function getMetrics(aId) { + let baseline = document.getElementById("baseline").getBoundingClientRect(); + let mspace = document.getElementById(aId).getBoundingClientRect(); + return { + width: mspace.width, + height: mspace.height, + line_ascent: (baseline.top + baseline.bottom)/2 - mspace.top + }; + } + + function runTests() { + test(function() { + let metrics = getMetrics("widthAttributePlusWidthProperty"); + assert_approx_equals(metrics.width, 200, epsilon, + "mspace width overridden by inline style"); + assert_approx_equals(metrics.height, 200, epsilon, + "mspace height as specified by height attribute"); + assert_approx_equals(metrics.line_ascent, 200, epsilon, + "mspace line-ascent as specified by height attribute"); + }, "width attribute + width property"); + + test(function() { + let metrics = getMetrics("heightAndDepthAttributesPlusHeightProperty"); + assert_approx_equals(metrics.width, 200, epsilon, + "mspace width as specified by attribute"); + assert_approx_equals(metrics.height, 200, epsilon, + "mspace height overridden by inline style"); + assert_approx_equals(metrics.line_ascent, 100, epsilon, + "mspace line-ascent as specified by height attribute"); + }, "height/depth attributes + height property"); + + test(function() { + let metrics = getMetrics("heightAttributePlusHeightProperty"); + assert_approx_equals(metrics.width, 200, epsilon, + "mspace width as specified by attribute"); + assert_approx_equals(metrics.height, 200, epsilon, + "mspace height overridden by inline style"); + assert_approx_equals(metrics.line_ascent, 300, epsilon, + "mspace line-ascent as specified by height attribute"); + }, "height attribute + height property"); + + test(function() { + let metrics = getMetrics("depthAttributePlusHeightProperty"); + assert_approx_equals(metrics.width, 200, epsilon, + "mspace width as specified by attribute"); + assert_approx_equals(metrics.height, 200, epsilon, + "mspace height overridden by inline style"); + assert_approx_equals(metrics.line_ascent, 0, epsilon, + "mspace line-ascent defaults to 0"); + }, "depth attribute + height property"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + + <math> + <!-- Reference baseline --> + <mspace id="baseline" style="background: black" + width="10px" height="100px" depth="100px"/> + + <!-- width="500px" is a presentational hint + setting the element's width property to the corresponding value, + overridden by the inline style width: 200px. + height="200px" sets the height/line-ascent to 200px. --> + <mspace id="widthAttributePlusWidthProperty" + width="500px" height="200px" + style="width: 200px; background: green"/> + + <!-- height="100px" + depth="200px" are used as a presentational hint + setting the element's height property to calc(100px + 200px), + overridden by inline style height: 200px. + height="100px" sets the line-ascent to 100px. --> + <mspace id="heightAndDepthAttributesPlusHeightProperty" + width="200px" height="100px" depth="200px" + style="height: 200px; background: blue"/> + + <!-- height="300px" is used as a presentational hint + setting the element's height property to the corresponding value, + overridden by inline style height: 200px. + height="300px" sets the line-ascent to 300px. --> + <mspace id="heightAttributePlusHeightProperty" + width="200px" height="300px" + style="height: 200px; background: magenta"/> + + <!-- depth="300px" is used as a presentational hint + setting the element's height property to the corresponding value, + overridden by inline style height: 200px. + The line-ascent defaults to 0. --> + <mspace id="depthAttributePlusHeightProperty" + width="200px" depth="300px" + style="height: 200px; background: yellow"/> + </math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-1.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-1.html new file mode 100644 index 0000000000..4cb2a58a3c --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-1.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Space</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<meta name="assert" content="Verify mspace metrics for different values of height, depth and width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + var epsilon = 1; + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + box.center = (box.left + box.right) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + test(function() { + var empty = getBox("empty"); + assert_equals(empty.width, 0, "zero width"); + assert_approx_equals(getBox("baseline").bottom - empty.top, 0, epsilon, "zero depth"); + assert_approx_equals(empty.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth"); + }, "Empty mspace"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var space = getBox("width" + i); + assert_approx_equals(space.width, 25*(i+1), epsilon, "width " + i); + assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i); + assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); + } + }, "Different widths"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var space = getBox("height" + i); + assert_equals(space.width, 0, "width" + i); + assert_approx_equals(getBox("baseline").bottom - space.top, 25*(i+1), epsilon, "height" + i); + assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); + } + }, "Different heights"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var space = getBox("depth" + i); + assert_equals(space.width, 0, "width" + i); + assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i); + assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i); + } + }, "Different depths"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var space = getBox("mspace" + i); + assert_approx_equals(space.width, 25*(1+i%3), epsilon, "width" + i); + assert_approx_equals(getBox("baseline").bottom - space.top, 25*(1+(i+1)%3), epsilon, "height" + i); + assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i); + } + }, "Various combinations of height, depth and width."); + + test(function() { + var container = document.getElementById("containerForPreferredWidth"); + var mspace = container.getElementsByTagName("mspace")[0]; + var containerWidth = container.getBoundingClientRect().width; + var mspaceWidth = mspace.getBoundingClientRect().width; + assert_approx_equals(containerWidth, mspaceWidth, epsilon); + }, "Preferred width"); + + // Dynamically set attributes. + ["width", "height", "depth"].forEach(function (name, index) { + document.getElementById("dynamic-remove").removeAttribute(name); + let length = `${50 + index * 10}px`; + document.getElementById("dynamic-attach").setAttribute(name, length); + document.getElementById("dynamic-modify").setAttribute(name, length); + }); + let baseline = getBox("baseline2").bottom; + + test(function() { + let remove = getBox("dynamic-remove"); + assert_approx_equals(remove.width, 0, epsilon); + assert_approx_equals(remove.height, 0, epsilon); + assert_approx_equals(remove.top, baseline, epsilon); + }, "dynamic attributes (remove)"); + + test(function() { + let attach = getBox("dynamic-attach"); + assert_approx_equals(attach.width, 50, epsilon); + assert_approx_equals(attach.height, 60 + 70, epsilon); + assert_approx_equals(baseline - attach.top, 60, epsilon); + }, "dynamic attributes (attach)"); + + test(function() { + let modify = getBox("dynamic-modify"); + assert_approx_equals(modify.width, 50, epsilon); + assert_approx_equals(modify.height, 60 + 70, epsilon); + assert_approx_equals(baseline - modify.top, 60, epsilon); + }, "dynamic attributes (modify)"); + + done(); + } +</script> +<style> +div.shrink-wrap { + background: yellow; + display: inline-block; + margin-top: 5px; + padding-top: 5px; +} +</style> +</head> +<body> + <div id="log"></div> + <p> + <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> + <math> + <mspace id="empty"/> + <mspace id="width0" width="25px"/> + <mspace id="width1" width="50px"/> + <mspace id="width2" width="75px"/> + <mspace id="height0" height="25px"/> + <mspace id="height1" height="50px"/> + <mspace id="height2" height="75px"/> + <mspace id="depth0" depth="25px"/> + <mspace id="depth1" depth="50px"/> + <mspace id="depth2" depth="75px"/> + <mspace id="mspace0" width="25px" height="50px" depth="75px" style="background: green"/> + <mspace id="mspace1" width="50px" height="75px" depth="25px" style="background: blue"/> + <mspace id="mspace2" width="75px" height="25px" depth="50px" style="background: green"/> + </math> + </p> + <div> + <div id="containerForPreferredWidth" class="shrink-wrap"> + <math><mspace width="75px" height="25px" depth="50px" style="background: green"/></math> + </div> + </div> + <p> + <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> + <math> + <mspace id="dynamic-attach" style="background: lightgreen"/> + <mspace id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"/> + <mspace id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"/> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-2-ref.html new file mode 100644 index 0000000000..5a8b39e189 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-2-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>space (reference)</title> +</head> +<body> + <p>Test passes if you see a green square and no red.</p> + <div style="position: relative;"> + <div style="position: absolute; top: 0px; left: 0px; + background: green; width: 200px; height: 200px;"> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-2.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-2.html new file mode 100644 index 0000000000..640afb204f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>space</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<link rel="match" href="space-2-ref.html"/> +<meta name="assert" content="Verify mspace visual rendering for different values of height, depth and width"> +</head> +<body> + <p>Test passes if you see a green square and no red.</p> + <div style="position: relative;"> + <!-- Some green and red mspaces to draw a square --> + <div style="position: absolute; top: 0px; left: 0px; + width: 200px; height: 200px;"> + <math style="position: absolute; top: 0px; left: 0px"> + <mspace width="50px" height="100px" depth="100px" style="background: green"/> + <mspace width="50px" height="100px" depth="100px" style="background: green"/> + <mspace width="25px" depth="100px" style="background: green"/> + <mspace width="25px" depth="100px" style="background: green"/> + <mspace width="25px" height="100px" style="background: green"/> + <mspace width="25px" height="100px" style="background: green"/> + </math> + <math style="position: absolute; top: 0px; left: 0px"> + <mspace width="100px" height="20px" depth="20px" style="background: red"/> + <mspace width="50px" height="100px" style="background: red"/> + <mspace width="50px" depth="100px" style="background: red"/> + </math> + </div> + <!-- These green divs should cover the red mspace elements --> + <div style="position: absolute; top: 0px; left: 0px; + width: 200px; height: 200px;"> + <div style="position: absolute; top: 80px; left: 0px; + width: 100px; height: 40px; background: green"></div> + <div style="position: absolute; top: 0px; left: 100px; + width: 50px; height: 100px; background: green"></div> + <div style="position: absolute; top: 100px; left: 150px; + width: 50px; height: 100px; background: green"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-3-ref.html new file mode 100644 index 0000000000..135a1475e2 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-3-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + +<head> + <title>mspace</title> +</head> + +<body> + + <div style="position: absolute; + top: 0; left: 0; + width: 50px; height: 6em; + background: red;"></div> + + <div style="position: absolute; + top: 2em; left: 50px; + width: 40px; height: 3em; + background: green;"></div> + + <div style="position: absolute; + top: 1em; left: 90px; + width: 30px; height: 3em; + background: blue;"></div> + +</body> + +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-3.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-3.html new file mode 100644 index 0000000000..d4f79ed25a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-3.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + +<head> + <title>mspace</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> + <link rel="match" href="space-3-ref.html"/> + <meta name="assert" content="Verify mspace visual rendering for different values of height, depth and width"> +</head> + +<body> + + <math style="position: absolute; top: 0; left: 0; margin: 0; padding: 0;"> + <mspace width="50px" height="3em" depth="3em" mathbackground="red"/> + <mspace width="40px" height="1em" depth="2em" mathbackground="green"/> + <mspace width="30px" height="2em" depth="1em" mathbackground="blue"/> + </math> + +</body> + +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-001.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-001.html new file mode 100644 index 0000000000..60e81095ad --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-001.html @@ -0,0 +1,340 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Space-like elements</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> +<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/#layout-of-mrow"> +<meta name="assert" content="Verify definition of space-like elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<style> + /* Default spacing of operator 'X' is 0.2777777777777778em so quite different + from the measured/specified 0em and 1em. */ + math, math * { + font: 25px/1 Ahem; + } + mn { + color: black; + } + mo { + color: yellow; + } + .testedElement, .testedElement * { + color: blue !important; + background: blue !important; + } +</style> +<script> + function spaceBefore(id) { + var element = document.getElementById(id); + var mnBeforeParent = element.parentNode.previousElementSibling; + return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; + } + + function spaceAfter(id) { + var element = document.getElementById(id); + var mnAfterParent = element.parentNode.nextElementSibling; + return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + var epsilon = 1; + var emToPx = 25; + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mtext"), emToPx, epsilon); + assert_approx_equals(spaceAfter("mtext"), emToPx, epsilon); + }, "mtext is space-like"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mspace"), emToPx, epsilon); + assert_approx_equals(spaceAfter("mspace"), emToPx, epsilon); + }, "mspace is space-like"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mrow1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("mrow1"), emToPx, epsilon); + }, "space-like mrow"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mrow2"), 0, epsilon); + assert_approx_equals(spaceAfter("mrow2"), 2 * emToPx, epsilon); + }, "non-space-like mrow"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mstyle1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("mstyle1"), emToPx, epsilon); + }, "space-like mstyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mstyle2"), 0, epsilon); + assert_approx_equals(spaceAfter("mstyle2"), 2 * emToPx, epsilon); + }, "non-space-like mstyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mphantom1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("mphantom1"), emToPx, epsilon); + }, "space-like mphantom"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mphantom2"), 0, epsilon); + assert_approx_equals(spaceAfter("mphantom2"), 2 * emToPx, epsilon); + }, "non-space-like mphantom"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mpadded1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("mpadded1"), emToPx, epsilon); + }, "space-like mpadded"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("mpadded2"), 0, epsilon); + assert_approx_equals(spaceAfter("mpadded2"), 2 * emToPx, epsilon); + }, "non-space-like mpadded"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("merror1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("merror1"), emToPx, epsilon); + }, "space-like merror"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("merror2"), 0, epsilon); + assert_approx_equals(spaceAfter("merror2"), 2 * emToPx, epsilon); + }, "non-space-like merror"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("menclose1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("menclose1"), emToPx, epsilon); + }, "space-like menclose"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("menclose2"), 0, epsilon); + assert_approx_equals(spaceAfter("menclose2"), 2 * emToPx, epsilon); + }, "non-space-like menclose"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mtext is space-like. --> + <mtext class="testedElement" id="mtext">X</mtext> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mspace is space-like. --> + <mspace class="testedElement" id="mspace" width="25px" height="10px"></mspace> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mrow is space-like when it contains only space-like elements. --> + <mrow id="mrow1" class="testedElement"> + <mtext>X</mtext> + <mspace width="25px" height="10px"></mspace> + </mrow> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mrow is not space-like when it contains a non space-like element + such as "mn". --> + <mrow id="mrow2" class="testedElement"> + <mn>X</mn> + <mspace width="25px" height="10px"></mspace> + </mrow> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mstyle is space-like when it contains only space-like elements. --> + <mstyle id="mstyle1" class="testedElement"> + <mtext>X</mtext> + <mspace width="25px" height="10px"></mspace> + </mstyle> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mstyle is not space-like when it contains a non space-like element + such as "mn". --> + <mstyle id="mstyle2" class="testedElement"> + <mn>X</mn> + <mspace width="25px" height="10px"></mspace> + </mstyle> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mphantom is space-like when it contains only space-like elements. + --> + <mphantom id="mphantom1" class="testedElement"> + <mtext>X</mtext> + <mspace width="25px" height="10px"></mspace> + </mphantom> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mphantom is not space-like when it contains a non space-like + element such as "mn". --> + <mphantom id="mphantom2" class="testedElement"> + <mn>X</mn> + <mspace width="25px" height="10px"></mspace> + </mphantom> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mpadded is space-like when it contains only space-like elements. --> + <mpadded id="mpadded1" class="testedElement"> + <mtext>X</mtext> + <mspace width="25px" height="10px"></mspace> + </mpadded> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- mpadded is not space-like when it contains a non space-like element + such as "mn". --> + <mpadded id="mpadded2" class="testedElement"> + <mn>X</mn> + <mspace width="25px" height="10px"></mspace> + </mpadded> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- merror is space-like when it contains only space-like elements. --> + <merror id="merror1" class="testedElement"> + <mtext>X</mtext> + <mspace width="25px" height="10px"></mspace> + </merror> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- merror is not space-like when it contains a non space-like element + such as "mn". --> + <merror id="merror2" class="testedElement"> + <mn>X</mn> + <mspace width="25px" height="10px"></mspace> + </merror> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- menclose is space-like when it contains only space-like + elements. --> + <menclose id="menclose1" class="testedElement"> + <mtext>X</mtext> + <mspace width="25px" height="10px"></mspace> + </menclose> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- menclose is not space-like when it contains a non space-like + element such as "mn". --> + <menclose id="menclose2" class="testedElement"> + <mn>X</mn> + <mspace width="25px" height="10px"></mspace> + </menclose> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-002.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-002.html new file mode 100644 index 0000000000..fba92adf23 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-002.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Space-like elements</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> +<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/#layout-of-mrow"> +<meta name="assert" content="Verify definition of space-like elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<style> + /* Default spacing of operator 'X' is 0.2777777777777778em so quite different + from the measured/specified 0em and 1em. */ + math, math * { + font: 25px/1 Ahem; + } + mn { + color: black; + } + mo { + color: yellow; + } + .testedElement, .testedElement * { + color: blue !important; + background: blue !important; + } +</style> +<script> + function spaceBefore(id) { + var element = document.getElementById(id); + var mnBeforeParent = element.parentNode.previousElementSibling; + return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; + } + + function spaceAfter(id) { + var element = document.getElementById(id); + var mnAfterParent = element.parentNode.nextElementSibling; + return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + var epsilon = 1; + var emToPx = 25; + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("maction1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("maction1"), emToPx, epsilon); + }, "space-like maction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("maction2"), emToPx, epsilon); + assert_approx_equals(spaceAfter("maction2"), emToPx, epsilon); + }, "space-like maction (no first child)"); + + test(function() { + assert_approx_equals(spaceBefore("maction3"), 0, epsilon); + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceAfter("maction3"), 2 * emToPx, epsilon); + }, "non-space like maction (first child not space-like)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("semantics1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("semantics1"), emToPx, epsilon); + }, "space-like semantics"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("semantics2"), emToPx, epsilon); + assert_approx_equals(spaceAfter("semantics2"), emToPx, epsilon); + }, "space-like semantics (no first child)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("semantics3"), 0, epsilon); + assert_approx_equals(spaceAfter("semantics3"), 2 * emToPx, epsilon); + }, "non-space like semantics (first child not space-like)"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- maction is space-like when its first child exists and is space-like --> + <maction id="maction1" class="testedElement" actiontype="statusline"> + <mtext>X</mtext> + <mtext>STATUS MESSAGE</mtext> + </maction> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- maction is not space-like when its first does not exist-like --> + <maction id="maction2" class="testedElement" actiontype="statusline"> + </maction> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- maction is not space-like when its first is not space-like --> + <maction id="maction3" class="testedElement" actiontype="statusline"> + <mn>1</mn> + <mtext>STATUS MESSAGE</mtext> + </maction> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- semantics is space-like when its first child exists and is space-like --> + <semantics id="semantics1" class="testedElement" actiontype="statusline"> + <mtext>X</mtext> + <annotation>TEXT ANNOTATION</annotation> + </semantics> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- semantics is not space-like when its first does not exist-like --> + <semantics id="semantics2" class="testedElement" actiontype="statusline"> + </semantics> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- semantics is not space-like when its first is not space-like --> + <semantics id="semantics3" class="testedElement" actiontype="statusline"> + <mn>1</mn> + <annotation>TEXT ANNOTATION</annotation> + </semantics> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-003.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-003.html new file mode 100644 index 0000000000..5b693fb3c9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-003.html @@ -0,0 +1,252 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Non space-like elements</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> +<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/#layout-of-mrow"> +<meta name="assert" content="Verify definition of space-like elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<style> + /* Default spacing of operator 'X' is 0.2777777777777778em so quite different + from the measured/specified 0em and 1em. */ + math, math * { + font: 25px/1 Ahem; + } + mn { + color: black; + } + mo { + color: yellow; + } + .testedElement, .testedElement * { + color: blue !important; + background: blue !important; + } +</style> +<script> + function spaceBefore(element) { + var mnBeforeParent = element.parentNode.previousElementSibling; + return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; + } + + function spaceAfter(element) { + var mnAfterParent = element.parentNode.nextElementSibling; + return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + var epsilon = 1; + var emToPx = 25; + + Array.from(document.querySelectorAll(".testedElement")).forEach(el => { + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore(el), 0, epsilon); + assert_approx_equals(spaceAfter(el), 2 * emToPx, epsilon); + }, `${el.tagName} is not space-like`); + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mn>X</mn> + <mrow> + <mroot class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + </mroot> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mfrac class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mi class="testedElement">X</mi> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mmultiscripts class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mmultiscripts> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mn class="testedElement">X</mn> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mo class="testedElement" lspace="0" rspace="0">X</mo> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mover class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <munder class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <ms class="testedElement">X</ms> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <munderover class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <msup class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + </msup> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <msub class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + </msub> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <msubsup class="testedElement"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </msubsup> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <msqrt class="testedElement"> + <mtext>X</mtext> + </msqrt> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <mtable class="testedElement"> + <mtr> + <mtd> + <mtext>X</mtext> + </mtd> + </mtr> + </mtable> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-004.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-004.html new file mode 100644 index 0000000000..1e8cfaaaca --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-like-004.html @@ -0,0 +1,446 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Space-like elements</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> +<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/#layout-of-mrow"> +<meta name="assert" content="Verify definition of space-like elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/box-navigation.js"></script> +<style> + /* Default spacing of operator 'X' is 0.2777777777777778em so quite different + from the measured/specified 0em and 1em. */ + math, math * { + font: 25px/1 Ahem; + } + mn { + color: black; + } + mo { + color: yellow; + } + .testedElement, .testedElement * { + color: blue !important; + background: blue !important; + } + .oof1 { + position: absolute; + } + .oof2 { + position: fixed; + } + .nobox { + display: none; + } +</style> +<script> + function spaceBefore(id) { + var element = document.getElementById(id); + var mnBeforeParent = previousInFlowSibling(element.parentNode); + return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; + } + + function spaceAfter(id) { + var element = document.getElementById(id); + var mnAfterParent = nextInFlowSibling(element.parentNode); + return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + var epsilon = 1; + var emToPx = 25; + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("complex1"), emToPx, epsilon); + assert_approx_equals(spaceAfter("complex1"), emToPx, epsilon); + }, "complex space-like subtree"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("complex1-bis"), emToPx, epsilon); + assert_approx_equals(spaceAfter("complex1-bis"), emToPx, epsilon); + }, "complex space-like subtree, from in-flow children"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("complex2"), 0, epsilon); + assert_approx_equals(spaceAfter("complex2"), 2 * emToPx, epsilon); + }, "complex non-space-like subtree"); + + test(function() { + assert_true(MathMLFeatureDetection.has_operator_spacing()); + assert_approx_equals(spaceBefore("complex2-bis"), 0, epsilon); + assert_approx_equals(spaceAfter("complex2-bis"), 2 * emToPx, epsilon); + }, "complex non-space-like subtree, from in-flow children"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- This element is space-like because it is made of nested + mrow, mstyle, mpadded, mphantom, mtext, mspace + --> + <mrow class="testedElement" id="complex1"> + <mtext>X</mtext> + <mstyle> + <mstyle> + <mtext>X</mtext> + <mtext>X</mtext> + </mstyle> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mpadded> + <mtext>X</mtext> + <mrow></mrow> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mphantom> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mphantom> + <mrow> + <mtext>X</mtext> + <mtext>X</mtext> + </mrow> + <mspace width="25px"></mspace> + </mpadded> + <mspace width="25px"></mspace> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mpadded> + <mphantom> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mphantom> + <mtext>X</mtext> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mtext>X</mtext> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mphantom> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mphantom> + <mtext>X</mtext> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mpadded> + </mstyle> + <mspace width="25px"></mspace> + </mrow> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mn>X</mn> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mrow> + <!-- This element is space-like because it is made of nested + mrow, mstyle, mpadded, mphantom, mtext, mspace + --> + <mrow class="testedElement" id="complex1-bis"> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mrow></mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mo lspace="1em" rspace="0em">X</mo> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mn>X</mn> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </math> + </p> + <p> + <math> + <mn>X</mn> + <mrow> + <!-- This element is not space-like. It is made of nested + mrow, mstyle, mpadded, mphantom, mtext, mspace but contains + one non-space like descendant (an mn element). + --> + <mrow class="testedElement" id="complex2"> + <mtext>X</mtext> + <mstyle> + <mstyle> + <mtext>X</mtext> + <mtext>X</mtext> + </mstyle> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mpadded> + <mtext>X</mtext> + <mrow></mrow> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mphantom> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mphantom> + <mrow> + <mtext>X</mtext> + <mtext>X</mtext> + </mrow> + <mspace width="25px"></mspace> + </mpadded> + <mspace width="25px"></mspace> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mpadded> + <mphantom> + <mn>X</mn> <!-- mn is not space-like --> + <mspace width="25px"></mspace> + </mphantom> + <mtext>X</mtext> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mtext>X</mtext> + <mtext>X</mtext> + <mspace width="25px"></mspace> + <mphantom> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mphantom> + <mtext>X</mtext> + <mtext>X</mtext> + <mspace width="25px"></mspace> + </mpadded> + </mstyle> + <mspace width="25px"></mspace> + </mrow> + <mo lspace="1em" rspace="0em">X</mo> + </mrow> + <mn>X</mn> + </math> + </p> + <p> + <math> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mn>X</mn> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mrow> + <!-- This element is not space-like. It is made of nested + mrow, mstyle, mpadded, mphantom, mtext, mspace but contains + one non-space like descendant (an mn element). + --> + <mrow class="testedElement" id="complex2-bis"> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mrow></mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mn>X</mn> <!-- mn is not space-like --> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mphantom> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mtext>X</mtext> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mpadded> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mstyle> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mspace width="25px"></mspace> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mo lspace="1em" rspace="0em">X</mo> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </mrow> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + <mn>X</mn> + <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-vertical-align.tentative-ref.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-vertical-align.tentative-ref.html new file mode 100644 index 0000000000..ed30edde96 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-vertical-align.tentative-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>space and vertical-align (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="position: relative;"> + <div style="position: absolute; top: 0px; left: 0px; + background: green; width: 100px; height: 100px;"> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/spaces/space-vertical-align.tentative.html b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-vertical-align.tentative.html new file mode 100644 index 0000000000..359b12aa34 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/spaces/space-vertical-align.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>space and vertical-align</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<link rel="match" href="space-vertical-align.tentative-ref.html"/> +<meta name="assert" content="Verify that vertical-align property has no effect on mspace"> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="position: relative;"> + <div style="position: absolute; top: 0px; left: 0px; + width: 200px; height: 200px;"> + <math style="position: absolute; top: 0px; left: 0px"> + <mspace width="50px" height="100px" style="background: green;vertical-align:50px"/> + <mspace width="50px" height="100px" style="background: green;vertical-align:50%"/> + </math> + </div> + </div> +</body> +</html> |