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/scripts | |
| 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/scripts')
69 files changed, 6553 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/cramped-001.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/cramped-001.html new file mode 100644 index 0000000000..e03b4d968d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/cramped-001.html @@ -0,0 +1,627 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Cramped elements</title> +<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/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> +<link rel="help" href="https://w3c.github.io/mathml-core/#displaystyle-and-scriptlevel-in-scripts"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Verify default calculation of math-shift on MathML elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script src="/mathml/support/box-navigation.js"></script> +<style> + math { + font-family: superscriptshiftupcramped5000; + } + math, math * { + font-size: 10px; + background: lightyellow; + } + @font-face { + font-family: superscriptshiftupcramped5000; + src: url("/fonts/math/scripts-superscriptshiftupcramped5000.woff"); + } + .testedElement *:first-child { + background: lightblue; + } + .testedElement *:last-child { + background: pink; + } +</style> +<script> + function assert_cramped(id, expected, name) { + const emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + const superscriptshiftupcramped = 5000 * emToPx; + var container = document.getElementById(id); + var msup = container.getElementsByClassName("testedElement")[0]; + var base = firstInFlowChild(msup); + var script = nextInFlowSibling(base); + var shift = base.getBoundingClientRect().bottom - script.getBoundingClientRect().bottom; + if (expected) + assert_greater_than(shift, superscriptshiftupcramped / 2, `${name || id} should be cramped`); + else + assert_less_than(shift, superscriptshiftupcramped / 2, `${name || id} should not be cramped`); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("math-001", false); + assert_cramped("mrow-001", false, "mrow"); + }, "child of non-cramped element"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("mrow-002", true); + }, "child of cramped element"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("msqrt-001", true); + }, "child of msqrt"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("mroot-001", true); + }, "child of mroot"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("mfrac-001", false, "numerator"); + assert_cramped("mfrac-002", true, "denominator"); + }, "child of mfrac"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("msub-001", false, "base"); + assert_cramped("msub-002", true, "subscript"); + }, "child of msub"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("msup-001", false, "base"); + assert_cramped("msup-002", false, "superscript"); + }, "child of msup"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("msubsup-001", false, "base"); + assert_cramped("msubsup-002", true, "subscript"); + assert_cramped("msubsup-003", false, "superscript"); + }, "child of msubsup"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("munder-001", false, "base"); + assert_cramped("munder-002", false, "underscript"); + }, "child of munder"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("mover-001", false, "base"); + assert_cramped("mover-002", false, "overscript"); + }, "child of mover (non-accent overscript)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("munderover-001", false, "base"); + assert_cramped("munderover-002", false, "underscript"); + assert_cramped("munderover-003", false, "overscript"); + }, "child of munderover (non-accent overscript)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("mover-003", true, "base"); + assert_cramped("mover-004", false, "overscript"); + }, "accent child of mover (accent overscript)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("munderover-004", true, "base"); + assert_cramped("munderover-005", false, "underscript"); + assert_cramped("munderover-006", false, "overscript"); + }, "accent child of munderover (accent overscript)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("mmultiscripts-001", false, "base"); + assert_cramped("mmultiscripts-002", true, "post-subscript"); + assert_cramped("mmultiscripts-003", false, "post-superscript"); + assert_cramped("mmultiscripts-004", true, "pre-subscript"); + assert_cramped("mmultiscripts-005", false, "post-superscript"); + }, "mmultiscripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_cramped("css-001", false); + assert_cramped("css-002", true); + assert_cramped("css-003", true); + assert_cramped("css-004", false); + }, "element with specified CSS math-style"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math id="math-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </math> + <math> + <mrow id="mrow-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </mrow> + </math> + </p> + <p> + <math> + <msqrt> + <!-- This is a child of a msqrt so it is cramped. As a consequence, + all its descendants are cramped too. --> + <munderover> + <mover> + <munder> + <msubsup> + <msup> + <msub> + <mfrac> + <mrow id="mrow-002"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </mrow> + <mspace/> + </mfrac> + <mspace/> + </msub> + <mspace/> + </msup> + <mspace/> + <mspace/> + </msubsup> + <mspace/> + </munder> + <mspace/> + </mover> + <mspace/> + <mspace/> + </munderover> + </msqrt> + </math> + </p> + <p> + <math> + <msqrt id="msqrt-001"> + <mn>0</mn> + <mn>1</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>3</mn> + <mn>4</mn> + </msqrt> + </math> + </p> + <p> + <math> + <mroot id="mroot-001"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </mroot> + </math> + </p> + <p> + <math> + <mroot id="mroot-002"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </mroot> + </math> + </p> + <p> + <math> + <mfrac id="mfrac-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac id="mfrac-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </mfrac> + </math> + </p> + <p> + <math> + <msub id="msub-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </msub> + </math> + </p> + <p> + <math> + <msub id="msub-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </msub> + </math> + </p> + <p> + <math> + <msup id="msup-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </msup> + </math> + </p> + <p> + <math> + <msup id="msup-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </msup> + </math> + </p> + <p> + <math> + <msubsup id="msubsup-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + <mn>2</mn> + </msubsup> + </math> + </p> + <p> + <math> + <msubsup id="msubsup-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>2</mn> + </msubsup> + </math> + </p> + <p> + <math> + <msubsup id="msubsup-003"> + <mn>0</mn> + <mn>1</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </msubsup> + </math> + </p> + <p> + <math> + <munder id="munder-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </munder> + </math> + </p> + <p> + <math> + <munder id="munder-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </munder> + </math> + </p> + <p> + <math> + <mover id="mover-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </mover> + </math> + </p> + <p> + <math> + <mover id="mover-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </mover> + </math> + </p> + <p> + <math> + <mover accent="true" id="mover-003"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + </mover> + </math> + </p> + <p> + <math> + <mover accent="true" id="mover-004"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </mover> + </math> + </p> + <p> + <math> + <munderover id="munderover-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + </p> + <p> + <math> + <munderover id="munderover-002"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>2</mn> + </munderover> + </math> + </p> + <p> + <math> + <munderover id="munderover-003"> + <mn>0</mn> + <mn>1</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </munderover> + </math> + </p> + <p> + <math> + <munderover accent="true" id="munderover-004"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + </p> + <p> + <math> + <munderover accent="true" id="munderover-005"> + <mn>0</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>2</mn> + </munderover> + </math> + </p> + <p> + <math> + <munderover accent="true" id="munderover-006"> + <mn>0</mn> + <mn>1</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </munderover> + </math> + </p> + <p> + <math> + <mmultiscripts id="mmultiscripts-001"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mn>5</mn> + <mn>6</mn> + <mprescripts/> + <mn>7</mn> + <mn>8</mn> + <mn>9</mn> + <mn>10</mn> + <mn>11</mn> + <mn>12</mn> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts id="mmultiscripts-002"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>4</mn> + <mn>5</mn> + <mn>6</mn> + <mprescripts/> + <mn>7</mn> + <mn>8</mn> + <mn>9</mn> + <mn>10</mn> + <mn>11</mn> + <mn>12</mn> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts id="mmultiscripts-003"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>5</mn> + <mn>6</mn> + <mprescripts/> + <mn>7</mn> + <mn>8</mn> + <mn>9</mn> + <mn>10</mn> + <mn>11</mn> + <mn>12</mn> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts id="mmultiscripts-004"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mn>5</mn> + <mn>6</mn> + <mprescripts/> + <mn>7</mn> + <mn>8</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>10</mn> + <mn>11</mn> + <mn>12</mn> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts id="mmultiscripts-005"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mn>5</mn> + <mn>6</mn> + <mprescripts/> + <mn>7</mn> + <mn>8</mn> + <mn>9</mn> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + <mn>11</mn> + <mn>12</mn> + </mmultiscripts> + </math> + </p> + <p> + <math id="css-001" style="math-shift: normal"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </math> + <math id="css-002" style="math-shift: compact"> + <msup class="testedElement"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </math> + <math id="css-003" style="math-shift: normal"> + <msup class="testedElement" style="math-shift: compact"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </math> + <math id="css-004" style="math-shift: compact"> + <msup class="testedElement" style="math-shift: normal"> + <mspace height="2em" width="2em"/> + <mspace height="1em" width="1em"/> + </msup> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/empty-underover.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/empty-underover.html new file mode 100644 index 0000000000..b5fcc9c4ca --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/empty-underover.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test Script and Limit Schemata</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#script-and-limit-schemata"> +<meta name="assert" content="Script and Limit Schemata should not render anything when empty."> +<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> + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + ["over", "under", "underover", "sub", "sup", "subsup", "multiscripts"].forEach(function(name) { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(getBox(name).width, 0, epsilon, "width of empty " + name); + assert_approx_equals(getBox(name).height, 0, epsilon, "height of empty " + name); + }); + }, "Size of empty script elements"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <munderover id="underover"> + </munderover> + </math> + <math> + <munder id="under"> + </munder> + </math> + <math> + <mover id="over"> + </mover> + </math> + <math> + <msub id="sub"> + </msub> + </math> + <math> + <msup id="sup"> + </msup> + </math> + <math> + <msubsup id="subsup"> + </msubsup> + </math> + <math> + <mmultiscripts id="multiscripts"> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/mover-accent-dynamic-change-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/mover-accent-dynamic-change-ref.html new file mode 100644 index 0000000000..a4f16aa07f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/mover-accent-dynamic-change-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>MathML Reference</title> +<p>The 1's below should have the same size</p> +<math> + <mover accent="true"> + <mn>1</mn> + <mn>1</mn> + </mover> +</math> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/mover-accent-dynamic-change.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/mover-accent-dynamic-change.html new file mode 100644 index 0000000000..a744149e60 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/mover-accent-dynamic-change.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>MathML: Dynamically change accent on mover</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#displaystyle-and-scriptlevel-in-scripts"> +<link rel="match" href="mover-accent-dynamic-change-ref.html"> +<meta name="assert" content="Test that setting the accent attribute on mover takes effect"> +<p>The 1's below should have the same size</p> +<math> + <mover id="m"> + <mn>1</mn> + <mn>1</mn> + </mover> +</math> +<script> + document.body.offsetTop; + m.setAttribute("accent", "true"); +</script> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/mprescripts-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/mprescripts-001-ref.html new file mode 100644 index 0000000000..f8631539c0 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/mprescripts-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mprescripts should render as an mrow (reference)</title> + </head> + <body> + <math> + <mrow> + <mspace width="10px" height="20px" style="background: cyan;"></mspace> + <mspace width="30px" height="10px" depth="5px" style="background: blue;"></mspace> + <mspace width="20px" height="15px" depth="30px" style="background: lightblue;"></mspace> + <mspace width="25px" depth="20px" style="background: cyan;"></mspace> + <mspace width="40px" height="5px" depth="15px" style="background: blue;"></mspace> + <mspace width="20px" height="35px" depth="5px" style="background: lightblue;"></mspace> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/mprescripts-001.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/mprescripts-001.html new file mode 100644 index 0000000000..2435b6291d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/mprescripts-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mprescripts should render as an mrow</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> + <meta name="assert" content="Verify that mprescripts uses mrow layout"> + <link rel="match" href="mprescripts-001-ref.html"> + </head> + <body> + <math> + <mprescripts> + <mspace width="10px" height="20px" style="background: cyan;"></mspace> + <mspace width="30px" height="10px" depth="5px" style="background: blue;"></mspace> + <mspace width="20px" height="15px" depth="30px" style="background: lightblue;"></mspace> + <mspace width="25px" depth="20px" style="background: cyan;"></mspace> + <mspace width="40px" height="5px" depth="15px" style="background: blue;"></mspace> + <mspace width="20px" height="35px" depth="5px" style="background: lightblue;"></mspace> + </mprescripts> + </math> + <script src="/mathml/support/feature-detection.js"></script> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/none-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-001-ref.html new file mode 100644 index 0000000000..55add01415 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>none should render as an mrow (reference)</title> + </head> + <body> + <math> + <mrow> + <mspace width="10px" height="20px" style="background: cyan;"></mspace> + <mspace width="30px" height="10px" depth="5px" style="background: blue;"></mspace> + <mspace width="20px" height="15px" depth="30px" style="background: lightblue;"></mspace> + <mspace width="25px" depth="20px" style="background: cyan;"></mspace> + <mspace width="40px" height="5px" depth="15px" style="background: blue;"></mspace> + <mspace width="20px" height="35px" depth="5px" style="background: lightblue;"></mspace> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/none-001.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-001.html new file mode 100644 index 0000000000..f1bfb442f7 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>none should render as an mrow</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> + <meta name="assert" content="Verify that none uses mrow layout"> + <link rel="match" href="none-001-ref.html"> + </head> + <body> + <math> + <none> + <mspace width="10px" height="20px" style="background: cyan;"></mspace> + <mspace width="30px" height="10px" depth="5px" style="background: blue;"></mspace> + <mspace width="20px" height="15px" depth="30px" style="background: lightblue;"></mspace> + <mspace width="25px" depth="20px" style="background: cyan;"></mspace> + <mspace width="40px" height="5px" depth="15px" style="background: blue;"></mspace> + <mspace width="20px" height="35px" depth="5px" style="background: lightblue;"></mspace> + </none> + </math> + <script src="/mathml/support/feature-detection.js"></script> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/none-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-002-ref.html new file mode 100644 index 0000000000..dac4dab553 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-002-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>none used at other places than mmultiscripts' script (reference)</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math { font: 25px/1 Ahem; } + </style> + </head> + <body> + <p> + <math> + <msub> + <mrow></mrow> + <mn>2</mn> + </msub> + </math> + <math> + <msub> + <mn>1</mn> + <mrow></mrow> + </msub> + </math> + </p> + <p> + <math> + <msup> + <mrow></mrow> + <mn>2</mn> + </msup> + </math> + <math> + <msup> + <mn>1</mn> + <mrow></mrow> + </msup> + </math> + </p> + <p> + <math> + <msubsup> + <mrow></mrow> + <mn>2</mn> + <mn>3</mn> + </msubsup> + </math> + <math> + <msubsup> + <mn>1</mn> + <mrow></mrow> + <mn>3</mn> + </msubsup> + </math> + <math> + <msubsup> + <mn>1</mn> + <mn>2</mn> + <mrow></mrow> + </msubsup> + </math> + </p> + <p> + <math> + <mmultiscripts> + <mrow></mrow> + <mn>2</mn> + <mn>3</mn> + </mmultiscripts> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/none-002.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-002.html new file mode 100644 index 0000000000..d1f3a3a0e1 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/none-002.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>none used at other places than mmultiscripts' script</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> + <meta name="assert" content="none can be used at other places than mmultiscripts' script, without triggering 'invalid markup'"> + <link rel="match" href="none-002-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math { font: 25px/1 Ahem; } + </style> + </head> + <body> + <p> + <math> + <msub> + <none/> + <mn>2</mn> + </msub> + </math> + <math> + <msub> + <mn>1</mn> + <none/> + </msub> + </math> + </p> + <p> + <math> + <msup> + <none/> + <mn>2</mn> + </msup> + </math> + <math> + <msup> + <mn>1</mn> + <none/> + </msup> + </math> + </p> + <p> + <math> + <msubsup> + <none/> + <mn>2</mn> + <mn>3</mn> + </msubsup> + </math> + <math> + <msubsup> + <mn>1</mn> + <none/> + <mn>3</mn> + </msubsup> + </math> + <math> + <msubsup> + <mn>1</mn> + <mn>2</mn> + <none/> + </msubsup> + </math> + </p> + <p> + <math> + <mmultiscripts> + <none/> + <mn>2</mn> + <mn>3</mn> + </mmultiscripts> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1-ref.html new file mode 100644 index 0000000000..96cba038a4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + #container { + width: 800px; + height: 600px; + overflow: hidden; + background: lightblue; + } + </style> + </head> + <body> + <div id="container"> + <math display=block> + <mover> + <mo stretchy="true">→</mo> + <mn>BBBBBBBBB</mn> + </mover> + </math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1a.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1a.html new file mode 100644 index 0000000000..8a87c2387f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1a.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-mover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + #container { + width: 800px; + height: 600px; + overflow: hidden; + background: lightblue; + } + </style> + </head> + <body> + <div id="container"> + <math display=block> + <mrow> + <mspace width="10em"/> + <mrow> + <mover> + <mo stretchy="true">→</mo> + <mn>BBBBBBBBB</mn> + </mover> + </mrow> + <mspace width="10em"/> + </mrow> + </math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1b.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1b.html new file mode 100644 index 0000000000..da35123513 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-1b.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-mover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + #container { + width: 800px; + height: 600px; + overflow: hidden; + background: lightblue; + } + </style> + </head> + <body> + <div id="container"> + <math display=block> + <mrow> + <mspace depth="50em"/> + <mrow> + <mover> + <mo stretchy="true">→</mo> + <mn>BBBBBBBBB</mn> + </mover> + </mrow> + <mspace depth="50em"/> + </mrow> + </math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2-ref.html new file mode 100644 index 0000000000..e9b24785d3 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math display=block> + <mrow> + <mrow> + <mover> + <mo stretchy="false">↑</mo> + <mn>B</mn> + </mover> + </mrow> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2a.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2a.html new file mode 100644 index 0000000000..87738363cd --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-mover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math display=block> + <mrow> + <mspace width="10em"/> + <mrow> + <mover> + <mo stretchy="true">↑</mo> + <mn>B</mn> + </mover> + </mrow> + <mspace width="10em"/> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2b.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2b.html new file mode 100644 index 0000000000..6f44ffe17d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-2b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="mismatch" href="stretchy-mover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math display=block> + <mrow> + <mspace depth="5em"/> + <mrow> + <mover> + <mo stretchy="true">↑</mo> + <mn>B</mn> + </mover> + </mrow> + <mspace depth="5em"/> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-3-ref.html new file mode 100644 index 0000000000..10e0779b98 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-3-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mover> + <mo stretchy="false">‖</mo> + <mn>BBBBBBBBB</mn> + </mover> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-3.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-3.html new file mode 100644 index 0000000000..9becf31d14 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-mover-3.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy mover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-mover-3-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mover> + <mo stretchy="true">‖</mo> + <mn>BBBBBBBBB</mn> + </mover> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1-ref.html new file mode 100644 index 0000000000..7b6b6d72ad --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>Non-stretchy msup</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math > + <msup> + <mo stretchy="false">→</mo> + <mtext>AAAAAA</mtext> + </msup> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1a.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1a.html new file mode 100644 index 0000000000..1abf64aad6 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1a.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Non-stretchy msup</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-msup-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math > + <msup> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + </msup> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1b.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1b.html new file mode 100644 index 0000000000..c6e0a8aaab --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1b.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Non-stretchy msup</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-msup-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math > + <mrow> + <msup> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + </msup> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1c.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1c.html new file mode 100644 index 0000000000..056000566a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1c.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Non-stretchy msup</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-msup-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math > + <mrow> + <mrow> + <msup> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + </msup> + </mrow> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1d.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1d.html new file mode 100644 index 0000000000..a1ac5772f2 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-msup-1d.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>Non-stretchy msup</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-msup-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math > + <mrow> + <msup> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + </msup> + <mspace width="5em" /> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1-ref.html new file mode 100644 index 0000000000..587d37163d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> +</head> + <body> + <math > + <mrow> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1a.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1a.html new file mode 100644 index 0000000000..0dfd5ad40b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1a.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="mismatch" href="stretchy-munderover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <munderover> + <mo stretchy="false">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1b.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1b.html new file mode 100644 index 0000000000..f4a2c67c58 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1b.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <mrow> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1c.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1c.html new file mode 100644 index 0000000000..6430545794 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1c.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1d.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1d.html new file mode 100644 index 0000000000..d2345c5f14 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1d.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mspace width="5em" /> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1e.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1e.html new file mode 100644 index 0000000000..ba959a5879 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-1e.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-1-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <munderover> + <mo stretchy="true" lspace="0em" rspace="0em">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mn></mn> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2-ref.html new file mode 100644 index 0000000000..f43f659240 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math > + <mrow> + <msup> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mtext>CCCCCC</mtext> + </msup> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2a.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2a.html new file mode 100644 index 0000000000..54aea8d7c9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="mismatch" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <msup> + <munderover> + <mo stretchy="false">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mtext>CCCCCC</mtext> + </msup> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2b.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2b.html new file mode 100644 index 0000000000..6420f01dd7 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2b.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <mrow> + <msup> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mtext>CCCCCC</mtext> + </msup> + </mrow> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2c.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2c.html new file mode 100644 index 0000000000..3a77e78078 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2c.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <msup> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mtext>CCCCCC</mtext> + </msup> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2d.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2d.html new file mode 100644 index 0000000000..30a7ca2e72 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2d.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <msup> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mtext>CCCCCC</mtext> + </msup> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2e.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2e.html new file mode 100644 index 0000000000..199c101b6a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2e.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <msup> + <mrow> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + <mtext>CCCCCC</mtext> + </msup> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2f.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2f.html new file mode 100644 index 0000000000..5b736fda0a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2f.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <msup> + <mrow> + <mrow> + <munderover> + <mo stretchy="true">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + </mrow> + <mtext>CCCCCC</mtext> + </msup> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2g.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2g.html new file mode 100644 index 0000000000..11cca42de1 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-2g.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <msup> + <munderover> + <mo stretchy="true" lspace="0em" rspace="0em">→</mo> + <mtext>AAAAAA</mtext> + <mtext>BBBBBB</mtext> + </munderover> + <mtext>CCCCCC</mtext> + </msup> + <mn></mn> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3-ref.html new file mode 100644 index 0000000000..67b3492ec8 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <munderover> + <mtext>AAAAAA</mtext> + <mo stretchy="true">→</mo> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3a.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3a.html new file mode 100644 index 0000000000..dd41c82def --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3a.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="mismatch" href="stretchy-munderover-3-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <munderover> + <mtext>AAAAAA</mtext> + <mo stretchy="false">→</mo> + <mtext>BBBBBB</mtext> + </munderover> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3b.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3b.html new file mode 100644 index 0000000000..b4619bfef9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3b.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-3-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <munderover> + <mtext>AAAAAA</mtext> + <mo stretchy="true">→</mo> + <mtext>BBBBBB</mtext> + </munderover> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3c.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3c.html new file mode 100644 index 0000000000..004349f831 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3c.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="stretchy-munderover-3-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <mrow> + <munderover> + <mtext>AAAAAA</mtext> + <mo stretchy="true">→</mo> + <mtext>BBBBBB</mtext> + </munderover> + <mspace width="5em" /> + </mrow> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3d.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3d.html new file mode 100644 index 0000000000..e5cf01f23e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/stretchy-munderover-3d.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Stretchy munderover</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="mismatch" href="stretchy-munderover-3-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687807"/> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + math { + font: 25px/1 Ahem; + } + mo { + font-family: operators; + } + </style> + </head> + <body> + <math> + <munderover> + <mtext>AAAAAA</mtext> + <mo stretchy="false">→</mo> + <mtext>BBBBBB</mtext> + </munderover> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/sub-vs-sup-mozilla-345563-ref.xhtml b/testing/web-platform/tests/mathml/presentation-markup/scripts/sub-vs-sup-mozilla-345563-ref.xhtml new file mode 100644 index 0000000000..dc57aa3506 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/sub-vs-sup-mozilla-345563-ref.xhtml @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd" > + +<html xmlns="http://www.w3.org/1999/xhtml"> + +<head> + +</head> + +<body> + +<p> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <msup> + <mi>x</mi> + <mn>2</mn> + </msup> + </math> +</p> + +</body> + +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/sub-vs-sup-mozilla-345563.xhtml b/testing/web-platform/tests/mathml/presentation-markup/scripts/sub-vs-sup-mozilla-345563.xhtml new file mode 100644 index 0000000000..5c8d78952f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/sub-vs-sup-mozilla-345563.xhtml @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd" > + +<html xmlns="http://www.w3.org/1999/xhtml"> + +<head> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"/> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=345563"/> +<link rel="mismatch" href="sub-vs-sup-mozilla-345563-ref.xhtml"/> +<meta name="assert" content="Subscript should not render the same as superscript."/> +</head> + +<body> + +<p> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <msub> + <mi>x</mi> + <mn>2</mn> + </msub> + </math> +</p> + +</body> + +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-1.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-1.html new file mode 100644 index 0000000000..1117e1008e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-1.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts metrics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Basic metrics for elements msub, msup and msubsup."> +<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> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math, mspace { + font: 25px/1 Ahem; + } +</style> +<script> + /* This test does not use a font with a MATH table and does not verify layout + rules in a very strict way. */ + + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + assert_less_than_equal(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base"); + assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base"); + assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base"); + assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base"); + + e = 3; + assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: space between base and subscript is small"); + assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base"); + assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base"); + assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base"); + assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base"); + }, "Respective horizontal positions"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom, e, "msub: base is placed on the baseline"); + assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom, e, "msup: base is placed on the baseline"); + assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bottom, e, "msubsup: base is placed on the baseline"); + }, "Alignment of the base on the baseline"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + assert_greater_than(getBox("msubSub").middle, getBox("msubBase").middle, "msub: script is placed at the bottom of the base"); + assert_less_than(getBox("msupSup").middle, getBox("msupBase").middle, "msup: script is placed at the top of the base"); + assert_greater_than(getBox("msubsupSub").middle, getBox("msubsupBase").middle, "msubsup: script is placed at the bottom of the base"); + assert_less_than(getBox("msubsupSup").middle, getBox("msubsupBase").middle, "msubsup: script is placed at the top of the base"); + }, "Vertical position of scripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 5; + assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBox("msubBase").left, e, "msub: width is determined by the left/right sides of base/script (+ some space after script)"); + assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBox("msupBase").left, e, "msup: width is determined by the left/right sides of base/script (+ some space after script)"); + assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub").right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "msubsup: width is determined by the left/right sides of base/scripts (+ some space after script)"); + }, "Width of scripted elements"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height, e, "msub: height is at least the one of the base"); + assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "msup: height is at least the one of the base"); + assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "msubsup: height is at least the one of the base"); + + assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub: height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup: height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup: height is determined by the top/bottom sides of base/scripts"); + }, "Height of scripted elements"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> + <msub id="msub" style="background: green"> + <mspace id="msubBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msubSub" width="10px" height="5px" depth="5px" style="background: black"/> + </msub> + <msup id="msup" style="background: blue"> + <mspace id="msupBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msupSup" width="10px" height="5px" depth="5px" style="background: black"/> + </msup> + <msubsup id="msubsup" style="background: green"> + <mspace id="msubsupBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msubsupSub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="msubsupSup" width="10px" height="5px" depth="5px" style="background: black"/> + </msubsup> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-2.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-2.html new file mode 100644 index 0000000000..9c89dd3727 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-2.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts metrics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Basic metrics for the mmultiscript element."> +<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> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math, mspace { + font: 25px/1 Ahem; + } +</style> +<script> + /* This test does not use a font with a MATH table and does not verify layout + rules in a very strict way. */ + + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + assert_less_than_equal(getBox("msubBase").right, getBox("msubSub").left, e, "subscript is after base"); + assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e, "superscript is after base"); + assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "subscript is after base"); + assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "superscript is after base"); + + assert_greater_than_equal(getBox("premsubBase").right, getBox("premsubSub").left, e, "subscript is before base"); + assert_greater_than_equal(getBox("premsupBase").right, getBox("premsupSup").left, e, "superscript is before base"); + assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubsupSub").left, e, "subscript is before base"); + assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubsupSup").left, e, "superscript is before base"); + + e = 3; + assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: space between base and subscript is small"); + assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base"); + assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base"); + assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base"); + assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base"); + + assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").right, e, "msub: space between base and subscript is small"); + assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").right, e, "msub: subscript is after base"); + assert_approx_equals(getBox("premsupBase").left, getBox("premsupSup").right, e, "msup: superscript is after base"); + assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSub").right, e, "msubsup: subscript is after base"); + assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSup").right, e, "msubsup: superscript is after base"); + }, "Respective horizontal positions"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline"); + assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline"); + assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline"); + assert_approx_equals(getBox("premsubBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline"); + assert_approx_equals(getBox("premsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline"); + assert_approx_equals(getBox("premsubsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline"); + }, "Alignment of the base on the baseline"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + assert_greater_than(getBox("msubSub").middle, getBox("msubBase").middle, "script is placed at the bottom of the base"); + assert_less_than(getBox("msupSup").middle, getBox("msupBase").middle, "script is placed at the top of the base"); + assert_greater_than(getBox("msubsupSub").middle, getBox("msubsupBase").middle, "script is placed at the bottom of the base"); + assert_less_than(getBox("msubsupSup").middle, getBox("msubsupBase").middle, "script is placed at the top of the base"); + + assert_greater_than(getBox("premsubSub").middle, getBox("premsubBase").middle, "script is placed at the bottom of the base"); + assert_less_than(getBox("premsupSup").middle, getBox("premsupBase").middle, "script is placed at the top of the base"); + assert_greater_than(getBox("premsubsupSub").middle, getBox("premsubsupBase").middle, "script is placed at the bottom of the base"); + assert_less_than(getBox("premsubsupSup").middle, getBox("premsubsupBase").middle, "script is placed at the top of the base"); + }, "Vertical position of scripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 3; + assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBox("msubBase").left, e, "width is determined by the left/right sides of base/script (+ some space after script)"); + assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBox("msupBase").left, e, "width is determined by the left/right sides of base/script (+ some space after script)"); + assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub").right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "width is determined by the left/right sides of base/scripts (+ some space after script)"); + + assert_approx_equals(getBox("premsub").width, getBox("premsubBase").right - getBox("premsubSub").left, e, "width is determined by the right/left sides of base/script (+ some space after script)"); + assert_approx_equals(getBox("premsup").width, getBox("premsupBase").right - getBox("premsupSup").left, e, "width is determined by the right/left sides of base/script (+ some space after script)"); + assert_approx_equals(getBox("premsubsup").width, getBox("premsubsupBase").right - Math.min(getBox("premsubsupSub").left, getBox("premsubsupSup").left), e, "width is determined by the right/left sides of base/scripts (+ some space after script)"); + }, "Width of scripted elements"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 5; + assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height, e, "height is at least the one of the base"); + assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "height is at least the one of the base"); + assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "height is at least the one of the base"); + assert_greater_than_equal(getBox("premsub").height, getBox("premsubBase").height, e, "height is at least the one of the base"); + assert_greater_than_equal(getBox("premsup").height, getBox("premsupBase").height, e, "height is at least the one of the base"); + assert_greater_than_equal(getBox("premsubsup").height, getBox("premsubsupBase").height, e, "height is at least the one of the base"); + + assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("premsub").height, Math.max(getBox("premsubSub").bottom, getBox("premsubBase").bottom) - getBox("premsubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("premsup").height, getBox("premsupBase").bottom - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts"); + assert_approx_equals(getBox("premsubsup").height, Math.max(getBox("premsubSub").bottom, getBox("premsubBase").bottom) - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts"); + }, "Height of scripted elements"); + + test(function() { + ["none", "mprescripts"].forEach(function(name) { + var elements = document.getElementsByTagName(name); + for (var i = 0; i < elements.length; i++) { + var box = elements[i].getBoundingClientRect(); + assert_equals(box.height * box.width, 0, "<" + name + "> " + i + " has zero is empty"); + } + }); + }, "Size of empty elements"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> + <mmultiscripts id="msub" style="background: green"> + <mspace id="msubBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msubSub" width="10px" height="5px" depth="5px" style="background: black"/> + <none/> + </mmultiscripts> + <mmultiscripts id="msup" style="background: green"> + <mspace id="msupBase" width="30px" height="15px" depth="15px" style="background: black"/> + <none/> + <mspace id="msupSup" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="msubsup" style="background: green"> + <mspace id="msubsupBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msubsupSub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="msubsupSup" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="premsub" style="background: green"> + <mspace id="premsubBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + <mspace id="premsubSub" width="10px" height="5px" depth="5px" style="background: black"/> + <none/> + </mmultiscripts> + <mmultiscripts id="premsup" style="background: green"> + <mspace id="premsupBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + <none/> + <mspace id="premsupSup" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="premsubsup" style="background: green"> + <mspace id="premsubsupBase" width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + <mspace id="premsubsupSub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="premsubsupSup" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-3.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-3.html new file mode 100644 index 0000000000..28db9b70cc --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-3.html @@ -0,0 +1,192 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts metrics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Basic metrics for the mmultiscript element with many scripts."> +<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> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math, mspace { + font: 25px/1 Ahem; + } +</style> +<script> + /* This test does not use a font with a MATH table and does not verify layout + rules in a very strict way. */ + + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + for (var i = 0; i < 5; i++) + assert_approx_equals(getBox("multi" + i + "base").middle, getBox("baseline").bottom, e, "base " + i + "is placed on the baseline"); + }, "Alignment of the base on the baseline"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 5; + assert_approx_equals(getBox("multi0").width, 30, e, "width of multi0"); + assert_approx_equals(getBox("multi0").height, 30, e, "height of multi0"); + assert_approx_equals(getBox("multi1").width, 30, e, "width of multi1"); + assert_approx_equals(getBox("multi1").height, 30, e, "height of multi1"); + for (i = 2; i <= 4; i++) { + var scriptedBox = getBox("multi" + i); + var lastPostScript = getBox("multi" + i + "postsup" + (i - 1)); + var firstPreScript = getBox("multi" + i + "presub1"); + assert_approx_equals(scriptedBox.height, firstPreScript.bottom - lastPostScript.top, e, "height of multiscript" + i); + assert_approx_equals(scriptedBox.width, lastPostScript.right - firstPreScript.left, e, "width of multiscript" + i); + } + }, "Dimensions of the scripted elements"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 3; + for (var i = 2; i <= 4; i++) { + var base = getBox("multi" + i + "base"); + for (var j = 1; j < i; j++) { + var presup = getBox("multi" + i + "presup" + j); + var postsup = getBox("multi" + i + "postsup" + j); + var presub = getBox("multi" + i + "presub" + j); + var postsub = getBox("multi" + i + "postsub" + j); + assert_approx_equals(base.top, presup.middle, e, "multi" + i + " " + j + " presup script"); + assert_approx_equals(base.top, postsup.middle, e, "multi" + i + " " + j + " postsup script"); + assert_approx_equals(base.bottom, presub.middle, e, "multi" + i + " " + j + " presub script"); + assert_approx_equals(base.bottom, postsub.middle, e, "multi" + i + " " + j + " postsub script"); + } + } + }, "Vertical positions of scripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + for (var i = 2; i <= 4; i++) { + var base = getBox("multi" + i + "base"); + for (var j = 1; j < i; j++) { + var presup = getBox("multi" + i + "presup" + j); + var postsup = getBox("multi" + i + "postsup" + j); + var presub = getBox("multi" + i + "presub" + j); + var postsub = getBox("multi" + i + "postsub" + j); + assert_approx_equals(presup.right, presub.right, e, "multi" + i + "pre"); + assert_approx_equals(postsup.left, postsub.left, e, "multi" + i + "post"); + } + } + }, "Horizontal alignment of scripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 2; i <= 4; i++) { + var base = getBox("multi" + i + "base"); + var firstPostScript = getBox("multi" + i + "postsub1"); + var lastPreScript = getBox("multi" + i + "presup" + (i - 1)); + assert_less_than_equal(base.right, firstPostScript.left, 1, "postcripts are after base"); + assert_less_than_equal(lastPreScript.right, base.left, 1, "prescripts are before base"); + assert_approx_equals(base.right, firstPostScript.left, 5, "spacing after base is not too large"); + assert_approx_equals(lastPreScript.right, base.left, 5, "spacing before base is not too large"); + for (var j = 1; j < i - 1; j++) { + var post = getBox("multi" + i + "postsub" + j); + var postNext = getBox("multi" + i + "postsub" + (j + 1)); + var pre = getBox("multi" + i + "presup" + j); + var preNext = getBox("multi" + i + "presup" + (j + 1)); + assert_less_than_equal(post.right, postNext.left, 1, "multi" + i + "order post" + j + " is before its successor"); + assert_less_than_equal(pre.right, preNext.left, 1, "multi" + i + "order pre" + j + " is before its successor"); + assert_approx_equals(post.right, postNext.left, 5, "multi" + i + "space after post" + j + " is not too large"); + assert_approx_equals(pre.right, preNext.left, 5, "multi" + i + "space after pre" + j + " is not too large"); + } + } + }, "Horizontal positions of scripts"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> + <mmultiscripts id="multi0" style="background: green"> + <mspace id="multi0base" width="30px" height="15px" depth="15px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="multi1" style="background: green"> + <mspace id="multi1base" width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + </mmultiscripts> + <mmultiscripts id="multi2" style="background: green"> + <mspace id="multi2base" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="multi2postsub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi2postsup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi2presub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi2presup1" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="multi3" style="background: green"> + <mspace id="multi3base" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="multi3postsub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi3postsup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi3postsub2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi3postsup2" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi3presub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi3presup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi3presub2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi3presup2" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="multi4" style="background: green"> + <mspace id="multi4base" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="multi4postsub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4postsup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4postsub2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4postsup2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4postsub3" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4postsup3" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi4presub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4presup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4presub2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4presup2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4presub3" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi4presup3" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <mmultiscripts id="multi5" style="background: green"> + <mspace id="multi5base" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="multi5postsub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsub2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsup2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsub3" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsup3" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsub4" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5postsup4" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi5presub1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presup1" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presub2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presup2" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presub3" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presup3" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presub4" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi5presup4" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-4.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-4.html new file mode 100644 index 0000000000..cdf6cbe20e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-4.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts metrics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Verify metrics of scripted elements for bases of different heights."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<style> + math, mspace { + font-size: 10px; + } +</style> +<script> + /* This test does not use any specific fonts and so the exact rules are not + specified precisely. We assume reasonable values for script shifts and + spacing. */ + + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + var sizeArray = [50, 75, 100]; + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + sizeArray.forEach(function(size) { + assert_approx_equals(getBox("msub" + size + "base").middle, getBox("baseline").bottom, e, "msub base " + size + "is placed on the baseline"); + assert_approx_equals(getBox("msup" + size + "base").middle, getBox("baseline").bottom, e, "msup base " + size + "is placed on the baseline"); + assert_approx_equals(getBox("msubsup" + size + "base").middle, getBox("baseline").bottom, e, "msubsup base " + size + "is placed on the baseline"); + assert_approx_equals(getBox("multi" + size + "base").middle, getBox("baseline").bottom, e, "mmultiscripts base " + size + "is placed on the baseline"); + }); + }, "Alignment on the baseline for bases of different heights"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 5; + sizeArray.forEach(function(size) { + assert_approx_equals(getBox("msub" + size + "sub").middle, getBox("msub" + size + "base").bottom, e, "msub script " + size + "is placed at the top of of the base"); + }); + }, "Vertical position of the scripts for bases of different heights"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> + <msub id="msub50"> + <mspace id="msub50base" width="30px" height="50px" depth="50px" style="background: black"/> + <mspace id="msub50sub" width="10px" height="5px" depth="5px" style="background: black"/> + </msub> + <msup id="msup50"> + <mspace id="msup50base" width="30px" height="50px" depth="50px" style="background: black"/> + <mspace id="msup50sup" width="10px" height="5px" depth="5px" style="background: black"/> + </msup> + <msubsup id="msubsup50"> + <mspace id="msubsup50base" width="30px" height="50px" depth="50px" style="background: black"/> + <mspace id="msubsup50sub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="msubsup50sup" width="10px" height="5px" depth="5px" style="background: black"/> + </msubsup> + <mmultiscripts id="multi50"> + <mspace id="multi50base" width="30px" height="50px" depth="50px" style="background: black"/> + <mspace id="multi50postsub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi50postsup" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi50presub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi50presup" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <msub id="msub75"> + <mspace id="msub75base" width="30px" height="75px" depth="75px" style="background: black"/> + <mspace id="msub75sub" width="10px" height="5px" depth="5px" style="background: black"/> + </msub> + <msup id="msup75"> + <mspace id="msup75base" width="30px" height="75px" depth="75px" style="background: black"/> + <mspace id="msup75sup" width="10px" height="5px" depth="5px" style="background: black"/> + </msup> + <msubsup id="msubsup75"> + <mspace id="msubsup75base" width="30px" height="75px" depth="75px" style="background: black"/> + <mspace id="msubsup75sub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="msubsup75sup" width="10px" height="5px" depth="5px" style="background: black"/> + </msubsup> + <mmultiscripts id="multi75"> + <mspace id="multi75base" width="30px" height="75px" depth="75px" style="background: black"/> + <mspace id="multi75postsub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi75postsup" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi75presub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi75presub" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + <msub id="msub100"> + <mspace id="msub100base" width="30px" height="100px" depth="100px" style="background: black"/> + <mspace id="msub100sub" width="10px" height="5px" depth="5px" style="background: black"/> + </msub> + <msup id="msup100"> + <mspace id="msup100base" width="30px" height="100px" depth="100px" style="background: black"/> + <mspace id="msup100sup" width="10px" height="5px" depth="5px" style="background: black"/> + </msup> + <msubsup id="msubsup100"> + <mspace id="msubsup100base" width="30px" height="100px" depth="100px" style="background: black"/> + <mspace id="msubsup100sub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="msubsup100sup" width="10px" height="5px" depth="5px" style="background: black"/> + </msubsup> + <mmultiscripts id="multi100"> + <mspace id="multi100base" width="30px" height="100px" depth="100px" style="background: black"/> + <mspace id="multi100postsub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi100postsup" width="10px" height="5px" depth="5px" style="background: black"/> + <mprescripts/> + <mspace id="multi100presub" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="multi100presup" width="10px" height="5px" depth="5px" style="background: black"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-5.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-5.html new file mode 100644 index 0000000000..1743c2e499 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-5.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts metrics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Verify metrics of scripted elements with tall scripts."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<style> + math, mspace { + font-size: 10px; + } +</style> +<script> + /* This test does not use any specific fonts and so the exact rules are not + specified precisely. We assume reasonable values for script shifts and + spacing. */ + + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + var sizeArray = [50, 75, 100]; + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + assert_approx_equals(getBox("msubbase").middle, getBox("baseline").bottom, e, "msub base is placed on the baseline"); + assert_approx_equals(getBox("msupbase").middle, getBox("baseline").bottom, e, "msup base is placed on the baseline"); + assert_approx_equals(getBox("msubsupbase").middle, getBox("baseline").bottom, e, "msubsup base is placed on the baseline"); + assert_approx_equals(getBox("multibase").middle, getBox("baseline").bottom, e, "mmultiscripts baseis placed on the baseline"); + }, "Alignment on the baseline with different and large script heights"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + assert_greater_than(getBox("msubsub").top, getBox("msubbase").top, "msub: subscript is below the top of the base"); + assert_less_than(getBox("msupsup").bottom, getBox("msupbase").bottom, "msup: supscript is above the bottom of the base"); + assert_greater_than(getBox("msubsupsub").top, getBox("msubsupbase").top, "msubsup: subscript is below the top of the base"); + assert_less_than(getBox("msubsupsup").bottom, getBox("msubsupbase").bottom, "msubsup: supscript is above the bottom of the base"); + assert_greater_than(getBox("multipostsub").top, getBox("multibase").top, "mmultiscripts: postsubscript is below the top of the base"); + assert_less_than(getBox("multipostsup").bottom, getBox("multibase").bottom, "mmultiscripts: postsupscript is above the bottom of the base"); + assert_greater_than(getBox("multipresub").top, getBox("multibase").top, "mmultiscripts: presubscript is below the top of the base"); + assert_less_than(getBox("multipresup").bottom, getBox("multibase").bottom, "mmultiscripts: presupscript is above the bottom of the base"); + }, "Tall subscripts/superscripts are not placed too high/low"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + assert_greater_than(getBox("msubsupsub").top, getBox("msubsupsup").bottom, "msubsup: subscript is below the superscript"); + assert_greater_than(getBox("multipresub").top, getBox("multipresup").bottom, "mmultiscripts: presubscript is below the presuperscript"); + assert_greater_than(getBox("multipostsub").top, getBox("multipostsup").bottom, "mmultiscripts: postsubscript is below the postsuperscript"); + }, "No collisions for tall subscripts and superscripts"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> + <msub id="msub"> + <mspace id="msubbase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msubsub" width="10px" height="50px" depth="50px" style="background: black"/> + </msub> + <msup id="msup"> + <mspace id="msupbase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msupsup" width="10px" height="75px" depth="75px" style="background: black"/> + </msup> + <msubsup id="msubsup"> + <mspace id="msubsupbase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="msubsupsub" width="10px" height="50px" depth="50px" style="background: black"/> + <mspace id="msubsupsup" width="10px" height="75px" depth="75px" style="background: black"/> + </msubsup> + <mmultiscripts id="multi"> + <mspace id="multibase" width="30px" height="15px" depth="15px" style="background: black"/> + <mspace id="multipostsub" width="10px" height="50px" depth="50px" style="background: black"/> + <mspace id="multipostsup" width="10px" height="75px" depth="75px" style="background: black"/> + <mprescripts/> + <mspace id="multipresub" width="10px" height="50px" depth="50px" style="background: black"/> + <mspace id="multipresup" width="10px" height="75px" depth="75px" style="background: black"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-6.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-6.html new file mode 100644 index 0000000000..9666c80f9f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-6.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mprescripts</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Position and size of mprescripts in mmultiscript element."> +<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> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math, mspace { + font: 25px/1 Ahem; + } +</style> +<script> + /* This test does not use a font with a MATH table and does not verify layout + rules in a very strict way. */ + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + Array.from(document.getElementsByTagName("mprescripts")). + forEach(prescript => { + let prescript_box = prescript.getBoundingClientRect(); + let mmultiscripts = prescript.parentNode; + let name = mmultiscripts.getAttribute("data-name"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var e = 1; + let base_box = mmultiscripts.firstElementChild.getBoundingClientRect(); + assert_approx_equals(prescript_box.left, base_box.left, e, `${name}, left`); + assert_approx_equals((prescript_box.top + prescript_box.bottom) / 2, (base_box.top + base_box.bottom) / 2, e, `${name}, top`); + + if (name == "prescripts with padding/border/margin") { + assert_approx_equals(prescript_box.width, 2*(15 + 25), e, `${name}, width`); + assert_approx_equals(prescript_box.height, 2*(10 + 20), e, `${name}, height`); + } else { + assert_approx_equals(prescript_box.width, 0, e, `${name}, width`); + assert_approx_equals(prescript_box.height, 0, e, `${name}, height`); + } + }, `mprescripts coordinates and sizes (${name})`); + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mmultiscripts data-name="2 postscripts"> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-name="2 prescripts"> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-name="2 prescripts, 4 postscripts"> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-name="4 prescripts, 2 postscripts"> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-name="prescripts with padding/border/margin"> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mprescripts style="background: blue; + padding-top: 10px; border-top: 20px solid green; + padding-bottom: 10px; border-bottom: 20px solid green; + padding-left: 15px; border-left: 25px solid green; + padding-right: 15px; border-right: 25px solid green; + margin-top: 50px;"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + <mspace width="30px" height="15px" depth="15px" style="background: black"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-legacy-scriptshift-attributes-001.tentative-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-legacy-scriptshift-attributes-001.tentative-ref.html new file mode 100644 index 0000000000..c1bf2e4695 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-legacy-scriptshift-attributes-001.tentative-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>msub/msup/msubsup/mmultiscripts subscriptshift and superscriptshift attributes (reference)</title> + </head> + <body> + <p>Test passes if the green squares are not about 300px away from the blue squares.</p> + <p> + <math> + <mmultiscripts> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mprescripts/> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </mmultiscripts> + <msub> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </msub> + <msup> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </msup> + <msubsup> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </msubsup> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-legacy-scriptshift-attributes-001.tentative.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-legacy-scriptshift-attributes-001.tentative.html new file mode 100644 index 0000000000..2f29db401d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-legacy-scriptshift-attributes-001.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>msub/msup/msubsup/mmultiscripts subscriptshift and superscriptshift attributes</title> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.msub"> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.msup"> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.msunsup"> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mmultiscripts"> + <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/#prescripts-and-tensor-indices-mmultiscripts"> + <link rel="match" href="subsup-legacy-scriptshift-attributes-001.tentative-ref.html"> + </head> + <body> + <p>Test passes if the green squares are not about 300px away from the blue squares.</p> + <p> + <math> + <mmultiscripts subscriptshift="300px" superscriptshift="300px"> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mprescripts/> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </mmultiscripts> + <msub subscriptshift="300px"> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </msub> + <msup superscriptshift="300px"> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </msup> + <msubsup subscriptshift="300px" superscriptshift="300px"> + <mspace width="30px" height="30px" style="background: blue;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + <mspace width="10px" height="10px" style="background: lightgreen;"></mspace> + </msubsup> + </math> + </p> + <script src="/mathml/support/feature-detection.js"></script> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_msubsup"); + MathMLFeatureDetection.ensure_for_match_reftest("has_mmultiscripts"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-parameters-1.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-parameters-1.html new file mode 100644 index 0000000000..3f49b1d53b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-parameters-1.html @@ -0,0 +1,354 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Elements msub, msup, subsup and msubsup correctly use the subscript and superscript parameters from the MATH table."> +<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> +<style> + math, mspace { + font-size: 10px; + } + @font-face { + font-family: spaceafterscript3000; + src: url("/fonts/math/scripts-spaceafterscript3000.woff"); + } + @font-face { + font-family: superscriptshiftup7000; + src: url("/fonts/math/scripts-superscriptshiftup7000.woff"); + } + @font-face { + font-family: superscriptshiftupcramped5000; + src: url("/fonts/math/scripts-superscriptshiftupcramped5000.woff"); + } + @font-face { + font-family: subscriptshiftdown6000; + src: url("/fonts/math/scripts-subscriptshiftdown6000.woff"); + } + @font-face { + font-family: subsuperscriptgapmin11000; + src: url("/fonts/math/scripts-subsuperscriptgapmin11000.woff"); + } + @font-face { + font-family: subsuperscriptgapmin11000superscriptbottommaxwithsubscript3000; + src: url("/fonts/math/scripts-subsuperscriptgapmin11000-superscriptbottommaxwithsubscript3000.woff"); + } + @font-face { + font-family: subscripttopmax4000; + src: url("/fonts/math/scripts-subscripttopmax4000.woff"); + } + @font-face { + font-family: superscriptbottommin8000; + src: url("/fonts/math/scripts-superscriptbottommin8000.woff"); + } + @font-face { + font-family: subscriptbaselinedropmin9000; + src: url("/fonts/math/scripts-subscriptbaselinedropmin9000.woff"); + } + @font-face { + font-family: superscriptbaselinedropmax10000; + src: url("/fonts/math/scripts-superscriptbaselinedropmax10000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("ref001").left - getBox("sub001").right, v, epsilon, "msub: Space after subscript"); + assert_approx_equals(getBox("ref002").left - getBox("sup002").right, v, epsilon, "msup: Space after superscript"); + assert_approx_equals(getBox("ref003").left - getBox("sup003").right, v, epsilon, "msubsup: Space after superscript"); + assert_approx_equals(getBox("sup0042").left - getBox("sup0041").right, v, epsilon, "mmultiscripts: Space after first superscript"); + assert_approx_equals(getBox("sup0043").left - getBox("sup0042").right, v, epsilon, "mmultiscripts: Space after second superscript"); + assert_approx_equals(getBox("ref004").left - getBox("sup0043").right, v, epsilon, "mmultiscripts: Space after last superscript"); + }, "SpaceAfterScript"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref101").bottom - getBox("sup102").bottom, v, epsilon, "msup: Superscript shift"); + assert_approx_equals(getBox("ref101").bottom - getBox("sup103").bottom, v, epsilon, "msubsup: Superscript shift"); + assert_approx_equals(getBox("ref101").bottom - getBox("sup1041").bottom, v, epsilon, "mmultiscripts: First superscript shift"); + assert_approx_equals(getBox("ref101").bottom - getBox("sup1042").bottom, v, epsilon, "mmultiscripts: Second superscript shift"); + assert_approx_equals(getBox("ref101").bottom - getBox("sup1043").bottom, v, epsilon, "mmultiscripts: Last superscript shift"); + }, "SuperscriptShiftUp"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref201").bottom - getBox("sup202").bottom, v, epsilon, "msup: Superscript shift"); + assert_approx_equals(getBox("ref201").bottom - getBox("sup203").bottom, v, epsilon, "msubsup: Superscript shift"); + assert_approx_equals(getBox("ref201").bottom - getBox("sup2041").bottom, v, epsilon, "mmultiscripts: First superscript shift"); + assert_approx_equals(getBox("ref201").bottom - getBox("sup2042").bottom, v, epsilon, "mmultiscripts: Second superscript shift"); + assert_approx_equals(getBox("ref201").bottom - getBox("sup2043").bottom, v, epsilon, "mmultiscripts: Last superscript shift"); + }, "SuperscriptShiftUpCramped"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 6000 * emToPx; + assert_approx_equals(getBox("sub301").bottom - getBox("ref300").bottom, v, epsilon, "msup: Subscript shift"); + assert_approx_equals(getBox("sub302").bottom - getBox("ref300").bottom, v, epsilon, "msubsup: Subscript shift"); + assert_approx_equals(getBox("sub303").bottom - getBox("ref300").bottom, v, epsilon, "mmultiscripts: First subscript shift"); + assert_approx_equals(getBox("sub304").bottom - getBox("ref300").bottom, v, epsilon, "mmultiscripts: Second subscript shift"); + }, "SubscriptShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 11000 * emToPx; + assert_approx_equals(getBox("sub4011").top - getBox("sup4012").bottom, v, epsilon, "msubsup: SubSuperscript gap"); + assert_approx_equals(getBox("sub4021").top - getBox("sup4022").bottom, v, epsilon, "mmultiscripts: SubSuperscript gap"); + }, "SubSuperscriptGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 11000 * emToPx; + var v2 = 3000 * emToPx; + assert_approx_equals(getBox("sub501").top - getBox("sup501").bottom, v1, epsilon, "msubsup: SubSuperscript gap"); + assert_approx_equals(getBox("ref500").bottom - getBox("sup501").bottom, v2, epsilon, "msubsup: Superscript bottom"); + assert_approx_equals(getBox("sub502").top - getBox("sup502").bottom, v1, epsilon, "mmultiscripts: SubSuperscript gap"); + assert_approx_equals(getBox("ref500").bottom - getBox("sup502").bottom, v2, epsilon, "mmultiscripts: Superscript bottom"); + }, "SuperscriptBottomMaxWithSubscript"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 4000 * emToPx; + assert_approx_equals(getBox("ref600").bottom - getBox("sub601").top, v, epsilon, "msub: Subscript top"); + }, "SubscriptTopMax"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 8000 * emToPx; + assert_approx_equals(getBox("ref700").bottom - getBox("sub701").bottom, v, epsilon, "msub: Superscript bottom"); + }, "SuperscriptBottomMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 9000 * emToPx; + assert_approx_equals(getBox("sub801").bottom - getBox("base801").bottom, v, epsilon, "msub: Superscript drop"); + }, "SubscriptBaselineDrop"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 10000 * emToPx; + assert_approx_equals(getBox("sup901").bottom - getBox("base901").top, v, epsilon, "msup: Superscript drop"); + }, "SuperscriptBaselineDrop"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: spaceafterscript3000;"> + <msub> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub001" height="1em" width="1em" style="background: red"/> + </msub> + <mspace id="ref001" height="1em" width="1em" style="background: green"/> + </math> + <math style="font-family: spaceafterscript3000;"> + <msup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sup002" height="1em" width="1em" style="background: red"/> + </msup> + <mspace id="ref002" height="1em" width="1em" style="background: green"/> + </math> + <math style="font-family: spaceafterscript3000;"> + <msubsup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace/> + <mspace id="sup003" height="1em" width="1em" style="background: red"/> + </msubsup> + <mspace id="ref003" height="1em" width="1em" style="background: green"/> + </math> + <math style="font-family: spaceafterscript3000;"> + <mmultiscripts> + <mspace height="2em" width="2em" style="background: blue"/> + <none/> + <mspace id="sup0041" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sup0042" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sup0043" height="1em" width="1em" style="background: red"/> + </mmultiscripts> + <mspace id="ref004" height="1em" width="1em" style="background: green"/> + </math> + </p> + <hr/> + <p> + <math style="font-family: superscriptshiftup7000;"> + <mspace id="ref101" height="1em" width="1em" style="background: green"/> + <msup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sup102" height="1em" width="1em" style="background: red"/> + </msup> + <msubsup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace height="1em" width="1em" style="background: red"/> + <mspace id="sup103" height="1em" width="1em" style="background: red"/> + </msubsup> + <mmultiscripts> + <mspace height="2em" width="2em" style="background: blue"/> + <none/> + <mspace id="sup1041" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sup1042" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sup1043" height="1em" width="1em" style="background: red"/> + </mmultiscripts> + </math> + </p> + <hr/> + <p> + <math style="font-family: superscriptshiftupcramped5000;"> + <msqrt> + <mspace id="ref201" height="1em" width="1em" style="background: green"/> + <msup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sup202" height="1em" width="1em" style="background: red"/> + </msup> + <msubsup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace height="1em" width="1em" style="background: blue"/> + <mspace id="sup203" height="1em" width="1em" style="background: red"/> + </msubsup> + <mmultiscripts> + <mspace height="2em" width="2em" style="background: blue"/> + <none/> + <mspace id="sup2041" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sup2042" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sup2043" height="1em" width="1em" style="background: red"/> + </mmultiscripts> + </msqrt> + </math> + </p> + <hr/> + <p> + <math style="font-family: subscriptshiftdown6000;"> + <mspace id="ref300" height="1em" width="1em" style="background: green"/> + <msub> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub301" height="1em" width="1em" style="background: red"/> + </msub> + <msubsup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub302" height="1em" width="1em" style="background: red"/> + <mspace height="1em" width="1em" style="background: blue"/> + </msubsup> + <mmultiscripts> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub303" height="1em" width="1em" style="background: red"/> + <none/> + <mspace id="sub304" height="1em" width="1em" style="background: red"/> + <none/> + </mmultiscripts> + </math> + </p> + <hr/> + <p> + <math style="font-family: subsuperscriptgapmin11000;"> + <msubsup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub4011" height="1em" width="1em" style="background: red"/> + <mspace id="sup4012" height="1em" width="1em" style="background: red"/> + </msubsup> + <mmultiscripts> + <mspace height="2em" width="2em" style="background: blue"/> + <none/> + <none/> + <mspace id="sub4021" height="1em" width="1em" style="background: red"/> + <mspace id="sup4022" height="1em" width="1em" style="background: red"/> + </mmultiscripts> + </math> + </p> + <hr/> + <p> + <math style="font-family: subsuperscriptgapmin11000superscriptbottommaxwithsubscript3000;"> + <mspace id="ref500" height="1em" width="1em" style="background: green"/> + <msubsup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub501" height="1em" width="1em" style="background: red"/> + <mspace id="sup501" height="1em" width="1em" style="background: red"/> + </msubsup> + <mmultiscripts> + <mspace height="2em" width="2em" style="background: blue"/> + <none/> + <none/> + <mspace id="sub502" height="1em" width="1em" style="background: red"/> + <mspace id="sup502" height="1em" width="1em" style="background: red"/> + </mmultiscripts> + </math> + </p> + <hr/> + <p> + <math style="font-family: subscripttopmax4000;"> + <mspace id="ref600" height="1em" + width="1em" style="background: green"/> + <msub> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub601" height="10em" + width="1em" style="background: red"/> + </msub> + </math> + </p> + <hr/> + <p> + <math style="font-family: superscriptbottommin8000;"> + <mspace id="ref700" height="1em" + width="1em" style="background: green"/> + <msup> + <mspace height="2em" width="2em" style="background: blue"/> + <mspace id="sub701" depth="1em" + width="1em" style="background: red"/> + </msup> + </math> + </p> + <hr/> + <p> + <math style="font-family: subscriptbaselinedropmin9000;"> + <msub> + <mspace id="base801" height="2em" width="2em" style="background: blue"/> + <mspace id="sub801" height="1em" + width="1em" style="background: red"/> + </msub> + </math> + </p> + <hr/> + <p> + <math style="font-family: superscriptbaselinedropmax10000;"> + <msup> + <mspace id="base901" height="15em" width="2em" style="background: blue"/> + <mspace id="sup901" height="1em" + width="1em" style="background: red"/> + </msup> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-parameters-2.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-parameters-2.html new file mode 100644 index 0000000000..205697f4e4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/subsup-parameters-2.html @@ -0,0 +1,181 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Subscripts and Superscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<meta name="assert" content="Elements msub, msup, subsup and msubsup correctly use the italic correction from the MATH table."> +<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> +<style> + math, mspace { + font-size: 10px; + } + @font-face { + font-family: largeop-displayoperatorminheight5000; + src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); + } + @font-face { + font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000; + src: url("/fonts/math/largeop-displayoperatorminheight2000-2AFF-italiccorrection3000.woff"); + } + @font-face { + font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000; + src: url("/fonts/math/largeop-displayoperatorminheight7000-2AFF-italiccorrection5000.woff"); + } +</style> +<script> + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + /* + These two tests verify that: + - In msub, the script is at the right of the base minus the italic correction. + - In msup, the script is just at the right of the base. + - In msubsup, the scripts are shifted by the italic correction. + - In mmultiscripts, postscript pairs are shifted by the italic correction. + - In mmultiscripts, prescript pairs are vertically aligned. + */ + var epsilon = 1; + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 0; + assert_approx_equals(getBox("base001").right - getBox("sub001").left, v, epsilon, "msub"); + assert_approx_equals(getBox("sup002").left, getBox("base002").right, epsilon, "msup"); + assert_approx_equals(getBox("sup003").left - getBox("sub003").left, v, epsilon, "msubsup"); + assert_approx_equals(getBox("sup004").left - getBox("sub004").left, v, epsilon, "mmultiscripts postscripts"); + assert_approx_equals(getBox("sup005").left - getBox("sub005").left, 0, epsilon, "mmultiscripts prescripts"); + }, "Null Italic Correction"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("base011").right - getBox("sub011").left, v, epsilon, "msub"); + assert_approx_equals(getBox("sup012").left, getBox("base012").right, epsilon, "msup"); + assert_approx_equals(getBox("sup013").left - getBox("sub013").left, v, epsilon, "msubsup"); + assert_approx_equals(getBox("sup014").left - getBox("sub014").left, v, epsilon, "mmultiscripts postscripts"); + assert_approx_equals(getBox("sup015").left - getBox("sub015").left, 0, epsilon, "mmultiscripts prescripts"); + }, "NonNull Italic Correction (MathGlyphVariantRecord)"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("base021").right - getBox("sub021").left, v, epsilon, "msub"); + assert_approx_equals(getBox("sup022").left, getBox("base022").right, epsilon, "msup"); + assert_approx_equals(getBox("sup023").left - getBox("sub023").left, v, epsilon, "msubsup"); + assert_approx_equals(getBox("sup024").left - getBox("sub024").left, v, epsilon, "mmultiscripts postscripts"); + assert_approx_equals(getBox("sup025").left - getBox("sub025").left, 0, epsilon, "mmultiscripts prescripts"); + }, "NonNull Italic Correction (GlyphAssembly)"); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <h2>Null Italic Correction</h2> + <p> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> + <msub> + <mo id="base001" lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub001" height="1em" width="1em" style="background: blue"/> + </msub> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> + <msup> + <mo id="base002" lspace="0px" rspace="0px">⫿</mo> + <mspace id="sup002" height="1em" width="1em" style="background: blue"/> + </msup> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> + <msubsup> + <mo lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub003" height="1em" width="1em" style="background: blue"/> + <mspace id="sup003" height="1em" width="1em" style="background: green"/> + </msubsup> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> + <mmultiscripts> + <mo lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub004" height="1em" width="1em" style="background: blue"/> + <mspace id="sup004" height="1em" width="1em" style="background: green"/> + <mprescripts/> + <mspace id="sub005" height="1em" width="1em" style="background: magenta"/> + <mspace id="sup005" height="1em" width="1em" style="background: cyan"/> + </mmultiscripts> + </math> + </p> + <h2>NonNull Italic Correction (MathGlyphVariantRecord)</h2> + <p> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> + <msub> + <mo id="base011" lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub011" height="1em" width="1em" style="background: blue"/> + </msub> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> + <msup> + <mo id="base012" lspace="0px" rspace="0px">⫿</mo> + <mspace id="sup012" height="1em" width="1em" style="background: blue"/> + </msup> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> + <msubsup> + <mo lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub013" height="1em" width="1em" style="background: blue"/> + <mspace id="sup013" height="1em" width="1em" style="background: green"/> + </msubsup> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> + <mmultiscripts> + <mo lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub014" height="1em" width="1em" style="background: blue"/> + <mspace id="sup014" height="1em" width="1em" style="background: green"/> + <mprescripts/> + <mspace id="sub015" height="1em" width="1em" style="background: magenta"/> + <mspace id="sup015" height="1em" width="1em" style="background: cyan"/> + </mmultiscripts> + </math> + </p> + <h2>NonNull Italic Correction (GlyphAssembly)</h2> + <p> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> + <msub> + <mo id="base021" lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub021" height="1em" width="1em" style="background: blue"/> + </msub> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> + <msup> + <mo id="base022" lspace="0px" rspace="0px">⫿</mo> + <mspace id="sup022" height="1em" width="1em" style="background: blue"/> + </msup> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> + <msubsup> + <mo lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub023" height="1em" width="1em" style="background: blue"/> + <mspace id="sup023" height="1em" width="1em" style="background: green"/> + </msubsup> + </math> + <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> + <mmultiscripts> + <mo lspace="0px" rspace="0px">⫿</mo> + <mspace id="sub024" height="1em" width="1em" style="background: blue"/> + <mspace id="sup024" height="1em" width="1em" style="background: green"/> + <mprescripts/> + <mspace id="sub025" height="1em" width="1em" style="background: magenta"/> + <mspace id="sup025" height="1em" width="1em" style="background: cyan"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-1.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-1.html new file mode 100644 index 0000000000..ae4a945404 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-1.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Elements munder, mover, munderover correctly ."> +<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> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math, mspace, mo { + font-family: Ahem; + font-size: 10px; + } +</style> +<script> + /* This test does not use any specific fonts and so the exact rules are not + specified precisely. We assume reasonable values for script shifts and + spacing. */ + + 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", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + for (var i = 0; i <= 3; i++) { + assert_approx_equals(getBox("under" + i + "base").middle, getBox("baseline").bottom, e, "munder " + i + ": base is placed on the baseline"); + assert_approx_equals(getBox("over" + i + "base").middle, getBox("baseline").bottom, e, "mover " + i + ": base is placed on the baseline"); + } + for (var i = 0; i <= 5; i++) { + assert_approx_equals(getBox("underover" + i + "base").middle, getBox("baseline").bottom, e, "munderover " + i + ": base is placed on the baseline"); + } + }, "Alignment of the base on the baseline"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + for (var i = 0; i <= 3; i++) { + assert_approx_equals(getBox("under" + i + "under").center, getBox("under" + i + "base").center, e, "munder " + i + ": base and script are horizontally centered"); + assert_approx_equals(getBox("over" + i + "over").center, getBox("over" + i + "base").center, e, "mover " + i + ": base and script are horizontally centered"); + } + for (var i = 0; i <= 5; i++) { + assert_approx_equals(getBox("underover" + i + "under").center, getBox("underover" + i + "base").center, e, "munderover " + i + ": base and underscript are horizontally centered"); + assert_approx_equals(getBox("underover" + i + "over").center, getBox("underover" + i + "base").center, e, "munderover " + i + ": base and overscript are horizontally centered"); + } + }, "Horizontal alignments of base and scripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 0; i <= 3; i++) { + assert_greater_than_equal(getBox("under" + i + "under").top, getBox("under" + i + "base").bottom, "munder " + i + ": script is under base"); + assert_less_than_equal(getBox("over" + i + "over").bottom, getBox("over" + i + "base").top, "mover " + i + ": script is over base"); + } + for (var i = 0; i <= 5; i++) { + assert_greater_than_equal(getBox("underover" + i + "under").top, getBox("underover" + i + "base").bottom, "munderover " + i + ": underscript is under base"); + assert_less_than_equal(getBox("underover" + i + "over").bottom, getBox("underover" + i + "base").top, "munderover " + i + ": overscript is over base"); + } + }, "Relative vertical positions of base and scripts"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 1; + for (var i = 0; i <= 3; i++) { + assert_approx_equals(getBox("under" + i).width, Math.max(getBox("under" + i + "base").width, getBox("under" + i + "under").width), e, "munder " + i + ": width is determined by the maximum of width of base and script"); + assert_approx_equals(getBox("over" + i).width, Math.max(getBox("over" + i + "base").width, getBox("over" + i + "over").width), e, "mover " + i + ": width is determined by the maximum of width of base and script"); + } + for (var i = 0; i <= 5; i++) { + assert_approx_equals(getBox("underover" + i).width, Math.max(getBox("underover" + i + "base").width, getBox("underover" + i + "under").width, getBox("underover" + i + "over").width), e, "munderover " + i + ": width is determined by the maximum of width of base and scripts"); + } + }, "Width of scripted elements"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 4; + for (var i = 0; i <= 3; i++) { + assert_approx_equals(getBox("under" + i).height, getBox("under" + i + "base").height + getBox("under" + i + "under").height, e, "munder " + i + ": height is determined by the sum of heights of base and script plus some spacing."); + assert_approx_equals(getBox("over" + i).height, getBox("over" + i + "base").height + getBox("over" + i + "over").height, e, "mover " + i + ": height is determined by the sum of heights of base and script plus some spacing."); + } + for (var i = 0; i <= 5; i++) { + assert_approx_equals(getBox("underover" + i).height, getBox("underover" + i + "base").height + getBox("underover" + i + "under").height + getBox("underover" + i + "over").height, e, "munderover " + i + ": height is determined by the sum heights of base and scripts"); + } + }, "Height of scripted elements"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/> + <munder id="under0"> + <mspace id="under0base" width="30px" height="5px" depth="5px" style="background: black"/> + <mspace id="under0under" width="10px" height="5px" depth="5px" style="background: black"/> + </munder> + <munder id="under1"> + <mspace id="under1base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="under1under" width="30px" height="5px" depth="5px" style="background: black"/> + </munder> + <munder id="under2"> + <mspace id="under2base" width="10px" height="15px" depth="15px" style="background: black"/> + <mspace id="under2under" width="10px" height="5px" depth="5px" style="background: black"/> + </munder> + <munder id="under3"> + <mspace id="under3base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="under3under" width="10px" height="15px" depth="15px" style="background: black"/> + </munder> + <mover id="over0"> + <mspace id="over0base" width="30px" height="5px" depth="5px" style="background: black"/> + <mspace id="over0over" width="10px" height="5px" depth="5px" style="background: black"/> + </mover> + <mover id="over1"> + <mspace id="over1base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="over1over" width="30px" height="5px" depth="5px" style="background: black"/> + </mover> + <mover id="over2"> + <mspace id="over2base" width="10px" height="15px" depth="15px" style="background: black"/> + <mspace id="over2over" width="10px" height="5px" depth="5px" style="background: black"/> + </mover> + <mover id="over3"> + <mspace id="over3base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="over3over" width="10px" height="15px" depth="15px" style="background: black"/> + </mover> + <munderover id="underover0"> + <mspace id="underover0base" width="30px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover0under" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover0over" width="10px" height="5px" depth="5px" style="background: black"/> + </munderover> + <munderover id="underover1"> + <mspace id="underover1base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover1under" width="30px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover1over" width="10px" height="5px" depth="5px" style="background: black"/> + </munderover> + <munderover id="underover2"> + <mspace id="underover2base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover2under" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover2over" width="30px" height="5px" depth="5px" style="background: black"/> + </munderover> + <munderover id="underover3"> + <mspace id="underover3base" width="10px" height="15px" depth="15px" style="background: black"/> + <mspace id="underover3under" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover3over" width="10px" height="5px" depth="5px" style="background: black"/> + </munderover> + <munderover id="underover4"> + <mspace id="underover4base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover4under" width="10px" height="15px" depth="15px" style="background: black"/> + <mspace id="underover4over" width="10px" height="5px" depth="5px" style="background: black"/> + </munderover> + <munderover id="underover5"> + <mspace id="underover5base" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover5under" width="10px" height="5px" depth="5px" style="background: black"/> + <mspace id="underover5over" width="10px" height="15px" depth="15px" style="background: black"/> + </munderover> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-legacy-align-attribute-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-legacy-align-attribute-001-ref.html new file mode 100644 index 0000000000..a9545c60f4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-legacy-align-attribute-001-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>munder/mover/munderover align (reference)</title> + </head> + <body> + <p>Test passes if the center of the following rectangles is aligned + on the same vertical axis.</p> + <p> + <math> + <munder> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munder> + </math> + </p> + <p> + <math> + <munder> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munder> + </math> + </p> + <p> + <math> + <mover> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mover> + </math> + </p> + <p> + <math> + <mover> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mover> + </math> + </p> + <p> + <math> + <munderover> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munderover> + </math> + </p> + <p> + <math> + <munderover> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munderover> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-legacy-align-attribute-001.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-legacy-align-attribute-001.html new file mode 100644 index 0000000000..aa2460e062 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-legacy-align-attribute-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>munder/mover/munderover align</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.munder"> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mover"> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.munderover"> + <meta name="assert" content="Check that the legacy align attribute is ignored."> + <link rel="match" href="underover-legacy-align-attribute-001-ref.html"> + </head> + <body> + <p>Test passes if the center of the following rectangles is aligned + on the same vertical axis.</p> + <p> + <math> + <munder align="left"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munder> + </math> + </p> + <p> + <math> + <munder align="right"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munder> + </math> + </p> + <p> + <math> + <mover align="left"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mover> + </math> + </p> + <p> + <math> + <mover align="right"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mover> + </math> + </p> + <p> + <math> + <munderover align="left"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munderover> + </math> + </p> + <p> + <math> + <munderover align="right"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </munderover> + </math> + </p> + <script src="/mathml/support/feature-detection.js"></script> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-1.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-1.html new file mode 100644 index 0000000000..eb2e0512e0 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-1.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Elements munder, mover, munderover correctly use the limit parameters from the MATH table."> +<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> +<style> + math, mspace, mo { + font-size: 10px; + } + @font-face { + font-family: lowerlimitbaselinedropmin3000; + src: url("/fonts/math/limits-lowerlimitbaselinedropmin3000.woff"); + } + @font-face { + font-family: lowerlimitgapmin11000; + src: url("/fonts/math/limits-lowerlimitgapmin11000.woff"); + } + @font-face { + font-family: upperlimitbaselinerisemin5000; + src: url("/fonts/math/limits-upperlimitbaselinerisemin5000.woff"); + } + @font-face { + font-family: upperlimitgapmin7000; + src: url("/fonts/math/limits-upperlimitgapmin7000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom, + v, epsilon, "munder: under shift"); + assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom, + v, epsilon, "munderover: under shift"); + }, "LowerLimitBaselineDropMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 11000 * emToPx; + assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom, + v, epsilon, "munder: under gap"); + assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom, + v, epsilon, "munderover: under gap"); + }, "LowerLimitGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom, + v, epsilon, "munderover: over shift"); + }, "UpperLimitBaselineRiseMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom, + v, epsilon, "munderover: over shift"); + }, "UpperLimitGapMin"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: lowerlimitbaselinedropmin3000;"> + <mspace id="ref0001" height="1em" width="3em" style="background: green"/> + <munder> + <mo movablelimits="false">∑</mo> + <mspace id="under00011" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mo movablelimits="false">∑</mo> + <mspace id="under00012" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: lowerlimitgapmin11000;"> + <mspace id="ref0002" height="1em" width="3em" style="background: green"/> + <munder> + <mo movablelimits="false">∑</mo> + <mspace id="under00021" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mo movablelimits="false">∑</mo> + <mspace id="under00022" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: upperlimitbaselinerisemin5000;"> + <mspace id="ref0003" height="1em" width="3em" style="background: green"/> + <mover> + <mo movablelimits="false">∑</mo> + <mspace id="over00031" height="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mo movablelimits="false">∑</mo> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00032" height="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: upperlimitgapmin7000;"> + <mspace id="ref0004" height="1em" width="3em" style="background: green"/> + <mover> + <mo movablelimits="false">∑</mo> + <mspace id="over00041" depth="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mo movablelimits="false">∑</mo> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00042" depth="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-2.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-2.html new file mode 100644 index 0000000000..aad03a3863 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-2.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Elements munder, mover, munderover correctly use the stretch stack parameters from the MATH table."> +<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> +<style> + math, mspace, mo { + font-size: 10px; + } + @font-face { + font-family: bottomshiftdown3000; + src: url("/fonts/math/stretchstack-bottomshiftdown3000.woff"); + } + @font-face { + font-family: gapbelowmin11000; + src: url("/fonts/math/stretchstack-gapbelowmin11000.woff"); + } + @font-face { + font-family: topshiftup5000; + src: url("/fonts/math/stretchstack-topshiftup5000.woff"); + } + @font-face { + font-family: gapabovemin7000; + src: url("/fonts/math/stretchstack-gapabovemin7000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom, + v, epsilon, "munder: under shift"); + assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom, + v, epsilon, "munderover: under shift"); + }, "StretchStackBottomShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 11000 * emToPx; + assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom, + v, epsilon, "munder: under gap"); + assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom, + v, epsilon, "munderover: under gap"); + }, "StretchStackGapBelowMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom, + v, epsilon, "munderover: over shift"); + }, "StretchStackTopShiftUp"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom, + v, epsilon, "munderover: over shift"); + }, "StretchStackGapAboveMin"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: bottomshiftdown3000;"> + <mspace id="ref0001" height="1em" width="3em" style="background: green"/> + <munder> + <mo>→</mo> + <mspace id="under00011" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mo>→</mo> + <mspace id="under00012" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: gapbelowmin11000;"> + <mspace id="ref0002" height="1em" width="3em" style="background: green"/> + <munder> + <mo>→</mo> + <mspace id="under00021" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mo>→</mo> + <mspace id="under00022" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: topshiftup5000;"> + <mspace id="ref0003" height="1em" width="3em" style="background: green"/> + <mover> + <mo>→</mo> + <mspace id="over00031" height="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mo>→</mo> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00032" height="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: gapabovemin7000;"> + <mspace id="ref0004" height="1em" width="3em" style="background: green"/> + <mover> + <mo>→</mo> + <mspace id="over00041" depth="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mo>→</mo> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00042" depth="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-3.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-3.html new file mode 100644 index 0000000000..9ec9dbf47e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-3.html @@ -0,0 +1,452 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Elements munder, mover, munderover correctly use underbar/overbar and AccentBaseHeight parameters from the MATH table."> +<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> +<style> + math, mspace, mo { + font-size: 10px; + } + @font-face { + font-family: accentbaseheight4000underbarextradescender5000; + src: url("/fonts/math/underover-accentbaseheight4000-underbarextradescender5000.woff"); + } + @font-face { + font-family: accentbaseheight4000underbarverticalgap7000; + src: url("/fonts/math/underover-accentbaseheight4000-underbarverticalgap7000.woff"); + } + @font-face { + font-family: accentbaseheight4000overbarextraascender3000; + src: url("/fonts/math/underover-accentbaseheight4000-overbarextraascender3000.woff"); + } + @font-face { + font-family: accentbaseheight4000overbarverticalgap11000; + src: url("/fonts/math/underover-accentbaseheight4000-overbarverticalgap11000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 2; + var axisBaseHeight = 4000 * emToPx; + var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight + var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function getBooleanValue(element, name) { + return (element.getAttribute(name) || "").toLowerCase() === "true"; + } + let dynamicBooleanAttributeChanges = { + "Invert boolean value using absent attribute": function(element, name) { + if (getBooleanValue(element, name)) { + element.removeAttribute(name); + } else { + element.setAttribute(name, "true"); + } + }, + + "Invert boolean value using invalid attribute": function(element, name) { + if (getBooleanValue(element, name)) { + element.setAttribute(name, "invalid"); + } else { + element.setAttribute(name, "true"); + } + }, + + "Change case of boolean attribute": function(element, name) { + if (getBooleanValue(element, name)) { + element.setAttribute(name, "TrUe"); + } else { + element.setAttribute(name, "FaLsE"); + } + } + }; + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 1; i <= 4; i++) { + for (var j = 1; j <= 6; j++) { + var baseId = ("base00" + i) + j; + assert_approx_equals(getBox("ref00" + i).bottom, + getBox(baseId).bottom, + epsilon, + "alignment of " + baseId); + } + } + }, "Baseline alignment"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 1; i <= 4; i++) { + for (var j = 1; j <= 6; j++) { + var baseId = ("base00" + i) + j; + assert_approx_equals(getBox(baseId).height, + j == 2 || j == 5 ? + tallBaseHeight :shortBaseHeight, + epsilon, + "height of " + baseId); + } + } + }, "Heights of bases"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom, + shortBaseHeight, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 1; j <= 6; j++) { + var elId = "el001" + j; + var baseId = "base001" + j; + var underId = "under001" + j; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + 0, epsilon, + "gap between " + baseId + " and " + underId); + assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom, + v, epsilon, + "extra descender below " + underId); + } + }, "AccentBaseHeight, UnderbarExtraDescender"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom, + shortBaseHeight, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 1; j <= 6; j++) { + var elId = "el002" + j; + var baseId = "base002" + j; + var underId = "under002" + j; + var gap = (j == 2 || j == 3 ? 0 : v); + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + gap, epsilon, + "gap between " + baseId + " and " + underId); + } + }, "AccentBaseHeight, UnderbarVerticalGap"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom, + shortBaseHeight, epsilon, + "mover: nonaccent over short base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom, + tallBaseHeight, epsilon, + "mover: accent over tall base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom, + axisBaseHeight, epsilon, + "mover: accent over short base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom, + shortBaseHeight, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 1; j <= 6; j++) { + var elId = "el003" + j; + var baseId = "base003" + j; + if (j >= 4) { + var underId = "under003" + j; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + 0, epsilon, + "gap between " + baseId + " and " + underId); + } + var overId = "over003" + j; + assert_approx_equals(getBox(overId).top - getBox(elId).top, + v, epsilon, + "extra ascender below " + overId); + } + }, "AccentBaseHeight, OverbarExtraAscender"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + v = 11000 * emToPx; + assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom, + shortBaseHeight + v, epsilon, + "mover: nonaccent over short base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom, + tallBaseHeight, epsilon, + "mover: accent over tall base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom, + axisBaseHeight, epsilon, + "mover: accent over short base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom, + shortBaseHeight + v, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 4; j <= 6; j++) { + var baseId = "base004" + j; + var underId = "under004" + j; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + 0, epsilon, + "gap between " + baseId + " and " + underId); + } + }, "AccentBaseHeight, OverbarVerticalGap"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var v = 7000 * emToPx; + + for (var j = 1; j <= 4; j++) { + var elId = `el005${j}`; + var baseId = `base005${j}`; + var underId = `under005${j}`; + + for (name in dynamicBooleanAttributeChanges) { + let element = document.getElementById(elId); + dynamicBooleanAttributeChanges[name](element, "accentunder"); + var value = getBooleanValue(element, "accentunder"); + var gap = value ? 0 : v; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + gap, epsilon, + `${elId}: gap between base and underscript ; ${name}`); + }; + } + }, "Dynamic change of accentunder attribute"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + v = 11000 * emToPx; + for (var j = 1; j <= 4; j++) { + var elId = `el006${j}`; + var refId = `base006${j}`; + var overId = `over006${j}`; + for (name in dynamicBooleanAttributeChanges) { + let element = document.getElementById(elId); + dynamicBooleanAttributeChanges[name](element, "accent"); + var value = getBooleanValue(element, "accent"); + assert_approx_equals(getBox(refId).bottom - getBox(overId).bottom, + value ? axisBaseHeight : shortBaseHeight + v, + epsilon, + `${elId}: accent=${value} ; short base ; ${name}`); + } + } + }, "Dynamic change of accent attribute"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: accentbaseheight4000underbarextradescender5000;"> + <mspace id="ref001" height="1em" width="3em" style="background: green"/> + <munder style="background: cyan" id="el0011"> + <mspace id="base0011" height="3em" width="1em" style="background: black"/> + <mspace id="under0011" height="1em" width="3em" style="background: blue"/> + </munder> + <munder style="background: cyan" id="el0012" accentunder="true"> + <mspace id="base0012" height="5em" width="1em" style="background: black"/> + <mspace id="under0012" height="1em" width="3em" style="background: blue"/> + </munder> + <munder style="background: cyan" id="el0013" accentunder="true"> + <mspace id="base0013" height="3em" width="1em" style="background: black"/> + <mspace id="under0013" height="1em" width="3em" style="background: blue"/> + </munder> + <munderover style="background: cyan" id="el0014"> + <mspace id="base0014" height="3em" width="1em" style="background: black"/> + <mspace id="under0014" height="1em" width="3em" style="background: blue"/> + <mspace id="over0014" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0015" accent="true"> + <mspace id="base0015" height="5em" width="1em" style="background: black"/> + <mspace id="under0015" height="1em" width="3em" style="background: blue"/> + <mspace id="over0015" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0016" accent="true"> + <mspace id="base0016" height="3em" width="1em" style="background: black"/> + <mspace id="under0016" height="1em" width="3em" style="background: blue"/> + <mspace id="over0016" height="1em" width="3em" style="background: red"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000underbarverticalgap7000;"> + <mspace id="ref002" height="1em" width="3em" style="background: green"/> + <munder style="background: cyan" id="el0021"> + <mspace id="base0021" height="3em" width="1em" style="background: black"/> + <mspace id="under0021" height="1em" width="3em" style="background: blue"/> + </munder> + <munder style="background: cyan" id="el0022" accentunder="true"> + <mspace id="base0022" height="5em" width="1em" style="background: black"/> + <mspace id="under0022" height="1em" width="3em" style="background: blue"/> + </munder> + <munder style="background: cyan" id="el0023" accentunder="true"> + <mspace id="base0023" height="3em" width="1em" style="background: black"/> + <mspace id="under0023" height="1em" width="3em" style="background: blue"/> + </munder> + <munderover style="background: cyan" id="el0024"> + <mspace id="base0024" height="3em" width="1em" style="background: black"/> + <mspace id="under0024" height="1em" width="3em" style="background: blue"/> + <mspace id="over0024" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0025" accent="true"> + <mspace id="base0025" height="5em" width="1em" style="background: black"/> + <mspace id="under0025" height="1em" width="3em" style="background: blue"/> + <mspace id="over0025" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0026" accent="true"> + <mspace id="base0026" height="3em" width="1em" style="background: black"/> + <mspace id="under0026" height="1em" width="3em" style="background: blue"/> + <mspace id="over0026" height="1em" width="3em" style="background: red"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000overbarextraascender3000;"> + <mspace id="ref003" height="1em" width="3em" style="background: green"/> + <mover style="background: cyan" id="el0031"> + <mspace id="base0031" height="3em" width="1em" style="background: black"/> + <mspace id="over0031" height="1em" width="3em" style="background: red"/> + </mover> + <mover style="background: cyan" id="el0032" accent="true"> + <mspace id="base0032" height="5em" width="1em" style="background: black"/> + <mspace id="over0032" height="1em" width="3em" style="background: red"/> + </mover> + <mover style="background: cyan" id="el0033" accent="true"> + <mspace id="base0033" height="3em" width="1em" style="background: black"/> + <mspace id="over0033" height="1em" width="3em" style="background: red"/> + </mover> + <munderover style="background: cyan" id="el0034"> + <mspace id="base0034" height="3em" width="1em" style="background: black"/> + <mspace id="under0034" height="1em" width="3em" style="background: blue"/> + <mspace id="over0034" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0035" accent="true"> + <mspace id="base0035" height="5em" width="1em" style="background: black"/> + <mspace id="under0035" height="1em" width="3em" style="background: blue"/> + <mspace id="over0035" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0036" accent="true"> + <mspace id="base0036" height="3em" width="1em" style="background: black"/> + <mspace id="under0036" height="1em" width="3em" style="background: blue"/> + <mspace id="over0036" height="1em" width="3em" style="background: red"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000overbarverticalgap11000;"> + <mspace id="ref004" height="1em" width="3em" style="background: green"/> + <mover style="background: cyan" id="el0041"> + <mspace id="base0041" height="3em" width="1em" style="background: black"/> + <mspace id="over0041" height="1em" width="3em" style="background: red"/> + </mover> + <mover style="background: cyan" id="el0042" accent="true"> + <mspace id="base0042" height="5em" width="1em" style="background: black"/> + <mspace id="over0042" height="1em" width="3em" style="background: red"/> + </mover> + <mover style="background: cyan" id="el0043" accent="true"> + <mspace id="base0043" height="3em" width="1em" style="background: black"/> + <mspace id="over0043" height="1em" width="3em" style="background: red"/> + </mover> + <munderover style="background: cyan" id="el0044"> + <mspace id="base0044" height="3em" width="1em" style="background: black"/> + <mspace id="under0044" height="1em" width="3em" style="background: blue"/> + <mspace id="over0044" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0045" accent="true"> + <mspace id="base0045" height="5em" width="1em" style="background: black"/> + <mspace id="under0045" height="1em" width="3em" style="background: blue"/> + <mspace id="over0045" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0046" accent="true"> + <mspace id="base0046" height="3em" width="1em" style="background: black"/> + <mspace id="under0046" height="1em" width="3em" style="background: blue"/> + <mspace id="over0046" height="1em" width="3em" style="background: red"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000underbarverticalgap7000;"> + <mspace id="ref005" height="1em" width="3em" style="background: green"/> + <munder style="background: cyan" id="el0051"> + <mspace id="base0051" height="5em" width="1em" style="background: black"/> + <mspace id="under0051" height="1em" width="3em" style="background: blue"/> + </munder> + <munder style="background: cyan" id="el0052" accentunder="true"> + <mspace id="base0052" height="5em" width="1em" style="background: black"/> + <mspace id="under0052" height="1em" width="3em" style="background: blue"/> + </munder> + <munderover style="background: cyan" id="el0053"> + <mspace id="base0053" height="5em" width="1em" style="background: black"/> + <mspace id="under0053" height="1em" width="3em" style="background: blue"/> + <mspace id="over0053" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0054" accentunder="true"> + <mspace id="base0054" height="5em" width="1em" style="background: black"/> + <mspace id="under0054" height="1em" width="3em" style="background: blue"/> + <mspace id="over0054" height="1em" width="3em" style="background: red"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000overbarverticalgap11000;"> + <mspace id="ref006" height="1em" width="3em" style="background: green"/> + <mover style="background: cyan" id="el0061"> + <mspace id="base0061" height="3em" width="1em" style="background: black"/> + <mspace id="over0061" height="1em" width="3em" style="background: red"/> + </mover> + <mover style="background: cyan" id="el0062" accent="true"> + <mspace id="base0062" height="3em" width="1em" style="background: black"/> + <mspace id="over0062" height="1em" width="3em" style="background: red"/> + </mover> + <munderover style="background: cyan" id="el0063"> + <mspace id="base0063" height="3em" width="1em" style="background: black"/> + <mspace id="under0063" height="1em" width="3em" style="background: blue"/> + <mspace id="over0063" height="1em" width="3em" style="background: red"/> + </munderover> + <munderover style="background: cyan" id="el0064" accent="true"> + <mspace id="base0064" height="3em" width="1em" style="background: black"/> + <mspace id="under0064" height="1em" width="3em" style="background: blue"/> + <mspace id="over0064" height="1em" width="3em" style="background: red"/> + </munderover> + </math> + </p> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-4.tentative.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-4.tentative.html new file mode 100644 index 0000000000..5000d24f18 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-4.tentative.html @@ -0,0 +1,335 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mo.attrs"> +<meta name="assert" content="Elements munder, mover, munderover correctly use underbar/overbar and AccentBaseHeight parameters from the MATH table ; interaction with MathML3 mo@accent."> +<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> +<style> + math, mspace, mo { + font-size: 10px; + } + @font-face { + font-family: accentbaseheight4000underbarextradescender5000; + src: url("/fonts/math/underover-accentbaseheight4000-underbarextradescender5000.woff"); + } + @font-face { + font-family: accentbaseheight4000underbarverticalgap7000; + src: url("/fonts/math/underover-accentbaseheight4000-underbarverticalgap7000.woff"); + } + @font-face { + font-family: accentbaseheight4000overbarextraascender3000; + src: url("/fonts/math/underover-accentbaseheight4000-overbarextraascender3000.woff"); + } + @font-face { + font-family: accentbaseheight4000overbarverticalgap11000; + src: url("/fonts/math/underover-accentbaseheight4000-overbarverticalgap11000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 2; + var axisBaseHeight = 4000 * emToPx; + var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight + var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 1; i <= 4; i++) { + for (var j = 1; j <= 6; j++) { + var baseId = ("base00" + i) + j; + assert_approx_equals(getBox("ref00" + i).bottom, + getBox(baseId).bottom, + epsilon, + "alignment of " + baseId); + } + } + }, "Baseline alignment"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 1; i <= 4; i++) { + for (var j = 1; j <= 6; j++) { + var baseId = ("base00" + i) + j; + assert_approx_equals(getBox(baseId).height, + j == 2 || j == 5 ? + tallBaseHeight :shortBaseHeight, + epsilon, + "height of " + baseId); + } + } + }, "Heights of bases"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom, + shortBaseHeight, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 1; j <= 6; j++) { + var elId = "el001" + j; + var baseId = "base001" + j; + var underId = "under001" + j; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + 0, epsilon, + "gap between " + baseId + " and " + underId); + assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom, + v, epsilon, + "extra descender below " + underId); + } + }, "AccentBaseHeight, UnderbarExtraDescender"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom, + shortBaseHeight, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 1; j <= 6; j++) { + var elId = "el002" + j; + var baseId = "base002" + j; + var underId = "under002" + j; + var gap = (j == 2 || j == 3 ? 0 : v); + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + gap, epsilon, + "gap between " + baseId + " and " + underId); + } + }, "AccentBaseHeight, UnderbarVerticalGap"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom, + shortBaseHeight, epsilon, + "mover: nonaccent over short base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom, + tallBaseHeight, epsilon, + "mover: accent over tall base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom, + axisBaseHeight, epsilon, + "mover: accent over short base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom, + shortBaseHeight, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 1; j <= 6; j++) { + var elId = "el003" + j; + var baseId = "base003" + j; + if (j >= 4) { + var underId = "under003" + j; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + 0, epsilon, + "gap between " + baseId + " and " + underId); + } + var overId = "over003" + j; + assert_approx_equals(getBox(overId).top - getBox(elId).top, + v, epsilon, + "extra ascender below " + overId); + } + }, "AccentBaseHeight, OverbarExtraAscender"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + v = 11000 * emToPx; + assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom, + shortBaseHeight + v, epsilon, + "mover: nonaccent over short base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom, + tallBaseHeight, epsilon, + "mover: accent over tall base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom, + axisBaseHeight, epsilon, + "mover: accent over short base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom, + shortBaseHeight + v, epsilon, + "munderover: nonaccent over short base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom, + tallBaseHeight, epsilon, + "munderover: accent over tall base"); + assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom, + axisBaseHeight, epsilon, + "munderover: accent over short base"); + for (var j = 4; j <= 6; j++) { + var baseId = "base004" + j; + var underId = "under004" + j; + assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, + 0, epsilon, + "gap between " + baseId + " and " + underId); + } + }, "AccentBaseHeight, OverbarVerticalGap"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: accentbaseheight4000underbarextradescender5000;"> + <mspace id="ref001" height="1em" width="3em" style="background: green"/> + <munder style="background: cyan" id="el0011"> + <mspace id="base0011" height="3em" width="1em" style="background: black"/> + <mo id="under0011" style="color: blue">°</mo> + </munder> + <munder style="background: cyan" id="el0012"> + <mspace id="base0012" height="5em" width="1em" style="background: black"/> + <mo id="under0012" style="color: blue">˘</mo> + </munder> + <munder style="background: cyan" id="el0013"> + <mspace id="base0013" height="3em" width="1em" style="background: black"/> + <mo id="under0013" style="color: blue">˘</mo> + </munder> + <munderover style="background: cyan" id="el0014"> + <mspace id="base0014" height="3em" width="1em" style="background: black"/> + <mo id="under0014" style="color: blue">°</mo> + <mo id="over0014" style="color: red">°</mo> + </munderover> + <munderover style="background: cyan" id="el0015" accent="true"> + <mspace id="base0015" height="5em" width="1em" style="background: black"/> + <mo id="under0015" style="color: blue">˘</mo> + <mo id="over0015" style="color: red">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0016" accent="true"> + <mspace id="base0016" height="3em" width="1em" style="background: black"/> + <mo id="under0016" style="color: blue">˘</mo> + <mo id="over0016" style="color: red">˘</mo> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000underbarverticalgap7000;"> + <mspace id="ref002" height="1em" width="3em" style="background: green"/> + <munder style="background: cyan" id="el0021" accentunder="false"> + <mspace id="base0021" height="3em" width="1em" style="background: black"/> + <mo id="under0021" style="color: blue">˘</mo> + </munder> + <munder style="background: cyan" id="el0022"> + <mspace id="base0022" height="5em" width="1em" style="background: black"/> + <mo id="under0022" style="color: blue" accent="true">˘</mo> + </munder> + <munder style="background: cyan" id="el0023"> + <mspace id="base0023" height="3em" width="1em" style="background: black"/> + <mo id="under0023" style="color: blue" accent="true">°</mo> + </munder> + <munderover style="background: cyan" id="el0024"> + <mspace id="base0024" height="3em" width="1em" style="background: black"/> + <mo id="under0024" style="color: blue" accent="false">˘</mo> + <mo id="over0024" style="color: red" accent="false">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0025"> + <mspace id="base0025" height="5em" width="1em" style="background: black"/> + <mo id="under0025" style="color: blue" accent="false">˘</mo> + <mo id="over0025" style="color: red">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0026"> + <mspace id="base0026" height="3em" width="1em" style="background: black"/> + <mo id="under0026" style="color: blue" accent="false">˘</mo> + <mo id="over0026" style="color: red">˘</mo> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000overbarextraascender3000;"> + <mspace id="ref003" height="1em" width="3em" style="background: green"/> + <mover style="background: cyan" id="el0031"> + <mspace id="base0031" height="3em" width="1em" style="background: black"/> + <mo id="over0031" style="color: red">°</mo> + </mover> + <mover style="background: cyan" id="el0032" accent="true"> + <mspace id="base0032" height="5em" width="1em" style="background: black"/> + <mo id="over0032" style="color: red">°</mo> + </mover> + <mover style="background: cyan" id="el0033"> + <mspace id="base0033" height="3em" width="1em" style="background: black"/> + <mo id="over0033" style="color: red">˘</mo> + </mover> + <munderover style="background: cyan" id="el0034"> + <mspace id="base0034" height="3em" width="1em" style="background: black"/> + <mo id="under0034" style="color: blue">°</mo> + <mo id="over0034" style="color: red" accent="false">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0035" accent="true"> + <mspace id="base0035" height="5em" width="1em" style="background: black"/> + <mo id="under0035" style="color: blue">˘</mo> + <mo id="over0035" style="color: red">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0036" accent="true"> + <mspace id="base0036" height="3em" width="1em" style="background: black"/> + <mo id="under0036" style="color: blue">˘</mo> + <mo id="over0036" style="color: red">˘</mo> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: accentbaseheight4000overbarverticalgap11000;"> + <mspace id="ref004" height="1em" width="3em" style="background: green"/> + <mover style="background: cyan" id="el0041"> + <mspace id="base0041" height="3em" width="1em" style="background: black"/> + <mo id="over0041" style="color: red">°</mo> + </mover> + <mover style="background: cyan" id="el0042" accent="true"> + <mspace id="base0042" height="5em" width="1em" style="background: black"/> + <mo id="over0042" style="color: red">°</mo> + </mover> + <mover style="background: cyan" id="el0043"> + <mspace id="base0043" height="3em" width="1em" style="background: black"/> + <mo id="over0043" style="color: red">˘</mo> + </mover> + <munderover style="background: cyan" id="el0044"> + <mspace id="base0044" height="3em" width="1em" style="background: black"/> + <mo id="under0044" style="color: blue">°</mo> + <mo id="over0044" style="color: red" accent="false">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0045" accent="true"> + <mspace id="base0045" height="5em" width="1em" style="background: black"/> + <mo id="under0045" style="color: blue">˘</mo> + <mo id="over0045" style="color: red">˘</mo> + </munderover> + <munderover style="background: cyan" id="el0046" accent="true"> + <mspace id="base0046" height="3em" width="1em" style="background: black"/> + <mo id="under0046" style="color: blue">˘</mo> + <mo id="over0046" style="color: red">˘</mo> + </munderover> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-1.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-1.html new file mode 100644 index 0000000000..1c236eabed --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-1.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters (embellished operators)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Elements munder, mover, munderover (with an embelished operator base) correctly use the limit parameters from the MATH table."> +<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> +<style> + math, mspace, mo { + font-size: 10px; + } + @font-face { + font-family: lowerlimitbaselinedropmin3000; + src: url("/fonts/math/limits-lowerlimitbaselinedropmin3000.woff"); + } + @font-face { + font-family: lowerlimitgapmin11000; + src: url("/fonts/math/limits-lowerlimitgapmin11000.woff"); + } + @font-face { + font-family: upperlimitbaselinerisemin5000; + src: url("/fonts/math/limits-upperlimitbaselinerisemin5000.woff"); + } + @font-face { + font-family: upperlimitgapmin7000; + src: url("/fonts/math/limits-upperlimitgapmin7000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom, + v, epsilon, "munder: under shift"); + assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom, + v, epsilon, "munderover: under shift"); + }, "LowerLimitBaselineDropMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 11000 * emToPx; + assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom, + v, epsilon, "munder: under gap"); + assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom, + v, epsilon, "munderover: under gap"); + }, "LowerLimitGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom, + v, epsilon, "munderover: over shift"); + }, "UpperLimitBaselineRiseMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom, + v, epsilon, "munderover: over shift"); + }, "UpperLimitGapMin"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: lowerlimitbaselinedropmin3000;"> + <mspace id="ref0001" height="1em" width="3em" style="background: green"/> + <munder> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace id="under00011" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace id="under00012" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: lowerlimitgapmin11000;"> + <mspace id="ref0002" height="1em" width="3em" style="background: green"/> + <munder> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace id="under00021" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace id="under00022" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: upperlimitbaselinerisemin5000;"> + <mspace id="ref0003" height="1em" width="3em" style="background: green"/> + <mover> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace id="over00031" height="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00032" height="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: upperlimitgapmin7000;"> + <mspace id="ref0004" height="1em" width="3em" style="background: green"/> + <mover> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace id="over00041" depth="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mrow><mrow><mo movablelimits="false">∑</mo></mrow></mrow> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00042" depth="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-2.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-2.html new file mode 100644 index 0000000000..04a97786c4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-2.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Underscripts and Overscripts parameters (embellished operators)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Elements munder, mover, munderover (with an embelished operator base) correctly use the stretch stack parameters from the MATH table."> +<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> +<style> + math, mspace, mo { + font-size: 10px; + } + @font-face { + font-family: bottomshiftdown3000; + src: url("/fonts/math/stretchstack-bottomshiftdown3000.woff"); + } + @font-face { + font-family: gapbelowmin11000; + src: url("/fonts/math/stretchstack-gapbelowmin11000.woff"); + } + @font-face { + font-family: topshiftup5000; + src: url("/fonts/math/stretchstack-topshiftup5000.woff"); + } + @font-face { + font-family: gapabovemin7000; + src: url("/fonts/math/stretchstack-gapabovemin7000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom, + v, epsilon, "munder: under shift"); + assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom, + v, epsilon, "munderover: under shift"); + }, "StretchStackBottomShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 11000 * emToPx; + assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom, + v, epsilon, "munder: under gap"); + assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom, + v, epsilon, "munderover: under gap"); + }, "StretchStackGapBelowMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom, + v, epsilon, "munderover: over shift"); + }, "StretchStackTopShiftUp"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 7000 * emToPx; + assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom, + v, epsilon, "mover: over shift"); + assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom, + v, epsilon, "munderover: over shift"); + }, "StretchStackGapAboveMin"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: bottomshiftdown3000;"> + <mspace id="ref0001" height="1em" width="3em" style="background: green"/> + <munder> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace id="under00011" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace id="under00012" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: gapbelowmin11000;"> + <mspace id="ref0002" height="1em" width="3em" style="background: green"/> + <munder> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace id="under00021" depth="1em" width="3em" style="background: blue"/> + </munder> + <munderover> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace id="under00022" depth="1em" width="3em" style="background: blue"/> + <mspace height="1em" width="3em" style="background: black"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: topshiftup5000;"> + <mspace id="ref0003" height="1em" width="3em" style="background: green"/> + <mover> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace id="over00031" height="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00032" height="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math style="font-family: gapabovemin7000;"> + <mspace id="ref0004" height="1em" width="3em" style="background: green"/> + <mover> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace id="over00041" depth="1em" width="3em" style="background: blue"/> + </mover> + <munderover> + <mrow><mrow><mo>→</mo></mrow></mrow> + <mspace height="1em" width="3em" style="background: black"/> + <mspace id="over00042" depth="1em" width="3em" style="background: blue"/> + </munderover> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-001-ref.html new file mode 100644 index 0000000000..89ac9c6324 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-001-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Horizontal stretchy operator (reference)</title> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math, mo { + font-family: TestFont; + font-size: 50px; + } +</style> +<body> + <p>This test passes if you see green rectangles and no red.</p> + + <div style="position: absolute; left: 3em; top; 3em; + width: 1000px; height: 500px; background: lightgreen;"> + + <div style="position: absolute; top: 1px; left: 1px;"> + <!-- stretchy base in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 251px;"> + <!-- stretchy script in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 1px;"> + <!-- stretchy base in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 251px;"> + <!-- stretchy script in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 1px;"> + <!-- stretchy base in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 251px;"> + <!-- stretchy underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 1px;"> + <!-- stretchy overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 501px;"> + <!-- stretchy base and underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 151px; left: 501px;"> + <!-- stretchy base and overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 501px;"> + <!-- stretchy scripts in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 751px;"> + <!-- Only stretchy operators in munderover. The widest unstretched size + is used as the target size. --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + </div> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-001.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-001.html new file mode 100644 index 0000000000..6b0f99ec11 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-001.html @@ -0,0 +1,270 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Horizontal stretchy operator</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dfn-algorithm-for-stretching-operators-along-the-inline-axis"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators"> +<link rel="match" href="underover-stretchy-001-ref.html"/> +<meta name="assert" content="Verify visual rendering of padding/border/margin on an operator, stretchy along the inline axis."> +<script src="/mathml/support/feature-detection.js"></script> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math, mo { + font-family: TestFont; + font-size: 50px; + } +</style> +<body> + <p>This test passes if you see green rectangles and no red.</p> + <!-- The red mspace elements below are expected to be covered by the green + stretchy mo elements. --> + + <div style="position: absolute; left: 3em; top; 3em; + width: 1000px; height: 500px; background: lightgreen;"> + + <div style="position: absolute; top: 1px; left: 1px;"> + <!-- stretchy base in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 251px;"> + <!-- stretchy script in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munder> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 1px;"> + <!-- stretchy base in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 251px;"> + <!-- stretchy script in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </mover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 1px;"> + <!-- stretchy base in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 251px;"> + <!-- stretchy underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 1px;"> + <!-- stretchy overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 501px;"> + <!-- stretchy base and underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 151px; left: 501px;"> + <!-- stretchy base and overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 501px;"> + <!-- stretchy scripts in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 751px;"> + <!-- Only stretchy operators in munderover. The widest unstretched size + is used as the target size. --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="198px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="98px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + </div> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-002-ref.html new file mode 100644 index 0000000000..c12c74d654 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-002-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Horizontal stretchy operator, embellished with two nested mrows (reference)</title> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math, mo { + font-family: TestFont; + font-size: 50px; + } +</style> +<body> + <p>This test passes if you see green rectangles and no red.</p> + + <div style="position: absolute; left: 3em; top; 3em; + width: 1000px; height: 500px; background: lightgreen;"> + + <div style="position: absolute; top: 1px; left: 1px;"> + <!-- stretchy base in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 251px;"> + <!-- stretchy script in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 1px;"> + <!-- stretchy base in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 251px;"> + <!-- stretchy script in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 1px;"> + <!-- stretchy base in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 251px;"> + <!-- stretchy underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 1px;"> + <!-- stretchy overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 501px;"> + <!-- stretchy base and underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 151px; left: 501px;"> + <!-- stretchy base and overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 501px;"> + <!-- stretchy scripts in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 751px;"> + <!-- Only stretchy operators in munderover. The widest unstretched size + is used as the target size. --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + </div> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-002.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-002.html new file mode 100644 index 0000000000..a1cfa20bb4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-002.html @@ -0,0 +1,272 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Horizontal stretchy operator, embellished with two nested mrows</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dfn-algorithm-for-stretching-operators-along-the-inline-axis"> +<link rel="help" href="https://w3c.github.io/mathml-core/#algorithm-for-stretching-operators-along-the-block-axis"> +<link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators"> +<link rel="match" href="underover-stretchy-002-ref.html"/> +<meta name="assert" content="Verify visual rendering of padding/border/margin on an embellished operator, stretchy along the inline axis."> +<script src="/mathml/support/feature-detection.js"></script> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math, mo { + font-family: TestFont; + font-size: 50px; + } +</style> +<body> + <p>This test passes if you see green rectangles and no red.</p> + <!-- The red mspace elements below are expected to be covered by the green + stretchy mo elements. --> + + <div style="position: absolute; left: 3em; top; 3em; + width: 1000px; height: 500px; background: lightgreen;"> + + <div style="position: absolute; top: 1px; left: 1px;"> + <!-- stretchy base in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 251px;"> + <!-- stretchy script in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munder> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 1px;"> + <!-- stretchy base in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 251px;"> + <!-- stretchy script in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </mover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 1px;"> + <!-- stretchy base in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 251px;"> + <!-- stretchy underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 1px;"> + <!-- stretchy overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 501px;"> + <!-- stretchy base and underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 151px; left: 501px;"> + <!-- stretchy base and overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 501px;"> + <!-- stretchy scripts in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + <mrow><mrow><mo lspace="0" rspace="0" style="color: green;">⥚</mo></mrow></mrow> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 751px;"> + <!-- Only stretchy operators in munderover. The widest unstretched size + is used as the target size. --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="198px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="98px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + </div> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-003-ref.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-003-ref.html new file mode 100644 index 0000000000..02c7ce2efb --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-003-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Horizontal stretchy operator, embellished with an munderover (reference)</title> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math, mo { + font-family: TestFont; + font-size: 50px; + } +</style> +<body> + <p>This test passes if you see green rectangles and no red.</p> + + <div style="position: absolute; left: 3em; top; 3em; + width: 1000px; height: 500px; background: lightgreen;"> + + <div style="position: absolute; top: 1px; left: 1px;"> + <!-- stretchy base in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 251px;"> + <!-- stretchy script in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 1px;"> + <!-- stretchy base in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 251px;"> + <!-- stretchy script in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 1px;"> + <!-- stretchy base in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 251px;"> + <!-- stretchy underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 1px;"> + <!-- stretchy overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 501px;"> + <!-- stretchy base and underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 151px; left: 501px;"> + <!-- stretchy base and overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 501px;"> + <!-- stretchy scripts in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 751px;"> + <!-- Only stretchy operators in munderover. The widest unstretched size + is used as the target size. --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + </div> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-003.html b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-003.html new file mode 100644 index 0000000000..735fcab63e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/scripts/underover-stretchy-003.html @@ -0,0 +1,272 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Horizontal stretchy operator, embellished with an munderover</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dfn-algorithm-for-stretching-operators-along-the-inline-axis"> +<link rel="help" href="https://w3c.github.io/mathml-core/#algorithm-for-stretching-operators-along-the-block-axis"> +<link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators"> +<link rel="match" href="underover-stretchy-003-ref.html"/> +<meta name="assert" content="Verify visual rendering of padding/border/margin on an embellished operator, stretchy along the inline axis."> +<script src="/mathml/support/feature-detection.js"></script> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math, mo { + font-family: TestFont; + font-size: 50px; + } +</style> +<body> + <p>This test passes if you see green rectangles and no red.</p> + <!-- The red mspace elements below are expected to be covered by the green + stretchy mo elements. --> + + <div style="position: absolute; left: 3em; top; 3em; + width: 1000px; height: 500px; background: lightgreen;"> + + <div style="position: absolute; top: 1px; left: 1px;"> + <!-- stretchy base in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <mspace width="200px" height="0px"/> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 251px;"> + <!-- stretchy script in munder --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munder> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munder> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + </munder> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 1px;"> + <!-- stretchy base in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <mspace width="200px" height="0px"/> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 101px; left: 251px;"> + <!-- stretchy script in mover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </mover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <mover> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + </mover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 1px;"> + <!-- stretchy base in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 201px; left: 251px;"> + <!-- stretchy underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <mspace width="200px" height="0px"/> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 1px;"> + <!-- stretchy overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 501px;"> + <!-- stretchy base and underscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 151px; left: 501px;"> + <!-- stretchy base and overscript in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 301px; left: 501px;"> + <!-- stretchy scripts in munderover --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="200px" height="0px"/> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + <munderover><mo lspace="0" rspace="0" style="color: green;">⥚</mo><mspace/><mspace/></munderover> + </munderover> + </math> + </div> + </div> + + <div style="position: absolute; top: 1px; left: 751px;"> + <!-- Only stretchy operators in munderover. The widest unstretched size + is used as the target size. --> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mspace width="198px" height="48px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="198px" style="background: red; margin: 1px;"/> + <mspace width="198px" height="98px" style="background: red; margin: 1px;"/> + </munderover> + </math> + </div> + <div style="position: absolute; left: 0; top: 0;"> + <math> + <munderover> + <mo lspace="0" rspace="0" style="font-size: 1em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 4em; color: green;">⥚</mo> + <mo lspace="0" rspace="0" style="font-size: 2em; color: green;">⥚</mo> + </munderover> + </math> + </div> + </div> + </div> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_munderover"); + </script> +</body> +</html> |