diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations')
203 files changed, 10595 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html new file mode 100644 index 0000000000..e423b16fd7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-001.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Attribute mapping</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<meta name="assert" content="Verify that dir, mathcolor, mathbackground and mathsize are mapped to CSS but that deprecated MathML3 attributes are not."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + #container { + color: blue; + font-size: 50px; + } +</style> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() { + var container = document.getElementById("container"); + for (tag in MathMLFragments) { + container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); + } + Array.from(document.getElementsByClassName("element")).forEach(element => { + var tag = element.tagName; + var style = window.getComputedStyle(element); + + test(function() { + assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute"); + element.setAttribute("dir", "rtl"); + assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified"); + element.setAttribute("dir", "RtL"); + assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive"); + element.setAttribute("dir", "auto"); + assert_equals(style.getPropertyValue("direction"), "ltr", "auto"); + element.setAttribute("dir", "foo"); + assert_equals(style.getPropertyValue("direction"), "ltr", "random value"); + }, `dir on the ${tag} element is mapped to CSS direction`) + + test(function() { + assert_equals(style.getPropertyValue("color"), + "rgb(0, 0, 255)", + "no attribute"); + element.setAttribute("mathcolor", "black"); + assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified"); + // The color names are case-insensitive. + // See https://www.w3.org/TR/css-color-3/#html4 + element.setAttribute("mathcolor", "GrEeN"); + assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive"); + }, `mathcolor on the ${tag} element is mapped to CSS color`); + + test(function() { + assert_equals(style.getPropertyValue("background-color"), + tag === "merror" ? + "rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)", + "no attribute"); + element.setAttribute("mathbackground", "lightblue"); + assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified"); + // The color names are case-insensitive. + // See https://www.w3.org/TR/css-color-3/#html4 + element.setAttribute("mathbackground", "YeLlOw"); + assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive"); + }, `mathbackground on the ${tag} element is mapped to CSS background-color`); + + test(function() { + // "none" and "mprescripts" can only be used as non-first children of mmultiscripts so font-size + // is incremented and the resulting fraction string is hard to test accurately, skip for now. + if (tag === "none" || tag === "mprescripts") + return; + assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute"); + element.setAttribute("mathsize", "20px"); + assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified"); + // unit identifiers are ASCII case-insensitive. + // https://www.w3.org/TR/css-values-3/#typedef-dimension + element.setAttribute("mathsize", "30Px"); + assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive"); + }, `mathsize on the ${tag} element is mapped to CSS font-size`); + + test(function() { + assert_true(MathMLFeatureDetection.has_mathsize(), "Superseding attributes are supported"); + var properties = ["background-color", "color", "fontfamily", "font-size", "font-style", "font-weight"]; + var oldStyle = {}; + properties.forEach(property => { + oldStyle[property] = style.getPropertyValue(property); + }); + element.setAttribute("background", "red"); + element.setAttribute("color", "blue"); + element.setAttribute("fontfamily", "monospace"); + element.setAttribute("fontsize", "50px"); + element.setAttribute("fontstyle", "italic"); + element.setAttribute("fontweight", "bold"); + properties.forEach(property => { + assert_equals(style.getPropertyValue(property), oldStyle[property], `${property}`); + }); + }, `deprecated MathML3 attributes on the ${tag} element are not mapped to CSS`); + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <div id="container"> + <math class="element"></math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html new file mode 100644 index 0000000000..cad267731a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/attribute-mapping-002.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Attribute mapping</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<meta name="assert" content="Verify that mathvariant, scriptlevel, displaystyle are mapped to CSS"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + #container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function fontSize(style) { + return parseFloat((/(.+)px/).exec(style.getPropertyValue("font-size"))[1]); + } + function runTests() { + var container = document.getElementById("container"); + for (tag in MathMLFragments) { + container.insertAdjacentHTML("beforeend", `<math><mrow>${MathMLFragments[tag]}</mrow></math>`); + } + Array.from(document.getElementsByClassName("element")).forEach(element => { + var tag = element.tagName; + var style = window.getComputedStyle(element); + + test(function() { + assert_equals(style.getPropertyValue("text-transform"), + tag === "mi" ? "math-auto" : "none", + "no attribute"); + element.parentNode.setAttribute("style", "text-transform: uppercase"); + assert_equals(style.getPropertyValue("text-transform"), + tag === "mi" ? "math-auto" : "uppercase", + "text-transform on parent"); + element.setAttribute("mathvariant", "normal"); + assert_equals(style.getPropertyValue("text-transform"), + tag === "mi" ? "none" : "uppercase", "attribute specified"); + element.setAttribute("mathvariant", "NoRmAl"); + assert_equals(style.getPropertyValue("text-transform"), + tag === "mi" ? "none" : "uppercase", "case insensitive"); + }, `mathvariant on the ${tag} element is ${tag === "mi" ? "" : "not"} mapped to CSS text-transform`) + + test(function() { + // none and mprescripts appear as scripts + assert_equals(style.getPropertyValue("math-depth"), tag === "none" || tag === "mprescripts" ? "1" : "0", "no attribute"); + + var absoluteScriptlevel = 2; + element.setAttribute("scriptlevel", absoluteScriptlevel); + assert_equals(style.getPropertyValue("math-depth"), "" + absoluteScriptlevel, "attribute specified <U>"); + + var positiveScriptlevelDelta = 1; + element.setAttribute("scriptlevel", `+${positiveScriptlevelDelta}`); + assert_equals(style.getPropertyValue("math-depth"), "" + positiveScriptlevelDelta, "attribute specified +<U>"); + + var negativeScriptlevelDelta = -3; + element.setAttribute("scriptlevel", `${negativeScriptlevelDelta}`); + assert_equals(style.getPropertyValue("math-depth"), "" + negativeScriptlevelDelta, "attribute specified -<U>"); + + element.setAttribute("scriptlevel", absoluteScriptlevel); + element.setAttribute("mathsize", "42px"); + assert_approx_equals(fontSize(style), 42, 1, "mathsize wins over scriptlevel"); + + }, `scriptlevel on the ${tag} element is mapped to math-depth(...)`); + + test(function() { + element.removeAttribute("scriptlevel"); + // none and mprescripts appear as scripts + let expected = `${tag === "none" || tag === "mprescripts" ? "1" : "0"}`; + assert_equals(style.getPropertyValue("math-depth"), expected, "no attribute"); + + // FIXME: Should we test values " +1" and "+1 " here? + // See https://github.com/w3c/mathml/issues/122 + ["+-1", "--1", "+z1", "+ 1", "2.0", "-3\"", "200px", "add(2)"].forEach(invalid_value => { + element.setAttribute("scriptlevel", invalid_value); + assert_equals(style.getPropertyValue("math-depth"), expected, `invalid scriptlevel value '${invalid_value}'`); + }); + }, `invalid scriptlevel values on the ${tag} element are not mapped to math-depth(...)`); + + test(function() { + assert_equals(style.getPropertyValue("math-style"), "compact", "no attribute"); + element.setAttribute("displaystyle", "true"); + assert_equals(style.getPropertyValue("math-style"), "normal", "attribute specified"); + element.setAttribute("displaystyle", "TrUe"); + assert_equals(style.getPropertyValue("math-style"), "normal", "case insensitive"); + }, `displaystyle on the ${tag} element is mapped to CSS math-style`); + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <div id="container"> + <div><math class="element"></math></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html new file mode 100644 index 0000000000..21fc165b7d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Blur filter (reference)</title> +</head> +<body> + <p>Rectangles should be blurred.</p> + <div style="background: green; filter: blur(5px); width: 200px; height: 200px;"></div> + <div style="background: green; filter: blur(5px); width: 200px; height: 200px; position: absolute; top: 300px"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html new file mode 100644 index 0000000000..92a894bf34 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/blur-filter.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Blur filter</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="blur-filter-ref.html"/> +<meta name="assert" content="Verify that 'filter: blur' works on MathML elements."> +</head> +<body> + <p>Rectangles should be blurred.</p> + <div> + <math><mspace width="200px" height="200px" style="background: green; filter: blur(5px)"/></math> + </div> + <div style="position: absolute; top: 300px"> + <math style="filter: blur(5px)"><mspace width="200px" height="200px" style="background: green"/></math> + </div> + <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/relations/css-styling/clip-path-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html new file mode 100644 index 0000000000..57935564bf --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-path-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Clip property (reference)</title> +</head> +<body> + <p>Rectangles should be clipped to a polygon.</p> + <div style="background: green; width: 200px; height: 200px; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"></div> + <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html new file mode 100644 index 0000000000..abe58e2261 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-path.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Clip property</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="clip-path-ref.html"/> +<meta name="assert" content="Verify that the clip property works on MathML elements."> +</head> +<body> + <p>Rectangles should be clipped to a polygon.</p> + <div> + <math><mspace width="200px" height="200px" style="background: green; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"/></math> + </div> + <div style="position: absolute; top: 300px; width: 200px; height: 200px"> + <math style="position: absolute; clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"><mspace width="200px" height="200px" style="background: green"/></math> + </div> + <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/relations/css-styling/clip-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html new file mode 100644 index 0000000000..7882ac8c31 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/clip-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Clip property (reference)</title> +</head> +<body> + <p>Rectangles should be clipped.</p> + <div style="background: green; width: 200px; height: 200px; position: absolute; top: 100px; clip: rect(0px 100px 100px 0px)"></div> + <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; clip: rect(0px 100px 100px 0px)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/clip.html b/testing/web-platform/tests/mathml/relations/css-styling/clip.html new file mode 100644 index 0000000000..48b7753fd8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/clip.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Clip property</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="clip-ref.html"/> +<meta name="assert" content="Verify that the clip property works on MathML elements."> +</head> +<body> + <p>Rectangles should be clipped.</p> + <div> + <math><mspace width="200px" height="200px" style="position:absolute; top:100px; background: green; clip: rect(0px 100px 100px 0px)"/></math> + </div> + <div style="position: absolute; top: 300px; width: 200px; height: 200px"> + <math style="position: absolute; clip: rect(0px 100px 100px 0px)"><mspace width="200px" height="200px" style="background: green"/></math> + </div> + <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/relations/css-styling/color-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html new file mode 100644 index 0000000000..0efca480ee --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>color (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px; padding: 1px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-001.html b/testing/web-platform/tests/mathml/relations/css-styling/color-001.html new file mode 100644 index 0000000000..76d65f579c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>color</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="match" href="color-001-ref.html"/> +<meta name="assert" content="Verify that the color is used for the text of token elements."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;"> + <math><mi style="color: green">1</mi></math> + <math><mn style="color: green">2</mn></math> + <math><mo style="color: green">3</mo></math> + <math><mtext style="color: green">4</mtext></math> + <math><ms style="color: green">5</ms></math> + <div id="dynamic"> + <math><mi>1</mi></math> + <math><mn>2</mn></math> + <math><mo>3</mo></math> + <math><mtext>4</mtext></math> + <math><ms>5</ms></math> + </div> + </div> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html new file mode 100644 index 0000000000..0efca480ee --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-002-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>color (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px; padding: 1px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-002.html b/testing/web-platform/tests/mathml/relations/css-styling/color-002.html new file mode 100644 index 0000000000..bce24f54c8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>color</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness"> +<link rel="match" href="color-002-ref.html"/> +<meta name="assert" content="Verify that the color is used for text and fraction bar of the mfrac element."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;"> + <math><mfrac style="color: green"><mn>1</mn><mn>2</mn></mfrac></math> + <div id="dynamic"> + <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math> + </div> + </div> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html new file mode 100644 index 0000000000..0efca480ee --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-003-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>color (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px; padding: 1px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-003.html b/testing/web-platform/tests/mathml/relations/css-styling/color-003.html new file mode 100644 index 0000000000..dd04b61054 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>color</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radical-symbol"> +<link rel="match" href="color-003-ref.html"/> +<meta name="assert" content="Verify that the color is used for text and radical symbol of the msqrt and mroot elements."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;"> + <math><msqrt style="color: green"><mn>1</mn></msqrt></math> + <math><mroot style="color: green"><mn>2</mn><mn>2</mn></mroot></math> + <div id="dynamic"> + <math><msqrt><mn>1</mn></msqrt></math> + <math><mroot><mn>2</mn><mn>2</mn></mroot></math> + </div> + </div> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html new file mode 100644 index 0000000000..0efca480ee --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>color (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px; padding: 1px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html new file mode 100644 index 0000000000..4bd15e62a0 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-004.tentative.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>color</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://github.com/mathml-refresh/mathml-core/pull/24"> +<link rel="match" href="color-004.tentative-ref.html"/> +<meta name="assert" content="Verify that the color is used for text and graphical elements of the menclose element."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;"> + <math><menclose notation="left" style="color: green"><mn>1</mn></menclose></math> + <math><menclose notation="right" style="color: green"><mn>2</mn></menclose></math> + <math><menclose notation="top" style="color: green"><mn>3</mn></menclose></math> + <math><menclose notation="bottom" style="color: green"><mn>4</mn></menclose></math> + <math><menclose notation="box" style="color: green"><mn>5</mn></menclose></math> + <math><menclose notation="roundedbox" style="color: green"><mn>6</mn></menclose></math> + <math><menclose notation="actuarial" style="color: green"><mn>7</mn></menclose></math> + <math><menclose notation="madruwb" style="color: green"><mn>8</mn></menclose></math> + <math><menclose notation="horizontalstrike" style="color: green"><mn>9</mn></menclose></math> + <math><menclose notation="verticalstrike" style="color: green"><mn>10</mn></menclose></math> + <math><menclose notation="updiagonalstrike" style="color: green"><mn>11</mn></menclose></math> + <math><menclose notation="downdiagonalstrike" style="color: green"><mn>12</mn></menclose></math> + <math><menclose notation="longdiv" style="color: green"><mn>13</mn></menclose></math> + <math><menclose notation="circle" style="color: green"><mn>14</mn></menclose></math> + <div id="dynamic"> + <math><menclose notation="left"><mn>1</mn></menclose></math> + <math><menclose notation="right"><mn>2</mn></menclose></math> + <math><menclose notation="top"><mn>3</mn></menclose></math> + <math><menclose notation="bottom"><mn>4</mn></menclose></math> + <math><menclose notation="box"><mn>5</mn></menclose></math> + <math><menclose notation="roundedbox"><mn>6</mn></menclose></math> + <math><menclose notation="actuarial"><mn>7</mn></menclose></math> + <math><menclose notation="madruwb"><mn>8</mn></menclose></math> + <math><menclose notation="horizontalstrike"><mn>9</mn></menclose></math> + <math><menclose notation="verticalstrike"><mn>10</mn></menclose></math> + <math><menclose notation="updiagonalstrike"><mn>11</mn></menclose></math> + <math><menclose notation="downdiagonalstrike"><mn>12</mn></menclose></math> + <math><menclose notation="longdiv"><mn>13</mn></menclose></math> + <math><menclose notation="circle"><mn>14</mn></menclose></math> + </div> + </div> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html new file mode 100644 index 0000000000..0efca480ee --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-005-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>color (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px; padding: 1px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/color-005.html b/testing/web-platform/tests/mathml/relations/css-styling/color-005.html new file mode 100644 index 0000000000..f2660c9e62 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/color-005.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>color</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<link rel="match" href="color-005-ref.html"/> +<meta name="assert" content="Verify that the color is used for normal, stretchy and large operators."> +<style> + math { + font: 20px/1 Ahem; + } + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + mo { + font-family: operators; + } +</style> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div id="square" style="background: green; color: red; width: 200px; height: 200px; padding: 1px;"> + <math> + <!-- unstretched operators --> + <mo style="color: green">⥯</mo> + <mo style="color: green">+</mo> + <mo style="color: green">-</mo> + </math> + <math displaystyle="true"> + <!-- large operator --> + <mo largeop="true" style="color: green">⥯</mo> + </math> + <math> + <mrow> + <!-- stretchy, small size --> + <mspace height="2em"/> + <mo style="color: green">⥯</mo> + </mrow> + </math> + <math> + <mrow> + <!-- stretchy, large size --> + <mspace height="4em"/> + <mo style="color: green">⥯</mo> + </mrow> + </math> + <div id="dynamic"> + <math> + <!-- unstretched operators --> + <mo stretchy="false">⥯</mo> + <mo>+</mo> + <mo>-</mo> + </math> + <math displaystyle="true"> + <!-- large operator --> + <mo largeop="true">⥯</mo> + </math> + <math> + <mrow> + <!-- stretchy, small size --> + <mspace height="2em"/> + <mo>⥯</mo> + </mrow> + </math> + <math> + <mrow> + <!-- stretchy, large size --> + <mspace height="4em"/> + <mo>⥯</mo> + </mrow> + </math> + </div> + </div> + <script src="/mathml/support/fonts.js"></script> + <script> + window.addEventListener("load", () => loadAllFonts().then(() => { + document.getElementById("dynamic").style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + })); + </script> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_operator_spacing");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html b/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html new file mode 100644 index 0000000000..c471b0fc9d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/default-font-family.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Default font-family on the <math> root</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Verify that the default font-family is 'math'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="log"></div> + <div style="font-family: BB2F7F3E9FEE11EA96DF67A737751C2F;"> + <div id="inherited-reference"></div> + <math id="math-not-inherited"></math> + </div> + <math id="math-default"></math> + + <script> + function getFontFamily(id) { + return window.getComputedStyle(document.getElementById(id)).fontFamily; + } + + test(function () { + assert_equals(getFontFamily("inherited-reference"), "BB2F7F3E9FEE11EA96DF67A737751C2F"); + assert_not_equals(getFontFamily("math-not-inherited"), getFontFamily("inherited-reference")); + }, "Default font-family on <math> is not inherited"); + + test(function () { + assert_equals(getFontFamily("math-not-inherited"), "math"); + assert_equals(getFontFamily("math-default"), "math"); + }, "Default font-family on <math> is 'math'"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html new file mode 100644 index 0000000000..23f8b62dfa --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-semantics-and-maction.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Default properties on <semantics> and <maction></title> +<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation"> +<link rel="help" href="https://w3c.github.io/mathml-core/#enlivening-expressions"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Test that only the first children of semantics/maction are displayed."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="log"></div> + <div> + <math> + <semantics> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mn>5</mn> + </semantics> + <maction> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mn>5</mn> + </maction> + </math> + </div> + + <script> + ["semantics", "maction"].forEach(name => { + let element = document.getElementsByTagName(name)[0]; + test(() => { + let child = element.firstElementChild; + assert_not_equals(window.getComputedStyle(child).display, "none", `Child ${child.innerText} does not have display: none`); + for (child = child.nextElementSibling; child; child = child.nextElementSibling) { + assert_equals(window.getComputedStyle(child).display, "none", `Child ${child.innerText} has display: none`); + } + }, `Display value of children of the <${name}> element`); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html new file mode 100644 index 0000000000..c329935f2e --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/default-properties-on-the-math-root.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Default properties on the <math> root</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Test properties on the math root set by the UA stylesheet."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + math { + font-size: 100px; + } + .styled { + direction: rtl; + writing-mode: vertical-lr; + text-indent: .5em; + letter-spacing: .5em; + line-height: .5em; + word-spacing: .5em; + font-style: italic; + font-weight: bold; + } +</style> + +</head> +<body> + <div id="log"></div> + <div class="styled"> + <math id="ua"></math> + <math id="author" class="styled"></math> + </div> + + <script> + function getProperty(id, property) { + return window.getComputedStyle(document.getElementById(id))[property]; + } + [ + // Property name, value when specified from the UA, from the author. + ["direction", "ltr", "rtl"], + ["writing-mode", "horizontal-tb", "horizontal-tb"], // MathML Core level 1 only supports horizontal mode. + ["text-indent", "0px", "50px"], + ["letter-spacing", "normal", "50px"], + ["line-height", "normal", "50px"], + ["word-spacing", "0px", "50px"], + ["font-style", "normal", "italic"], + ["font-weight", "400", "700"] + ].forEach(([name, ua_value, author_value]) => { + test(function () { + assert_equals(getProperty("ua", name), ua_value, "when specified from the UA sheet"); + assert_equals(getProperty("author", name), author_value, "when specified by the author"); + }, `Value of ${name} on the <math> root`); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html new file mode 100644 index 0000000000..ce65aba18c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/display-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>display (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-1.html b/testing/web-platform/tests/mathml/relations/css-styling/display-1.html new file mode 100644 index 0000000000..5a9e4db687 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/display-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>display</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="display-1-ref.html"/> +<meta name="assert" content="Verify that the 'display: none' property works on MathML elements."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px;"> + <math style="display: none;"><mspace width="200px" height="200px" style="background: red"/></math> + </div> + <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/relations/css-styling/display-2.html b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html new file mode 100644 index 0000000000..1d0810bead --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/display-2.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Verify that one can override the layout of MathML elements with the CSS display property</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that one can override the display of a MathML element."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/fonts.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math { + font-family: inherit; + } + mfrac { + padding: 0; + } +</style> +<script> + const Xsize = 25; + const templates = { + "block display": `<math style="display: block;">XXX</math>`, + "block display with contrained width": `<math style="display: block; width: ${2*Xsize}px;">XXX</math>`, + "list display inside display block": `<math style="display: block">\ + <mmultiscripts style="display: list-item;">X</mmultiscripts>\ + <maction style="display: list-item;">X</maction>\ + <mpadded style="display: list-item;">X</mpadded>\ + <msqrt style="display: list-item;">X</msqrt>\ + <mroot style="display: list-item;">X</mroot>\ + <mtext style="display: list-item;">X</mtext>\ +</math>`, + "inline display": `<math style="display: inline;">XXX</math>`, + "inline-block display": `<math style="display: inline-block">XXX</math>`, + "table display (math)": `<math style="display: table">\ + <mfrac style='display: table-row'>\ + <msub style='display: table-cell'>X</msub>\ + <msup style='display: table-cell'>X</msup>\ + <msubsup style='display: table-cell'>X</msubsup>\ + </mfrac>\ + <mtable style='display: table-row'>\ + <munder style='display: table-cell'>X</munder>\ + <mover style='display: table-cell'>X</mover>\ + <munderover style='display: table-cell'>X</munderover>\ + </mtable>\ +</math>`, + "table display (mrow)": `<math display="block">\ +<mrow style="display: table">\ + <mfrac style='display: table-row'>\ + <msub style='display: table-cell'>X</msub>\ + <msup style='display: table-cell'>X</msup>\ + <msubsup style='display: table-cell'>X</msubsup>\ + </mfrac>\ + <mtable style='display: table-row'>\ + <munder style='display: table-cell'>X</munder>\ + <mover style='display: table-cell'>X</mover>\ + <munderover style='display: table-cell'>X</munderover>\ + </mtable>\ +</mrow></math>`, + "inline-table display (math)": `<math style="display: inline-table">\ + <mfrac style='display: table-row'>\ + <msub style='display: table-cell'>X</msub>\ + <msup style='display: table-cell'>X</msup>\ + <msubsup style='display: table-cell'>X</msubsup>\ + </mfrac>\ + <mtable style='display: table-row'>\ + <munder style='display: table-cell'>X</munder>\ + <mover style='display: table-cell'>X</mover>\ + <munderover style='display: table-cell'>X</munderover>\ + </mtable>\ +</math>`, + "inline-table display (mrow)": `<math display="block">\ +<mrow style="display: inline-table">\ + <mfrac style='display: table-row'>\ + <msub style='display: table-cell'>X</msub>\ + <msup style='display: table-cell'>X</msup>\ + <msubsup style='display: table-cell'>X</msubsup>\ + </mfrac>\ + <mtable style='display: table-row'>\ + <munder style='display: table-cell'>X</munder>\ + <mover style='display: table-cell'>X</mover>\ + <munderover style='display: table-cell'>X</munderover>\ + </mtable>\ +</mrow></math>`, + "flexbox display (math)": `<math style="display: flex; flex-direction: column;">XXX</math>`, + "flexbox display (mrow)": `<math display="block"><mrow style="display: flex; flex-direction: column;">XXX</mrow></math>`, + "grid display (math)": `<math style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</math>`, + "grid display (mrow)": `<math display="block"><mrow style="display: grid; grid-gap: 2px; grid-template-columns: ${Xsize}px ${Xsize}px ${Xsize}px;>">XXXXXXXXX</mrow></math>`, + "ruby display (math)": `<math style="display: ruby;">\ +<mrow style="display: ruby-base;">X</mrow>\ +<mrow style="display: ruby-text">XX</mrow>\ +</math>`, + "ruby display (mrow)": `<math display="block"><mrow style="display: ruby;">\ +<mrow style="display: ruby-base;">X</mrow>\ +<mrow style="display: ruby-text">XX</mrow>\ +</mrow></math>`, + "block display with column width (math)": `<math style="display: block; column-width: ${2*Xsize}px">\ + <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\ +</math>`, + "block display with column width (mrow)": `<math style="display: block"><mrow style="display: block; column-width: ${2*Xsize}px">\ + <mrow>XXXX</mrow><mrow>XXXX</mrow><mrow>XXXX</mrow>\ +</mrow></math>`, + }; + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + + for (let key in templates) { + if (!templates.hasOwnProperty(key)) + continue; + let mathtest = templates[key]. + replace(/X/g, `<mspace style="display: inline-block; width: ${Xsize}px; height: ${Xsize}px; background: black"></mspace>`); + let reference = mathtest. + replace(/maction|math|mfrac|mmultiscripts|mover|mover|mpadded|mrow|mspace|msubsup|msub|msup|mtable|munderover|munder|msqrt|mroot|mtext/g, "div"); + document.body.insertAdjacentHTML("beforeend", `<div style="font: 20px/1 Ahem; position: absolute;">\ +<div><span>${key}:</span>${mathtest}</div>\ +<div><span>${key}:</span>${reference}</div>\ +</div>`); + let div = document.body.lastElementChild; + let elementDiv = div.firstElementChild; + let referenceDiv = div.lastElementChild; + + test(function() { + const epsilon = 1; + compareLayout(elementDiv, referenceDiv, epsilon); + }, `${key}`); + + div.style = "display: none;"; // Hide the div after measurement. + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html b/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html new file mode 100644 index 0000000000..b18fdd6c8b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/display-contents.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>display: contents</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<meta name="assert" content="Verify that display: contents computes to display: none"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() { + var container = document.getElementById("container"); + for (tag in MathMLFragments) { + container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); + } + test(function() { + Array.from(document.getElementsByClassName("element")).forEach(element => { + var style = window.getComputedStyle(element); + element.setAttribute("style", "display: contents"); + assert_equals(style.getPropertyValue("display"), "none", `${tag}`); + }); + }, "display: contents computes to display: none"); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <div id="container"> + <math class="element"></math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html new file mode 100644 index 0000000000..b359414dc2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<style> +div { + width: 20px; + padding: 5px; + font-size: 40px; + overflow-x: scroll; + overflow-y: hidden; +} +</style> +<div> + <math display="block" style="width: min-content;"> + <mn>text</mn> + </math> +</div> +<div style="direction: rtl;"> + <math display="block" style="width: min-content;"> + <mn>text</mn> + </math> +</div> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html new file mode 100644 index 0000000000..33df26c3ee --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/display-with-overflow.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1416539"> +<link rel="match" href="display-with-overflow-ref.html"> +<meta name="assert" content="Use safe centering (so that content is reachable with scroll) for display=block centering."> +<style> +math { + width: 20px; + padding: 5px; + font-size: 40px; + overflow-x: scroll; + overflow-y: hidden; +} +</style> +<math display="block"> + <mn>text</mn> +</math> +<math display="block" style="direction: rtl;"> + <mn>text</mn> +</math> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html new file mode 100644 index 0000000000..400c46a245 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011-ref.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<html> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <!-- Test displaystyle on mstyle --> + <math> + <mstyle displaystyle="true"> + <munder><mo>O</mo><mo>O</mo></munder> + </mstyle> + <mstyle displaystyle="false"> + <msub><mo>O</mo><mo>O</mo></munder> + </mstyle> + </math> + + <!-- The mfrac element sets displaystyle to "false", or if it was already + false increments scriptlevel by 1, within numerator and denominator. + --> + <math> + <mstyle displaystyle="true"> + <mfrac> + <msub><mo>O</mo><mo>O</mo></msub> + <msub><mo>O</mo><mo>O</mo></msub> + </mfrac> + </mstyle> + </math> + + <!-- The mroot element increments scriptlevel by 2, and sets + displaystyle to "false", within index, but leaves both attributes + unchanged within base. + The msqrt element leaves both attributes unchanged within its + argument. --> + <math> + <mstyle displaystyle="true"> + <mroot> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + </mroot> + <msqrt> + <munder><mo>O</mo><mo>O</mo></munder> + </msqrt> + </mstyle> + </math> + +<!-- + The msub element [...] increments scriptlevel by 1, and sets displaystyle to + "false", within subscript, but leaves both attributes unchanged within base. + + The msup element [...] increments scriptlevel by 1, and sets displaystyle to + "false", within superscript, but leaves both attributes unchanged within + base. + + The msubsup element [...] increments scriptlevel by 1, and sets displaystyle + to "false", within subscript and superscript, but leaves both attributes + unchanged within base. + + The mmultiscripts element increments scriptlevel by 1, and sets displaystyle + to "false", within each of its arguments except base, but leaves both + attributes unchanged within base. + --> + <math> + <mstyle displaystyle="true"> + <msub> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + </msub> + <msup> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + </msup> + <msubsup> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + <msub><mo>O</mo><mo>O</mo></msub> + </msubsup> + <mmultiscripts> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + <msub><mo>O</mo><mo>O</mo></msub> + <mprescripts/> + <msub><mo>O</mo><mo>O</mo></msub> + <msub><mo>O</mo><mo>O</mo></msub> + </mmultiscripts> + </mstyle> + </math> + +<!-- + The munder element [...] always sets displaystyle to "false" within the + underscript, but increments scriptlevel by 1 only when accentunder is + "false". Within base, it always leaves both attributes unchanged. + + The mover element [...] always sets displaystyle to "false" within + overscript, but increments scriptlevel by 1 only when accent is "false". + Within base, it always leaves both attributes unchanged. + + The munderover [..] always sets displaystyle to "false" within underscript + and overscript, but increments scriptlevel by 1 only when accentunder or + accent, respectively, are "false". Within base, it always leaves both + attributes unchanged. +--> + <math> + <mstyle displaystyle="true"> + <munder> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + </munder> + <mover> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + </mover> + <munderover> + <munder><mo>O</mo><mo>O</mo></munder> + <msub><mo>O</mo><mo>O</mo></msub> + <msub><mo>O</mo><mo>O</mo></msub> + </munderover> + </mstyle> + </math> + +<!-- + The displaystyle attribute is allowed on the mtable element to set the + inherited value of the attribute. If the attribute is not present, the + mtable element sets displaystyle to "false" within the table elements. +--> + <math> + <mstyle displaystyle="false"> + <mtable displaystyle="true"> + <mtr> + <mtd> + <munder><mo>O</mo><mo>O</mo></munder> + </mtd> + </mtr> + </mtable> + </mstyle> + <mstyle displaystyle="true"> + <mtable> + <mtr> + <mtd> + <msub><mo>O</mo><mo>O</mo></msub> + </mtd> + </mtr> + </mtable> + </mstyle> + </math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html new file mode 100644 index 0000000000..a0bfc29ae5 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-011.html @@ -0,0 +1,168 @@ +<!DOCTYPE html> +<html> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <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/#subscripts-and-superscripts-msub-msup-msubsup"> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts"> + <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> + <link rel="match" href="displaystyle-011-ref.html"/> + <meta name="assert" content="Test the effect on displaystyle and movablelimits"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <!-- Test displaystyle on mstyle --> + <math> + <mstyle displaystyle="true"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mstyle> + <mstyle displaystyle="false"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mstyle> + </math> + + <!-- The mfrac element sets displaystyle to "false", or if it was already + false increments scriptlevel by 1, within numerator and denominator. + --> + <math> + <mstyle displaystyle="true"> + <mfrac> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mfrac> + </mstyle> + </math> + + <!-- The mroot element increments scriptlevel by 2, and sets + displaystyle to "false", within index, but leaves both attributes + unchanged within base. + The msqrt element leaves both attributes unchanged within its + argument. --> + <math> + <mstyle displaystyle="true"> + <mroot> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mroot> + <msqrt> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </msqrt> + </mstyle> + </math> + +<!-- + The msub element [...] increments scriptlevel by 1, and sets displaystyle to + "false", within subscript, but leaves both attributes unchanged within base. + + The msup element [...] increments scriptlevel by 1, and sets displaystyle to + "false", within superscript, but leaves both attributes unchanged within + base. + + The msubsup element [...] increments scriptlevel by 1, and sets displaystyle + to "false", within subscript and superscript, but leaves both attributes + unchanged within base. + + The mmultiscripts element increments scriptlevel by 1, and sets displaystyle + to "false", within each of its arguments except base, but leaves both + attributes unchanged within base. + --> + <math> + <mstyle displaystyle="true"> + <msub> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </msub> + <msup> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </msup> + <msubsup> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </msubsup> + <mmultiscripts> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mprescripts/> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mmultiscripts> + </mstyle> + </math> + +<!-- + The munder element [...] always sets displaystyle to "false" within the + underscript, but increments scriptlevel by 1 only when accentunder is + "false". Within base, it always leaves both attributes unchanged. + + The mover element [...] always sets displaystyle to "false" within + overscript, but increments scriptlevel by 1 only when accent is "false". + Within base, it always leaves both attributes unchanged. + + The munderover [..] always sets displaystyle to "false" within underscript + and overscript, but increments scriptlevel by 1 only when accentunder or + accent, respectively, are "false". Within base, it always leaves both + attributes unchanged. +--> + <math> + <mstyle displaystyle="true"> + <munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </munder> + <mover> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mover> + <munderover> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </munderover> + </mstyle> + </math> + +<!-- + The displaystyle attribute is allowed on the mtable element to set the + inherited value of the attribute. If the attribute is not present, the + mtable element sets displaystyle to "false" within the table elements. +--> + <math> + <mstyle displaystyle="false"> + <mtable displaystyle="true"> + <mtr> + <mtd> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mtd> + </mtr> + </mtable> + </mstyle> + <mstyle displaystyle="true"> + <mtable> + <mtr> + <mtd> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + </mtd> + </mtr> + </mtable> + </mstyle> + </math> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html new file mode 100644 index 0000000000..96042b696f --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <!-- Test the effect of displaystyle on munder, mover and munderover --> + <math> + <mstyle displaystyle="true"> + <munder><mo>O</mo><mo>O</mo></munder> + <mover><mo>O</mo><mo>O</mo></mover> + <munderover><mo>O</mo><mo>O</mo><mo>O</mo></munderover> + </mstyle> + <mstyle displaystyle="false"> + <msub><mo>O</mo><mo>O</mo></msub> + <msup><mo>O</mo><mo>O</mo></msup> + <msubsup><mo>O</mo><mo>O</mo><mo>O</mo></msubsup> + </mstyle> + </math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html new file mode 100644 index 0000000000..9fd4c784dd --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-012.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> + <link rel="match" href="displaystyle-012-ref.html"/> + <meta name="assert" content="Test the effect on displaystyle on munder, mover and munderover"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <math> + <mstyle displaystyle="true"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mover><mo movablelimits="true">O</mo><mo>O</mo></mover> + <munderover><mo movablelimits="true">O</mo><mo>O</mo><mo>O</mo></munderover> + </mstyle> + <mstyle displaystyle="false"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mover><mo movablelimits="true">O</mo><mo>O</mo></mover> + <munderover><mo movablelimits="true">O</mo><mo>O</mo><mo>O</mo></munderover> + </mstyle> + </math> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html new file mode 100644 index 0000000000..9a580350de --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <!-- Test dynamic change of displaystyle --> + <math id="m1" displaystyle="true"> + <munder><mo>O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </math> + <math> + <mstyle id="m2" displaystyle="true"> + <munder><mo>O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mstyle> + </math> + <math> + <mtable id="m3" displaystyle="true"> + <mtr> + <mtd> + <munder><mo>O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mtd> + </mtr> + </mtable> + </math> + <math id="m4" displaystyle="false"> + <msub><mo>O</mo><mo>O</mo></msub> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </math> + <math> + <mstyle id="m5" displaystyle="false"> + <msub><mo>O</mo><mo>O</mo></msub> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mstyle> + </math> + <math> + <mtable id="m6" displaystyle="false"> + <mtr> + <mtd> + <msub><mo>O</mo><mo>O</mo></msub> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mtd> + </mtr> + </mtable> + </math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html new file mode 100644 index 0000000000..3ce9fff062 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-013.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> + <link rel="help" href="https://w3c.github.io/mathml-core/#table-or-matrix-mtable"> + <link rel="match" href="displaystyle-013-ref.html"/> + <meta name="assert" content="Test dynamic change of displaystyle"> + <script src="/mathml/support/fonts.js"></script> + <script type="text/javascript"> + function doTest() { + document.body.offsetTop; // Update layout + document.getElementById("m1").setAttribute("displaystyle", "true"); + document.getElementById("m2").setAttribute("displaystyle", "true"); + document.getElementById("m3").setAttribute("displaystyle", "true"); + document.getElementById("m4").removeAttribute("displaystyle"); + document.getElementById("m5").removeAttribute("displaystyle"); + document.getElementById("m6").removeAttribute("displaystyle"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("load", () => { loadAllFonts().then(doTest); }); + </script> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <math id="m1"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </math> + <math> + <mstyle id="m2"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mstyle> + </math> + <math> + <mtable id="m3"> + <mtr> + <mtd> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mtd> + </mtr> + </mtable> + </math> + <math id="m4" displaystyle="true"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </math> + <math> + <mstyle id="m5" displaystyle="true"> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mstyle> + </math> + <math> + <mtable id="m6" displaystyle="true"> + <mtr> + <mtd> + <munder><mo movablelimits="true">O</mo><mo>O</mo></munder> + <mfrac><mn>1</mn><mn>2</mn></mfrac> + </mtd> + </mtr> + </mtable> + </math> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html new file mode 100644 index 0000000000..085e2c429d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=832800 --> + <math> + <mstyle displaystyle="true"> + <mfrac> + <mrow> + <mn>X</mn> + <mo id="mathOperator" mathbackground="red">+</mo> + <mfrac> + <mrow><mn>X</mn></mrow> + <mrow><mn>X</mn></mrow> + </mfrac> + </mrow> + <mrow> + <mn>X</mn> + </mrow> + </mfrac> + </mstyle> + </math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html new file mode 100644 index 0000000000..a4f1208e35 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-014.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>displaystyle</title> + <meta charset="utf-8"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> + <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="match" href="displaystyle-014-ref.html"/> + <meta name="assert" content="Test dynamic change of mathbackground on an operator does not interfer with its displaystyle"> + <script src="/mathml/support/fonts.js"></script> + <script type="text/javascript"> + function doTest() { + document.body.offsetTop; // Update layout + document.getElementById('mathOperator'). + setAttribute('mathbackground', 'red'); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("load", () => { loadAllFonts().then(doTest); }); + </script> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + math { + font: 25px Ahem; + } + </style> + </head> + <body> + + <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=832800 --> + <math> + <mstyle displaystyle="true"> + <mfrac> + <mrow> + <mn>X</mn> + <mo id="mathOperator">+</mo> + <mfrac> + <mrow><mn>X</mn></mrow> + <mrow><mn>X</mn></mrow> + </mfrac> + </mrow> + <mrow> + <mn>X</mn> + </mrow> + </mfrac> + </mstyle> + </math> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html new file mode 100644 index 0000000000..2e375c6886 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>displaystyle and display</title> + </head> + <body> + <math> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + <math displaystyle="true"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + <math display="inline" displaystyle="true"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + <math display="block" displaystyle="true"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + <math displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + <math display="inline" displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + <math display="block" displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html new file mode 100644 index 0000000000..e4a747fb20 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-015.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>displaystyle and display</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-dictionary"> + <link rel="match" href="displaystyle-015-ref.html"/> + <meta name="assert" content="Test interaction of math@display and displaystyle on an operator with movablelimits"> + </head> + <body> + <math> + <mstyle displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + <math> + <mstyle displaystyle="true"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + <math display="inline"> + <mstyle displaystyle="true"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + <math display="block"> + <mstyle displaystyle="true"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + <math> + <mstyle displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + <math display="inline"> + <mstyle displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + <math display="block"> + <mstyle displaystyle="false"> + <munderover> + <mo>∑</mo> + <mi>b</mi> + <mi>c</mi> + </munderover> + </mstyle> + </math> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_movablelimits");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html new file mode 100644 index 0000000000..26aed81d03 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-1.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>displaystyle</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property"> +<meta name="assert" content="Verify that the correct inheritance of the displaystyle value by measuring the size of large operators."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); + } + math { + font-family: TestFont; + font-size: 10px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/attribute-values.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script> + setup({ explicit_done: true }); + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 5; + function verify_displaystyle(elementId, displaystyle, description) { + var expectedSize = (displaystyle ? 5000 : 1000) * emToPx; + var elementSize = document.getElementById(elementId). + getBoundingClientRect().height; + assert_approx_equals(elementSize, expectedSize, epsilon, description); + } + + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + for (transform in AttributeValueTransforms) { + TransformAttributeValues(transform, ["display", "displaystyle"]); + test(function() { + verify_displaystyle("math_default", false, "default"); + verify_displaystyle("math_false", false, "explicit displaystyle false"); + verify_displaystyle("math_true", true, "explicit displaystyle true"); + }, `math element (${transform})`); + test(function() { + verify_displaystyle("math_inline", false, "explicit display inline"); + verify_displaystyle("math_block", true, "explicit display block"); + verify_displaystyle("math_block_false", false, "explicit display block and displaystyle false"); + verify_displaystyle("math_block_true", true, "explicit display block and displaystyle true"); + verify_displaystyle("math_inline_false", false, "explicit display inline and displaystyle false"); + verify_displaystyle("math_inline_true", true, "explicit display inline and displaystyle true"); + }, `math element (explicit display, ${transform})`); + test(function() { + verify_displaystyle("mstyle_false", false, "explicit displaystyle false"); + verify_displaystyle("mstyle_true", true, "explicit displaystyle true"); + }, `mstyle element (${transform})`); + test(function() { + verify_displaystyle("mtable_default", false, "default"); + verify_displaystyle("mtable_false", false, "explicit displaystyle false"); + verify_displaystyle("mtable_true", true, "explicit displaystyle true"); + }, `mtable element (${transform})`); + test(function() { + verify_displaystyle("mfrac_sibling", true, "sibling"); + verify_displaystyle("mfrac_numerator", false, "numerator"); + verify_displaystyle("mfrac_denominator", false, "denominator"); + }, `mfrac element (${transform})`); + test(function() { + verify_displaystyle("mroot_base", true, "base"); + verify_displaystyle("mroot_index", false, "index"); + }, `mroot element (${transform})`); + test(function() { + verify_displaystyle("msub_base", true, "base"); + verify_displaystyle("msub_subscript", false, "subscript"); + }, `msub element (${transform})`); + test(function() { + verify_displaystyle("msup_base", true, "base"); + verify_displaystyle("msup_supscript", false, "supscript"); + }, `msup element (${transform})`); + test(function() { + verify_displaystyle("msubsup_base", true, "base"); + verify_displaystyle("msubsup_subscript", false, "subscript"); + verify_displaystyle("msubsup_supscript", false, "supscript"); + }, `msubsup element (${transform})`); + test(function() { + verify_displaystyle("munder_base", true, "base"); + verify_displaystyle("munder_underscript", false, "underscript"); + }, `munder element (${transform})`); + test(function() { + verify_displaystyle("mover_base", true, "base"); + verify_displaystyle("mover_overscript", false, "overscript"); + }, `mover element (${transform})`); + test(function() { + verify_displaystyle("munderover_base", true, "base"); + verify_displaystyle("munderover_underscript", false, "underscript"); + verify_displaystyle("munderover_overscript", false, "overscript"); + }, `munderover element (${transform})`); + } + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <math><mo id="math_default">⫿</mo></math> + <math display="inline"><mo id="math_inline">⫿</mo></math> + <math display="block"><mo id="math_block">⫿</mo></math> + <math displaystyle="false"><mo id="math_false">⫿</mo></math> + <math displaystyle="true"><mo id="math_true">⫿</mo></math> + <math display="block" displaystyle="false"> + <mo id="math_block_false">⫿</mo> + </math> + <math display="block" displaystyle="true"> + <mo id="math_block_true">⫿</mo> + </math> + <math display="inline" displaystyle="false"> + <mo id="math_inline_false">⫿</mo> + </math> + <math display="inline" displaystyle="true"> + <mo id="math_inline_true">⫿</mo> + </math> + <math><mstyle displaystyle="false"><mo id="mstyle_false">⫿</mo></mstyle></math> + <math><mstyle displaystyle="true"><mo id="mstyle_true">⫿</mo></mstyle></math> + <math displaystyle="true"><mtable><mtr><mtd><mo id="mtable_default">⫿</mo></mtd></mtr></mtable></math> + <math><mtable displaystyle="true"><mtr><mtd><mo id="mtable_true">⫿</mo></mtd></mtr></mtable></math> + <math displaystyle="true"><mtable displaystyle="false"><mtr><mtd><mo id="mtable_false">⫿</mo></mtd></mtr></mtable></math> + <math displaystyle="true"><mo id="mfrac_sibling">⫿</mo><mfrac><mo id="mfrac_numerator">⫿</mo><mo id="mfrac_denominator">⫿</mo></mfrac></math> + <math displaystyle="true"><mroot><mo id="mroot_base">⫿</mo><mo id="mroot_index">⫿</mo></mroot></math> + <math displaystyle="true"><msub><mo id="msub_base">⫿</mo><mo id="msub_subscript">⫿</mo></msub></math> + <math displaystyle="true"><msup><mo id="msup_base">⫿</mo><mo id="msup_supscript">⫿</mo></msup></math> + <math displaystyle="true"><msubsup><mo id="msubsup_base">⫿</mo><mo id="msubsup_subscript">⫿</mo><mo id="msubsup_supscript">⫿</mo></msubsup></math> + <math displaystyle="true"><mmultiscripts><mo id="mmultiscripts_base">⫿</mo><mo id="mmultiscripts_subscript">⫿</mo><mo id="mmultiscripts_supscript">⫿</mo><mprescripts/><mo id="mmultiscripts_presubscript">⫿</mo><mo id="mmultiscripts_presupscript">⫿</mo></mmultiscripts></math> + <math displaystyle="true"><munder><mo id="munder_base">⫿</mo><mo id="munder_underscript">⫿</mo></munder></math> + <math displaystyle="true"><mover><mo id="mover_base">⫿</mo><mo id="mover_overscript">⫿</mo></mover></math> + <math displaystyle="true"><munderover><mo id="munderover_base">⫿</mo><mo id="munderover_underscript">⫿</mo><mo id="munderover_overscript">⫿</mo></munderover></math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html new file mode 100644 index 0000000000..68566cfc25 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-2.html @@ -0,0 +1,208 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>displaystyle</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property"> +<meta name="assert" content="Verify interaction between automatic displaystyle and specified displaystyle on descendants."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); + } + math, math * { + font-family: TestFont; + font-size: 10px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/attribute-values.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script> + setup({ explicit_done: true }); + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 5; + function verify_displaystyle(elementId, displaystyle, description) { + var expectedSize = (displaystyle ? 5000 : 1000) * emToPx; + var elementSize = document.getElementById(elementId). + getBoundingClientRect().height; + assert_approx_equals(elementSize, expectedSize, epsilon, description); + } + + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + for (transform in AttributeValueTransforms) { + TransformAttributeValues(transform, ["display", "displaystyle"]); + test(function() { + verify_displaystyle("cell_false", false, "cell with displaystyle false"); + verify_displaystyle("cell_true", true, "cell with displaystyle true"); + }, `mtable element (${transform})`); + test(function() { + verify_displaystyle("mfrac_numerator", true, "numerator"); + verify_displaystyle("mfrac_denominator", true, "denominator"); + }, `mfrac element (${transform})`); + test(function() { + verify_displaystyle("mroot_base", false, "base"); + verify_displaystyle("mroot_index", true, "index"); + }, `mroot element (${transform})`); + test(function() { + verify_displaystyle("msub_base", false, "base"); + verify_displaystyle("msub_subscript", true, "subscript"); + }, `msub element (${transform})`); + test(function() { + verify_displaystyle("msup_base", false, "base"); + verify_displaystyle("msup_superscript", true, "superscript"); + }, `msup element (${transform})`); + test(function() { + verify_displaystyle("msubsup_base", false, "base"); + verify_displaystyle("msubsup_subscript", true, "subscript"); + verify_displaystyle("msubsup_superscript", true, "superscript"); + }, `msubsup element (${transform})`); + test(function() { + verify_displaystyle("munder_base", false, "base"); + verify_displaystyle("munder_underscript", true, "underscript"); + }, `munder element (${transform})`); + test(function() { + verify_displaystyle("mover_base", false, "base"); + verify_displaystyle("mover_overscript", true, "overscript"); + }, `mover element (${transform})`); + test(function() { + verify_displaystyle("munderover_base", false, "base"); + verify_displaystyle("munderover_underscript", true, "underscript"); + verify_displaystyle("munderover_overscript", true, "overscript"); + }, `munderover element (${transform})`); + } + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <math displaystyle="true"> + <mtable> + <mtr> + <mtd> + <mstyle displaystyle="false"> + <mo id="cell_false">⫿</mo> + </mstyle> + </mtd> + <mtd> + <mstyle displaystyle="true"> + <mo id="cell_true">⫿</mo> + </mstyle> + </mtd> + </mtr> + </mtable> + </math> + <math> + <mfrac> + <mstyle displaystyle="true"> + <mo id="mfrac_numerator">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="mfrac_denominator">⫿</mo> + </mstyle> + </mfrac> + </math> + <math displaystyle="true"> + <mroot> + <mstyle displaystyle="false"> + <mo id="mroot_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="mroot_index">⫿</mo> + </mstyle> + </mroot> + </math> + <math displaystyle="true"> + <msub> + <mstyle displaystyle="false"> + <mo id="msub_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="msub_subscript">⫿</mo> + </mstyle> + </msub> + </math> + <math displaystyle="true"> + <msup> + <mstyle displaystyle="false"> + <mo id="msup_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="msup_superscript">⫿</mo> + </mstyle> + </msup> + </math> + <math displaystyle="true"> + <msubsup> + <mstyle displaystyle="false"> + <mo id="msubsup_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="msubsup_subscript">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="msubsup_superscript">⫿</mo> + </mstyle> + </msubsup> + </math> + <math displaystyle="true"> + <mmultiscripts> + <mstyle displaystyle="false"> + <mo id="mmultiscripts_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="mmultiscripts_subscript">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="mmultiscripts_superscript">⫿</mo> + </mstyle> + <mprescripts/> + <mstyle displaystyle="true"> + <mo id="mmultiscripts_presubscript">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="mmultiscripts_presuperscript">⫿</mo> + </mstyle> + </mmultiscripts> + </math> + <math displaystyle="true"> + <munder> + <mstyle displaystyle="false"> + <mo id="munder_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="munder_underscript">⫿</mo> + </mstyle> + </munder> + </math> + <math displaystyle="true"> + <mover> + <mstyle displaystyle="false"> + <mo id="mover_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="mover_overscript">⫿</mo> + </mstyle> + </mover> + </math> + <math displaystyle="true"> + <munderover> + <mstyle displaystyle="false"> + <mo id="munderover_base">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="munderover_underscript">⫿</mo> + </mstyle> + <mstyle displaystyle="true"> + <mo id="munderover_overscript">⫿</mo> + </mstyle> + </munderover> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html new file mode 100644 index 0000000000..a5bcab2aaa --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/displaystyle-3.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>displaystyle</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property"> +<meta name="assert" content="Verify the displaystyle of the underover element is considered (not the one of its base) to determine whether to move limits."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + math, math * { + font-family: Ahem; + font-size: 20px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + function runTests() { + ["munder", "mover", "munderover"].forEach((tag) => { + Array.from(document.getElementsByTagName(tag)).forEach(e => { + var displaystyle = e.getAttribute('displaystyle') === "true"; + test(function() { + assert_true(MathMLFeatureDetection.has_movablelimits()); + var elementRight = e.getBoundingClientRect().right; + var baseRight = e.firstElementChild.getBoundingClientRect().right; + if (displaystyle) + assert_approx_equals(elementRight, baseRight, 1); + else + assert_greater_than(elementRight, baseRight + 10); + }, `movablelimits for ${tag} element (displaystyle=${displaystyle})`); + }); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <math> + <munder displaystyle="false"> + <mo displaystyle="true" movablelimits="true">XX</mo> + <mtext>X</mtext> + </munder> + </math> + <math> + <mover displaystyle="false"> + <mo displaystyle="true" movablelimits="true">XX</mo> + <mtext>X</mtext> + </mover> + </math> + <math> + <munderover displaystyle="false"> + <mo displaystyle="true" movablelimits="true">XX</mo> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + <math> + <munder displaystyle="true"> + <mo displaystyle="false" movablelimits="true">XX</mo> + <mtext>X</mtext> + </munder> + </math> + <math> + <mover displaystyle="true"> + <mo displaystyle="false" movablelimits="true">XX</mo> + <mtext>X</mtext> + </mover> + </math> + <math> + <munderover displaystyle="true"> + <mo displaystyle="false" movablelimits="true">XX</mo> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html new file mode 100644 index 0000000000..111ea79e24 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Test dynamically changing dir attribute</title> +</head> +<body> + <p> + math: + <math dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </math> + <math dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </math> + <math> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </math> + </p> + <p> + mstyle: + <math> + <mstyle dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mstyle> + </math> + <math> + <mstyle dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mstyle> + </math> + <math> + <mstyle> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mstyle> + </math> + </p> + <p> + mrow: + <math> + <mrow dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mrow> + </math> + <math> + <mrow dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mrow> + </math> + <math> + <mrow> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mrow> + </math> + </p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html new file mode 100644 index 0000000000..d97505eff1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/dynamic-dir-1.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> + <meta charset="utf-8"> + <title>Test dynamically changing dir attribute</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> + <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> + <meta name="assert" content="The dir attribute should update direction map to css properties dynamically"> + <link rel="match" href="dynamic-dir-1-ref.html"> + <script> + window.addEventListener("load", () => { + + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + ["math", "mstyle", "mrow"].forEach((tag) => { + let elements = document.getElementsByTagName(tag); + + // set an explicit rtl where there was none + elements[0].setAttribute("dir", "rtl"); + + // change explicit ltr to rtl + elements[1].setAttribute("dir", "rtl"); + + // remove an explicitly set dir="rtl" + elements[2].removeAttribute("dir"); + + }) + + document.documentElement.classList.remove('reftest-wait'); + }) + </script> +</head> +<body> + <p> + math: + <math> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </math> + <math dir="ltr"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </math> + <math dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </math> + </p> + <p> + mstyle: + <math> + <mstyle> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mstyle> + </math> + <math> + <mstyle dir="ltr"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mstyle> + </math> + <math> + <mstyle dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mstyle> + </math> + </p> + <p> + mrow: + <math> + <mrow> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mrow> + </math> + <math> + <mrow dir="ltr"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mrow> + </math> + <math> + <mrow dir="rtl"> + <mi>a</mi> + <mi>b</mi> + <mi>c</mi> + </mrow> + </math> + </p> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html new file mode 100644 index 0000000000..8f25c9db06 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>floating inside display: block MathML (reference)</title> +</head> +<body> + <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p> + <div> + <div style="display: block"> + <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div><div style="float: left; display: inline-block; width: 100px; height: 100px; background: blue"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html new file mode 100644 index 0000000000..f398094e15 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-inside-mathml-with-block-display.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>floating inside display: block MathML</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="floating-inside-mathml-with-block-display-ref.html"/> +<meta name="assert" content="Verify that float works within a display: block MathML element."> +</head> +<body> + <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p> + <math> + <mrow style="display: block"> + <mspace style="display: inline-block; width: 50px; height: 50px; background: magenta"/><mspace style="float: left; display: inline-block; width: 100px; height: 100px; background: blue"/> + </mrow> + </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/relations/css-styling/floats/floating-math-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html new file mode 100644 index 0000000000..c82f395644 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>floating math (reference)</title> +</head> +<body> + <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p> + <div> + <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div> + <div style="float: left"><div style="width: 100px; height: 100px; background: blue"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html new file mode 100644 index 0000000000..1de54ccdcf --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/floating-math.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>floating math</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="floating-math-ref.html"/> +<meta name="assert" content="Verify that float applies to the <math> element."> +</head> +<body> + <p>Test passes if you see a blue square on the left and a smaller magenta square on the right.</p> + <div> + <div style="display: inline-block; width: 50px; height: 50px; background: magenta"></div> + <math style="float: left"><mspace width="100px" height="100px" style="background: blue"/></math> + </div> + <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/relations/css-styling/floats/not-floating-001.html b/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html new file mode 100644 index 0000000000..7166dea5f8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/floats/not-floating-001.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>float property in math layout</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Assert that float property is ignored for most math layout"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<style> + /* .element class defined in mathml-fragments.js */ + .element > * { + padding: 10px; + background: black; + } + /* override display: none on children of maction/semantics */ + maction > *, semantics > * { + display: math; + } +</style> +</head> +<body> + <div id="log"></div> + <div id="container"></div> + + <script> + let container = document.getElementById("container"); + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || + FragmentHelper.isEmpty(tag)) + continue; + + // Skip mtable since it does not use display: math. + if (tag == "mtable") + continue; + + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ +<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ +<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ +</div>`); + let div = document.body.lastElementChild; + let element = + FragmentHelper.element(div.firstElementChild); + let reference = + FragmentHelper.element(div.lastElementChild); + [element, reference].forEach(parent => { + if (parent.classList.contains("mathml-container") || + parent.classList.contains("foreign-container")) { + FragmentHelper.appendChild(parent); + FragmentHelper.appendChild(parent); + FragmentHelper.appendChild(parent); + } + }); + + // Try to use float to invert the order in which children are normally + // laid out. + function layoutChildrenFromLeftToRight(tag) { tag != 'mroot'; } + element.firstElementChild.style = + `float: ${layoutChildrenFromLeftToRight(tag) ? 'right' : 'left'};`; + element.lastElementChild.style = + `float: ${layoutChildrenFromLeftToRight(tag) ? 'left' : 'right'};`; + + test(function () { + let epsilon = 1; + compareLayout(element, reference, epsilon); + }, `float child ignored in ${tag}`); + + div.style = "display: none;"; // Hide the div after measurement. + } + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html b/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html new file mode 100644 index 0000000000..34de5836ea --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/ignored-properties-001.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Ignored CSS properties</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<meta name="assert" content="Verify style with ignored properties does not affect MathML layout."> +<meta name="timeout" content="long"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag)) + continue; + + var ignoredProperties = [ + "writing-mode: vertical-rl;", + "white-space: normal;", + "float: right;", + "align-content: end; justify-content: end;", + "align-self: end; justify-self: end;", + ]; + + ignoredProperties.forEach(ignoredStyle => { + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ +<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ +<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ +</div>`); + var div = document.body.lastElementChild; + + // Create MathML structure with ignored style properties. + var elementContainer = div.firstElementChild; + var elementContainerWidth = elementContainer.getBoundingClientRect().width; + var element = FragmentHelper.element(elementContainer); + if (!FragmentHelper.isEmpty(tag)) + FragmentHelper.forceNonEmptyDescendants(element); + element.setAttribute("style", ignoredStyle); + Array.from(element.getElementsByTagNameNS("*", FragmentHelper.mathml_namespace)).forEach(descendant => { + descendant.setAttribute("style", ignoredStyle); + }); + + var referenceContainer = div.lastElementChild; + var referenceContainerWidth = referenceContainer.getBoundingClientRect().width; + var reference = FragmentHelper.element(referenceContainer); + if (!FragmentHelper.isEmpty(tag)) + FragmentHelper.forceNonEmptyDescendants(reference); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon); + }, `${tag} preferred width calculation is not affected by ${ignoredStyle}`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + compareLayout(element, reference, epsilon); + }, `${tag} layout is not affected by ${ignoredStyle}`); + + div.style = "display: none;"; // Hide the div after measurement. + }); + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html new file mode 100644 index 0000000000..8e3d7b1c21 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>legacy scriptminsize attribute (reference)</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +</head> +<body> + <p>Test passes if you see a square of size 71px.</p> + <div> + <math> + <mstyle> + <mstyle scriptlevel="1"> + <mn>X</mn> + </mstyle> + </mstyle> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html new file mode 100644 index 0000000000..0ce87b6147 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptminsize-attribute.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>legacy scriptminsize attribute</title> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle.attrs"> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="match" href="legacy-scriptminsize-attribute-ref.html"/> +<meta name="assert" content="Verify scriptminsize attribute is no longer parsed."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +</head> +<body> + <p>Test passes if you see a square of size 71px.</p> + <div> + <math> + <mstyle scriptminsize="100px"> + <mstyle scriptlevel="1"> + <mn>X</mn> + </mstyle> + </mstyle> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html new file mode 100644 index 0000000000..422325da28 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>legacy scriptsizemultiplier attribute (reference)</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +</head> +<body> + <p>Test passes if you see a square of size 71px.</p> + <div> + <math> + <mstyle> + <mstyle scriptlevel="1"> + <mn>X</mn> + </mstyle> + </mstyle> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html new file mode 100644 index 0000000000..9a955612bc --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/legacy-scriptsizemultiplier-attribute.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>legacy scriptsizemultiplier attribute</title> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle.attrs"> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="match" href="legacy-scriptsizemultiplier-attribute-ref.html"/> +<meta name="assert" content="Verify scriptsizemultiplier attribute is no longer parsed."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +</head> +<body> + <p>Test passes if you see a square of size 71px.</p> + <div> + <math> + <mstyle scriptsizemultiplier="1"> + <mstyle scriptlevel="1"> + <mn>X</mn> + </mstyle> + </mstyle> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html new file mode 100644 index 0000000000..9fca6f4963 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML lengths (reference)</title> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + <div> + <div id="red" style="position: absolute; width: 200px; height: 200px; background: green;"> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html new file mode 100644 index 0000000000..896f08d111 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-1.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML lengths</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values"> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<link rel="match" href="lengths-1-ref.html"/> +<meta name="assert" content="Verify whether the different units are accepted for MathML lengths."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/xheight500.woff"); + } + span, math { + font-family: TestFont; + font-size: 10px; /* 1em = 10px, 1ex is about 5px */ + } + span { + position: absolute; + display: inline-block; + height: 10px; + } + #red > span { + background: red; + } + #green > span { + background: green; + } +</style> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + <div> + <div id="red" style="position: absolute; width: 200px; height: 200px; background: green;"> + <!-- px --> + <span style="top: 0px"><math><mspace width="200px"/></math></span> + <span style="top: 10px; width: 200px"></span> + + <!-- cm --> + <span style="top: 20px"><math><mspace width="5.08cm"/></math></span> + <span style="top: 30px; width: 192px"></span> + + <!-- em --> + <span style="top: 40px"><math><mspace width="20em"/></math></span> + <span style="top: 50px; width: 200px"></span> + + <!-- ex --> + <span style="top: 60px"><math><mspace width="30ex"/></math></span> + <span style="top: 70px; width: 30ex"></span> + + <!-- in --> + <span style="top: 80px"><math><mspace width="2in"/></math></span> + <span style="top: 90px; width: 192px"></span> + + <!-- mm --> + <span style="top: 100px"><math><mspace width="50.8mm"/></math></span> + <span style="top: 110px; width: 192px"></span> + + <!-- pc --> + <span style="top: 120px"><math><mspace width="12.5pc"/></math></span> + <span style="top: 130px; width: 200px"></span> + + <!-- pt --> + <span style="top: 140px"><math><mspace width="150pt"/></math></span> + <span style="top: 150px; width: 200px"></span> + + <!-- % --> + <span style="top: 160px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span> + <span style="top: 170px; width: 200px"></span> + + <!-- unitless nonzero values should be ignored --> + <span style="top: 180px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span> + <span style="top: 190px; width: 10px"></span> + </div> + + <div id="green" style="position: absolute; width: 200px; height: 200px;"> + <!-- px --> + <span style="top: 10px"><math><mspace width="200px"/></math></span> + <span style="top: 0px; width: 200px"></span> + + <!-- cm --> + <span style="top: 30px"><math><mspace width="5.08cm"/></math></span> + <span style="top: 20px; width: 192px"></span> + + <!-- em --> + <span title="em" style="top: 50px"><math><mspace width="20em"/></math></span> + <span title="em" style="top: 40px; width: 200px"></span> + + <!-- ex --> + <span title="ex" style="top: 70px"><math><mspace width="30ex"/></math></span> + <span title="ex" style="top: 60px; width: 30ex"></span> + + <!-- in --> + <span style="top: 90px"><math><mspace width="2in"/></math></span> + <span style="top: 80px; width: 192px"></span> + + <!-- mm --> + <span style="top: 110px"><math><mspace width="50.8mm"/></math></span> + <span style="top: 100px; width: 192px"></span> + + <!-- pc --> + <span style="top: 130px"><math><mspace width="12.5pc"/></math></span> + <span style="top: 120px; width: 200px"></span> + + <!-- pt --> + <span style="top: 150px"><math><mspace width="150pt"/></math></span> + <span style="top: 140px; width: 200px"></span> + + <!-- % --> + <span style="top: 170px"><math><mstyle mathsize="2000%"><mspace width="1em"/></mstyle></math></span> + <span style="top: 160px; width: 200px"></span> + + <!-- unitless nonzero values should be ignored --> + <span style="top: 190px"><math><mstyle mathsize="20.0"><mspace width="1em"/></mstyle></math></span> + <span style="top: 180px; width: 10px"></span> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html b/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html new file mode 100644 index 0000000000..942611a8da --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/lengths-2.html @@ -0,0 +1,266 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>MathML lengths</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values"> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<meta name="assert" content="Verify various cases of the MathML length syntax."> +<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> + @font-face { + font-family: TestFont; + src: url("/fonts/math/xheight500.woff"); + } + math { + font-family: TestFont; + font-size: 10px; + } +</style> +<script> + var epsilon = .5; + + 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()); + assert_equals(getBox("unitCm").width, 96, "cm"); + assert_equals(getBox("unitEm").width, 120, "em"); + assert_equals(getBox("unitEx").width, 500, "ex"); + assert_equals(getBox("unitIn").width, 288, "in"); + assert_equals(getBox("unitMm").width, 576, "mm"); + assert_equals(getBox("unitPc").width, 96, "pc"); + assert_equals(getBox("unitPercentage").width, 60, "%"); + assert_equals(getBox("unitPt").width, 96, "pt"); + assert_equals(getBox("unitPx").width, 123, "px"); + }, "Units"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_equals(getBox("spaceCm").width, 96, "cm"); + assert_equals(getBox("spaceEm").width, 120, "em"); + assert_equals(getBox("spaceEx").width, 500, "ex"); + assert_equals(getBox("spaceIn").width, 288, "in"); + assert_equals(getBox("spaceMm").width, 576, "mm"); + assert_equals(getBox("spacePc").width, 96, "pc"); + assert_equals(getBox("spacePercentage").width, 60, "%"); + assert_equals(getBox("spacePt").width, 96, "pt"); + assert_equals(getBox("spacePx").width, 123, "px"); + }, "Trimming of space"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(getBox("n0").width, 0, epsilon, "n0"); + assert_approx_equals(getBox("n1").width, 90, epsilon, "n1"); + assert_approx_equals(getBox("n2").width, 8, epsilon, "n2"); + assert_approx_equals(getBox("n4").width, 650, epsilon, "n4"); + assert_approx_equals(getBox("n5").width, 4320, epsilon, "n5"); + assert_approx_equals(getBox("n6").width, 1, epsilon, "n6"); + assert_approx_equals(getBox("n7").width, 8, epsilon, "n7"); + assert_approx_equals(getBox("n8").width, 65, epsilon, "n8"); + assert_approx_equals(getBox("n9").width, 432, epsilon, "n9"); + assert_approx_equals(getBox("n10").width, 123, epsilon, "n10"); + }, "Non-negative numbers"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var topRef = getBox("ref").top; + assert_approx_equals(getBox("N0").top - topRef, -0, epsilon, "N0"); + assert_approx_equals(topRef - getBox("N1").top, -90, epsilon, "N1"); + assert_approx_equals(topRef - getBox("N2").top, -8, epsilon, "N2"); + assert_approx_equals(topRef - getBox("N4").top, -650, epsilon, "N4"); + assert_approx_equals(topRef - getBox("N5").top, -4320, epsilon, "N5"); + assert_approx_equals(topRef - getBox("N6").top, -1, epsilon, "N6"); + assert_approx_equals(topRef - getBox("N7").top, -8, epsilon, "N7"); + assert_approx_equals(topRef - getBox("N8").top, -65, epsilon, "N8"); + assert_approx_equals(topRef - getBox("N9").top, -432, epsilon, "N9"); + assert_approx_equals(topRef - getBox("N10").top, -123, epsilon, "N10"); + }, "Non-positive numbers"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + // Namedspace values are invalid in MathML Core. + ["veryverythinmathspace", + "verythinmathspace", + "thinmathspace", + "mediummathspace", + "thickmathspace", + "verythickmathspace", + "veryverythickmathspace", + "negativeveryverythinmathspace", + "negativeverythinmathspace", + "negativethinmathspace", + "negativemediummathspace", + "negativethickmathspace", + "negativeverythickmathspace", + "negativeveryverythickmathspace" + ].forEach(function(space) { + var mrow = document.getElementById(space); + var boxBefore = mrow.firstElementChild.getBoundingClientRect(); + var boxAfter = mrow.lastElementChild.getBoundingClientRect(); + assert_equals(boxAfter.left - boxBefore.right, 0, space); + }); + }, "Legacy namedspaces"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + // These values are invalid in MathML Core. + assert_equals(getBox("unitNone").width, 30, "Unitless"); + assert_approx_equals(getBox("n3").width, 0, epsilon, "n3"); + var topRef = getBox("ref").top; + assert_approx_equals(topRef - getBox("N3").top, 0, epsilon, "N3"); + }, "Legacy numbers"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="unitCm" width="2.54cm"/> + <mspace id="unitEm" width="12em"/> + <mspace id="unitEx" width="100ex"/> + <mspace id="unitIn" width="3in"/> + <mspace id="unitMm" width="152.4mm"/> + <mspace id="unitPc" width="6pc"/> + <mstyle mathsize="200%"><mspace id="unitPercentage" width="3em"/></mstyle> + <mspace id="unitPt" width="72pt"/> + <mspace id="unitPx" width="123px"/> + <mstyle mathsize="5"><mspace id="unitNone" width="3em"/></mstyle> + </math> + </p> + <p> + <math> + <mspace id="spaceCm" width=" 	

 	

2.54cm 	

 	

"/> + <mspace id="spaceEm" width=" 	

 	

12em 	

 	

"/> + <mspace id="spaceEx" width=" 	

 	

100ex 	

 	

"/> + <mspace id="spaceIn" width=" 	

 	

3in 	

 	

"/> + <mspace id="spaceMm" width=" 	

 	

152.4mm 	

 	

"/> + <mspace id="spacePc" width=" 	

 	

6pc 	

 	

"/> + <mstyle mathsize="200%"><mspace id="spacePercentage" width=" 	

 	

3em 	

 	

"/></mstyle> + <mspace id="spacePt" width=" 	

 	

72pt 	

 	

"/> + <mspace id="spacePx" width=" 	

 	

123px 	

 	

"/> + </math> + </p> + <p> + <math> + <mspace id="n0" width="0em"/> + <mspace id="n1" width="9em"/> + <mspace id="n2" width=".8em"/> + <mspace id="n3" width="7.em"/> + <mspace id="n4" width="65em"/> + <mspace id="n5" width="432em"/> + <mspace id="n6" width=".10em"/> + <mspace id="n7" width=".789em"/> + <mspace id="n8" width="6.5em"/> + <mspace id="n9" width="43.21em"/> + <mspace id="n10" width="012.345em"/> + </math> + </p> + <p> + <math> + <mspace id="ref"></mspace> + <mpadded voffset="-0em"><mspace id="N0"/></mpadded> + <mpadded voffset="-9em"><mspace id="N1"/></mpadded> + <mpadded voffset="-.8em"><mspace id="N2"/></mpadded> + <mpadded voffset="-7.em"><mspace id="N3"/></mpadded> + <mpadded voffset="-65em"><mspace id="N4"/></mpadded> + <mpadded voffset="-432em"><mspace id="N5"/></mpadded> + <mpadded voffset="-.10em"><mspace id="N6"/></mpadded> + <mpadded voffset="-.789em"><mspace id="N7"/></mpadded> + <mpadded voffset="-6.5em"><mspace id="N8"/></mpadded> + <mpadded voffset="-43.21em"><mspace id="N9"/></mpadded> + <mpadded voffset="-012.345em"><mspace id="N10"/></mpadded> + </math> + </p> + <p> + <math> + <mrow id="veryverythinmathspace"> + <mspace width="1em"/> + <mspace width="veryverythinmathspace"/> + <mspace/> + </mrow> + <mrow id="verythinmathspace"> + <mspace width="1em"/> + <mspace width="verythinmathspace"/> + <mspace/> + </mrow> + <mrow id="thinmathspace"> + <mspace width="1em"/> + <mspace width="thinmathspace"/> + <mspace/> + </mrow> + <mrow id="mediummathspace"> + <mspace width="1em"/> + <mspace width="mediummathspace"/> + <mspace/> + </mrow> + <mrow id="thickmathspace"> + <mspace width="1em"/> + <mspace width="thickmathspace"/> + <mspace/> + </mrow> + <mrow id="verythickmathspace"> + <mspace width="1em"/> + <mspace width="verythickmathspace"/> + <mspace/> + </mrow> + <mrow id="veryverythickmathspace"> + <mspace width="1em"/> + <mspace width="veryverythickmathspace"/> + <mspace/> + </mrow> + </math> + <math> + <mrow id="negativeveryverythinmathspace"> + <mspace width="1em"/> + <mspace width="veryverythinmathspace"/> + <mspace/> + </mrow> + <mrow id="negativeverythinmathspace"> + <mspace width="1em"/> + <mspace width="verythinmathspace"/> + <mspace/> + </mrow> + <mrow id="negativethinmathspace"> + <mspace width="1em"/> + <mspace width="thinmathspace"/> + <mspace/> + </mrow> + <mrow id="negativemediummathspace"> + <mspace width="1em"/> + <mspace width="mediummathspace"/> + <mspace/> + </mrow> + <mrow id="negativethickmathspace"> + <mspace width="1em"/> + <mspace width="thickmathspace"/> + <mspace/> + </mrow> + <mrow id="negativeverythickmathspace"> + <mspace width="1em"/> + <mspace width="verythickmathspace"/> + <mspace/> + </mrow> + <mrow id="negativeveryverythickmathspace"> + <mspace width="1em"/> + <mspace width="veryverythickmathspace"/> + <mspace/> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html new file mode 100644 index 0000000000..65e2781c5e --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on mrow (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mrow mathbackground="green"> + <mtext>□■□■□■□</mtext> + </mrow> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html new file mode 100644 index 0000000000..e71fc53eaa --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on mrow</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="mismatch" href="mathbackground-001-notref.html"/> +<meta name="assert" content="mathbackground on a mrow has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mrow mathbackground="red"> + <mtext>□■□■□■□</mtext> + </mrow> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html new file mode 100644 index 0000000000..8c984c2619 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on mstyle (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mstyle mathbackground="green"> + <mtext>□■□■□■□</mtext> + </mstyle> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html new file mode 100644 index 0000000000..09407d9269 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on mstyle</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="mismatch" href="mathbackground-002-notref.html"/> +<meta name="assert" content="mathbackground on a mstyle has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mstyle mathbackground="red"> + <mtext>□■□■□■□</mtext> + </mstyle> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html new file mode 100644 index 0000000000..b6adaa8d4e --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003-notref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on mtext (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mtext mathbackground="green">□■□■□■□</mtext> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html new file mode 100644 index 0000000000..8cb11889db --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on mtext</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="mismatch" href="mathbackground-003-notref.html"/> +<meta name="assert" content="mathbackground on a mtext has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mtext mathbackground="red">□■□■□■□</mtext> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html new file mode 100644 index 0000000000..75465a6c38 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on semantics (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <semantics mathbackground="red"> + <mtext>□■□■□■□</mtext> + </semantics> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html new file mode 100644 index 0000000000..be174cdbde --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathbackground-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathbackground on semantics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation"> +<link rel="mismatch" href="mathbackground-004-notref.html"/> +<meta name="assert" content="mathbackground on a semantics has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <semantics mathbackground="green"> + <mtext>□■□■□■□</mtext> + </semantics> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html new file mode 100644 index 0000000000..9bc1ba5436 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on mrow (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mrow mathcolor="green"> + <mtext>□■□■□■□</mtext> + </mrow> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html new file mode 100644 index 0000000000..2c463cac87 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on mrow</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> +<link rel="mismatch" href="mathcolor-001-notref.html"/> +<meta name="assert" content="mathcolor on a mrow has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mrow mathcolor="red"> + <mtext>□■□■□■□</mtext> + </mrow> +</math> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html new file mode 100644 index 0000000000..5f9fd2bb9b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on mstyle (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mstyle mathcolor="green"> + <mtext>□■□■□■□</mtext> + </mstyle> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html new file mode 100644 index 0000000000..147d41b46d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on mstyle</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> +<link rel="mismatch" href="mathcolor-002-notref.html"/> +<meta name="assert" content="mathcolor on a mstyle has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mstyle mathcolor="red"> + <mtext>□■□■□■□</mtext> + </mstyle> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html new file mode 100644 index 0000000000..11e018ebc1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003-notref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on mtext (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mtext mathcolor="green">□■□■□■□</mtext> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html new file mode 100644 index 0000000000..5565b0d837 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on mtext</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="mismatch" href="mathcolor-003-notref.html"/> +<meta name="assert" content="mathcolor on a mtext has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <mtext mathcolor="red">□■□■□■□</mtext> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html new file mode 100644 index 0000000000..67a45249e5 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on semantics (reference)</title> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <semantics mathcolor="red"> + <mtext>□■□■□■□</mtext> + </semantics> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html new file mode 100644 index 0000000000..3ea37fecdb --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>mathcolor on semantics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation"> +<link rel="mismatch" href="mathcolor-004-notref.html"/> +<meta name="assert" content="mathcolor on a semantics has a visual effect."> +<math xmlns="http://www.w3.org/1998/Math/MathML"> + <semantics mathcolor="green"> + <mtext>□■□■□■□</mtext> + </semantics> +</math> + diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html new file mode 100644 index 0000000000..682fa64233 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS color (reference)</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + math { + font-family: Ahem; + font-size: 20px; + } +</style> +</style> +</head> +<body> + <p>Test passes if you see a green rectangle:</p> + <p> + <math mathbackground="#0f0" mathcolor="#0f0"> + <mtext>X X</mtext> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html new file mode 100644 index 0000000000..2f53215346 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathcolor-mathbackground-css.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS color</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values"> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="match" href="mathcolor-mathbackground-css-ref.html"/> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="assert" content="Verify that the mathcolor and mathbackground attributes use the CSS definition of colors."> +<style> + math { + font-family: Ahem; + font-size: 20px; + } +</style> +</style> +</head> +<body> + <p>Test passes if you see a green rectangle:</p> + <p style="color: red"> + <math mathbackground="rgb(0,255,0)" mathcolor="rgb(0,255,0)"> + <mtext>X X</mtext> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html new file mode 100644 index 0000000000..ebb12a6c6c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>mathsize and css keywords</title> + </head> + <body> + <p>Test passes if you see 14 "A" of equal size:</p> + <math> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html new file mode 100644 index 0000000000..2daed4cdea --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-css-keywords.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>mathsize and css keywords</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> + <meta name="assert" content="Verify that CSS font-size keywords are invalid for the mathsize attribute."> + <link rel="match" href="mathsize-attribute-css-keywords-ref.html"> + <script src="/mathml/support/feature-detection.js"></script> + </head> + <body> + <p>Test passes if you see 14 "A" of equal size:</p> + <math> + <mtext>A</mtext> + <mtext mathsize="xx-small">A</mtext> + <mtext mathsize="x-small">A</mtext> + <mtext mathsize="small">A</mtext> + <mtext mathsize="medium">A</mtext> + <mtext mathsize="large">A</mtext> + <mtext mathsize="x-large">A</mtext> + <mtext mathsize="xx-large">A</mtext> + <mtext mathsize="larger">A</mtext> + <mtext mathsize="smaller">A</mtext> + <mtext mathsize="xx-ſmall">A</mtext> + <mtext mathsize="x-ſmall">A</mtext> + <mtext mathsize="ſmall">A</mtext> + <mtext mathsize="ſmaller">A</mtext> + </math> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mathsize");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html new file mode 100644 index 0000000000..687efa49be --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Legacy mathsize values</title> + </head> + <body> + <p>Test passes if you see four "A" of equal size:</p> + <math> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + <mtext>A</mtext> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html new file mode 100644 index 0000000000..aebf09f9b8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-legacy-values.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Legacy mathsize values</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> + <meta name="assert" content="Verify that legacy values for mathsize have no effect."> + <link rel="match" href="mathsize-attribute-legacy-values-ref.html"> + <script src="/mathml/support/feature-detection.js"></script> + </head> + <body> + <p>Test passes if you see four "A" of equal size:</p> + <math> + <mtext>A</mtext> + <mtext mathsize="small">A</mtext> + <mtext mathsize="medium">A</mtext> + <mtext mathsize="big">A</mtext> + </math> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mathsize");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html new file mode 100644 index 0000000000..7a0450e51e --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Verify mathsize attribute</title> + </head> + <body> + + <!-- The style attribute should have the same effect as the mathsize + attribute. --> + <div> + <math> + <mi style="font-size: 200%;">x</mi> + <mi style="font-size: 3em;">x</mi> + </math> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html new file mode 100644 index 0000000000..66bcb6dd25 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathsize-attribute.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Verify mathsize attribute</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> + <meta name="assert" content="Verify mathsize attribute values."> + <link rel="match" href="mathsize-attribute-ref.html"> + </head> + <body> + + <!-- This verifies the effect of the mathsize attribute. --> + <div> + <math> + <mi mathsize="200%">x</mi> + <mi mathsize="3em">x</mi> + </math> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html new file mode 100644 index 0000000000..105ba412e6 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-ref.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>mathvariant auto (reference)</title> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/mathvariant-italic.woff"); + } + body > span { + padding: 10px; + } + span > span { + font-family: monospace; + font-size: 10px; + } + .testfont { + font-family: TestFont; + font-size: 10px; + } +</style> +<body> + <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. --> + <p>Test passes if all the equalities below are true.</p> + <span><math class="testfont"><mi>𝐴</mi></math>=<span>1D434</span></span> + <span><math class="testfont"><mi>𝐵</mi></math>=<span>1D435</span></span> + <span><math class="testfont"><mi>𝐶</mi></math>=<span>1D436</span></span> + <span><math class="testfont"><mi>𝐷</mi></math>=<span>1D437</span></span> + <span><math class="testfont"><mi>𝐸</mi></math>=<span>1D438</span></span> + <span><math class="testfont"><mi>𝐹</mi></math>=<span>1D439</span></span> + <span><math class="testfont"><mi>𝐺</mi></math>=<span>1D43A</span></span> + <span><math class="testfont"><mi>𝐻</mi></math>=<span>1D43B</span></span> + <span><math class="testfont"><mi>𝐼</mi></math>=<span>1D43C</span></span> + <span><math class="testfont"><mi>𝐽</mi></math>=<span>1D43D</span></span><br/> + <span><math class="testfont"><mi>𝐾</mi></math>=<span>1D43E</span></span> + <span><math class="testfont"><mi>𝐿</mi></math>=<span>1D43F</span></span> + <span><math class="testfont"><mi>𝑀</mi></math>=<span>1D440</span></span> + <span><math class="testfont"><mi>𝑁</mi></math>=<span>1D441</span></span> + <span><math class="testfont"><mi>𝑂</mi></math>=<span>1D442</span></span> + <span><math class="testfont"><mi>𝑃</mi></math>=<span>1D443</span></span> + <span><math class="testfont"><mi>𝑄</mi></math>=<span>1D444</span></span> + <span><math class="testfont"><mi>𝑅</mi></math>=<span>1D445</span></span> + <span><math class="testfont"><mi>𝑆</mi></math>=<span>1D446</span></span> + <span><math class="testfont"><mi>𝑇</mi></math>=<span>1D447</span></span><br/> + <span><math class="testfont"><mi>𝑈</mi></math>=<span>1D448</span></span> + <span><math class="testfont"><mi>𝑉</mi></math>=<span>1D449</span></span> + <span><math class="testfont"><mi>𝑊</mi></math>=<span>1D44A</span></span> + <span><math class="testfont"><mi>𝑋</mi></math>=<span>1D44B</span></span> + <span><math class="testfont"><mi>𝑌</mi></math>=<span>1D44C</span></span> + <span><math class="testfont"><mi>𝑍</mi></math>=<span>1D44D</span></span> + <span><math class="testfont"><mi>𝑎</mi></math>=<span>1D44E</span></span> + <span><math class="testfont"><mi>𝑏</mi></math>=<span>1D44F</span></span> + <span><math class="testfont"><mi>𝑐</mi></math>=<span>1D450</span></span> + <span><math class="testfont"><mi>𝑑</mi></math>=<span>1D451</span></span><br/> + <span><math class="testfont"><mi>𝑒</mi></math>=<span>1D452</span></span> + <span><math class="testfont"><mi>𝑓</mi></math>=<span>1D453</span></span> + <span><math class="testfont"><mi>𝑔</mi></math>=<span>1D454</span></span> + <span><math class="testfont"><mi>ℎ</mi></math>=<span>0210E</span></span> + <span><math class="testfont"><mi>𝑖</mi></math>=<span>1D456</span></span> + <span><math class="testfont"><mi>𝑗</mi></math>=<span>1D457</span></span> + <span><math class="testfont"><mi>𝑘</mi></math>=<span>1D458</span></span> + <span><math class="testfont"><mi>𝑙</mi></math>=<span>1D459</span></span> + <span><math class="testfont"><mi>𝑚</mi></math>=<span>1D45A</span></span> + <span><math class="testfont"><mi>𝑛</mi></math>=<span>1D45B</span></span><br/> + <span><math class="testfont"><mi>𝑜</mi></math>=<span>1D45C</span></span> + <span><math class="testfont"><mi>𝑝</mi></math>=<span>1D45D</span></span> + <span><math class="testfont"><mi>𝑞</mi></math>=<span>1D45E</span></span> + <span><math class="testfont"><mi>𝑟</mi></math>=<span>1D45F</span></span> + <span><math class="testfont"><mi>𝑠</mi></math>=<span>1D460</span></span> + <span><math class="testfont"><mi>𝑡</mi></math>=<span>1D461</span></span> + <span><math class="testfont"><mi>𝑢</mi></math>=<span>1D462</span></span> + <span><math class="testfont"><mi>𝑣</mi></math>=<span>1D463</span></span> + <span><math class="testfont"><mi>𝑤</mi></math>=<span>1D464</span></span> + <span><math class="testfont"><mi>𝑥</mi></math>=<span>1D465</span></span><br/> + <span><math class="testfont"><mi>𝑦</mi></math>=<span>1D466</span></span> + <span><math class="testfont"><mi>𝑧</mi></math>=<span>1D467</span></span> + <span><math class="testfont"><mi>𝚤</mi></math>=<span>1D6A4</span></span> + <span><math class="testfont"><mi>𝚥</mi></math>=<span>1D6A5</span></span> + <span><math class="testfont"><mi>𝛢</mi></math>=<span>1D6E2</span></span> + <span><math class="testfont"><mi>𝛣</mi></math>=<span>1D6E3</span></span> + <span><math class="testfont"><mi>𝛤</mi></math>=<span>1D6E4</span></span> + <span><math class="testfont"><mi>𝛥</mi></math>=<span>1D6E5</span></span> + <span><math class="testfont"><mi>𝛦</mi></math>=<span>1D6E6</span></span> + <span><math class="testfont"><mi>𝛧</mi></math>=<span>1D6E7</span></span><br/> + <span><math class="testfont"><mi>𝛨</mi></math>=<span>1D6E8</span></span> + <span><math class="testfont"><mi>𝛩</mi></math>=<span>1D6E9</span></span> + <span><math class="testfont"><mi>𝛪</mi></math>=<span>1D6EA</span></span> + <span><math class="testfont"><mi>𝛫</mi></math>=<span>1D6EB</span></span> + <span><math class="testfont"><mi>𝛬</mi></math>=<span>1D6EC</span></span> + <span><math class="testfont"><mi>𝛭</mi></math>=<span>1D6ED</span></span> + <span><math class="testfont"><mi>𝛮</mi></math>=<span>1D6EE</span></span> + <span><math class="testfont"><mi>𝛯</mi></math>=<span>1D6EF</span></span> + <span><math class="testfont"><mi>𝛰</mi></math>=<span>1D6F0</span></span> + <span><math class="testfont"><mi>𝛱</mi></math>=<span>1D6F1</span></span><br/> + <span><math class="testfont"><mi>𝛲</mi></math>=<span>1D6F2</span></span> + <span><math class="testfont"><mi>𝛳</mi></math>=<span>1D6F3</span></span> + <span><math class="testfont"><mi>𝛴</mi></math>=<span>1D6F4</span></span> + <span><math class="testfont"><mi>𝛵</mi></math>=<span>1D6F5</span></span> + <span><math class="testfont"><mi>𝛶</mi></math>=<span>1D6F6</span></span> + <span><math class="testfont"><mi>𝛷</mi></math>=<span>1D6F7</span></span> + <span><math class="testfont"><mi>𝛸</mi></math>=<span>1D6F8</span></span> + <span><math class="testfont"><mi>𝛹</mi></math>=<span>1D6F9</span></span> + <span><math class="testfont"><mi>𝛺</mi></math>=<span>1D6FA</span></span> + <span><math class="testfont"><mi>𝛻</mi></math>=<span>1D6FB</span></span><br/> + <span><math class="testfont"><mi>𝛼</mi></math>=<span>1D6FC</span></span> + <span><math class="testfont"><mi>𝛽</mi></math>=<span>1D6FD</span></span> + <span><math class="testfont"><mi>𝛾</mi></math>=<span>1D6FE</span></span> + <span><math class="testfont"><mi>𝛿</mi></math>=<span>1D6FF</span></span> + <span><math class="testfont"><mi>𝜀</mi></math>=<span>1D700</span></span> + <span><math class="testfont"><mi>𝜁</mi></math>=<span>1D701</span></span> + <span><math class="testfont"><mi>𝜂</mi></math>=<span>1D702</span></span> + <span><math class="testfont"><mi>𝜃</mi></math>=<span>1D703</span></span> + <span><math class="testfont"><mi>𝜄</mi></math>=<span>1D704</span></span> + <span><math class="testfont"><mi>𝜅</mi></math>=<span>1D705</span></span><br/> + <span><math class="testfont"><mi>𝜆</mi></math>=<span>1D706</span></span> + <span><math class="testfont"><mi>𝜇</mi></math>=<span>1D707</span></span> + <span><math class="testfont"><mi>𝜈</mi></math>=<span>1D708</span></span> + <span><math class="testfont"><mi>𝜉</mi></math>=<span>1D709</span></span> + <span><math class="testfont"><mi>𝜊</mi></math>=<span>1D70A</span></span> + <span><math class="testfont"><mi>𝜋</mi></math>=<span>1D70B</span></span> + <span><math class="testfont"><mi>𝜌</mi></math>=<span>1D70C</span></span> + <span><math class="testfont"><mi>𝜍</mi></math>=<span>1D70D</span></span> + <span><math class="testfont"><mi>𝜎</mi></math>=<span>1D70E</span></span> + <span><math class="testfont"><mi>𝜏</mi></math>=<span>1D70F</span></span><br/> + <span><math class="testfont"><mi>𝜐</mi></math>=<span>1D710</span></span> + <span><math class="testfont"><mi>𝜑</mi></math>=<span>1D711</span></span> + <span><math class="testfont"><mi>𝜒</mi></math>=<span>1D712</span></span> + <span><math class="testfont"><mi>𝜓</mi></math>=<span>1D713</span></span> + <span><math class="testfont"><mi>𝜔</mi></math>=<span>1D714</span></span> + <span><math class="testfont"><mi>𝜕</mi></math>=<span>1D715</span></span> + <span><math class="testfont"><mi>𝜖</mi></math>=<span>1D716</span></span> + <span><math class="testfont"><mi>𝜗</mi></math>=<span>1D717</span></span> + <span><math class="testfont"><mi>𝜘</mi></math>=<span>1D718</span></span> + <span><math class="testfont"><mi>𝜙</mi></math>=<span>1D719</span></span><br/> + <span><math class="testfont"><mi>𝜚</mi></math>=<span>1D71A</span></span> + <span><math class="testfont"><mi>𝜛</mi></math>=<span>1D71B</span></span> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html new file mode 100644 index 0000000000..f915c44e49 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto-selection.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>text-transform math-auto</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values"> + <link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/css-text/text-transform/math/italic-mapping.js"></script> + <meta name="assert" content="Verify Selection.toString() on a single character <mi> within returns the transformed unicode character."> + </head> + <body> + <math><mi id="container"></mi></math> + <script> + add_completion_callback(() => { + container.remove(); + }); + for (let code_point in italic_mapping) { + test(() => { + container.textContent = String.fromCodePoint(code_point); + window + .getSelection() + .setBaseAndExtent(container.firstChild, 0, container.firstChild, 1); + assert_equals( + window.getSelection().toString(), + String.fromCodePoint(italic_mapping[code_point]) + ); + }, `Selection.toString() for <mi>${String.fromCodePoint(code_point)}</mi> returns the transformed character.`); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html new file mode 100644 index 0000000000..affb02f0c9 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-auto.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>mathvariant auto</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> +<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values"> +<link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings"> +<link rel="match" href="mathvariant-auto-ref.html"/> +<meta name="assert" content="Verify that a single-char <mi> is equivalent to an <mi> with the transformed italic unicode character."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/mathvariant-italic.woff"); + } + body > span { + padding: 10px; + } + span > span { + font-family: monospace; + font-size: 10px; + } + .testfont { + font-family: TestFont; + font-size: 10px; + } +</style> +<body> + <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. --> + <p>Test passes if all the equalities below are true.</p> + <span><math class="testfont"><mi>A</mi></math>=<span>1D434</span></span> + <span><math class="testfont"><mi>B</mi></math>=<span>1D435</span></span> + <span><math class="testfont"><mi>C</mi></math>=<span>1D436</span></span> + <span><math class="testfont"><mi>D</mi></math>=<span>1D437</span></span> + <span><math class="testfont"><mi>E</mi></math>=<span>1D438</span></span> + <span><math class="testfont"><mi>F</mi></math>=<span>1D439</span></span> + <span><math class="testfont"><mi>G</mi></math>=<span>1D43A</span></span> + <span><math class="testfont"><mi>H</mi></math>=<span>1D43B</span></span> + <span><math class="testfont"><mi>I</mi></math>=<span>1D43C</span></span> + <span><math class="testfont"><mi>J</mi></math>=<span>1D43D</span></span><br/> + <span><math class="testfont"><mi>K</mi></math>=<span>1D43E</span></span> + <span><math class="testfont"><mi>L</mi></math>=<span>1D43F</span></span> + <span><math class="testfont"><mi>M</mi></math>=<span>1D440</span></span> + <span><math class="testfont"><mi>N</mi></math>=<span>1D441</span></span> + <span><math class="testfont"><mi>O</mi></math>=<span>1D442</span></span> + <span><math class="testfont"><mi>P</mi></math>=<span>1D443</span></span> + <span><math class="testfont"><mi>Q</mi></math>=<span>1D444</span></span> + <span><math class="testfont"><mi>R</mi></math>=<span>1D445</span></span> + <span><math class="testfont"><mi>S</mi></math>=<span>1D446</span></span> + <span><math class="testfont"><mi>T</mi></math>=<span>1D447</span></span><br/> + <span><math class="testfont"><mi>U</mi></math>=<span>1D448</span></span> + <span><math class="testfont"><mi>V</mi></math>=<span>1D449</span></span> + <span><math class="testfont"><mi>W</mi></math>=<span>1D44A</span></span> + <span><math class="testfont"><mi>X</mi></math>=<span>1D44B</span></span> + <span><math class="testfont"><mi>Y</mi></math>=<span>1D44C</span></span> + <span><math class="testfont"><mi>Z</mi></math>=<span>1D44D</span></span> + <span><math class="testfont"><mi>a</mi></math>=<span>1D44E</span></span> + <span><math class="testfont"><mi>b</mi></math>=<span>1D44F</span></span> + <span><math class="testfont"><mi>c</mi></math>=<span>1D450</span></span> + <span><math class="testfont"><mi>d</mi></math>=<span>1D451</span></span><br/> + <span><math class="testfont"><mi>e</mi></math>=<span>1D452</span></span> + <span><math class="testfont"><mi>f</mi></math>=<span>1D453</span></span> + <span><math class="testfont"><mi>g</mi></math>=<span>1D454</span></span> + <span><math class="testfont"><mi>h</mi></math>=<span>0210E</span></span> + <span><math class="testfont"><mi>i</mi></math>=<span>1D456</span></span> + <span><math class="testfont"><mi>j</mi></math>=<span>1D457</span></span> + <span><math class="testfont"><mi>k</mi></math>=<span>1D458</span></span> + <span><math class="testfont"><mi>l</mi></math>=<span>1D459</span></span> + <span><math class="testfont"><mi>m</mi></math>=<span>1D45A</span></span> + <span><math class="testfont"><mi>n</mi></math>=<span>1D45B</span></span><br/> + <span><math class="testfont"><mi>o</mi></math>=<span>1D45C</span></span> + <span><math class="testfont"><mi>p</mi></math>=<span>1D45D</span></span> + <span><math class="testfont"><mi>q</mi></math>=<span>1D45E</span></span> + <span><math class="testfont"><mi>r</mi></math>=<span>1D45F</span></span> + <span><math class="testfont"><mi>s</mi></math>=<span>1D460</span></span> + <span><math class="testfont"><mi>t</mi></math>=<span>1D461</span></span> + <span><math class="testfont"><mi>u</mi></math>=<span>1D462</span></span> + <span><math class="testfont"><mi>v</mi></math>=<span>1D463</span></span> + <span><math class="testfont"><mi>w</mi></math>=<span>1D464</span></span> + <span><math class="testfont"><mi>x</mi></math>=<span>1D465</span></span><br/> + <span><math class="testfont"><mi>y</mi></math>=<span>1D466</span></span> + <span><math class="testfont"><mi>z</mi></math>=<span>1D467</span></span> + <span><math class="testfont"><mi>ı</mi></math>=<span>1D6A4</span></span> + <span><math class="testfont"><mi>ȷ</mi></math>=<span>1D6A5</span></span> + <span><math class="testfont"><mi>Α</mi></math>=<span>1D6E2</span></span> + <span><math class="testfont"><mi>Β</mi></math>=<span>1D6E3</span></span> + <span><math class="testfont"><mi>Γ</mi></math>=<span>1D6E4</span></span> + <span><math class="testfont"><mi>Δ</mi></math>=<span>1D6E5</span></span> + <span><math class="testfont"><mi>Ε</mi></math>=<span>1D6E6</span></span> + <span><math class="testfont"><mi>Ζ</mi></math>=<span>1D6E7</span></span><br/> + <span><math class="testfont"><mi>Η</mi></math>=<span>1D6E8</span></span> + <span><math class="testfont"><mi>Θ</mi></math>=<span>1D6E9</span></span> + <span><math class="testfont"><mi>Ι</mi></math>=<span>1D6EA</span></span> + <span><math class="testfont"><mi>Κ</mi></math>=<span>1D6EB</span></span> + <span><math class="testfont"><mi>Λ</mi></math>=<span>1D6EC</span></span> + <span><math class="testfont"><mi>Μ</mi></math>=<span>1D6ED</span></span> + <span><math class="testfont"><mi>Ν</mi></math>=<span>1D6EE</span></span> + <span><math class="testfont"><mi>Ξ</mi></math>=<span>1D6EF</span></span> + <span><math class="testfont"><mi>Ο</mi></math>=<span>1D6F0</span></span> + <span><math class="testfont"><mi>Π</mi></math>=<span>1D6F1</span></span><br/> + <span><math class="testfont"><mi>Ρ</mi></math>=<span>1D6F2</span></span> + <span><math class="testfont"><mi>ϴ</mi></math>=<span>1D6F3</span></span> + <span><math class="testfont"><mi>Σ</mi></math>=<span>1D6F4</span></span> + <span><math class="testfont"><mi>Τ</mi></math>=<span>1D6F5</span></span> + <span><math class="testfont"><mi>Υ</mi></math>=<span>1D6F6</span></span> + <span><math class="testfont"><mi>Φ</mi></math>=<span>1D6F7</span></span> + <span><math class="testfont"><mi>Χ</mi></math>=<span>1D6F8</span></span> + <span><math class="testfont"><mi>Ψ</mi></math>=<span>1D6F9</span></span> + <span><math class="testfont"><mi>Ω</mi></math>=<span>1D6FA</span></span> + <span><math class="testfont"><mi>∇</mi></math>=<span>1D6FB</span></span><br/> + <span><math class="testfont"><mi>α</mi></math>=<span>1D6FC</span></span> + <span><math class="testfont"><mi>β</mi></math>=<span>1D6FD</span></span> + <span><math class="testfont"><mi>γ</mi></math>=<span>1D6FE</span></span> + <span><math class="testfont"><mi>δ</mi></math>=<span>1D6FF</span></span> + <span><math class="testfont"><mi>ε</mi></math>=<span>1D700</span></span> + <span><math class="testfont"><mi>ζ</mi></math>=<span>1D701</span></span> + <span><math class="testfont"><mi>η</mi></math>=<span>1D702</span></span> + <span><math class="testfont"><mi>θ</mi></math>=<span>1D703</span></span> + <span><math class="testfont"><mi>ι</mi></math>=<span>1D704</span></span> + <span><math class="testfont"><mi>κ</mi></math>=<span>1D705</span></span><br/> + <span><math class="testfont"><mi>λ</mi></math>=<span>1D706</span></span> + <span><math class="testfont"><mi>μ</mi></math>=<span>1D707</span></span> + <span><math class="testfont"><mi>ν</mi></math>=<span>1D708</span></span> + <span><math class="testfont"><mi>ξ</mi></math>=<span>1D709</span></span> + <span><math class="testfont"><mi>ο</mi></math>=<span>1D70A</span></span> + <span><math class="testfont"><mi>π</mi></math>=<span>1D70B</span></span> + <span><math class="testfont"><mi>ρ</mi></math>=<span>1D70C</span></span> + <span><math class="testfont"><mi>ς</mi></math>=<span>1D70D</span></span> + <span><math class="testfont"><mi>σ</mi></math>=<span>1D70E</span></span> + <span><math class="testfont"><mi>τ</mi></math>=<span>1D70F</span></span><br/> + <span><math class="testfont"><mi>υ</mi></math>=<span>1D710</span></span> + <span><math class="testfont"><mi>φ</mi></math>=<span>1D711</span></span> + <span><math class="testfont"><mi>χ</mi></math>=<span>1D712</span></span> + <span><math class="testfont"><mi>ψ</mi></math>=<span>1D713</span></span> + <span><math class="testfont"><mi>ω</mi></math>=<span>1D714</span></span> + <span><math class="testfont"><mi>∂</mi></math>=<span>1D715</span></span> + <span><math class="testfont"><mi>ϵ</mi></math>=<span>1D716</span></span> + <span><math class="testfont"><mi>ϑ</mi></math>=<span>1D717</span></span> + <span><math class="testfont"><mi>ϰ</mi></math>=<span>1D718</span></span> + <span><math class="testfont"><mi>ϕ</mi></math>=<span>1D719</span></span><br/> + <span><math class="testfont"><mi>ϱ</mi></math>=<span>1D71A</span></span> + <span><math class="testfont"><mi>ϖ</mi></math>=<span>1D71B</span></span> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html new file mode 100644 index 0000000000..c3e586f4dd --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>mathvariant attribute and font-style/font-weight (reference)</title> + <style> + .italic { font-style: italic; } + .bold { font-weight: bold; } + </style> + </head> + <body> + <p>This test passes if you see six lines of text (italic, italic, bold, bold, bold italic and bold italic) with the corresponding style applied:</p> + <p> + <math> + <mtext class="italic">italic</mtext> + </math> + </p> + <p> + <math> + <mtext class="italic">italic</mtext> + </math> + </p> + <p> + <math> + <mtext class="bold">bold</mtext> + </math> + </p> + <p> + <math> + <mtext class="bold">bold</mtext> + </math> + </p> + <p> + <math> + <mtext class="bold italic">bold italic</mtext> + </math> + </p> + <p> + <math> + <mtext class="bold italic">bold italic</mtext> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html new file mode 100644 index 0000000000..793c687b09 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mathvariant-font-style-font-weight.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>mathvariant attribute and font-style/font-weight</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1788645"> + <link rel="match" href="mathvariant-font-style-font-weight-ref.html"/> + <meta name="assert" content="Verify that a mathvariant attribute does not cancel the effect of font-style/font-weight."> + <style> + .italic { font-style: italic; } + .bold { font-weight: bold; } + </style> + </head> + <body> + <p>This test passes if you see six lines of text (italic, italic, bold, bold, bold italic and bold italic) with the corresponding style applied:</p> + <p> + <math mathvariant="normal"> + <mtext class="italic">italic</mtext> + </math> + </p> + <p> + <math> + <mtext mathvariant="normal" class="italic">italic</mtext> + </math> + </p> + <p> + <math mathvariant="normal"> + <mtext class="bold">bold</mtext> + </math> + </p> + <p> + <math> + <mtext mathvariant="normal" class="bold">bold</mtext> + </math> + </p> + <p> + <math mathvariant="normal"> + <mtext class="bold italic">bold italic</mtext> + </math> + </p> + <p> + <math> + <mtext mathvariant="normal" class="bold italic">bold italic</mtext> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html new file mode 100644 index 0000000000..63e6e2ba9c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>single-char mi and fontstyle/fontweight attributes (reference)</title> + <style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/mathvariant-italic.woff"); + } + .testfont { + font-family: TestFont; + font-size: 32px; + } + </style> + </head> + <body> + <p>Test passes if you see <span class="testfont">𝜕</span> rendered twice, without any bold or italic style applied:</p> + <p><math class="testfont"><mi mathvariant="normal">𝜕</mi></math></p> + <p><math class="testfont"><mi mathvariant="normal">𝜕</mi></math></p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html new file mode 100644 index 0000000000..b6dd05ea20 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>single-char mi and fontstyle/fontweight attributes</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1789081"> + <link rel="match" href="mi-fontstyle-fontweight-ref.html"/> + <meta name="assert" content="Verify that fontstyle/fontweight don't cancel the mathvariant transform on single-char mi elements."> + <style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/mathvariant-italic.woff"); + } + .testfont { + font-family: TestFont; + font-size: 32px; + } + </style> + </head> + <body> + <p>Test passes if you see <span class="testfont">𝜕</span> rendered twice, without any bold or italic style applied:</p> + <p><math class="testfont"><mi fontweight="bold">∂</mi></math></p> + <p><math class="testfont"><mi fontstyle="normal">∂</mi></math></p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml new file mode 100644 index 0000000000..027bdf1b7d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1-ref.xml @@ -0,0 +1,27 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> +<body> + +<!-- ... assuming that color inherits --> +<p> + <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> + <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> + <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> +</p> + +<!-- ... assuming that color inherits --> +<p> + <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> + <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> + <span style="color: green"><m:math><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> +</p> + +<!-- ... assuming that mathbackground works on m:mstyle --> +<p><m:math><m:mstyle mathbackground="lightgreen"><m:mi>Y</m:mi></m:mstyle></m:math></p> +<p><m:math><m:mstyle mathbackground="lightgreen"><m:mi>Y</m:mi></m:mstyle></m:math></p> + +<!-- ... assuming that mathbackground works on m:mstyle --> +<p><m:math><m:mstyle mathbackground="lightgreen"><m:mfenced><m:mi>x</m:mi></m:mfenced></m:mstyle></m:math></p> +<p><m:math><m:mstyle mathbackground="lightgreen"><m:mfenced><m:mi>x</m:mi></m:mfenced></m:mstyle></m:math></p> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml new file mode 100644 index 0000000000..cc2e725f92 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-1.xml @@ -0,0 +1,31 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> + <head> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=393760"/> + <link rel="match" href="mozilla-393760-1-ref.xml"/> + </head> +<body> + +<!-- Test that CSS color works on m:math and m:mstyle --> +<p> + <span><m:math style="color: green;"><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> + <span><m:math><m:mstyle style="color: green;"><m:mi>X</m:mi></m:mstyle></m:math></span> + <span><m:math><m:mstyle><m:mi style="color: green;">X</m:mi></m:mstyle></m:math></span> +</p> + +<!-- Test that mathcolor works on m:mi, m:mstyle and m:math --> +<p> + <span><m:math mathcolor="green"><m:mstyle><m:mi>X</m:mi></m:mstyle></m:math></span> + <span><m:math><m:mstyle mathcolor="green"><m:mi>X</m:mi></m:mstyle></m:math></span> + <span><m:math><m:mstyle><m:mi mathcolor="green">X</m:mi></m:mstyle></m:math></span> +</p> + +<!-- Test that mathbackground and CSS background work on m:mi --> +<p><m:math><m:mi mathbackground="lightgreen">Y</m:mi></m:math></p> +<p><m:math><m:mi style="background: lightgreen">Y</m:mi></m:math></p> + +<!-- Test that mathbackground and CSS background work on m:mfenced --> +<p><m:math><m:mfenced mathbackground="lightgreen"><m:mi>x</m:mi></m:mfenced></m:math></p> +<p><m:math><m:mfenced style="background: lightgreen;"><m:mi>x</m:mi></m:mfenced></m:math></p> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml new file mode 100644 index 0000000000..58dd5a5d8c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2-ref.xml @@ -0,0 +1,5 @@ +<html style="background: #88F; color: #88F;" xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> +<body> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml new file mode 100644 index 0000000000..c6ebcb5ece --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/mozilla-393760-2.xml @@ -0,0 +1,15 @@ +<html style="background: #88F; color: #88F;" xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> + <head> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=393760"/> + <link rel="match" href="mozilla-393760-2-ref.xml"/> + </head> +<body> + +<!-- Test that text that should be invisible is invisible (assuming text is drawn at all) --> +<p>This should be invisible.</p> + +<!-- Test that color inherits into MathML (assuming MathML text is drawn at all) --> +<p><m:math><m:mi>x</m:mi></m:math></p> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html b/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html new file mode 100644 index 0000000000..88db5047e9 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/multi-column-layout.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML inside multi-column</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<meta name="assert" content="Verify that putting MathML inside a multi-column list shouldn't affect its layout."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("DOMContentLoaded", function() { + var epsilon = 1; + var mfrac = document.getElementById("mfrac"); + var num = mfrac.firstElementChild.getBoundingClientRect(); + var denom = mfrac.lastElementChild.getBoundingClientRect(); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(num.width, 30, epsilon, "numerator width"); + assert_approx_equals(num.height, 40, epsilon, "numerator height"); + assert_approx_equals(denom.width, 50, epsilon, "numerator width"); + assert_approx_equals(denom.height, 60, epsilon, "numerator height"); + }, "mspace layout in multicol"); + test(function() { + assert_true(MathMLFeatureDetection.has_mfrac()); + assert_greater_than_equal(denom.bottom - num.top, + (40 + 60), + "numerator is above the denominator"); + assert_approx_equals((num.left + num.right) / 2, + (denom.left + denom.right) / 2, + epsilon, "numerator and denominator are horizontally aligned"); + }, "mfrac layout in multicol"); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <div style="column-width: 10em; list-style-type: decimal;"> + <ol> + <li>blah</li> + <li> + <math> + <mfrac id="mfrac"> + <mspace width="30px" height="40px" style="background: cyan"></mspace> + <mspace width="50px" height="60px" style="background: yellow"></mspace> + </mfrac> + </li> + <li>blah</li> + <li>blah</li> + <li>blah</li> + </ol> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html b/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html new file mode 100644 index 0000000000..0952679c62 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/not-participating-to-parent-layout.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Elements not participating to the layout of their parent</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that display: none and out-of-flow positioned elements do not participate to layout of their parent."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || + FragmentHelper.isEmpty(tag)) + continue; + ["display: none", + "display: contents", + "position: absolute", + "position: fixed" + ].forEach(style => { + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ +<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ +<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ +</div>`); + var div = document.body.lastElementChild; + + var elementContainer = div.firstElementChild; + var elementContainerWidth = elementContainer.getBoundingClientRect().width; + var element = FragmentHelper.element(elementContainer); + if (style === "display: contents" && + !element.classList.contains("mathml-container")) { + // A "display: contents" MathML child is not participating to + // parent layout because its computed style is "display: none". + // If we cannot append a MathML child then skip that test. + return; + } + FragmentHelper.forceNonEmptyElement(element); + var allowInvalid = true; + var child = FragmentHelper.appendChild(element, allowInvalid); + child.setAttribute("style", style); + + var referenceContainer = div.lastElementChild; + var referenceContainerWidth = referenceContainer.getBoundingClientRect().width; + var reference = FragmentHelper.element(referenceContainer); + FragmentHelper.forceNonEmptyElement(reference); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon); + }, `${tag} preferred width calculation is not affected by children with "${style}" style`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + compareLayout(element, reference, epsilon); + }, `${tag} layout is not affected by children with "${style}" style`); + + div.style = "display: none;"; // Hide the div after measurement. + }); + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html new file mode 100644 index 0000000000..447c5b722a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Absolutely positioned (reference)</title> +<body> + <p>Test passes if you see a green square and no red.</p> + <div style="position: absolute; left: 100px; top: 100px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + </mrow> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html new file mode 100644 index 0000000000..9a7851ba23 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/absolutely-positioned-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Absolutely positioned</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> +<link rel="match" href="absolutely-positioned-001-ref.html"/> +<meta name="assert" content="Verify visual rendering of absolutely positioned mtext elements."> +<body> + <p>Test passes if you see a green square and no red.</p> + <div style="position: absolute; left: 100px; top: 100px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: red"/> + <mspace width="100px" height="300px" style="background: green"/> + <mtext style="position: absolute; left: 100px; top: 0px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext> + <mtext style="position: absolute; left: 150px; top: 0px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + <mtext style="position: absolute; left: 150px; top: 150px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + </mrow> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html new file mode 100644 index 0000000000..9069b92637 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/all-mathml-containers.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>absolutely positioned in all MathML elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that absolutely positioned node works in all MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + /* override display: none on children of maction/semantics */ + maction > *, semantics > * { + display: math; + } +</style> +<script> + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + ["absolute", "fixed"].forEach(positionValue => { + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || + FragmentHelper.isEmpty(tag)) + continue; + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ +<math>${MathMLFragments[tag]}</math>\ +</div>`); + let div = document.body.lastElementChild; + let element = FragmentHelper.element(div.firstElementChild); + FragmentHelper.forceNonEmptyElement(element); + if (element.classList.contains("mathml-container") || + element.classList.contains("foreign-container")) { + for (let i = 0; i < 5; i++) { + FragmentHelper.appendChild(element); + } + } + + let middleChild; + if (element.children.length >= 2) { + middleChild = FragmentHelper.appendChild(element, true /*allowInvalid*/); + middleChild.setAttribute("style", `position: ${positionValue}; left: 300px; top: 400px`); + let middlePosition = Math.floor(element.children.length/2); + element.insertBefore(middleChild, element.children[middlePosition]); + } + + let firstChild = FragmentHelper.appendChild(element, true /*allowInvalid*/); + firstChild.setAttribute("style", `position: ${positionValue}; left: 100px; top: 200px`); + element.insertBefore(firstChild, element.firstElementChild); + + let lastChild = FragmentHelper.appendChild(element, true /*allowInvalid*/); + lastChild.setAttribute("style", `position: ${positionValue}; left: 500px; top: 600px`); + + let referenceBox; + switch (positionValue) { + case "absolute": + // Use the absolutely positioned div ancestor. + referenceBox = div.getBoundingClientRect(); + break + case "fixed": + // Use the viewport. + referenceBox = {left: 0, top: 0}; + break; + default: + throw "reference box not defined"; + } + + let firstChildBox = firstChild.getBoundingClientRect(); + let lastChildBox = lastChild.getBoundingClientRect(); + let middleChildBox; + if (middleChild) { + middleChildBox = middleChild.getBoundingClientRect(); + } + + let epsilon = 1; + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + assert_approx_equals(firstChildBox.left - referenceBox.left, 100, epsilon); + assert_approx_equals(firstChildBox.top - referenceBox.top, 200, epsilon); + if (middleChildBox) { + assert_approx_equals(middleChildBox.left - referenceBox.left, 300, epsilon); + assert_approx_equals(middleChildBox.top - referenceBox.top, 400, epsilon); + } + assert_approx_equals(lastChildBox.left - referenceBox.left, 500, epsilon); + assert_approx_equals(lastChildBox.top - referenceBox.top, 600, epsilon); + }, `position: ${positionValue}; children in ${tag}`); + + div.style = "display: none;"; // Hide the div after measurement. + } + }); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html new file mode 100644 index 0000000000..03b9f56698 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>Fixed positioned (reference)</title> +<style> + body { overflow: hidden; } +</style> +<body> + <div style="position: absolute; left: 100px; top: 200px; + height: 3000px; width: 3000px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: green"/> + </mrow> + </math> + <p>Test passes if you see a green square and no red.</p> + </div> + <script> + requestAnimationFrame(() => { + window.scrollTo(50, 100); + document.documentElement.classList.remove("reftest-wait"); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html new file mode 100644 index 0000000000..994174162c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/out-of-flow/fixed-positioned-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>Fixed positioned</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> +<link rel="match" href="fixed-positioned-001-ref.html"/> +<meta name="assert" content="Verify visual rendering of fixed positioned mtext elements."> +<style> + body { overflow: hidden; } +</style> +<body> + <div style="position: absolute; left: 100px; top: 200px; + height: 3000px; width: 3000px;"> + <math> + <mrow> + <mspace width="100px" height="300px" style="background: green"/> + <mspace width="100px" height="300px" style="background: red"/> + <mspace width="100px" height="300px" style="background: green"/> + <mtext style="position: fixed; left: 150px; top: 100px;"><span style="display: inline-block; width: 50px; height: 300px; background: green"></span></mtext> + <mtext style="position: fixed; left: 200px; top: 100px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + <mtext style="position: fixed; left: 200px; top: 250px;"><span style="display: inline-block; width: 50px; height: 150px; background: green"></span></mtext> + </mrow> + </math> + <p>Test passes if you see a green square and no red.</p> + </div> + <script> + requestAnimationFrame(() => { + window.scrollTo(50, 100); + document.documentElement.classList.remove("reftest-wait"); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html b/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html new file mode 100644 index 0000000000..0510f1da6d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/overflow/computed-value-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>overflow on MathML elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="overflow can be overridden on MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + /* selector defined in mathml-fragments.js */ + .element { + overflow: scroll; + } +</style> +</head> +<body> + <div id="log"></div> + <div id="container"> + <math class="element"></math> + </div> + <script> + test(function () { + var container = document.getElementById("container"); + for (tag in MathMLFragments) { + // Skip mtable as browsers don't have interoperable behavior for + // display: table. + // See https://github.com/w3c/csswg-drafts/issues/8133 + if (tag == "mtable") + continue; + container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); + } + let unknownElement = FragmentHelper.createElement("unknown"); + unknownElement.setAttribute("class", "element"); + container.appendChild(unknownElement); + Array.from(document.getElementsByClassName("element")).forEach(element => { + var tag = element.tagName; + var style = window.getComputedStyle(element); + assert_equals(style["overflow"], "scroll", `overflow on ${tag}`); + }, `overflow can be overridden on all MathML elements`); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html new file mode 100644 index 0000000000..fd86388ccd --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-001.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>border</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that border is taken into account."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-border") + assert_approx_equals(s.left, 20, epsilon, "left border"); + assert_approx_equals(s.right, 30, epsilon, "right border"); + assert_approx_equals(s.top, 40, epsilon, "top border"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom border"); + var b = document.getElementById("mrow-border"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Border properties on mrow"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_dir()); + var s = measureSpaceAround("mrow-border-rtl") + assert_approx_equals(s.left, 20, epsilon, "left border"); + assert_approx_equals(s.right, 30, epsilon, "right border"); + assert_approx_equals(s.top, 40, epsilon, "top border"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom border"); + var b = document.getElementById("mrow-border-rtl"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Border properties on mrow (rtl)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-border-shorthand") + assert_approx_equals(s.left, 20, epsilon, "left border"); + assert_approx_equals(s.right, 20, epsilon, "right border"); + assert_approx_equals(s.top, 20, epsilon, "top border"); + assert_approx_equals(s.bottom, 20, epsilon, "bottom border"); + var b = document.getElementById("mrow-border-shorthand"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width"); + assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height"); + }, "Border properties on mrow (shorthand)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-border-logical") + assert_approx_equals(s.left, 20, epsilon, "left border"); + assert_approx_equals(s.right, 30, epsilon, "right border"); + assert_approx_equals(s.top, 40, epsilon, "top border"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom border"); + var b = document.getElementById("mrow-border-logical"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Border properties on mrow (logical)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_dir()); + var s = measureSpaceAround("mrow-border-logical-rtl") + assert_approx_equals(s.left, 30, epsilon, "left border"); + assert_approx_equals(s.right, 20, epsilon, "right border"); + assert_approx_equals(s.top, 40, epsilon, "top border"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom border"); + var b = document.getElementById("mrow-border-logical-rtl"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Border properties on mrow (logical, rtl)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-border-logical-shorthand") + assert_approx_equals(s.left, 20, epsilon, "left border"); + assert_approx_equals(s.right, 20, epsilon, "right border"); + assert_approx_equals(s.top, 30, epsilon, "top border"); + assert_approx_equals(s.bottom, 30, epsilon, "bottom border"); + var b = document.getElementById("mrow-border-logical-shorthand"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width"); + assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height"); + }, "Border properties on mrow (logical, shorthand)"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow> + <mrow id="mrow-border" + style="border-left: 20px solid transparent; + border-right: 30px solid transparent; + border-top: 40px solid transparent; + border-bottom: 50px solid transparent;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math dir="rtl"> + <mrow> + <mrow id="mrow-border-rtl" + style="border-left: 20px solid transparent; + border-right: 30px solid transparent; + border-top: 40px solid transparent; + border-bottom: 50px solid transparent;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-border-shorthand" + style="border: 20px solid transparent;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-border-logical" + style="border-inline-start: 20px solid transparent; + border-inline-end: 30px solid transparent; + border-block-start: 40px solid transparent; + border-block-end: 50px solid transparent;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math dir="rtl"> + <mrow> + <mrow id="mrow-border-logical-rtl" + style="border-inline-start: 20px solid transparent; + border-inline-end: 30px solid transparent; + border-block-start: 40px solid transparent; + border-block-end: 50px solid transparent;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-border-logical-shorthand" + style="border-inline: 20px solid transparent; + border-block: 30px solid transparent;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html new file mode 100644 index 0000000000..bfb7f76adc --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/border-002.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>border</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that border is taken into account."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag)) + continue; + + var style = "border-left: 30px solid; border-right: 40px solid; border-top: 50px solid; border-bottom: 60px solid;"; + + if (FragmentHelper.isEmpty(tag)) { + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSizeWithAndWithoutStyle(tag, style); + assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right border"); + assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom border"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Border properties on ${tag}`); + continue; + } + + var default_border = tag === "merror" ? 1 : 0; + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSpaceWithAndWithoutStyle(tag, style); + assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border"); + assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border"); + assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border"); + assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border"); + assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width"); + assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width"); + }, `Border properties on ${tag}`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl"); + assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border"); + assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border"); + assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border"); + assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border"); + assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width"); + assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width"); + }, `Border properties on ${tag} (rtl)`); + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html new file mode 100644 index 0000000000..eabb6f46c7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>margin</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that margin is taken into account."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-margin") + assert_approx_equals(s.left, 20, epsilon, "left margin"); + assert_approx_equals(s.right, 30, epsilon, "right margin"); + assert_approx_equals(s.top, 40, epsilon, "top margin"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); + var b = document.getElementById("mrow-margin"). + getBoundingClientRect(); + assert_approx_equals(b.width, 50, epsilon, "element width"); + assert_approx_equals(b.height, 50, epsilon, "element height"); + }, "Margin properties on mrow"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_dir()); + var s = measureSpaceAround("mrow-margin-rtl") + assert_approx_equals(s.left, 20, epsilon, "left margin"); + assert_approx_equals(s.right, 30, epsilon, "right margin"); + assert_approx_equals(s.top, 40, epsilon, "top margin"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); + var b = document.getElementById("mrow-margin-rtl"). + getBoundingClientRect(); + assert_approx_equals(b.width, 50, epsilon, "element width"); + assert_approx_equals(b.height, 50, epsilon, "element height"); + }, "Margin properties on mrow (rtl)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-margin-shorthand") + assert_approx_equals(s.left, 20, epsilon, "left margin"); + assert_approx_equals(s.right, 20, epsilon, "right margin"); + assert_approx_equals(s.top, 20, epsilon, "top margin"); + assert_approx_equals(s.bottom, 20, epsilon, "bottom margin"); + var b = document.getElementById("mrow-margin-shorthand"). + getBoundingClientRect(); + assert_approx_equals(b.width, 50, epsilon, "element width"); + assert_approx_equals(b.height, 50, epsilon, "element height"); + }, "Margin properties on mrow (shorthand)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-margin-logical") + assert_approx_equals(s.left, 20, epsilon, "left margin"); + assert_approx_equals(s.right, 30, epsilon, "right margin"); + assert_approx_equals(s.top, 40, epsilon, "top margin"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); + var b = document.getElementById("mrow-margin-logical"). + getBoundingClientRect(); + assert_approx_equals(b.width, 50, epsilon, "element width"); + assert_approx_equals(b.height, 50, epsilon, "element height"); + }, "Margin properties on mrow (logical)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_dir()); + var s = measureSpaceAround("mrow-margin-logical-rtl") + assert_approx_equals(s.left, 30, epsilon, "left margin"); + assert_approx_equals(s.right, 20, epsilon, "right margin"); + assert_approx_equals(s.top, 40, epsilon, "top margin"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom margin"); + var b = document.getElementById("mrow-margin-logical-rtl"). + getBoundingClientRect(); + assert_approx_equals(b.width, 50, epsilon, "element width"); + assert_approx_equals(b.height, 50, epsilon, "element height"); + }, "Margin properties on mrow (logical, rtl)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-margin-logical-shorthand") + assert_approx_equals(s.left, 20, epsilon, "left margin"); + assert_approx_equals(s.right, 20, epsilon, "right margin"); + assert_approx_equals(s.top, 30, epsilon, "top margin"); + assert_approx_equals(s.bottom, 30, epsilon, "bottom margin"); + var b = document.getElementById("mrow-margin-logical-shorthand"). + getBoundingClientRect(); + assert_approx_equals(b.width, 50, epsilon, "element width"); + assert_approx_equals(b.height, 50, epsilon, "element height"); + }, "Margin properties on mrow (logical, shorthand)"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow> + <mrow id="mrow-margin" + style="margin-left: 20px; + margin-right: 30px; + margin-top: 40px; + margin-bottom: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math dir="rtl"> + <mrow> + <mrow id="mrow-margin-rtl" + style="margin-left: 20px; + margin-right: 30px; + margin-top: 40px; + margin-bottom: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-margin-shorthand" + style="margin: 20px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-margin-logical" + style="margin-inline-start: 20px; + margin-inline-end: 30px; + margin-block-start: 40px; + margin-block-end: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math dir="rtl"> + <mrow> + <mrow id="mrow-margin-logical-rtl" + style="margin-inline-start: 20px; + margin-inline-end: 30px; + margin-block-start: 40px; + margin-block-end: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-margin-logical-shorthand" + style="margin-inline: 20px; + margin-block: 30px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html new file mode 100644 index 0000000000..b560ed125c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-002.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>margin</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that margin is taken into account."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag)) + continue; + + var style = "margin-left: 30px; margin-right: 40px; margin-top: 50px; margin-bottom: 60px;"; + + if (FragmentHelper.isEmpty(tag)) { + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSizeWithAndWithoutStyle(tag, style); + assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right margin"); + assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom margin"); + assert_approx_equals(s.element_width_delta, 0, epsilon, "element width"); + assert_approx_equals(s.element_height_delta, 0, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Margin properties on ${tag}`); + continue; + } + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSpaceWithAndWithoutStyle(tag, style); + assert_approx_equals(s.left_delta, 30, epsilon, "left margin"); + assert_approx_equals(s.right_delta, 40, epsilon, "right margin"); + assert_approx_equals(s.top_delta, 50, epsilon, "top margin"); + assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin"); + assert_approx_equals(s.element_width_delta, 0, epsilon, "element width"); + assert_approx_equals(s.element_height_delta, 0, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Margin properties on ${tag}`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl"); + assert_approx_equals(s.left_delta, 30, epsilon, "left margin"); + assert_approx_equals(s.right_delta, 40, epsilon, "right margin"); + assert_approx_equals(s.top_delta, 50, epsilon, "top margin"); + assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin"); + assert_approx_equals(s.element_width_delta, 0, epsilon, "element width"); + assert_approx_equals(s.element_height_delta, 0, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Margin properties on ${tag} (rtl)`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + // Apply the same margin style on the parent mrow. + // The margins are not collapsed so they should be added twice. + var s = compareSpaceWithAndWithoutStyle(tag, style, style); + assert_approx_equals(s.left_delta, 30 * 2, epsilon, "left margin"); + assert_approx_equals(s.right_delta, 40 * 2, epsilon, "right margin"); + assert_approx_equals(s.top_delta, 50 * 2, epsilon, "top margin"); + assert_approx_equals(s.bottom_delta, 60 * 2, epsilon, "bottom margin"); + assert_approx_equals(s.element_width_delta, 0, epsilon, "element width"); + assert_approx_equals(s.element_height_delta, 0, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta, (30 + 40) * 2, epsilon, "preferred width"); + }, `Margin properties on ${tag} (no margin-collapsing)`); + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html new file mode 100644 index 0000000000..3b6b2a38db --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-003.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>margin</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that margin is taken into account on children."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || + FragmentHelper.isEmpty(tag) || + FragmentHelper.isTokenElement(tag) || + tag == "semantics" || + tag == "maction" || + tag == "mtable") + continue; + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + + document.body.insertAdjacentHTML("beforeend", `<hr/><div>\ +<div style="display: inline-block; border: 1px dashed blue;"><math>${MathMLFragments[tag]}</math></div><br/>\ +<div style="display: inline-block; border: 1px dashed green;"><math>${MathMLFragments[tag]}</math></div>\ +</div>`); + + var div = document.body.lastElementChild; + var elementShrinkWrapContainer = div.firstElementChild; + var element = elementShrinkWrapContainer.firstElementChild.firstElementChild; + var elementContainer = div.firstElementChild; + var referenceShrinkWrapContainer = div.lastElementChild; + var reference = referenceShrinkWrapContainer.firstElementChild.firstElementChild; + + FragmentHelper.forceNonEmptyElement(element); + FragmentHelper.forceNonEmptyElement(reference); + + var mspaceWidth = 20, mspaceHeight = 40, mspaceDepth = 30; + var marginLeft = 10, marginRight = 15, marginTop = 20, marginBottom = 25; + Array.from(element.children).forEach(mrow => { + mrow.outerHTML = `<mspace width="${mspaceWidth}px" height="${mspaceHeight}px" depth='${mspaceDepth}px' style='background: blue; margin-left: ${marginLeft}px; margin-right: ${marginRight}px; margin-top: ${marginTop}px; margin-bottom: ${marginBottom}px;'></mspace>`; + }); + + Array.from(reference.children).forEach(mrow => { + mrow.outerHTML = `<mspace width="${marginLeft+mspaceWidth+marginRight}px" height="${mspaceHeight+marginTop}px" depth='${mspaceDepth+marginBottom}px' style='background: green;'></mspace>`; + }); + + // Compare sizes. + compareSize(element, reference, epsilon); + + // Compare children positions. + var elementBox = element.getBoundingClientRect(); + var referenceBox = reference.getBoundingClientRect(); + for (var i = 0; i < element.children.length; i++) { + var childBox = element.children[i].getBoundingClientRect(); + var referenceChildBox = reference.children[i].getBoundingClientRect(); + assert_approx_equals(childBox.width + marginLeft + marginRight, referenceChildBox.width, epsilon, "inline size (child ${i})"); + assert_approx_equals(childBox.height + marginTop + marginBottom, referenceChildBox.height, epsilon, "block size (child ${i})"); + + assert_approx_equals(childBox.left - marginLeft - elementBox.left, + referenceChildBox.left - referenceBox.left, + epsilon, + `inline position (child ${i})`); + assert_approx_equals(childBox.top - marginTop - elementBox.top, + referenceChildBox.top - referenceBox.top, + epsilon, + `block position (child ${i})`); + } + + // Compare preferred widths. + assert_approx_equals(elementShrinkWrapContainer.offsetWidth, referenceShrinkWrapContainer.offsetWidth, epsilon, "preferred width"); + + }, `Margin properties on the children of ${tag}`); + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html new file mode 100644 index 0000000000..b6d4901f36 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-001.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>padding</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that padding is taken into account."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-padding") + assert_approx_equals(s.left, 20, epsilon, "left padding"); + assert_approx_equals(s.right, 30, epsilon, "right padding"); + assert_approx_equals(s.top, 40, epsilon, "top padding"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom padding"); + var b = document.getElementById("mrow-padding"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Padding properties on mrow"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_dir()); + var s = measureSpaceAround("mrow-padding-rtl") + assert_approx_equals(s.left, 20, epsilon, "left padding"); + assert_approx_equals(s.right, 30, epsilon, "right padding"); + assert_approx_equals(s.top, 40, epsilon, "top padding"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom padding"); + var b = document.getElementById("mrow-padding-rtl"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Padding properties on mrow (rtl)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-padding-shorthand") + assert_approx_equals(s.left, 20, epsilon, "left padding"); + assert_approx_equals(s.right, 20, epsilon, "right padding"); + assert_approx_equals(s.top, 20, epsilon, "top padding"); + assert_approx_equals(s.bottom, 20, epsilon, "bottom padding"); + var b = document.getElementById("mrow-padding-shorthand"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width"); + assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height"); + }, "Padding properties on mrow (shorthand)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-padding-logical") + assert_approx_equals(s.left, 20, epsilon, "left padding"); + assert_approx_equals(s.right, 30, epsilon, "right padding"); + assert_approx_equals(s.top, 40, epsilon, "top padding"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom padding"); + var b = document.getElementById("mrow-padding-logical"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Padding properties on mrow (logical)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_dir()); + var s = measureSpaceAround("mrow-padding-logical-rtl") + assert_approx_equals(s.left, 30, epsilon, "left padding"); + assert_approx_equals(s.right, 20, epsilon, "right padding"); + assert_approx_equals(s.top, 40, epsilon, "top padding"); + assert_approx_equals(s.bottom, 50, epsilon, "bottom padding"); + var b = document.getElementById("mrow-padding-logical-rtl"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width"); + assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height"); + }, "Padding properties on mrow (logical, rtl)"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var s = measureSpaceAround("mrow-padding-logical-shorthand") + assert_approx_equals(s.left, 20, epsilon, "left padding"); + assert_approx_equals(s.right, 20, epsilon, "right padding"); + assert_approx_equals(s.top, 30, epsilon, "top padding"); + assert_approx_equals(s.bottom, 30, epsilon, "bottom padding"); + var b = document.getElementById("mrow-padding-logical-shorthand"). + getBoundingClientRect(); + assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width"); + assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height"); + }, "Padding properties on mrow (logical, shorthand)"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow> + <mrow id="mrow-padding" + style="padding-left: 20px; + padding-right: 30px; + padding-top: 40px; + padding-bottom: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math dir="rtl"> + <mrow> + <mrow id="mrow-padding-rtl" + style="padding-left: 20px; + padding-right: 30px; + padding-top: 40px; + padding-bottom: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-padding-shorthand" + style="padding: 20px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-padding-logical" + style="padding-inline-start: 20px; + padding-inline-end: 30px; + padding-block-start: 40px; + padding-block-end: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math dir="rtl"> + <mrow> + <mrow id="mrow-padding-logical-rtl" + style="padding-inline-start: 20px; + padding-inline-end: 30px; + padding-block-start: 40px; + padding-block-end: 50px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-padding-logical-shorthand" + style="padding-inline: 20px; + padding-block: 30px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html new file mode 100644 index 0000000000..89d3bdc7ef --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-002.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>padding</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that padding is taken into account."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag)) + continue; + + var defaultInlinePadding = (tag === "mfrac" ? 1 : 0); + var style = `padding-left: ${defaultInlinePadding + 30}px; padding-right: ${defaultInlinePadding + 40}px; padding-top: 50px; padding-bottom: 60px;`; + + if (FragmentHelper.isEmpty(tag)) { + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSizeWithAndWithoutStyle(tag, style); + assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right padding"); + assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom padding"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Padding properties on ${tag}`); + continue; + } + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSpaceWithAndWithoutStyle(tag, style); + assert_approx_equals(s.left_delta, 30, epsilon, "left padding"); + assert_approx_equals(s.right_delta, 40, epsilon, "right padding"); + assert_approx_equals(s.top_delta, 50, epsilon, "top padding"); + assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding"); + assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width"); + assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Padding properties on ${tag}`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var s = compareSpaceWithAndWithoutStyle(tag, style, "rtl"); + assert_approx_equals(s.left_delta, 30, epsilon, "left padding"); + assert_approx_equals(s.right_delta, 40, epsilon, "right padding"); + assert_approx_equals(s.top_delta, 50, epsilon, "top padding"); + assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding"); + assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width"); + assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height"); + assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width"); + }, `Padding properties on ${tag} (rtl)`); + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html new file mode 100644 index 0000000000..150a650bc2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Padding/border/margin</title> +<body> + <p>This test passes if you see a purple square of side 100px, surrounded by a + 10px blue padding, surrounded by a 10px blue/yellow dashed border, itself + surrounded by a 10px pink margin.</p> + </div> + <div style="background: pink; position: absolute; left: 10px; top: 3em;"> + <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;"> + <div style="width: 100px; height: 100px; background: purple;"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html new file mode 100644 index 0000000000..b0fb17c7d2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Padding/border/margin</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> +<link rel="match" href="padding-border-margin-001-ref.html"/> +<meta name="assert" content="Verify visual rendering of padding/border/margin on the mrow element."> +<body> + <p>This test passes if you see a purple square of side 100px, surrounded by a + 10px blue padding, surrounded by a 10px blue/yellow dashed border, itself + surrounded by a 10px pink margin.</p> + <div style="background: pink; position: absolute; left: 10px; top: 3em;"> + <math> + <mrow style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;"> + <mspace width="100px" height="100px" style="background: purple;"></mspace> + </mrow> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html new file mode 100644 index 0000000000..e13a9f47ff --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Padding/border/margin on largeop (reference)</title> +<body> + <p>This test passes if you see a cyan rectangle of width 300px and + height 1500px, surrounded by a 10px blue padding, surrounded by a 10px + blue/yellow dashed border, itself + surrounded by a 10px pink margin.</p> + </div> + <div style="background: pink; position: absolute; left: 10px; top: 4em;"> + <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;"> + <div style="width: 300px; height: 1500px; background: cyan;"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html new file mode 100644 index 0000000000..4559fc49ce --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Padding/border/margin on largeop</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-math-style-property"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators"> +<link rel="match" href="padding-border-margin-002-ref.html"/> +<meta name="assert" content="Verify visual rendering of padding/border/margin on a displaystyle mo element with the largeop property."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); + } + math { + /* Largeop variant for U+2AFF has width 100px + and height 300 * 5000 / 1000 = 1500px */ + font-family: TestFont; + font-size: 300px; + } +</style> +<body> + <p>This test passes if you see a cyan rectangle of width 300px and + height 1500px, surrounded by a 10px blue padding, surrounded by a 10px + blue/yellow dashed border, itself + surrounded by a 10px pink margin.</p> + <div style="background: pink; position: absolute; left: 10px; top: 4em;"> + <math displaystyle="true"> + <mo largeop="true" lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">⫿</mo> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html new file mode 100644 index 0000000000..275494ddd8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Padding/border/margin on an operator, stretchy along the block axis (reference)</title> +<body> + <p>This test passes if you see a cyan rectangle of width 300px and + height 1500px, surrounded by a 10px blue padding, surrounded by a 10px + blue/yellow dashed border, itself + surrounded by a 10px pink margin.</p> + </div> + <div style="background: pink; position: absolute; left: 10px; top: 4em;"> + <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;"> + <div style="width: 300px; height: 1500px; background: cyan;"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html new file mode 100644 index 0000000000..c54682f309 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Padding/border/margin on an operator, stretchy along the block axis</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-block-axis"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-operators"> +<link rel="match" href="padding-border-margin-003-ref.html"/> +<meta name="assert" content="Verify visual rendering of padding/border/margin on an operator, stretchy along the block axis."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/stretchy.woff"); + } + math { + font-family: TestFont; + font-size: 300px; + } +</style> +<body> + <p>This test passes if you see a cyan rectangle of width 300px and + height 1500px, surrounded by a 10px blue padding, surrounded by a 10px + blue/yellow dashed border, itself + surrounded by a 10px pink margin.</p> + <div style="background: pink; position: absolute; left: 10px; top: 4em;"> + <math> + <mspace height="750px" depth="750px"/> + <mo lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">⥜</mo> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html new file mode 100644 index 0000000000..ca539440f8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>presentational hints</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + @font-face { + font-family: DoubleStruck; + src: url("/fonts/math/mathvariant-double-struck.woff"); + } + @font-face { + font-family: Italic; + src: url("/fonts/math/mathvariant-italic.woff"); + } + math { + font: 25px/1 Ahem; + } +</style> +<body> + <p>dir: + <math style="direction: ltr;"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathcolor: + <math style="color: green;"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathbackground: + <math style="background: green;"> + <mtext>X</mtext> + <mtext>p</mtext> + </p> + <p>mathsize: + <math> + <mtext style="font-size: 100%">X</mtext> + </math> + </p> + <p>mathvariant: + <math> + <mi style="text-transform: uppercase">sin</mi> + </math> + </p> + <p>displaystyle: + <math style="math-style: compact"> + <munder> + <mo movablelimits="true">X</mo> + <mo>X</mo> + </munder> + </math> + </p> + <p>scriptlevel: + <math> + <mtext style="math-depth: 0;">X</mtext> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html new file mode 100644 index 0000000000..96ee69541b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>presentational hints</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings"> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> +<link rel="match" href="presentational-hints-001-ref.html"/> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="assert" content="Verify that local author style wins over presentation hints attributes"> +<style> + math { + font: 25px/1 Ahem; + } +</style> +<body> + <p>dir: + <math dir="rtl" style="direction: ltr;"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathcolor: + <math mathcolor="red" style="color: green;"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathbackground: + <math mathbackground="red" style="background: green;"> + <mtext>X</mtext> + <mtext>p</mtext> + </p> + <p>mathsize: + <math> + <mtext mathsize="300%" style="font-size: 100%">X</mtext> + </math> + </p> + <p>mathvariant: + <math> + <mi mathvariant="normal" style="text-transform: uppercase">sin</mi> + </math> + </p> + <p>displaystyle: + <math displaystyle="true" style="math-style: compact"> + <munder> + <mo movablelimits="true">X</mo> + <mo>X</mo> + </munder> + </math> + </p> + <p>scriptlevel: + <math> + <mtext scriptlevel="1" style="math-depth: 0;">X</mtext> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html new file mode 100644 index 0000000000..fa22741efe --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>presentational hints (dynamic)</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + math { + font: 25px/1 Ahem; + } + @font-face { + font-family: Italic; + src: url("/fonts/math/mathvariant-italic.woff"); + } +</style> +</head> +<body> + <p>dir: + <math dir="rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathcolor: + <math mathcolor="green"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathbackground: + <math mathbackground="green"> + <mtext>X</mtext> + <mtext>p</mtext> + </p> + <p>mathsize: + <math> + <mtext mathsize="300%">X</mtext> + </math> + </p> + <p>mathvariant: + <math style="font-family: Italic"> + <mi mathvariant="normal">X</mi> + </math> + </p> + <p>displaystyle: + <math displaystyle="true"> + <munder> + <mo movablelimits="true">X</mo> + <mo>X</mo> + </munder> + </math> + </p> + <p>scriptlevel: + <math> + <mtext scriptlevel="-1">X</mtext> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html new file mode 100644 index 0000000000..8bb9153b86 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/presentational-hints-002.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>presentational hints (dynamic)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#double-struck-mappings"> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> +<link rel="match" href="presentational-hints-002-ref.html"/> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="assert" content="Verify dynamically setting attributes mapped to style."> +<style> + math { + font: 25px/1 Ahem; + } + @font-face { + font-family: Italic; + src: url("/fonts/math/mathvariant-italic.woff"); + } +</style> +<script> + window.addEventListener("load", function() { + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + document.getElementById("dir").setAttribute("dir", "rtl"); + document.getElementById("mathcolor").setAttribute("mathcolor", "green"); + document.getElementById("mathbackground").setAttribute("mathbackground", "green"); + document.getElementById("mathsize").setAttribute("mathsize", "300%"); + document.getElementById("mathvariant").setAttribute("mathvariant", "normal"); + document.getElementById("displaystyle").setAttribute("displaystyle", "true"); + document.getElementById("scriptlevel").setAttribute("scriptlevel", "-1"); + + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</head> +<body> + <p>dir: + <math id="dir"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathcolor: + <math id="mathcolor"> + <mtext>X</mtext> + <mtext>p</mtext> + </math> + </p> + <p>mathbackground: + <math id="mathbackground"> + <mtext>X</mtext> + <mtext>p</mtext> + </p> + <p>mathsize: + <math> + <mtext id="mathsize">X</mtext> + </math> + </p> + <p>mathvariant: + <math style="font-family: Italic"> + <mi id="mathvariant">X</mi> + </math> + </p> + <p>displaystyle: + <math id="displaystyle"> + <munder> + <mo movablelimits="true">X</mo> + <mo>X</mo> + </munder> + </math> + </p> + <p>scriptlevel: + <math> + <mtext id="scriptlevel">X</mtext> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html new file mode 100644 index 0000000000..e9be1f2965 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html @@ -0,0 +1,219 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Automatic scriptlevel</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="assert" content="Verify automatic scriptlevel changes"> +<style> + #container, math { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function fontSize(element) { + return parseFloat((/(.+)px/).exec(window.getComputedStyle(element).getPropertyValue("font-size"))[1]); + } + function runTests() { + var container = document.getElementById("container"); + var epsilon = .1 + var fontSizeAtScriptLevelZero = fontSize(container); + + test(function() { + var element = document.getElementById("mfrac_displaystyle"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "numerator"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "denominator"); + }, "automatic scriptlevel on mfrac (displaystyle=true)"); + + test(function() { + var element = document.getElementById("mfrac_notdisplaystyle"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero * .71, epsilon, "numerator"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "denominator"); + }, "automatic scriptlevel on mfrac (displaystyle=false)"); + + test(function() { + var element = document.getElementsByTagName("mroot")[0]; + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71 * .71, epsilon, "index"); + }, "automatic scriptlevel on mroot"); + + ["msub", "msup", "msubsup", "munder", "mover", "munderover", "mmultiscripts"].forEach(tag => { + test(function() { + var element = document.getElementsByTagName(tag)[0]; + for (var i = 0; i < element.children.length; i++) + assert_approx_equals(fontSize(element.children[i]), i > 0 ? fontSizeAtScriptLevelZero * .71 : fontSizeAtScriptLevelZero, epsilon, `child ${i}`); + }, `automatic scriptlevel on ${tag}`); + }); + + test(function() { + var element = document.querySelector("munder[accentunder='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); + }, `automatic scriptlevel on munder (accentunder=true)`); + + test(function() { + var element = document.querySelector("mover[accent='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "over"); + }, `automatic scriptlevel on mover (accent=true)`); + + test(function() { + var element = document.querySelector("munderover[accentunder='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over"); + }, `automatic scriptlevel on munderover (accentunder=true)`); + + test(function() { + var element = document.querySelector("munderover[accent='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); + }, `automatic scriptlevel on munderover (accent=true)`); + + test(function() { + var element = document.getElementById("munderover-dynamic-case-insensitive") + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); + + element.removeAttribute("accent"); + element.setAttribute("accentunder", "TrUe"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over"); + }, "checking dynamic/case-insensitive accent/accentunder"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <div id="container"> + <p> + <math displaystyle="true"> + <mfrac id="mfrac_displaystyle"> + <mn>0</mn> + <mn>1</mn> + </mfrac> + </math> + + <math displaystyle="false"> + <mfrac id="mfrac_notdisplaystyle"> + <mn>0</mn> + <mn>1</mn> + </mfrac> + </math> + </p> + <p> + <math> + <mroot> + <mn>0</mn> + <mn>1</mn> + </mroot> + </math> + </p> + <p> + <math> + <msub> + <mn>0</mn> + <mn>1</mn> + </msub> + </math> + <math> + <msup> + <mn>0</mn> + <mn>1</mn> + </msup> + </math> + <math> + <msubsup> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </msubsup> + </math> + <math> + <munder> + <mn>0</mn> + <mn>1</mn> + </munder> + </math> + <math> + <mover> + <mn>0</mn> + <mn>1</mn> + </mover> + </math> + <math> + <munderover> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + <math> + <mmultiscripts> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mprescripts/> + <mn>6</mn> + <mn>7</mn> + <mn>8</mn> + <mn>9</mn> + </mmultiscripts> + </math> + </p> + <p> + <math> + <munder accentunder="true"> + <mn>0</mn> + <mn>1</mn> + </munder> + </math> + <math> + <mover accent="true"> + <mn>0</mn> + <mn>1</mn> + </mover> + </math> + <math> + <munderover accent="true"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + <math> + <munderover accentunder="true"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + </p> + <p> + <math> + <munderover id="munderover-dynamic-case-insensitive" accent="TrUe"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + </p> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html new file mode 100644 index 0000000000..dddd1f32b2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/size-containment-001.tentative.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>MathML and size containment</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + /* Revert style specified in the UA style sheet that changes box size. */ + merror { border: 0; } + mfrac { padding: 0; } +</style> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || + FragmentHelper.isEmpty(tag)) + continue; + + // TODO(https://github.com/w3c/mathml-core/issues/199): Check/decide how + // size containment behave for these cases: + // - table layout. + // - radical layout. + // - contain-intrinsic-block-size. + // - operators width special drawing (stretchy/largop). + if (tag == "mroot" || tag == "msqrt" || tag == "mtable") { + continue; + } + + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ +<div style="display: inline-block;"><math>${MathMLFragments[tag]}</math></div>\ +</div>`); + let div = document.body.lastElementChild; + + let elementContainer = div.firstElementChild; + let element = FragmentHelper.element(elementContainer); + FragmentHelper.forceNonEmptyDescendants(element); + + const style = `contain: size; contain-intrinsic-inline-size: 111px;`; + element.setAttribute("style", style) + + if (tag === "mo") { + element.setAttribute("lspace", "0"); + element.setAttribute("rspace", "0"); + } + + const elementContainerWidth = elementContainer.getBoundingClientRect().width; + const elementBox = element.getBoundingClientRect(); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + assert_equals(elementContainerWidth, 111); + }, `intrinsic size of ${tag} with ${style}`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + assert_equals(elementBox.width, 111); + }, `inline-size of ${tag} with ${style}`); + + div.style = "display: none;"; // Hide the div after measurement. + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml new file mode 100644 index 0000000000..d76a350290 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1-ref.xhtml @@ -0,0 +1,65 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style type="text/css"> + html { background-color: grey; } + td { border: 1px solid white; + padding-top: 0; + padding-bottom: 0; + padding-right: 1px; + padding-left: 1px; + background-color: black; + color: red; } + </style> + </head> +<body> + <table> + <td> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mphantom> + <mn>60</mn> + <mo>⁢</mo> + <msqrt> + <mn>2</mn> + <mo>+</mo> + <mn>3</mn> + <mo>-</mo> + <mo>5</mo> + </msqrt> + </mphantom> + </math> + </td> + </table> + <table> + <td> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mphantom> + <mroot> + <mfrac> + <mn>8</mn> + <mn>90</mn> + </mfrac> + <mn>61</mn> + </mroot> + </mphantom> + </math> + </td> + </table> + <table> + <td> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mphantom> + <mo>|</mo> + <mo>{</mo> + <mtable> + <mtr><mtd><mn>0</mn></mtd></mtr> + <mtr><mtd><mn>5</mn></mtd></mtr> + <mtr><mtd><mn>9</mn></mtd></mtr> + </mtable> + <mo>}</mo> + <mo>|</mo> + </mphantom> + </math> + </td> + </table> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml new file mode 100644 index 0000000000..c3689adb6f --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-1.xhtml @@ -0,0 +1,66 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Check that the content box is large enough</title> + <link rel="match" href="table-width-1-ref.xhtml"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=363240"/> + <style type="text/css"> + html { background-color: grey; } + td { border: 1px solid white; + padding-top: 0; + padding-bottom: 0; + padding-right: 1px; + padding-left: 1px; + background-color: black; + color: black; } + </style> + </head> +<body> + <table> + <td> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mrow> + <mn>60</mn> + <mo>⁢</mo> + <msqrt> + <mn>2</mn> + <mo>+</mo> + <mn>3</mn> + <mo>-</mo> + <mo>5</mo> + </msqrt> + </mrow> + </math> + </td> + </table> + <table> + <td> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mroot> + <mfrac> + <mn>8</mn> + <mn>90</mn> + </mfrac> + <mn>61</mn> + </mroot> + </math> + </td> + </table> + <table> + <td> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mrow> + <mo>|</mo> + <mo>{</mo> + <mtable> + <mtr><mtd><mn>0</mn></mtd></mtr> + <mtr><mtd><mn>5</mn></mtd></mtr> + <mtr><mtd><mn>9</mn></mtd></mtr> + </mtable> + <mo>}</mo> + <mo>|</mo> + </mrow> + </math> + </td> + </table> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html new file mode 100644 index 0000000000..dfb9eeca8b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>table-width-2</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + </head> + <body> + + <p> + <math> + <mtable> + <mtr> + <mtd><mtext>|</mtext></mtd> + <mtd><mrow style="width: 5em;"></mrow></mtd> + <mtd><mtext>|</mtext></mtd> + </mtr> + </mtable> + </math> + </p> + + <p> + <math> + <mtable> + <mtr> + <mtd><mtext>|</mtext></mtd> + <mtd><mrow style="width: 5em;"></mrow></mtd> + <mtd><mtext>|</mtext></mtd> + </mtr> + </mtable> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html new file mode 100644 index 0000000000..533a9324b4 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>table-width-2</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <link rel="match" href="table-width-2-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=459363"/> + </head> + <body> + + <p> + <math> + <mtable> + <mtr> + <mtd><mtext>|</mtext></mtd> + <mtd><mspace width="5em"></mspace></mtd> + <mtd><mtext>|</mtext></mtd> + </mtr> + </mtable> + </math> + </p> + + <p> + <math> + <mtable> + <mtr> + <mtd><mtext>|</mtext></mtd> + <mtd><mpadded width="5em"></mpadded></mtd> + <mtd><mtext>|</mtext></mtd> + </mtr> + </mtable> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html new file mode 100644 index 0000000000..f06cea4bec --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> + <head> + <title>table-width-3</title> + <meta charset="utf-8"/> + <style type="text/css"> + html { background-color: grey; } + td { border: 1px solid white; + padding-top: 0; + padding-bottom: 0; + padding-right: 1px; + padding-left: 1px; + background-color: black; + color: red; } + mi, mtext { font-size: 3em; } + span { font-style: italic; display: inline-block; } + </style> + </head> + <body> + + <table> + <tr> + <td> + <math> + <mphantom> + <mi>f</mi> + </mphantom> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mphantom> + <mi>f</mi> + <mi>f</mi> + <mi>f</mi> + </mphantom> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mphantom> + <mi style="font-style: italic;">fff</mi> + </mphantom> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mphantom> + <mtext><span>fff</span></mtext> + </mphantom> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mphantom> + <mtext><span>f</span></mtext> + <mtext><span>f</span></mtext> + <mtext><span>f</span></mtext> + </mphantom> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mphantom> + <mtext><span>f</span><span>f</span><span>f</span></mtext> + </mphantom> + </math> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html new file mode 100644 index 0000000000..4847ce4304 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-3.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + <head> + <title>table-width-3</title> + <meta charset="utf-8"/> + <link rel="match" href="table-width-3-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415413"/> + <style type="text/css"> + html { background-color: grey; } + td { border: 1px solid white; + padding-top: 0; + padding-bottom: 0; + padding-right: 1px; + padding-left: 1px; + background-color: black; + color: black; } + mi, mtext { font-size: 3em; } + span { font-style: italic; display: inline-block; } + </style> + </head> + <body> + + <table> + <tr> + <td> + <math> + <mi>f</mi> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mi>f</mi> + <mi>f</mi> + <mi>f</mi> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mi style="font-style: italic;">fff</mi> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mtext><span>fff</span></mtext> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mtext><span>f</span></mtext> + <mtext><span>f</span></mtext> + <mtext><span>f</span></mtext> + </math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math> + <mtext><span>f</span><span>f</span><span>f</span></mtext> + </math> + </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html new file mode 100644 index 0000000000..b31807dee4 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>table-width-4</title> + <meta charset="utf-8"/> + <style type="text/css"> + html { background-color: grey; } + td { border: 1px solid white; + padding-top: 0; + padding-bottom: 0; + padding-right: 2px; + padding-left: 1px; + background-color: black; + color: black; } + </style> + </head> + <body> + + <table> + <tr> + <td> + <math><mphantom><mi>ℓ</mi><mi>i</mi></mphantom></math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math><mphantom><mtext>ℓ</mtext><mi>i</mi></mphantom></math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math><mphantom><mtext style="font-style: italic">ℓ</mtext><mi>i</mi></mphantom></math> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html new file mode 100644 index 0000000000..4a88b84cb2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/table-width-4.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>table-width-4</title> + <meta charset="utf-8"/> + <link rel="match" href="table-width-4-ref.html"/> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=941607"/> + <style type="text/css"> + html { background-color: grey; } + td { border: 1px solid white; + padding-top: 0; + padding-bottom: 0; + padding-right: 2px; + padding-left: 1px; + background-color: black; + color: black; } + </style> + </head> + <body> + + <table> + <tr> + <td> + <math><mi>ℓ</mi><mi>i</mi></math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math><mtext>ℓ</mtext><mi>i</mi></math> + </td> + </tr> + </table> + <table> + <tr> + <td> + <math><mtext style="font-style: italic">ℓ</mtext><mi>i</mi></math> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html new file mode 100644 index 0000000000..005e8a7882 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/transform-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Transform property (reference)</title> +</head> +<body> + <p>Rectangles should be rotated.</p> + <div style="background: green; width: 200px; height: 200px; position: absolute; top: 100px; transform: rotate(90deg)"></div> + <div style="background: green; width: 200px; height: 200px; position: absolute; top: 300px; transform: rotate(90deg)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/transform.html b/testing/web-platform/tests/mathml/relations/css-styling/transform.html new file mode 100644 index 0000000000..c45fda3469 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/transform.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Transform property</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="transform-ref.html"/> +<meta name="assert" content="Verify that the transform property works on MathML elements."> +</head> +<body> + <p>Rectangles should be rotated.</p> + <div> + <math><mspace width="200px" height="200px" style="position:absolute; top:100px; background: green; transform: rotate(90deg)"/></math> + </div> + <div style="position: absolute; top: 300px; width: 200px; height: 200px"> + <math style="position: absolute; transform: rotate(90deg)"><mspace width="200px" height="200px" style="background: green"/></math> + </div> + <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/relations/css-styling/visibility-001-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html new file mode 100644 index 0000000000..fcaf5fe85b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>visibility (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html new file mode 100644 index 0000000000..56bf7b7da2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>visibility</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="match" href="visibility-001-ref.html"/> +<meta name="assert" content="Verify that visibility=hidden is used for the text of token elements."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px;"> + <math><mi style="visibility: hidden">1</mi></math> + <math><mn style="visibility: hidden">2</mn></math> + <math><mo style="visibility: hidden">3</mo></math> + <math><mtext style="visibility: hidden">4</mtext></math> + <math><ms style="visibility: hidden">5</ms></math> + <div id="dynamic"> + <math><mi>1</mi></math> + <math><mn>2</mn></math> + <math><mo>3</mo></math> + <math><mtext>4</mtext></math> + <math><ms>5</ms></math> + </div> + </div> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.visibility = "hidden"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html new file mode 100644 index 0000000000..fcaf5fe85b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>visibility (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html new file mode 100644 index 0000000000..f92d0faf6d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>visibility</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness"> +<link rel="match" href="visibility-002-ref.html"/> +<meta name="assert" content="Verify that visibility=hidden is used for the text and fraction bar of the mfrac element."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px;"> + <math><mfrac style="visibility: hidden"><mn>1</mn><mn>2</mn></mfrac></math> + <div id="dynamic"> + <math><mfrac><mn>1</mn><mn>2</mn></mfrac></math> + </div> + </div> + <script src="/mathml/support/feature-detection.js"></script> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.visibility = "hidden"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html new file mode 100644 index 0000000000..fcaf5fe85b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>visibility (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html new file mode 100644 index 0000000000..4bf4d45c81 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>visibility</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radical-symbol"> +<link rel="match" href="visibility-003-ref.html"/> +<meta name="assert" content="Verify that visibility=hidden is used for the text and radical symbol of the msqrt and mroot elements."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px;"> + <math><msqrt style="visibility: hidden"><mn>1</mn></msqrt></math> + <math><mroot style="visibility: hidden"><mn>2</mn><mn>3</mn></mroot></math> + <div id="dynamic"> + <math><msqrt><mn>1</mn></msqrt></math> + <math><mroot><mn>2</mn><mn>3</mn></mroot></math> + </div> + </div> + <script src="/mathml/support/feature-detection.js"></script> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.visibility = "hidden"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html new file mode 100644 index 0000000000..fcaf5fe85b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>visibility (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html new file mode 100644 index 0000000000..28678eaf0c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-004.tentative.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>visibility</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-mtext"> +<link rel="help" href="https://github.com/mathml-refresh/mathml-core/pull/24"> +<link rel="match" href="visibility-004.tentative-ref.html"/> +<meta name="assert" content="Verify that visibility=hidden is used for the text and graphical elements of the menclose element."> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px;"> + <math><menclose notation="left" style="visibility: hidden"><mn>1</mn></menclose></math> + <math><menclose notation="right" style="visibility: hidden"><mn>2</mn></menclose></math> + <math><menclose notation="top" style="visibility: hidden"><mn>3</mn></menclose></math> + <math><menclose notation="bottom" style="visibility: hidden"><mn>4</mn></menclose></math> + <math><menclose notation="box" style="visibility: hidden"><mn>5</mn></menclose></math> + <math><menclose notation="roundedbox" style="visibility: hidden"><mn>6</mn></menclose></math> + <math><menclose notation="actuarial" style="visibility: hidden"><mn>7</mn></menclose></math> + <math><menclose notation="madruwb" style="visibility: hidden"><mn>8</mn></menclose></math> + <math><menclose notation="horizontalstrike" style="visibility: hidden"><mn>9</mn></menclose></math> + <math><menclose notation="verticalstrike" style="visibility: hidden"><mn>10</mn></menclose></math> + <math><menclose notation="updiagonalstrike" style="visibility: hidden"><mn>11</mn></menclose></math> + <math><menclose notation="downdiagonalstrike" style="visibility: hidden"><mn>12</mn></menclose></math> + <math><menclose notation="longdiv" style="visibility: hidden"><mn>13</mn></menclose></math> + <math><menclose notation="circle" style="visibility: hidden"><mn>14</mn></menclose></math> + <div id="dynamic"> + <math><menclose notation="left"><mn>1</mn></menclose></math> + <math><menclose notation="right"><mn>2</mn></menclose></math> + <math><menclose notation="top"><mn>3</mn></menclose></math> + <math><menclose notation="bottom"><mn>4</mn></menclose></math> + <math><menclose notation="box"><mn>5</mn></menclose></math> + <math><menclose notation="roundedbox"><mn>6</mn></menclose></math> + <math><menclose notation="actuarial"><mn>7</mn></menclose></math> + <math><menclose notation="madruwb"><mn>8</mn></menclose></math> + <math><menclose notation="horizontalstrike"><mn>9</mn></menclose></math> + <math><menclose notation="verticalstrike"><mn>10</mn></menclose></math> + <math><menclose notation="updiagonalstrike"><mn>11</mn></menclose></math> + <math><menclose notation="downdiagonalstrike"><mn>12</mn></menclose></math> + <math><menclose notation="longdiv"><mn>13</mn></menclose></math> + <math><menclose notation="circle"><mn>14</mn></menclose></math> + </div> + </div> + <script> + window.addEventListener("load", () => { + document.getElementById("dynamic").style.visibility = "hidden"; + document.documentElement.classList.remove("reftest-wait"); + }); + </script> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html new file mode 100644 index 0000000000..fcaf5fe85b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>visibility (reference)</title> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html new file mode 100644 index 0000000000..a3af376fea --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/visibility-005.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>visibility</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> +<link rel="match" href="visibility-005-ref.html"/> +<meta name="assert" content="Verify that visibility=hidden is used for normal, stretchy and large operators."> +<style> + math { + font: 20px/1 Ahem; + } + @font-face { + font-family: operators; + src: url("/fonts/math/operators.woff"); + } + mo { + font-family: operators; + } +</style> +</head> +<body> + <p>Test passes if you see a green square.</p> + <div style="background: green; color: red; width: 200px; height: 200px;"> + <math> + <!-- unstretched operators --> + <mo style="visibility: hidden">⥯</mo> + <mo style="visibility: hidden">+</mo> + <mo style="visibility: hidden">-</mo> + </math> + <math displaystyle="true"> + <!-- large operator --> + <mo largeop="true" style="visibility: hidden">⥯</mo> + </math> + <math> + <mrow> + <!-- stretchy, small size --> + <mspace height="2em"/> + <mo style="visibility: hidden">⥯</mo> + </mrow> + </math> + <math> + <mrow> + <!-- stretchy, large size --> + <mspace height="4em"/> + <mo style="visibility: hidden">⥯</mo> + </mrow> + </math> + <div id="dynamic"> + <math> + <!-- unstretched operators --> + <mo stretchy="false">⥯</mo> + <mo>+</mo> + <mo>-</mo> + </math> + <math displaystyle="true"> + <!-- large operator --> + <mo largeop="true">⥯</mo> + </math> + <math> + <mrow> + <!-- stretchy, small size --> + <mspace height="2em"/> + <mo>⥯</mo> + </mrow> + </math> + <math> + <mrow> + <!-- stretchy, large size --> + <mspace height="4em"/> + <mo>⥯</mo> + </mrow> + </math> + </div> + </div> + <script src="/mathml/support/fonts.js"></script> + <script> + window.addEventListener("load", () => loadAllFonts().then(() => { + document.getElementById("dynamic").style.visibility = "hidden"; + document.documentElement.classList.remove("reftest-wait"); + })); + </script> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html new file mode 100644 index 0000000000..2deedc3f0b --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>width, height, inline-size and block-size</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<style> + /* Revert style specified in the UA style sheet that changes box size. */ + merror { border: 0; } + mfrac { padding: 0; } +</style> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag)) + continue; + + document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`); + let div = document.body.lastElementChild; + let element = FragmentHelper.element(div.firstElementChild); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var style = `width: 500px; height: 400px;`; + element.setAttribute("style", style); + let box = element.getBoundingClientRect(); + assert_approx_equals(box.width, 500, epsilon, "width"); + assert_approx_equals(box.height, 400, epsilon, "height"); + }, `width and height properties on ${tag}`); + + test(function() { + assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); + var style = `inline-size: 600px; block-size: 700px;`; + element.setAttribute("style", style); + let box = element.getBoundingClientRect(); + assert_approx_equals(box.width, 600, epsilon, "width"); + assert_approx_equals(box.height, 700, epsilon, "height"); + }, `inline-size and block-size properties on ${tag}`); + + div.style = "display: none;"; // Hide the div after measurement. + } + + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html new file mode 100644 index 0000000000..ed5125e952 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002-ref.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>content position with width/height (reference)</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body, math { + font: 25px/1 Ahem; + color: black; + } + .test { + margin: .5em; + } + .box { + width: 7em; + height: 3em; + border: 1px solid blue; + display: inline-block; + } + .center { + text-align: center; + } + + /* Revert style specified in the UA style sheet that changes box size. */ + mfrac { padding: 0; } +</style> +</head> +<body> + <div class="test"> + <div class="box"> + <math> + <mtext>X</mtext> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <mtext>X</mtext> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <mrow> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mrow> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <mrow> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mrow> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <mpadded lspace="1em" voffset="-1em"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + </diV> + <div class="box" dir="rtl"> + <math dir="rtl"> + <mpadded lspace="1em" voffset="-1em"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <mpadded width="9em" height="1em" depth=".5em"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <mpadded width="9em" height="1em" depth=".5em"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + </div> + </div> + + <div class="test"> + <div class="box center"> + <math> + <mfrac linethickness="0"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + </div> + <div class="box center" dir="rtl"> + <math dir="rtl"> + <mfrac linethickness="0"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <msqrt> + <mtext>X</mtext> + </msqrt> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <msqrt> + <mtext>X</mtext> + </msqrt> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <mroot> + <mtext>X</mtext> + <mtext>X</mtext> + </mroot> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <mroot> + <mtext>X</mtext> + <mtext>X</mtext> + </mroot> + </math> + </div> + </div> + +</body> +</htmL> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html new file mode 100644 index 0000000000..99822c1ed9 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-002.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>content position with width/height</title> +<link rel="match" href="width-height-002-ref.html"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<meta name="assert" content="Verify the inline-start and block-start edges of the math content box for the mtext, mrow, mpadded, mfrac, msqrt, mroot layout algorithms."/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body, math { + font: 25px/1 Ahem; + color: black; + } + .test { + margin: .5em; + } + .box { + width: 7em; + height: 3em; + border: 1px solid blue; + } + + /* Revert style specified in the UA style sheet that changes box size. */ + mfrac { padding: 0; } +</style> +</head> +<body> + + <div class="test"> + <math> + <mtext class="box">X</mtext> + </math> + <math dir="rtl"> + <mtext class="box">X</mtext> + </math> + </div> + + <div class="test"> + <math> + <mrow class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mrow> + </math> + <math dir="rtl"> + <mrow class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mrow> + </math> + </div> + + <div class="test"> + <math> + <mpadded lspace="1em" voffset="-1em" class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + <math dir="rtl"> + <mpadded lspace="1em" voffset="-1em" class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + </div> + + <div class="test"> + <math> + <mpadded width="9em" height="1em" depth=".5em" class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + <math dir="rtl"> + <mpadded width="9em" height="1em" depth=".5em" class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </mpadded> + </math> + </div> + + <div class="test"> + <math> + <mfrac class="box" linethickness="0"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + <math dir="rtl"> + <mfrac class="box" linethickness="0"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + </div> + + <div class="test"> + <math> + <msqrt class="box"> + <mtext>X</mtext> + </msqrt> + </math> + <math dir="rtl"> + <msqrt class="box"> + <mtext>X</mtext> + </msqrt> + </math> + </div> + + <div class="test"> + <math> + <mroot class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </mroot> + </math> + <math dir="rtl"> + <mroot class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </mroot> + </math> + </div> + +</body> +</htmL> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html new file mode 100644 index 0000000000..84eb2cd089 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003-ref.html @@ -0,0 +1,178 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>content position with width/height (reference)</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body, math { + font: 25px/1 Ahem; + color: black; + } + .test { + margin: .5em; + } + .box { + width: 7em; + height: 3em; + border: 1px solid blue; + display: inline-block; + } + .center { + text-align: center; + } +</style> +</head> +<body> + + <div class="test"> + <div class="box center"> + <math> + <munder> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + </math> + </div> + <div class="box center" dir="rtl"> + <math dir="rtl"> + <munder> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + </math> + </div> + </div> + + <div class="test"> + <div class="box center"> + <math> + <mover> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + </math> + </div> + <div class="box center" dir="rtl"> + <math dir="rtl"> + <mover> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + </math> + </div> + </div> + + <div class="test"> + <div class="box center"> + <math> + <munderover> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + </div> + <div class="box center" dir="rtl"> + <math dir="rtl"> + <munderover> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <msub> + <mtext>X</mtext> + <mtext>X</mtext> + </msub> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <msub> + <mtext>X</mtext> + <mtext>X</mtext> + </msub> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <msup> + <mtext>X</mtext> + <mtext>X</mtext> + </msup> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <msup> + <mtext>X</mtext> + <mtext>X</mtext> + </msup> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <msubsup> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </msubsup> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <msubsup> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </msubsup> + </math> + </div> + </div> + + <div class="test"> + <div class="box"> + <math> + <mmultiscripts> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mprescripts/> + <mtext>X</mtext> + <mtext>X</mtext> + </mmultiscripts> + </math> + </div> + <div class="box" dir="rtl"> + <math dir="rtl"> + <mmultiscripts> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mprescripts/> + <mtext>X</mtext> + <mtext>X</mtext> + </mmultiscripts> + </math> + </div> + </div> + +</body> +</htmL> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html new file mode 100644 index 0000000000..05e00f4759 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-003.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>content position with width/height</title> +<link rel="match" href="width-height-003-ref.html"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Verify the inline-start and block-start edges of the math content box for the munder, mover, munderover, msub, msup, msubsup, multiscripts layout algorithms."/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + body, math { + font: 25px/1 Ahem; + color: black; + } + .test { + margin: .5em; + } + .box { + width: 7em; + height: 3em; + border: 1px solid blue; + } +</style> +</head> +<body> + + <div class="test"> + <math> + <munder class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + </math> + <math dir="rtl"> + <munder class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + </math> + </div> + + <div class="test"> + <math> + <mover class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + </math> + <math dir="rtl"> + <mover class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + </math> + </div> + + <div class="test"> + <math> + <munderover class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + <math dir="rtl"> + <munderover class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + </div> + + <div class="test"> + <math> + <msub class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </msub> + </math> + <math dir="rtl"> + <msub class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </msub> + </math> + </div> + + <div class="test"> + <math> + <msup class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </msup> + </math> + <math dir="rtl"> + <msup class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + </msup> + </math> + </div> + + <div class="test"> + <math> + <msubsup class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </msubsup> + </math> + <math dir="rtl"> + <msubsup class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </msubsup> + </math> + </div> + + <div class="test"> + <math> + <mmultiscripts class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mprescripts/> + <mtext>X</mtext> + <mtext>X</mtext> + </mmultiscripts> + </math> + <math dir="rtl"> + <mmultiscripts class="box"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + <mprescripts/> + <mtext>X</mtext> + <mtext>X</mtext> + </mmultiscripts> + </math> + </div> + +</body> +</htmL> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html b/testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html new file mode 100644 index 0000000000..7133573b04 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/width-height-004.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>content position with width/height</title> +<link rel="match" href="width-height-003-ref.html"> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Verify the inline-start of the children of the munder, mover, munderover and mfrac layout algorithms."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="/mathml/support/fonts.js"></script> +<style> + .test, math { + font: 25px/1 Ahem; + color: black; + } + .test { + margin: .5em; + } + [data-name] { + width: 7em; + height: 3em; + border: 1px solid blue; + } +</style> +<script> + var epsilon = 1; + + function getMiddle(aElement) { + let box = aElement.getBoundingClientRect(); + return (box.left + box.right) / 2; + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + Array.from(document.querySelectorAll("[data-name]")).forEach(element => { + test(() => { + let elementMiddle = getMiddle(element); + Array.from(element.children).forEach(child => { + assert_approx_equals(getMiddle(child), elementMiddle, epsilon); + }); + }, element.dataset.name); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + + <div class="test"> + <math> + <mfrac data-name="mfrac"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + <math dir="rtl"> + <mfrac data-name="RTL mfrac"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + </div> + + <div class="test"> + <math> + <mfrac linethickness="0" data-name="mfrac without bar"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + <math dir="rtl"> + <mfrac linethickness="0" data-name="RTL mfrac without bar"> + <mtext>X</mtext> + <mtext>X</mtext> + </mfrac> + </math> + </div> + + <div class="test"> + <math> + <munder data-name="munder"> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + </math> + <math dir="rtl"> + <munder data-name="RTL munder"> + <mtext>X</mtext> + <mtext>X</mtext> + </munder> + </math> + </div> + + <div class="test"> + <math> + <mover data-name="mover"> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + </math> + <math dir="rtl"> + <mover data-name="RTL mover"> + <mtext>X</mtext> + <mtext>X</mtext> + </mover> + </math> + </div> + + <div class="test"> + <math> + <munderover data-name="munderover"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + <math dir="rtl"> + <munderover data-name="RTL munderover"> + <mtext>X</mtext> + <mtext>X</mtext> + <mtext>X</mtext> + </munderover> + </math> + </div> + +</body> +</htmL> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html new file mode 100644 index 0000000000..e239cdca5a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Forced writing-mode on MathML elements</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Test that writing-mode is forced to horizontal-tb on MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<style> + /* selector defined in mathml-fragments.js */ + .element { + writing-mode: vertical-lr; + padding-block-start: 10px; + padding-block-end: 15px; + padding-inline-start: 20px; + padding-inline-end: 25px; + } +</style> +</head> +<body> + <div id="log"></div> + <div id="container"> + <math class="element"></math> + </div> + <script> + var container = document.getElementById("container"); + for (tag in MathMLFragments) { + container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`); + } + let unknownElement = FragmentHelper.createElement("unknown"); + unknownElement.setAttribute("class", "element"); + container.appendChild(unknownElement); + Array.from(document.getElementsByClassName("element")).forEach(element => { + var tag = element.tagName; + var style = window.getComputedStyle(element); + test(function () { + assert_equals(style["writing-mode"], "horizontal-tb"); + }, `writing-mode is forced to horizontal-tb on <${tag}> element`); + test(function () { + assert_equals(style["padding-block-start"], style["padding-top"]); + assert_equals(style["padding-block-end"], style["padding-bottom"]); + assert_equals(style["padding-inline-start"], style["padding-left"]); + assert_equals(style["padding-inline-end"], style["padding-right"]); + }, `logical properties interpreted in horizontal-tb on <${tag}> element`); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html new file mode 100644 index 0000000000..6eae88efb1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Reset writing-mode and logical property (reference)</title> + </head> + <body> + <p>Test passes if you see a green square.</p> + <math style="writing-mode: horizontal-tb; + padding-top: 200px; + background: green"> + <mspace width="200px"/> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html new file mode 100644 index 0000000000..939cfc5ba6 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Reset writing-mode and logical property</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <meta name="assert" content="Verify how forced writing-mode is taken into account for logicial properties."> + <link rel="match" href="reset-and-logicial-property-ref.html"> + </head> + <body> + <p>Test passes if you see a green square.</p> + <math style="writing-mode: vertical-lr; + padding-block-start: 200px; + background: green"> + <mspace width="200px"/> + </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/relations/css-styling/writing-mode/writing-mode-001.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html new file mode 100644 index 0000000000..b751caf90d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>writing mode</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) for mrow."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + var reference = document.getElementById("horizontal-tb_ltr"); + + ["horizontal-tb_rtl"].forEach(id => { + var element = document.getElementById(id); + + test(function() { + var style = window.getComputedStyle(element); + var writingMode = id.split("_"); + assert_equals(style.getPropertyValue("writing-mode"), + writingMode[0], "writing-mode"); + assert_equals(style.getPropertyValue("direction"), + writingMode[1], "direction"); + }, `Inheritance of CSS writing-mode and direction (id='${id}')`); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + compareLayout(element, reference, epsilon); + }, `Layout of mrow (id='${id}')`); + }); + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow id="horizontal-tb_ltr"> + <mspace style="background: blue" + width="20px" height="30px" depth="40px"></mspace> + <mspace style="background: black" + width="50px" depth="60px"></mspace> + <mspace style="background: yellow" + width="70px" height="80px"></mspace> + </mrow> + </math> + </p> + <p> + <math style="direction: rtl;"> + <mrow id="horizontal-tb_rtl"> + <mspace style="background: blue" + width="20px" height="30px" depth="40px"></mspace> + <mspace style="background: black" + width="50px" depth="60px"></mspace> + <mspace style="background: yellow" + width="70px" height="80px"></mspace> + </mrow> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html new file mode 100644 index 0000000000..c0b64a917a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>writing mode</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + for (tag in MathMLFragments) { + if (tag == "annotation" || tag == "annotation-xml") + continue; // These tags have display: none. + + ["horizontal-tb_rtl"].forEach(id => { + var writingMode = id.split("_"); + var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`; + + document.body.insertAdjacentHTML("beforeend", `<div>\ +<math>${MathMLFragments[tag]}</math>\ +<math>${MathMLFragments[tag]}</math>\ +</div>`); + var div = document.body.lastElementChild; + + var styleMath = div.firstElementChild; + styleMath.setAttribute("style", writingModeString); + var styleElement = FragmentHelper.element(styleMath); + + var referenceMath = div.lastElementChild; + var referenceElement = FragmentHelper.element(referenceMath); + + [styleMath, referenceMath].forEach(math => { + Array.from(math.getElementsByClassName("mathml-container")).forEach(container => { + container.insertAdjacentHTML("beforeend", "\ +<mspace style='background: blue'\ + width='20px' height='30px' depth='40px'></mspace>\ +<mspace style='background: black'\ + width='50px' depth='60px'></mspace>\ +<mspace style='background: yellow'\ + width='70px' height='80px'></mspace>"); + }); + Array.from(math.getElementsByClassName("foreign-container")).forEach(container => { + container.insertAdjacentHTML("beforeend", "\ +<span style='display: inline-block; background: lightblue;\ + inline-size: 20px; block-size: 30px;\ + vertical-align: bottom;'></span>\ +<span style='display: inline-block; background: pink;\ + inline-size: 40px; block-size: 50px;\ + vertical-align: bottom;'></span>"); + }); + }); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var style = window.getComputedStyle(styleElement); + assert_equals(style.getPropertyValue("writing-mode"), + writingMode[0], "writing-mode"); + assert_equals(style.getPropertyValue("direction"), + writingMode[1], "direction"); + compareLayout(styleElement, referenceElement, epsilon); + }, `Layout of ${tag} (${writingModeString})`); + + div.style = "display: none;"; // Hide the div after testing. + }); + } + done(); + } +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/class-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/class-1-ref.html new file mode 100644 index 0000000000..5afa59ecf2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/class-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Class (reference)</title> +</head> +<body> + + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext style="background: green; color: white;">PASS</mtext> + </math> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/class-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/class-1.html new file mode 100644 index 0000000000..fd1678d440 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/class-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Class</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="class-1-ref.html"/> +<meta name="assert" content="Verify that the class attribute affects CSS selectors."> +<style> + mtext.fail { display: none; } + mtext.pass { background: green; } +</style> +</head> +<body> + + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext class="fail" style="background: red; color: white;">FAIL</mtext> + <mtext class="pass" style="color: white;">PASS</mtext> + </math> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/class-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/class-2.html new file mode 100644 index 0000000000..e694b063a6 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/class-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Class</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="Verify whether the getElementsByClassName() works for MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("DOMContentLoaded", function() { + var mtext = document.getElementsByClassName("cl"); + test(function() { + assert_equals(mtext.length, 3); + var mtext_ref = document.body.lastElementChild.firstElementChild; + mtext_ref = mtext_ref.nextElementSibling.nextElementSibling + assert_equals(mtext[0], mtext_ref); + mtext_ref = mtext_ref.nextElementSibling.nextElementSibling; + assert_equals(mtext[1], mtext_ref); + mtext_ref = mtext_ref.nextElementSibling.nextElementSibling; + assert_equals(mtext[2], mtext_ref); + }, "getElementsByClassName()"); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <math> + <mtext class="cl_"></mtext> + <mtext class="c"></mtext> + <mtext class="cl"></mtext> + <mtext class="cl_"></mtext> + <mtext class="cl"></mtext> + <mtext class="c"></mtext> + <mtext class="cl"></mtext> + <mtext class="cl_"></mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html new file mode 100644 index 0000000000..bf2f8d11ed --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<title>clipboard event handlers for MathML</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> +<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"/> +<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"/> +<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut"/> +<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste"/> +<meta + name="assert" + content="MathMLElements incorporates oncopy / oncut / onpaste event handlers" +/> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<math + oncopy="window.copyHappened1 = true" + oncut="window.cutHappened1 = true" + onpaste="window.pasteHappened1 = true" +> + <mi>E</mi> +</math> +<script> + const EVENTS = ["copy", "cut", "paste"]; + const el = document.querySelector("math"); + + function dispatchEventTest(name) { + const mathEl = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", + "math" + ); + test(() => { + let target = undefined; + mathEl[`on${name}`] = (e) => { target = e.currentTarget; } + const event = new ClipboardEvent(name, { + bubbles: true, + cancellable: true + }); + mathEl.dispatchEvent(event); + assert_equals(target, mathEl, "The event must be fired at the <math> element"); + }, `${name}: dispatching an Event at a <math> element must trigger element.on${name}`); + } + + function evaluatedHandlerTest(name) { + const handlerName = "on" + name; + + test(() => { + const compiledHandler = el[handlerName]; + + assert_equals( + typeof compiledHandler, + "function", + `The ${handlerName} property must be a function` + ); + compiledHandler(); + assert_true( + window[`${name}Happened1`], + "Calling the handler must run the code" + ); + }, `${handlerName}: the content attribute must be compiled into a function as the corresponding property`); + + test(() => { + const mathEl = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", + "math" + ); + assert_equals(mathEl[handlerName], null, `The ${handlerName} property must be null (no attribute)`); + + mathEl.setAttribute(handlerName, `window.${handlerName}Happened2 = true;`); + const compiledHandler = mathEl[handlerName]; + assert_equals( + typeof compiledHandler, + "function", + `The ${handlerName} property must be a function (set attribute)` + ); + compiledHandler(); + assert_true( + window[`${handlerName}Happened2`], + "Calling the handler must run the code (set attribute)" + ); + + window[`${handlerName}Happened2`] = false; + const clonedMathEl = mathEl.cloneNode(true); + const clonedCompiledHandler = clonedMathEl[handlerName]; + assert_equals( + typeof clonedCompiledHandler, + "function", + `The ${handlerName} property must be a function (clone node)` + ); + clonedCompiledHandler(); + assert_true( + window[`${handlerName}Happened2`], + "Calling the handler must run the code (clone node)" + ); + + mathEl.setAttribute(handlerName, `window.${handlerName}Happened3 = true;`); + const newCompiledHandler = mathEl[handlerName]; + assert_equals( + typeof newCompiledHandler, + "function", + `The ${handlerName} property must be a function (modify attribute)` + ); + newCompiledHandler(); + assert_true( + window[`${handlerName}Happened3`], + "Calling the handler must run the code (modify attribute)" + ); + + mathEl.removeAttribute(handlerName); + assert_equals(mathEl[handlerName], null, `The ${handlerName} property must be null (remove attribute)`); + }, `${handlerName}: dynamic changes on the attribute`); + + } + + EVENTS.forEach(name => { + dispatchEventTest(name); + evaluatedHandlerTest(name); + }); +</script> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1-ref.html new file mode 100644 index 0000000000..71ee8cea9d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Color Attributes (reference)</title> +<style> + #content > div { + position: absolute; + } +</style> +</head> +<body> + + <p>Test passes if you see the text below is written in white on a green + background.</p> + + <div id="content"> + <div> + <math style="background: green;"> + <mtext style="color: white;">Hello World!</mtext> + </math> + </div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1.html new file mode 100644 index 0000000000..211bda7f85 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/color-attributes-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Color Attributes</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes"> +<meta name="assert" content="Verify that the mathcolor and mathbackground attributes are supported on the math element."> +<link rel="match" href="color-attributes-1-ref.html"/> +<style> + #content { + color: red; + } + #content > div { + position: absolute; + } +</style> +</head> +<body> + + <p>Test passes if you see the text below is written in white on a green + background.</p> + + <div id="content"> + <div> + <math style="background: red;"> + <mtext style="visibility: hidden;">Hello World!</mtext> + </math> + </div> + <div> + <math mathcolor="white" mathbackground="green"> + <mtext>Hello World!</mtext> + </math> + </div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/content-editable.html b/testing/web-platform/tests/mathml/relations/html5-tree/content-editable.html new file mode 100644 index 0000000000..28e8630829 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/content-editable.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML inside content-editable</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<meta name="assert" content="Verify that putting MathML inside a content-editable div shouldn't affect its layout."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("DOMContentLoaded", function() { + var epsilon = 1; + var mfrac = document.getElementById("mfrac"); + var num = mfrac.firstElementChild.getBoundingClientRect(); + var denom = mfrac.lastElementChild.getBoundingClientRect(); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(num.width, 30, epsilon, "numerator width"); + assert_approx_equals(num.height, 40, epsilon, "numerator height"); + assert_approx_equals(denom.width, 50, epsilon, "denominator width"); + assert_approx_equals(denom.height, 60, epsilon, "denominator height"); + }, "mspace layout in content-editable div"); + test(function() { + assert_true(MathMLFeatureDetection.has_mfrac()); + assert_greater_than_equal(denom.bottom - num.top, + (40 + 60), + "numerator is above the denominator"); + assert_approx_equals((num.left + num.right) / 2, + (denom.left + denom.right) / 2, + epsilon, "numerator and denominator are horizontally aligned"); + }, "mfrac layout in content-editable div"); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <div contenteditable="true"> + This is + <math> + <mfrac id="mfrac"> + <mspace width="30px" height="40px" style="background: cyan"></mspace> + <mspace width="50px" height="60px" style="background: yellow"></mspace> + </mfrac> + </math> + a content editable div + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative-ref.html new file mode 100644 index 0000000000..19f3e6c82a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML 'ElementCSSInlineStyle` Dynamic Tests</title> +<style> +mspace { + background-color: green; +} +</style> +</head> +<body> + <span>This tests that `ElementCSSInlineStyle` interface changes update rendering.</span> + <div> + <math><mspace width="50px" height="100px"/><mspace width="50px" height="100px"/></math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative.html new file mode 100644 index 0000000000..5d27d6a7e6 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-dynamic.tentative.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <meta charset="utf-8" /> + <title>MathML 'ElementCSSInlineStyle` Dynamic Tests</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> + <link rel="match" href="css-inline-style-dynamic.tentative-ref.html"/> + <script src="/mathml/support/feature-detection.js"></script> + <style> + #hidden { + visibility: hidden; + background-color: green; + } + #red { + background-color: red; + } + </style> + <meta + name="assert" + content="MathMLElements ElementCSSInlineStyle interface changes update rendering" + /> + <script type="text/javascript"> + function test() + { + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + document.body.offsetTop; // Update layout + + var mspace = document.getElementById("hidden"); + if (mspace.style) + mspace.style.visibility = "visible"; + + mspace = document.getElementById("red"); + if (mspace.style) + mspace.style.backgroundColor = "green"; + + document.documentElement.className = ""; + } + </script> + </head> + <body onload="test()"> + <span>This tests that `ElementCSSInlineStyle` interface changes update rendering.</span> + <div> + <math><mspace width="50px" height="100px" id="hidden"/><mspace width="50px" height="100px" id="red"/></math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html new file mode 100644 index 0000000000..f8348c15b2 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>MathML 'ElementCSSInlineStyle` Mixin Tests</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> + <style> + math * { + background-color: red; + } + </style> + <meta + name="assert" + content="MathMLElements incorporate a functional ElementCSSInlineStyle interface" + /> + <script src="/mathml/support/mathml-fragments.js"></script> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <span + >This tests the presence and functionality of features of the + `ElementCSSInlineStyle` interface for MathMLElements</span + > + <math></math> + <script> + let mathEl = document.querySelector("math"); + + test(function() { + mathEl.style.backgroundColor = "lime"; + assert_equals( + getComputedStyle(mathEl).backgroundColor, + "rgb(0, 255, 0)", + "The applied background should be green." + ); + }, `The <math> element style property should be present and be functional.`); + + Object.keys(MathMLFragments).forEach(elName => { + mathEl.innerHTML = MathMLFragments[elName]; + + test(function() { + let el = FragmentHelper.element(mathEl); + el.style.backgroundColor = "blue"; + + assert_equals( + getComputedStyle(el).backgroundColor, + "rgb(0, 0, 255)", + "The applied background should be blue." + ); + }, `The ${elName}'s style property should be present and be functional.`); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/display-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/display-1.html new file mode 100644 index 0000000000..fa92771fac --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/display-1.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML display attribute</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="Verify that the display attribute on the math element is supported and impacts centering and line breaking with surrounding content."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/attribute-values.js"></script> +<script> + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + window.addEventListener("DOMContentLoaded", function() { + for (transform in AttributeValueTransforms) { + TransformAttributeValues(transform, ["display"]); + var content = getBox("content"); + + var before_block = getBox("before_block"); + var mspace_block = getBox("mspace_block"); + var after_block = getBox("after_block"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(before_block.left, content.left, 1, + "content before must be left aligned"); + assert_approx_equals((mspace_block.left + mspace_block.right) / 2, + (content.left + content.right) / 2, + 1, + "math must be centered."); + assert_approx_equals(after_block.left, content.left, 1, + "content after must be left aligned"); + assert_less_than_equal(before_block.bottom, mspace_block.top, + "new line before math"); + assert_less_than_equal(mspace_block.bottom, after_block.top, + "new line after math"); + }, `Test display math ${transform}`); + + var before_inline = getBox("before_inline"); + var mspace_inline = getBox("mspace_inline"); + var after_inline = getBox("after_inline"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals((before_inline.top + before_inline.bottom) / 2, + (mspace_inline.top + mspace_inline.bottom) / 2, + 1, + "content before must be horizontally aligned with math"); + assert_approx_equals((after_inline.top + after_inline.bottom) / 2, + (mspace_inline.top + mspace_inline.bottom) / 2, + 1, + "content after must be horizontally aligned with math"); + assert_less_than_equal(before_inline.right, mspace_inline.left, + "content before must be on the left of math"); + assert_less_than_equal(mspace_inline.right, after_inline.left, + "content after must be on the right of math"); + }, `Test inline math ${transform}`); + + var before_block_and_specified_width = getBox("before_block_and_specified_width"); + var mspace_width = getBox("mspace_width"); + var after_block_and_specified_width = getBox("after_block_and_specified_width"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + let math = getBox("math_with_specified_width"); + assert_approx_equals(before_block_and_specified_width.left, math.left, 1, + "content before must be left aligned"); + assert_approx_equals(math.width, 100, 1, + "math uses specified width."); + assert_approx_equals((mspace_width.left + mspace_width.right) / 2, + (math.left + math.right) / 2, + 1, + "math must be centered."); + assert_approx_equals(after_block_and_specified_width.left, math.left, 1, + "content after must be left aligned"); + assert_less_than_equal(before_block_and_specified_width.bottom, mspace_width.top, + "new line before math"); + assert_less_than_equal(mspace_width.bottom, after_block_and_specified_width.top, + "new line after math"); + }, `Test width on display=block math ${transform}`); + } + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + document.getElementById("mspace_dynamic_block").parentNode. + setAttribute("display", "block"); + var before_block = getBox("before_dynamic_block"); + var mspace_block = getBox("mspace_dynamic_block"); + var after_block = getBox("after_dynamic_block"); + + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(before_block.left, content.left, 1, + "content before must be left aligned"); + assert_approx_equals((mspace_block.left + mspace_block.right) / 2, + (content.left + content.right) / 2, + 1, + "math must be centered."); + assert_approx_equals(after_block.left, content.left, 1, + "content after must be left aligned"); + assert_less_than_equal(before_block.bottom, mspace_block.top, + "new line before math"); + assert_less_than_equal(mspace_block.bottom, after_block.top, + "new line after math"); + }, "Test dynamically setting display=block"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + document.getElementById("mspace_dynamic_inline").parentNode. + removeAttribute("display"); + var before_inline = getBox("before_dynamic_inline"); + var mspace_inline = getBox("mspace_dynamic_inline"); + var after_inline = getBox("after_dynamic_inline"); + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals((before_inline.top + before_inline.bottom) / 2, + (mspace_inline.top + mspace_inline.bottom) / 2, + 1, + "content before must be horizontally aligned with math"); + assert_approx_equals((after_inline.top + after_inline.bottom) / 2, + (mspace_inline.top + mspace_inline.bottom) / 2, + 1, + "content after must be horizontally aligned with math"); + assert_less_than_equal(before_inline.right, mspace_inline.left, + "content before must be on the left of math"); + assert_less_than_equal(mspace_inline.right, after_inline.left, + "content after must be on the right of math"); + }, "Test dynamically setting display=inline"); + + done(); + }); +</script> +<style> + #content { + width: 600px; + background: #ccc; + } + span.square { + display: inline-block; + width: 50px; + height: 50px; + background: black; + } + mspace { + background: blue; + } +</style> +</head> +<body> + <div id="log"></div> + <div id="content"> + <span id="before_block" class="square"></span> + <math display="block"><mspace id="mspace_block" width="50px" height="50px"/></math> + <span id="after_block" class="square"></span> + <br/> + <span id="before_inline" class="square"></span> + <math display="inline"><mspace id="mspace_inline" width="50px" height="50px"/></math> + <span id="after_inline" class="square"></span> + <br/> + <span id="before_block_and_specified_width" class="square"></span> + <math display="block" id="math_with_specified_width" style="background: pink; width:100px"><mspace id="mspace_width" width="50px" height="50px"/></math> + <span id="after_block_and_specified_width" class="square"></span> + <br/> + <div> + <span id="before_dynamic_block" class="square"></span> + <math><mspace id="mspace_dynamic_block" width="50px" height="50px"/></math> + <span id="after_dynamic_block" class="square"></span> + </div> + <div> + <span id="before_dynamic_inline" class="square"></span> + <math display="block"><mspace id="mspace_dynamic_inline" width="50px" height="50px"/></math> + <span id="after_dynamic_inline" class="square"></span> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/display-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/display-2-ref.html new file mode 100644 index 0000000000..7864c04099 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/display-2-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>display attribute VS legacy mode attribute (reference)</title> +</head> +<body> + <p>Test passes if you see four green squares, the last one + centered and the others left-aligned.</p> + <p> + <math> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <p> + <math> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <p> + <math display="inline"> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <p> + <math display="block"> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/display-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/display-2.html new file mode 100644 index 0000000000..b4e79395a1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/display-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>display attribute VS legacy mode attribute</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter2.html#id.2.2.2"> +<link rel="match" href="display-2-ref.html"/> +<meta name="assert" content="Verify that the legacy mode attribute has no effect."> +</head> +<body> + <p>Test passes if you see four green squares, the last one + centered and the others left-aligned.</p> + <p> + <math mode="inline"> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <p> + <math mode="display"> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <p> + <math display="inline" mode="display"> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <p> + <math display="block" mode="inline"> + <mspace width="100px" height="100px" style="background: green"></mspace> + </math> + </p> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1-ref.html new file mode 100644 index 0000000000..5fa90e9d2f --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Dynamic MathML DOM (reference)</title> +<style> + mtext.pass { background: green; color: white; } +</style> +</head> +<body> + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext class="pass">PASS</mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1.html new file mode 100644 index 0000000000..59403196a8 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Dynamic MathML DOM</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> +<link rel="match" href="dynamic-1-ref.html"/> +<meta name="assert" content="Verify that the MathML DOM tree can be modified via javascript and that the rendering is correctly updated."> +<style> + mtext.fail { background: red; color: white; } + mtext.pass { background: green; color: white; } +</style> +<script> + window.addEventListener("DOMContentLoaded", function() { + var kMathMLNamespace = "http://www.w3.org/1998/Math/MathML"; + var mtext = document.createElementNS(kMathMLNamespace, "mtext"); + mtext.setAttribute("class", "pass"); + mtext.textContent = "PASS"; + var math = document.getElementsByTagNameNS(kMathMLNamespace, "math")[0]; + math.replaceChild(mtext, math.firstElementChild); + }); +</script> +</head> +<body> + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext class="fail">FAIL</mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2-ref.html new file mode 100644 index 0000000000..272e8b33ca --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Dynamic id and style (reference)</title> +<style> + #pass { background: green; color: white; } +</style> +</head> +<body> + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext id="pass">PASS</mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2.html new file mode 100644 index 0000000000..8ad47c5cd9 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-2.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Dynamic id and style</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> +<link rel="match" href="dynamic-2-ref.html"/> +<meta name="assert" content="Verify dynamic change of id and style attributes."> +<style> + #fail, #fail2 { background: red; color: white; } + #pass { background: green; color: white; } +</style> +<script> + window.addEventListener("DOMContentLoaded", function() { + document.getElementById("fail2").setAttribute("id", "pass"); + document.getElementById("fail").setAttribute("style", "display: none"); + }); +</script> +</head> +<body> + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext id="fail">FAIL</mtext> + <mtext id="fail2">PASS</mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html new file mode 100644 index 0000000000..ffd0ae239f --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-001.html @@ -0,0 +1,630 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Dynamic childlist of MathML elements</title> +<script src="/mathml/support/mathml-fragments.js"></script> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts"> +<link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> +<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> +<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> +<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> +<meta name="assert" content="Dynamically modify DOM tree of some MathML elements by adding or removing children."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script> + function forceNumberOfChildren(element, count) { + while (element.children.length > count) + element.removeChild(element.lastElementChild); + for (let i = element.children.length; i < count; i++) { + if (element.tagName === "mmultiscripts" && i === 5) { + element.appendChild(FragmentHelper.createElement("mprescripts")); + } else { + let mspace = FragmentHelper.createElement("mspace"); + mspace.setAttribute("width", `10px`); + mspace.setAttribute("height", `${10*(i+1)}px`); + mspace.setAttribute("style", `background: black;`); + element.appendChild(mspace); + } + } + } + + setup({ explicit_done: true }); + window.addEventListener("load", function() { + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + let reference = document.getElementById("reference"); + + Array.from(document.querySelectorAll("[data-title]")).forEach(element => { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + let reference = document.getElementById(`${element.getAttribute("data-reference")}`); + forceNumberOfChildren(element, reference.children.length); + const epsilon = 1; + if (element.tagName == "mspace") { + compareSize(element, reference, epsilon); + childrenHaveEmptyBoundingClientRects(element); + childrenHaveEmptyBoundingClientRects(reference); + } else { + compareLayout(element, reference, epsilon); + } + }, `${element.getAttribute("data-title")}`); + }); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mfrac id="mfrac-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </mfrac> + <mfrac id="mfrac-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mfrac> + <mfrac id="mfrac-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac data-reference="mfrac-reference-2" data-title="Adding missing children to mfrac"> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac data-reference="mfrac-reference-1" data-title="Removing child from valid mfrac"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac data-reference="mfrac-reference-3" data-title="Adding child to valid mfrac"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac data-reference="mfrac-reference-2" data-title="Removing extra child from mfrac"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math> + <munder id="munder-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </munder> + <munder id="munder-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </munder> + <munder id="munder-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </munder> + </math> + </p> + <p> + <math> + <munder data-reference="munder-reference-2" data-title="Adding missing children to munder"> + </munder> + </math> + </p> + <p> + <math> + <munder data-reference="munder-reference-1" data-title="Removing child from valid munder"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </munder> + </math> + </p> + <p> + <math> + <munder data-reference="munder-reference-3" data-title="Adding child to valid munder"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </munder> + </math> + </p> + <p> + <math> + <munder data-reference="munder-reference-2" data-title="Removing extra child from munder"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </munder> + </math> + </p> + <hr/> + <p> + <math> + <mover id="mover-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </mover> + <mover id="mover-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mover> + <mover id="mover-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mover> + </math> + </p> + <p> + <math> + <mover data-reference="mover-reference-2" data-title="Adding missing children to mover"> + </mover> + </math> + </p> + <p> + <math> + <mover data-reference="mover-reference-1" data-title="Removing child from valid mover"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mover> + </math> + </p> + <p> + <math> + <mover data-reference="mover-reference-3" data-title="Adding child to valid mover"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mover> + </math> + </p> + <p> + <math> + <mover data-reference="mover-reference-2" data-title="Removing extra child from mover"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mover> + </math> + </p> + <hr/> + <p> + <math> + <munderover id="munderover-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </munderover> + <munderover id="munderover-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </munderover> + <munderover id="munderover-reference-4"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + <mspace width="10px" height="40px" style="background: black;"/> + </munderover> + </math> + </p> + <p> + <math> + <munderover data-reference="munderover-reference-3" data-title="Adding missing children to munderover"> + </munderover> + </math> + </p> + <p> + <math> + <munderover data-reference="munderover-reference-2" data-title="Removing child from valid munderover"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </munderover> + </math> + </p> + <p> + <math> + <munderover data-reference="munderover-reference-4" data-title="Adding child to valid munderover"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </munderover> + </math> + </p> + <p> + <math> + <munderover data-reference="munderover-reference-3" data-title="Removing extra child from munderover"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + <mspace width="10px" height="40px" style="background: black;"/> + </munderover> + </math> + </p> + <hr/> + <p> + <math> + <msub id="msub-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </msub> + <msub id="msub-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msub> + <msub id="msub-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msub> + </math> + </p> + <p> + <math> + <msub data-reference="msub-reference-2" data-title="Adding missing children to msub"> + </msub> + </math> + </p> + <p> + <math> + <msub data-reference="msub-reference-1" data-title="Removing child from valid msub"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msub> + </math> + </p> + <p> + <math> + <msub data-reference="msub-reference-3" data-title="Adding child to valid msub"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msub> + </math> + </p> + <p> + <math> + <msub data-reference="msub-reference-2" data-title="Removing extra child from msub"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msub> + </math> + </p> + <hr/> + <p> + <math> + <msup id="msup-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </msup> + <msup id="msup-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msup> + <msup id="msup-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msup> + </math> + </p> + <p> + <math> + <msup data-reference="msup-reference-2" data-title="Adding missing children to msup"> + </msup> + </math> + </p> + <p> + <math> + <msup data-reference="msup-reference-1" data-title="Removing child from valid msup"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msup> + </math> + </p> + <p> + <math> + <msup data-reference="msup-reference-3" data-title="Adding child to valid msup"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msup> + </math> + </p> + <p> + <math> + <msup data-reference="msup-reference-2" data-title="Removing extra child from msup"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msup> + </math> + </p> + <hr/> + <p> + <math> + <msubsup id="msubsup-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msubsup> + <msubsup id="msubsup-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msubsup> + <msubsup id="msubsup-reference-4"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + <mspace width="10px" height="40px" style="background: black;"/> + </msubsup> + </math> + </p> + <p> + <math> + <msubsup data-reference="msubsup-reference-3" data-title="Adding missing children to msubsup"> + </msubsup> + </math> + </p> + <p> + <math> + <msubsup data-reference="msubsup-reference-2" data-title="Removing child from valid msubsup"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msubsup> + </math> + </p> + <p> + <math> + <msubsup data-reference="msubsup-reference-4" data-title="Adding child to valid msubsup"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msubsup> + </math> + </p> + <p> + <math> + <msubsup data-reference="msubsup-reference-3" data-title="Removing extra child from msubsup"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + <mspace width="10px" height="40px" style="background: black;"/> + </msubsup> + </math> + </p> + <hr/> + <p> + <math> + <mroot id="mroot-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </mroot> + <mroot id="mroot-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mroot> + <mroot id="mroot-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mroot> + </math> + </p> + <p> + <math> + <mroot data-reference="mroot-reference-2" data-title="Adding missing children to mroot"> + </mroot> + </math> + </p> + <p> + <math> + <mroot data-reference="mroot-reference-1" data-title="Removing child from valid mroot"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mroot> + </math> + </p> + <p> + <math> + <mroot data-reference="mroot-reference-3" data-title="Adding child to valid mroot"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mroot> + </math> + </p> + <p> + <math> + <mroot data-reference="mroot-reference-2" data-title="Removing extra child from mroot"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mroot> + </math> + </p> + <hr/> + <p> + <math> + <msqrt id="msqrt-reference-0"> + </msqrt> + <msqrt id="msqrt-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </msqrt> + </math> + </p> + <p> + <math> + <msqrt data-reference="msqrt-reference-0" data-title="Removing children from msqrt"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </msqrt> + </math> + </p> + <p> + <math> + <msqrt data-reference="msqrt-reference-2" data-title="Adding children to msqrt"> + <mspace width="10px" height="10px" style="background: black;"/> + </msqrt> + </math> + </p> + <hr/> + <p> + <math> + <mpadded id="mpadded-reference-0"> + </mpadded> + <mpadded id="mpadded-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded data-reference="mpadded-reference-0" data-title="Removing children from mpadded"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded data-reference="mpadded-reference-2" data-title="Adding children to mpadded"> + <mspace width="10px" height="10px" style="background: black;"/> + </mpadded> + </math> + </p> + <hr/> + <p> + <math> + <mspace id="mspace-reference-0" width="30px" height="70px" style="background: blue"> + </mspace> + <mspace id="mspace-reference-2" width="30px" height="70px" style="background: green"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mspace> + </math> + </p> + <p> + <math> + <mspace data-reference="mspace-reference-0" data-title="Removing children from mspace" width="30px" height="70px" style="background: lightblue"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mspace> + </math> + </p> + <p> + <math> + <mspace data-reference="mspace-reference-2" data-title="Adding children to mspace" width="30px" height="70px" style="background: lightgreen"> + <mspace width="10px" height="10px" style="background: black;"/> + </mspace> + </math> + </p> + <hr/> + <p> + <math> + <mmultiscripts id="mmultiscripts-reference-0"> + </mmultiscripts> + <mmultiscripts id="mmultiscripts-reference-1"> + <mspace width="10px" height="10px" style="background: black;"/> + </mmultiscripts> + <mmultiscripts id="mmultiscripts-reference-2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + </mmultiscripts> + <mmultiscripts id="mmultiscripts-reference-3"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mmultiscripts> + <mmultiscripts id="mmultiscripts-reference-6"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + <mspace width="10px" height="40px" style="background: black;"/> + <mspace width="10px" height="50px" style="background: black;"/> + <mprescripts/> + </mmultiscripts> + <mmultiscripts id="mmultiscripts-reference-8"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + <mspace width="10px" height="40px" style="background: black;"/> + <mspace width="10px" height="50px" style="background: black;"/> + <mprescripts/> + <mspace width="10px" height="70px" style="background: black;"/> + <mspace width="10px" height="80px" style="background: black;"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-reference="mmultiscripts-reference-0" data-title="multiscripts child count from 3 to 0"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-reference="mmultiscripts-reference-1" data-title="multiscripts child count from 3 to 1"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-reference="mmultiscripts-reference-2" data-title="multiscripts child count from 3 to 2"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-reference="mmultiscripts-reference-3" data-title="multiscripts child count from 0 to 3"> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-reference="mmultiscripts-reference-6" data-title="multiscripts child count from 3 to 6"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mmultiscripts> + </math> + </p> + <p> + <math> + <mmultiscripts data-reference="mmultiscripts-reference-8" data-title="multiscripts child count from 3 to 8"> + <mspace width="10px" height="10px" style="background: black;"/> + <mspace width="10px" height="20px" style="background: black;"/> + <mspace width="10px" height="30px" style="background: black;"/> + </mmultiscripts> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html new file mode 100644 index 0000000000..099401eacc --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-childlist-002.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Dynamic childlist of MathML elements</title> +<script src="/mathml/support/mathml-fragments.js"></script> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="Dynamically modify DOM tree of some MathML elements by adding or removing children."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<script> + function generateMathForTag(tag, childCount) { + let math = FragmentHelper.createElement("math"); + let element = FragmentHelper.createElement(tag); + // Add the children with different sizes at odd positions and OOF + // mrow at even position. + for (let i = 0; i < childCount; i++) { + if (i % 2) { + let mspace = FragmentHelper.createElement("mspace"); + mspace.setAttribute("width", `10px`); + mspace.setAttribute("height", `${10*(i+1)}px`); + mspace.setAttribute("style", `background: black;`); + element.appendChild(mspace); + } else { + let mrow = FragmentHelper.createElement("mrow"); + mrow.setAttribute("style", "position: absolute"); + element.appendChild(mrow); + } + } + if (FragmentHelper.isValidChildOfMrow(tag)) { + math.appendChild(element); + } else if (tag === "mtd") { + let mtr = FragmentHelper.createElement("mtr"); + mtr.appendChild(element); + let mtable = FragmentHelper.createElement("mtable"); + mtable.appendChild(mtr); + math.appendChild(mtable); + } else { + throw `Invalid argument: ${tag}`; + } + return math; + } + + setup({ explicit_done: true }); + window.addEventListener("load", function() { + + for (tag in MathMLFragments) { + if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtd") + continue; + + document.body.insertAdjacentHTML("beforeend", `<div style='display: none; background: pink;'>${tag}: <div></div><div></div><div></div></div>`); + + let container = document.body.lastElementChild; + let referenceDiv = container.children[0]; + const maxChild = 10; + const epsilon = 1; + + // Create the references for different number of children as well + // as the element that will get the children added / removed. + for (let i = 0; i <= maxChild; i++) + referenceDiv.append(generateMathForTag(tag, i)); + let fullReferenceMath = referenceDiv.lastElementChild; + let fullReferenceTag = fullReferenceMath.firstElementChild; + + let removeChildrenMath = generateMathForTag(tag, maxChild); + container.children[1].append(removeChildrenMath); + let removeChildrenTag = removeChildrenMath.firstElementChild; + + let appendChildrenMath = generateMathForTag(tag, 0); + container.children[2].append(appendChildrenMath); + let appendChildrenTag = appendChildrenMath.firstElementChild; + + // Make content visible after the DOM is ready so that the layout + // only happens now. + container.style.display = "block"; + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection[`has_${tag}`]()); + + for (let i = 0; i < maxChild; i++) { + // append and remove children. + appendChildrenTag.append(fullReferenceTag.children[i].cloneNode(true)); + removeChildrenTag.removeChild(removeChildrenTag.lastElementChild); + + // force layout so we're sure what we're testing against + container.getBoundingClientRect(); + + let appendCount = appendChildrenTag.children.length; + let removeCount = removeChildrenTag.children.length; + if (tag == "mspace") { + compareSize(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon); + childrenHaveEmptyBoundingClientRects(appendChildrenTag); + childrenHaveEmptyBoundingClientRects(referenceDiv.children[appendCount].firstElementChild); + childrenHaveEmptyBoundingClientRects(removeChildrenTag); + childrenHaveEmptyBoundingClientRects(referenceDiv.children[removeCount].firstElementChild); + } else { + compareLayout(appendChildrenTag, referenceDiv.children[appendCount].firstElementChild, epsilon, `appending ${appendCount}-th child`); + compareLayout(removeChildrenTag, referenceDiv.children[removeCount].firstElementChild, epsilon, `removing ${appendCount + 1}-th child`); + } + } + + // Hide back the div after successful testing. + container.style.display = "none"; + + }, `Appending and removing children to ${tag}`); + } + + done(); + }); +</script> +</head> +<body> + <div id="log"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-mozilla-162063.xhtml b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-mozilla-162063.xhtml new file mode 100644 index 0000000000..73bb25fd6f --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/dynamic-mozilla-162063.xhtml @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<head> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=162063"/> +<link rel="match" href="about:blank"/> +<meta name="assert" content="Table's anonymous boxes should properly be removed when dropping some MathML content from them."/> +<script type="text/javascript"> +/* <![CDATA[ */ +function mutate() +{ + var q = document.getElementById("target"); + remove(q); + document.documentElement.className = ""; + +} + +function remove(n) +{ + n.parentNode.removeChild(n); +} + +document.documentElement.addEventListener("TestRendered", mutate); +/* ]]> */ +</script> +<title> test for pseudo removal</title> +</head> + +<body> + <div style="display:table; border-spacing:10px; background-color:Maroon"> + <math xmlns="http://www.w3.org/1998/Math/MathML" id="target"> + <msup> + <mfenced> + <mrow> + <mi>a</mi> + <mo>+</mo> + <mi>b</mi> + </mrow> + </mfenced> + <mn>2</mn> + </msup> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-001.tentative-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-001.tentative-ref.html new file mode 100644 index 0000000000..86952567c7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-001.tentative-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>href click (reference)</title> +</head> +<body> + + <p>This test passes if you see a green square.</p> + + <div style="width: 150px; height: 150px; background: green"> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-001.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-001.tentative.html new file mode 100644 index 0000000000..9e40c0b02e --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-001.tentative.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>href click</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<link rel="match" href="href-click-001.tentative-ref.html"/> +<meta name="assert" content="Verify that a click on a link moves to the target."> +<script type="text/javascript"> + function test() + { + var event = new MouseEvent('click', {bubbles: true, cancelable: true}); + document.getElementById('link').dispatchEvent(event); + document.documentElement.className = ""; + } +</script> +</head> +<body onload="test()"> + + <p>This test passes if you see a green square.</p> + + <div style="width: 150px; height: 150px; overflow: hidden"> + <math> + <mrow id="link" href="#target"> + <mspace id="space" width="150px" height="150px" style="background: red"/> + </mrow> + </math> + <div style="height: 500px;"></div> + <math id="target"> + <mspace width="150px" height="150px" style="background: green"/> + </math> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-002.tentative-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-002.tentative-ref.html new file mode 100644 index 0000000000..86952567c7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-002.tentative-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>href click (reference)</title> +</head> +<body> + + <p>This test passes if you see a green square.</p> + + <div style="width: 150px; height: 150px; background: green"> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-002.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-002.tentative.html new file mode 100644 index 0000000000..bc5b9a00cf --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-002.tentative.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"/> +<title>href click</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<link rel="match" href="href-click-002.tentative-ref.html"/> +<meta name="assert" content="Verify that a click on an element bubbles to an ancestor link."> +<script type="text/javascript"> + function test() + { + var event = new MouseEvent('click', {bubbles: true, cancelable: true}); + document.getElementById('space').dispatchEvent(event); + document.documentElement.className = ""; + } +</script> +</head> +<body onload="test()"> + + <p>This test passes if you see a green square.</p> + + <div style="width: 150px; height: 150px; overflow: hidden"> + <math> + <mrow href="#target"> + <mrow> + <mrow> + <mspace id="space" width="150px" height="150px" style="background: red"/> + </mrow> + </mrow> + </mrow> + </math> + <div style="height: 500px;"></div> + <math id="target"> + <mspace width="150px" height="150px" style="background: green"/> + </math> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/href-click-003.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-003.tentative.html new file mode 100644 index 0000000000..f6f1ada6d7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/href-click-003.tentative.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>href click</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +</head> +<body> + <p>To test manually, click the blue rectangle.</p> + <p> + <math> + <mspace width="50px" height="10px" style="background: gray"></mspace> + <mspace id="target" href="javascript:handler()" width="50px" height="10px" style="background: blue"></mspace> + <mspace width="50px" height="10px" style="background: gray"></mspace> + </math> + </p> + <a id="badTarget" href="javascript:badHandler()">DON'T CLICK ME</a> + <script> + var t = async_test("Click element with href"); + function handler() { t.done(); } + function badHandler() { + t.step(() => { assert_unreached("Bad handler executed"); }); + t.done(); + } + test_driver.click(document.getElementById("target")).then(() => { + return test_driver.click(document.getElementById("badTarget")); + }).catch(() => { + t.step(() => { assert_unreached("Click failed"); }); + t.done(); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html new file mode 100644 index 0000000000..028428cd75 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>MathML 'HTMLOrForeignElement` Mixin Tests</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> + <style> + mi { + background-color: red; + } + :focus { + background-color: rgb(0, 255, 0); + } + </style> + <meta + name="assert" + content="MathMLElements incorporate a functional HTMLOrForeignElement interface" + /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body tabindex="-1"> + <span tabindex="-1" + >This tests the presence and functionality of features of + `HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span + > + <math tabindex="-1"> + <mi>E</mi> + </math> + </body> + <script> + // spot check the functionality of several interfaces + let el = document.querySelector("mi"); + let mathEl = document.querySelector("math"); + + // this really belongs in + // https://github.com/web-platform-tests/wpt/blob/master/html/dom/elements/global-attributes/dataset.html + // it is here tentatively + test(function() { + var mathml = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", + "math" + ); + assert_true(mathml.dataset instanceof DOMStringMap); + }, "MathML elements should have a .dataset"); + + // exercise some basic tests on .dataset + test(function() { + assert_equals( + Object.keys(el.dataset).toString(), + "", + "The .dataset property should be present" + ); + + el.setAttribute("data-one", "x"); + el.setAttribute("data-two", "y"); + + assert_equals( + el.dataset.one, + "x", + '.one should be "x" after setting the data-one attribute' + ); + assert_equals( + el.dataset.two, + "y", + '.one should be "y" after setting the data-two attribute' + ); + + el.dataset.one = "o"; + assert_equals( + el.getAttribute("data-one"), + "o", + 'the data-one attribute should reflect a change to dataset.one and contain "o"' + ); + }, "The dataset property should be present and be functional."); + + test(function() { + assert_equals(mathEl.tabIndex, -1); + }, "MathML elements should have a tabIndex property"); + + promise_test(function() { + function focus() { + mathEl.focus(); + return Promise.resolve(); + } + + return focus().then(() => { + assert_equals( + getComputedStyle(mathEl).backgroundColor, + "rgb(0, 255, 0)", + "MathML elements with tabindex=-1 should be programmatically focusable and apply :focus" + ); + }); + }, "MathML elements should work with focus predictably"); + + promise_test(function() { + function blur() { + mathEl.blur(); + return Promise.resolve(); + } + + return blur().then(() => { + assert_equals( + getComputedStyle(mathEl).backgroundColor, + "rgba(0, 0, 0, 0)", + "MathML elements with tabindex=-1 be programmatically blur() able" + ); + }); + }, "MathML elements should work with blur predictably"); + </script> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1-ref.html new file mode 100644 index 0000000000..4987754967 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML inside foreignObject (reference)</title> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + <div> + <div style="position: absolute; width: 200px; height: 200px; background: green"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1.html new file mode 100644 index 0000000000..bc725e9d19 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML inside foreignObject</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<link rel="match" href="integration-point-1-ref.html"/> +<meta name="assert" content="Verify that MathML can be used inside a foreignObject element."> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + <div> + <div style="position: absolute; width: 200px; height: 200px; background: red"></div> + <div style="position: absolute;"> + <svg width="200px" height="200px"> + <rect width="200px" height="100px" fill="red"/> + <foreignObject width="200px" height="200px" + requiredExtensions="http://www.w3.org/1998/Math/MathML"> + <div style="width: 200px; height: 200px; background: green"></div> + </foreignObject> + </svg> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2-ref.html new file mode 100644 index 0000000000..33c4b7e910 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML as a phrasing content (reference)</title> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + <div style="position: absolute; background: green; width: 300px; height: 300px;"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2.html new file mode 100644 index 0000000000..7e6c11a5ac --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-2.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML as a phrasing content</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<link rel="match" href="integration-point-2-ref.html"/> +<meta name="assert" content="Verify that MathML can be used at positions where phrasing content is accepted."> +<style type="text/css"> + span, math { font-family: monospace; font-size: 10px; } + div { + color: green; + } + span.redsquare { + display: inline-block; + width: 10px; + height: 10px; + background: red; + } + mspace { + background: green; + } +</style> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + + <div style="position: absolute; background: green; width: 300px; height: 300px;"> + <p><span class="redsquare"></span></p> + <h1><span class="redsquare"></span></h1> + <h2><span class="redsquare"></span></h2> + <ul> + <li><span class="redsquare"></span></li> + </ul> + <ol> + <li><span class="redsquare"></span></li> + </ol> + <table><tr><td><span class="redsquare"></span></td></tr></table> + <a href="#id"><span class="redsquare"></span></a> + <em><span class="redsquare"></span></em> + <strong><span class="redsquare"></span></strong> + <small><span class="redsquare"></span></small> + <span><span class="redsquare"></span></span> + <u><span class="redsquare"></span></u> + <q><span class="redsquare"></span></q> + </div> + <div style="position: absolute; width: 400px;"> + <p><math><mspace width="10px" height="10px"/></math></p> + <h1><math><mspace width="10px" height="10px"/></math></h1> + <h2><math><mspace width="10px" height="10px"/></math></h2> + <ul> + <li><math><mspace width="10px" height="10px"/></math></li> + </ul> + <ol> + <li><math><mspace width="10px" height="10px"/></math></li> + </ol> + <table><tr><td><math><mspace width="10px" height="10px"/></math></td></tr></table> + <a href="#id"><math><mspace width="10px" height="10px"/></math></a> + <em><math><mspace width="10px" height="10px"/></math></em> + <strong><math><mspace width="10px" height="10px"/></math></strong> + <small><math><mspace width="10px" height="10px"/></math></small> + <span><math><mspace width="10px" height="10px"/></math></span> + <u><math><mspace width="10px" height="10px"/></math></u> + <q><math><mspace width="10px" height="10px"/></math></q> + </div> + + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3-ref.html new file mode 100644 index 0000000000..8362ed28e3 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>phrasing content inside mtext (reference)</title> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + + <div style="position: absolute; background: green; width: 200px; height: 200px;"></div> + + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3.html new file mode 100644 index 0000000000..4c6f89ee93 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-3.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>phrasing content inside mtext</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<link rel="match" href="integration-point-3-ref.html"/> +<meta name="assert" content="Verify that <mtext> can contain phrasing content"> +<style type="text/css"> + div { + color: green; + } + span, math, mtext { font-family: monospace; font-size: 10px; } + span.redsquare, span.greensquare { + display: inline-block; + width: 10px; + height: 10px; + } + span.redsquare { + background: red; + } + span.greensquare { + background: green; + } + mspace { + background: green; + } +</style> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + + <div style="position: absolute; background: green; width: 200px; height: 200px;"> + <span><span><span><span class="redsquare"></span></span></span></span> + <span><span><u><span class="redsquare"></span></u></span></span> + <span><span><a href="#id"><span class="redsquare"></span></a></span></span> + <span><span><del><span class="redsquare"></span></del></span></span> + <span><span><em><span class="redsquare"></span></em></span></span> + <span><span><strong><span class="redsquare"></span></strong></span></span> + <span><span><q><span class="redsquare"></span></q></span></span> + <span><span><small><span class="redsquare"></span></small></span></span> + <span><span><var><span class="redsquare"></span></var></span></span> + <span><span><samp><span class="redsquare"></span></samp></span></span> + </div> + <div style="position: absolute; width: 200px;"> + <math><mtext><span><span class="greensquare"></span></span></mtext></math> + <math><mtext><u><span class="greensquare"></span></u></mtext></math> + <math><mtext><a href="#id"><span class="greensquare"></span></a></mtext></math> + <math><mtext><del><span class="greensquare"></span></del></mtext></math> + <math><mtext><em><span class="greensquare"></span></em></mtext></math> + <math><mtext><strong><span class="greensquare"></span></strong></mtext></math> + <math><mtext><q><span class="greensquare"></span></q></mtext></math> + <math><mtext><small><span class="greensquare"></span></small></mtext></math> + <math><mtext><var><span class="greensquare"></span></var></mtext></math> + <math><mtext><samp><span class="greensquare"></span></samp></mtext></math> + </div> + + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-4.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-4.html new file mode 100644 index 0000000000..c3bc95d1ef --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-4.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML inside foreignObject</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<meta name="assert" content="Verify that MathML can be used inside a foreignObject element."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("DOMContentLoaded", function() { + var scale = 2; + var epsilon = 1; + var mfrac = document.getElementById("mfrac"); + var num = mfrac.firstElementChild.getBoundingClientRect(); + var denom = mfrac.lastElementChild.getBoundingClientRect(); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + // The values of width and height are inverted (because of the + // rotation) and multiplied by the scale factor. + assert_approx_equals(num.height, 30 * scale, epsilon, "numerator width"); + assert_approx_equals(num.width, 40 * scale, epsilon, "numerator height"); + assert_approx_equals(denom.height, 50 * scale, epsilon, "numerator width"); + assert_approx_equals(denom.width, 60 * scale, epsilon, "numerator height"); + }, "mspace layout in SVG foreignObject"); + test(function() { + // The horizontal/vertical metrics are inverted (because of the + // rotation) and multiplied by the scale factor. + assert_true(MathMLFeatureDetection.has_mfrac()); + assert_greater_than_equal(num.right - denom.left, + (40 + 60) * scale, + "numerator is on the right of denominator"); + assert_approx_equals((num.top + num.bottom) / 2, + (denom.top + denom.bottom) / 2, + epsilon, "numerator and denominator are vertically aligned"); + }, "mfrac layout in SVG foreignObject"); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <svg width="400px" height="400px"> + <g transform="rotate(90, 200, 200) scale(2)"> + <foreignObject width="400px" height="400px" + requiredExtensions="http://www.w3.org/1998/Math/MathML"> + <math> + <mfrac id="mfrac"> + <mspace width="30px" height="40px" style="background: cyan"></mspace> + <mspace width="50px" height="60px" style="background: yellow"></mspace> + </mfrac> + </math> + </foreignObject> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-5.html b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-5.html new file mode 100644 index 0000000000..b63ab7a63c --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/integration-point-5.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML sibling of SVG with foreignObject[overflow=visible]</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=989920"> +<meta name="assert" content="Verify that an SVG containing a foreignObject with visible overflow does not affect layout of MathML siblings."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("DOMContentLoaded", function() { + var scale = 2; + var epsilon = 1; + var mfrac = document.getElementById("mfrac"); + var num = mfrac.firstElementChild.getBoundingClientRect(); + var denom = mfrac.lastElementChild.getBoundingClientRect(); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(num.width, 30, epsilon, "numerator width"); + assert_approx_equals(num.height, 40, epsilon, "numerator height"); + assert_approx_equals(denom.width, 50, epsilon, "denonimator width"); + assert_approx_equals(denom.height, 60, epsilon, "denonimator height"); + }, "mspace layout in sibling of SVG foreignObject[overflow=visible]"); + test(function() { + assert_true(MathMLFeatureDetection.has_mfrac()); + assert_greater_than_equal(denom.bottom - num.top, + (40 + 60), + "numerator above denominator"); + assert_approx_equals((num.left + num.right) / 2, + (denom.left + denom.right) / 2, + epsilon, "numerator and denominator are horizontally aligned"); + }, "mfrac layout in sibling of SVG with foreignObject[overflow=visible]"); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <math> + <mfrac id="mfrac"> + <mspace width="30px" height="40px" style="background: cyan"></mspace> + <mspace width="50px" height="60px" style="background: yellow"></mspace> + </mfrac> + </math> + <svg width="200px" height="200px" style="background: lightblue"> + <foreignObject width="200px" height="200px" + overflow="visible"> + <div xmlns="http://www.w3.org/1999/xhtml"> + This is a foreignObject + </div> + </foreignObject> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/link-color-001.tentative-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/link-color-001.tentative-ref.html new file mode 100644 index 0000000000..772fda7002 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/link-color-001.tentative-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>Test link on mtext (reference)</title> +</head> +<body> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mtext>MathML Link</mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/link-color-001.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/link-color-001.tentative.html new file mode 100644 index 0000000000..5f0adc42c7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/link-color-001.tentative.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <title>Test link on mtext</title> + <link rel="mismatch" href="link-color-001.tentative-ref.html"/> + <link rel="help" href="https://github.com/w3c/mathml-core/pull/29"/> +</head> +<body> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <mtext href="www.mozilla.org">MathML Link</mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html new file mode 100644 index 0000000000..b924eefa7d --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<title>MathMLElement GlobalEventHandlers</title> +<link rel="author" title="Brian Kardell" href="mailto:bkardell@igalia.com" /> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-idl-attributes"/> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-content-attributes"/> +<meta name="timeout" content="long"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/WebIDLParser.js"></script> + +<script> + "use strict"; + + // The prefixed animation events are special; their event types are + // camel-case. + const prefixedAnimationAttributeToEventType = new Map([ + ["webkitanimationend", "webkitAnimationEnd"], + ["webkitanimationiteration", "webkitAnimationIteration"], + ["webkitanimationstart", "webkitAnimationStart"], + ["webkittransitionend", "webkitTransitionEnd"], + ]); + + // basic pattern lifted from /html/webappapis/scripting/events/event-handler-all-global-events.html + promise_setup(async function() { + const res = await fetch("/interfaces/html.idl"); + const htmlIDL = await res.text(); + // Parsing the whole IDL file is slow, so use a small regexp to extract only + // the part that is relevant for this test. + const parsedHTMLIDL = WebIDL2.parse(htmlIDL. + match(/^interface mixin GlobalEventHandlers {[^{}]*};$/m)[0]); + const globalEventHandlers = parsedHTMLIDL.find( + idl => idl.name === "GlobalEventHandlers" + ); + + // onerror is too special + const names = globalEventHandlers.members + .map(member => member.name) + .filter(name => name !== "onerror"); + + for (const name of names) { + const withoutOn = name.substring(2); + + promise_test(async () => { + const location = MathMLElement.prototype; + assert_true( + location.hasOwnProperty(name), + `${location.constructor.name} has an own property named "${name}"` + ); + + assert_false( + name in Element.prototype, + `Element.prototype must not contain a "${name}" property` + ); + }, `${name}: must be on the appropriate locations for GlobalEventHandlers`); + + promise_test(async () => { + const location = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", + "math" + ); + + assert_equals( + location[name], + null, + `The default value of the property is null for a ${ + location.constructor.name + } instance` + ); + }, `${name}: the default value must be null`); + + promise_test(async () => { + const div = document.createElement("div"); + div.insertAdjacentHTML("beforeend", `<math ${name}="window.${name}Happened1 = true;"></math>`); + const compiledHandler = div.firstElementChild[name]; + assert_equals( + typeof compiledHandler, + "function", + `The ${name} property must be a function` + ); + compiledHandler(); + assert_true( + window[`${name}Happened1`], + "Calling the handler must run the code" + ); + }, `${name}: the content attribute must be compiled into a function as the corresponding property`); + + promise_test(async () => { + const el = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", + "math" + ); + assert_equals(el[name], null, `The ${name} property must be null (no attribute)`); + + el.setAttribute(name, `window.${name}Happened2 = true;`); + const compiledHandler = el[name]; + assert_equals( + typeof compiledHandler, + "function", + `The ${name} property must be a function (set attribute)` + ); + compiledHandler(); + assert_true( + window[`${name}Happened2`], + "Calling the handler must run the code (set attribute)" + ); + + window[`${name}Happened2`] = false; + const clonedEl = el.cloneNode(true); + const clonedCompiledHandler = clonedEl[name]; + assert_equals( + typeof clonedCompiledHandler, + "function", + `The ${name} property must be a function (clone node)` + ); + clonedCompiledHandler(); + assert_true( + window[`${name}Happened2`], + "Calling the handler must run the code (clone node)" + ); + + el.setAttribute(name, `window.${name}Happened3 = true;`); + const newCompiledHandler = el[name]; + assert_equals( + typeof newCompiledHandler, + "function", + `The ${name} property must be a function (modify attribute)` + ); + newCompiledHandler(); + assert_true( + window[`${name}Happened3`], + "Calling the handler must run the code (modify attribute)" + ); + + el.removeAttribute(name); + assert_equals(el[name], null, `The ${name} property must be null (remove attribute)`); + }, `${name}: dynamic changes on the attribute`); + + promise_test(async () => { + const element = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", + "math" + ); + let target = undefined; + element[name] = (e) => { target = e.currentTarget; } + let eventType = withoutOn; + if (prefixedAnimationAttributeToEventType.has(eventType)) { + eventType = prefixedAnimationAttributeToEventType.get(eventType); + } + element.dispatchEvent(new Event(eventType)); + assert_equals(target, element, "The event must be fired at the <math> element"); + }, `${name}: dispatching an Event at a <math> element must trigger element.${name}`); + } + }); +</script> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2-ref.html new file mode 100644 index 0000000000..dcc5b2b7d3 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>SVG requiredExtensions (reference)</title> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + <svg width="200px" height="200px"> + <rect width="200px" height="200px" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2.html new file mode 100644 index 0000000000..738f125507 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/required-extensions-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>SVG requiredExtensions</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#html-and-svg"> +<link rel="match" href="required-extensions-2-ref.html"/> +<meta name="assert" content="Verify that a foreignObject with MathML used as a requiredExtensions value is selected for display in a SVG switch element."> +</head> +<body> + <p>Test passes if there is a green square and no red.</p> + <svg width="200px" height="200px"> + <rect width="200px" height="100px" fill="red"/> + <switch> + <foreignObject width="200px" height="200px" + requiredExtensions="http://www.w3.org/1998/Math/MathML"> + <div style="width: 200px; height: 200px; background: green"></div> + </foreignObject> + <rect y="100px" width="200px" height="100px" fill="red"/> + </switch> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/shadow-dom-mozilla-1066554-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/shadow-dom-mozilla-1066554-ref.html new file mode 100644 index 0000000000..f885eaec42 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/shadow-dom-mozilla-1066554-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>Test for Mozilla bug 1066554 - Shadow DOM loads MathML stylesheets as needed</title> +<body> + <math> + <msup> + <mi>X</mi> + <mi>X</mi> + </msup> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/shadow-dom-mozilla-1066554.html b/testing/web-platform/tests/mathml/relations/html5-tree/shadow-dom-mozilla-1066554.html new file mode 100644 index 0000000000..563ceb29e5 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/shadow-dom-mozilla-1066554.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Test for Mozilla bug 1066554 - Shadow DOM loads MathML stylesheets as needed</title> +<link rel="match" href="shadow-dom-mozilla-1066554-ref.html"/> +<body> + <div id="x"></div> + <script> + function insertShadowMathML() { + var x = document.getElementById("x"); + x.attachShadow({ mode: "open" }); + x.shadowRoot.innerHTML = + '<math><msup><mi>X</mi><mi>X</mi></msup></math>'; + document.documentElement.removeAttribute("class"); + } + document.documentElement.addEventListener("TestRendered", insertShadowMathML); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-001.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-001.tentative.html new file mode 100644 index 0000000000..3aaf0d955a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-001.tentative.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>MathML tabIndex attribute</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> +<meta name="assert" content="Verify default values for the tabIndex attribute"> + +<script src="/mathml/support/mathml-fragments.js"></script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="log"></div> + <math> + </math> + <script> + const htmlLinkableElements = + new Set([ + 'mi', 'mo', 'mn', 'ms', 'mtext', 'mrow' + ]); + + Object.keys(MathMLFragments).forEach(elName => { + const mathEl = document.querySelector('math'); + + mathEl.innerHTML = ` + <${elName} id="el" onfocus="alert('fail')"></${elName}> + <${elName} id="el-link" href="javascript:alert('fail')" onfocus="alert('fail')"></${elName}> + `; + + const el = mathEl.querySelector('#el'); + const elLink = mathEl.querySelector('#el-link'); + + const expectedDefault = (htmlLinkableElements.has(elName)) ? 0 : -1; + + test(() => { + assert_equals(el.tabIndex, expectedDefault, "no attribute"); + el.setAttribute("tabindex", "invalid"); + assert_equals(el.getAttribute("tabindex"), "invalid"); + assert_equals(el.tabIndex, expectedDefault, "invalid"); + el.setAttribute("tabindex", "9999999999"); + assert_equals(el.getAttribute("tabindex"), "9999999999"); + assert_equals(el.tabIndex, expectedDefault, "too large integer"); + }, `default and invalid values for ${elName} without href`); + test(() => { + assert_equals(elLink.tabIndex, expectedDefault, "no attribute"); + elLink.setAttribute("tabindex", "invalid"); + assert_equals(elLink.getAttribute("tabindex"), "invalid"); + assert_equals(elLink.tabIndex, expectedDefault, "invalid"); + elLink.setAttribute("tabindex", "9999999999"); + assert_equals(elLink.getAttribute("tabindex"), "9999999999"); + assert_equals(elLink.tabIndex, expectedDefault, "too large integer"); + }, `default and invalid values for ${elName} with href`); + }); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-002.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-002.tentative.html new file mode 100644 index 0000000000..d2144e3d01 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/tabindex-002.tentative.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<meta charset="utf-8"/> +<title>MathML tabindex attribute</title> +<meta name="timeout" content="long"> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<meta assert="flag" content="interact"> +<meta assert="assert" content="Check the sequential focus navigation order for MathML"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<div id="log"></div> +<a href="#link">tabindex(html,href)</a> +<math> + <mtext id="text1">tabindex(omitted)</mtext> + <mtext id="text2" tabindex="">tabindex(empty)</mtext> + <mtext id="text3" tabindex="a">tabindex(a)</mtext> + <mtext id="text4" tabindex="-1">tabindex(-1)</mtext> + <mtext id="text5" tabindex="0">tabindex(0)</mtext> + <mtext id="text6" href="#link">tabindex(href)</mtext> + <mtext id="text7" tabindex="3">tabindex(3)</mtext> + <mtext id="text8" tabindex="2">tabindex(2)</mtext> + <mtext id="text9" tabindex="2">tabindex(2)</mtext> + <mtext id="text10" tabindex="2">tabindex(2)</mtext> + <mtext id="text11" tabindex="1">tabindex(1)</mtext> +</math> +<script> + +var i = 0, + expectation = ["text11", "text8", "text9", "text10", "text7", "text5"], + results = [], + t = async_test("Elements with different tabindex must be focused sequentially when pressing 'Tab' keys"); + +setup(function () { + document.body.focus(); +}); + +document.querySelector("a").addEventListener("focus", function (evt) { + // Links are tab-navigable on that platform. + expectation.push("text6"); + // TAB = '\ue004' + test_driver.send_keys(document.body, "\ue004"); +}, true); + +document.querySelector("math").addEventListener("focus", function (evt) { + results.push(evt.target.id); + i++; + if (i >= expectation.length) { + t.step(function () { + assert_array_equals(results, expectation); + }); + t.done(); + } else { + t.step(function () { + // TAB = '\ue004' + test_driver.send_keys(document.body, "\ue004"); + }); + } +}, true); + +document.addEventListener("keydown", function (evt) { + t.step(function () { + assert_equals(evt.keyCode, 9, "Please press 'Tab' key."); + }); +}, true); + +t.step(function () { + // TAB = '\ue004' + test_driver.send_keys(document.body, "\ue004"); +}); +</script> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-1.html new file mode 100644 index 0000000000..6b3ab07f1a --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Unique Identifier (iframe)</title> +</head> +<body> + + <div style="width: 100px; height: 500px;"> + <math><mtext style="background: red; color: white;">FAIL</mtext></math> + </div> + <div style="width: 100px; height: 500px;"> + <math><mtext style="background: green; color: white;" + id="PASS">PASS</mtext></math> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-2.html new file mode 100644 index 0000000000..ade0110a27 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-iframe-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Unique Identifier (iframe reference)</title> +</head> +<body> + + <div style="width: 100px; height: 500px;"> + <math><mtext style="background: green; color: white;" + id="PASS" class="pass">PASS</mtext></math> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-ref.html new file mode 100644 index 0000000000..a219b2c870 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Unique identifier (reference)</title> +</head> +<body> + + <p>Test passes if you see the text "PASS".</p> + + <iframe width="100" height="100" frameborder="0" scrolling="no" + marginheight="0" marginwidth="0" + src="unique-identifier-1-iframe-2.html#PASS"></iframe> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1.html new file mode 100644 index 0000000000..f5de2757c3 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Unique identifier</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="match" href="unique-identifier-1-ref.html"/> +<meta name="assert" content="Verify that the id on a MathML element can be used as a fragment identifier in order to force initial scrolling."> +</head> +<body> + + <p>Test passes if you see the text "PASS".</p> + + <iframe width="100" height="100" frameborder="0" scrolling="no" + marginheight="0" marginwidth="0" + src="unique-identifier-1-iframe-1.html#PASS"></iframe> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-2.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-2.html new file mode 100644 index 0000000000..d4e69df324 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-2.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Unique Identifier</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="Verify whether the getElementById() works for MathML elements."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("DOMContentLoaded", function() { + var mtext = document.getElementById("MTEXT"); + test(function() { + assert_equals(mtext, document.body.lastElementChild.lastElementChild); + }, "getElementById()"); + done(); + }); +</script> +</head> +<body> + <div id="log"></div> + <math> + <mtext id="MTEXT_"></mtext> + <mtext id="MTEX"></mtext> + <mtext id="MTEXT"></mtext> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3-ref.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3-ref.html new file mode 100644 index 0000000000..ef056e0082 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Unique identifier 3 (reference)</title> +</head> +<body> + + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext style="background: green; color: white;">PASS</mtext> + </math> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3.html b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3.html new file mode 100644 index 0000000000..306ce41e25 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/html5-tree/unique-identifier-3.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"/> +<title>Unique Identifier</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> +<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> +<link rel="match" href="unique-identifier-3-ref.html"/> +<meta name="assert" content="Verify that the id attribute affects CSS selectors."> +<style> + #fail { display: none; } + #pass { background: green; } +</style> +</head> +<body> + + <p>Test passes if you see the text "PASS".</p> + <math> + <mtext id="fail" style="background: red; color: white;">FAIL</mtext> + <mtext id="pass" style="color: white;">PASS</mtext> + </math> + +</body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html b/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html new file mode 100644 index 0000000000..c1e8d409b9 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Basic mathematical alphanumeric symbols with default font</title> + <meta name="assert" content="Verify whether the default font contains italic/bold/bold-italic characters from the Mathematical Alphanumeric Symbols block."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + span[data-name] { + font-size: 100px; + background: lightblue; + display: inline-block; + } + </style> + </head> + <body> + <div id="log"></div> + <p><span id="frakturL" data-name="U+1D529 MATHEMATICAL FRAKTUR SMALL L">𝔩</span></p> + <p><span id="emSpace" data-name="U+2003 EM SPACE"> </span></p> + <p><span data-test="Bold" data-name="U+1D416 MATHEMATICAL BOLD CAPITAL W">𝐖</span></p> + <p><span data-test="Italic" data-name="U+1D44A MATHEMATICAL ITALIC CAPITAL W">𝑊</span></p> + <p><span data-test="Bold-italic" data-name="U+1D47E MATHEMATICAL BOLD ITALIC CAPITAL">𝑾</span></p> + <script> + const frakturLWidth = document.getElementById("frakturL").getBoundingClientRect().width; + const emSpaceWidth = document.getElementById("emSpace").getBoundingClientRect().width; + Array.from(document.querySelectorAll('span[data-test]')).forEach(span => { + test(function() { + let spanWidth = span.getBoundingClientRect().width; + // This test expects the default font to provide a fraktur l than is much thiner than a bold/italic/bold-italic W. + // If the font lacks bold/italic/bold-italic W then a fortiori it is likely that its lacks fraktur l, so browsers + // will display "Tofu characters" for all of them (e.g. gray boxes or boxes containing the Unicode code points) + // with very similar widths, so the test is likely to fail. + assert_greater_than(spanWidth, frakturLWidth + emSpaceWidth / 4, `Width of '${span.dataset.name}' is much larger than '${frakturL.dataset.name}'`); + }, `${span.dataset.test} mathematical alphanumeric symbol with the default font`); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/mi-automatic-italic-with-default-font-ref.html b/testing/web-platform/tests/mathml/relations/text-and-math/mi-automatic-italic-with-default-font-ref.html new file mode 100644 index 0000000000..27a58b9ba0 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/mi-automatic-italic-with-default-font-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>Mathematica Alphanumeric Italic</title> + <meta charset="utf-8"/> + </head> + <body> + + <math><mstyle mathbackground="red"><mphantom><mi>X</mi></mphantom></mstyle></math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/mi-automatic-italic-with-default-font.html b/testing/web-platform/tests/mathml/relations/text-and-math/mi-automatic-italic-with-default-font.html new file mode 100644 index 0000000000..5019921410 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/mi-automatic-italic-with-default-font.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>Mathematica Alphanumeric Italic with default font</title> + <meta name="assert" content="Verify italic mi are not rendered with Tofu."> + <meta charset="utf-8"/> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"/> + <link rel="mismatch" href="mi-automatic-italic-with-default-font-ref.html"/> + </head> + <body> + + <!-- The lowercase italic o should be smaller than the uppercase italic X + (this will fail if missing char boxes are used) --> + <math><mstyle mathbackground="red"><mphantom><mi>o</mi></mphantom></mstyle></math> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html new file mode 100644 index 0000000000..3f7f764045 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"/> +<title>Open Font Format: USE_TYPO_METRICS (reference)</title> +<style> + #green { + position: absolute; + background: green; + left: 10px; + width: 230px; + height: 230px; + } +</style> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + <div id="green"></div> + </div> +</body> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html new file mode 100644 index 0000000000..1af8fdfde1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"/> +<title>Open Font Format: USE_TYPO_METRICS</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-layout"/> +<link rel="match" href="use-typo-metrics-1-ref.html"/> +<meta name="assert" content="Verify that the USE_TYPO_METRICS flag from the OS/2 table is taken into account to calculate line height."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/lineheight5000-typolineheight2300.woff"); + } + .green { + position: absolute; + background: green; + width: 115px; + } + .red { + position: absolute; + background: red; + width: 115px; + } + .forceHeight { + height: 230px; + } + .leftSide { + left: 10px; + } + .rightSide { + left: 125px; + } + span { + /* em=1000, lineHeight=5000, typoLineHeight=2300 and font-size=100px + implies typoLineHeightPx = 230px < 500px = lineHeightPx */ + font-family: TestFont; + font-size: 100px; + color: transparent; + } +</style> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + <!-- Left side verifies that typoLineHeightPx <= 230px --> + <div class="leftSide red"><span>O</span></div> + <div class="leftSide green forceHeight"></div> + + <!-- Right side verifies that typoLineHeightPx => 230px --> + <div class="rightSide red forceHeight"></div> + <div class="rightSide green"><span>O</span></div> + </div> +</body> |