diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/presentation-markup/fractions')
68 files changed, 3568 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/default-mfrac-padding-style.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/default-mfrac-padding-style.html new file mode 100644 index 0000000000..3365f1a245 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/default-mfrac-padding-style.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test the mfrac element</title> +<link rel="author" title="Ahmad Saleem" href="mailto:ahmad.saleem792@gmail.com"> +<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> +<meta name="assert" content="Verify default mfrac style."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="log"></div> + <div> + <math> + <mfrac id="mfrac"> + <mn>1</mn> + <mn>2</mn> + </mfrac> + </math> + </div> +<script> + test(function () { + var style = window.getComputedStyle(document.getElementById("mfrac")); + assert_equals(style.paddingInlineStart, "1px"); + assert_equals(style.paddingInlineEnd, "1px"); + }, "Default CSS properties on mfrac"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html new file mode 100644 index 0000000000..604e574322 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-1.html @@ -0,0 +1,191 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Fraction</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness"> +<link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-zero-line-thickness"> +<meta name="assert" content="Verify fraction metrics for different sizes of numerator and denominator."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + math, mspace { + /* OS/2.sxHeight = 800 */ + /* post.underlineThickness == 20 */ + font-family: Ahem; + font-size: 10px; + } + div.shrink-wrap { + background: yellow; + display: inline-block; + margin-top: 5px; + padding-top: 5px; + } +</style> +<script> + const xHeight = 800; + const underlineThickness = 800; + const emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + + function getBox(aId) { + var box = document.getElementById(aId).getBoundingClientRect(); + box.middle = (box.bottom + box.top) / 2; + box.center = (box.left + box.right) / 2; + return box; + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 4; + var mathAxis = getBox("baseline").top - (xHeight/2) * emToPx; + for (var i = 0; i <= 4; i++) { + var frac = getBox("frac" + i); + var num = getBox("frac" + i + "num"); + var den = getBox("frac" + i + "den"); + // To estimate the fraction axis, we calculate barycenter between the + // top and bottom of the fraction, using the heights of numerator and + // denominator as weights. + var fracAxis = (frac.top * den.height + frac.bottom * num.height) / (num.height + den.height); + assert_approx_equals(fracAxis, mathAxis, e, "frac" + i + " fraction bar"); + } + }, "Fraction axis is aligned on the math axis"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + for (var i = 0; i < 10; i++) { + assert_less_than_equal(getBox("frac" + i + "num").bottom, getBox("frac" + i + "den").top, "numerator is above denominator"); + assert_less_than(getBox("frac" + i + "den").top - getBox("frac" + i + "num").bottom, 5, "The gap between numerator and denominator is not too large"); + } + }, "Vertical positions of numerator and denominator"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 3; + for (var i = 0; i < 10; i++) + assert_approx_equals(getBox("frac" + i + "num").center, getBox("frac" + i + "den").center, e, "numerator and denominator are horizontally centered"); + }, "Horizontal alignments of numerator and denominator"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var e = 5; + for (var i = 0; i < 10; i++) { + var frac = getBox("frac" + i); + var num = getBox("frac" + i + "num"); + var den = getBox("frac" + i + "den"); + assert_approx_equals(frac.height, den.bottom - num.top, e, "height of frac " + i + " is determined by the bottom/top sides of the denominator/numerator"); + assert_approx_equals(frac.width, Math.max(num.right, den.right) - Math.min(num.left, den.left), e, "width of frac " + i + " is determined by the left/right sides of the denominator/numerator (plus some spacing)"); + } + }, "Dimension of mfrac elements"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_true(MathMLFeatureDetection.has_mfrac()); + + Array.from(document.getElementsByClassName("shrink-wrap")).forEach((container) => { + var marginPx = 2; // By default fractions have 1px margin on each side. + var epsilon = 1; + var containerWidth = container.getBoundingClientRect().width; + var children = container.getElementsByTagName("mspace"); + var numWidth = children[0].getBoundingClientRect().width; + var denWidth = children[1].getBoundingClientRect().width; + assert_approx_equals(containerWidth, marginPx + Math.max(numWidth, denWidth), epsilon, "Should be the maximum preferred width of numerator/denominator."); + }); + }, "Preferred width of mfrac elements"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="baseline" width="1em" height="0em" depth="1em" style="background: black"/> + <mfrac id="frac0"> + <mspace id="frac0num" width="15px" height="15px" style="background: blue"/> + <mspace id="frac0den" width="15px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac1"> + <mspace id="frac1num" width="30px" height="15px" style="background: blue"/> + <mspace id="frac1den" width="15px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac2"> + <mspace id="frac2num" width="15px" height="15px" style="background: blue"/> + <mspace id="frac2den" width="30px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac3"> + <mspace id="frac3num" width="15px" height="30px" style="background: blue"/> + <mspace id="frac3den" width="15px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac4"> + <mspace id="frac4num" width="15px" height="15px" style="background: blue"/> + <mspace id="frac4den" width="15px" height="30px" style="background: green"/> + </mfrac> + <mfrac id="frac5" linethickness="0px"> + <mspace id="frac5num" width="15px" height="15px" style="background: blue"/> + <mspace id="frac5den" width="15px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac6" linethickness="0px"> + <mspace id="frac6num" width="30px" height="15px" style="background: blue"/> + <mspace id="frac6den" width="15px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac7" linethickness="0px"> + <mspace id="frac7num" width="15px" height="15px" style="background: blue"/> + <mspace id="frac7den" width="30px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac8" linethickness="0px"> + <mspace id="frac8num" width="15px" height="30px" style="background: blue"/> + <mspace id="frac8den" width="15px" height="15px" style="background: green"/> + </mfrac> + <mfrac id="frac9" linethickness="0px"> + <mspace id="frac9num" width="15px" height="15px" style="background: blue"/> + <mspace id="frac9den" width="15px" height="30px" style="background: green"/> + </mfrac> + </math> + </p> + <div class="shrink-wrap"> + <math> + <mfrac> + <mspace width="30px" height="15px" style="background: blue"/> + <mspace width="15px" height="15px" style="background: green"/> + </mfrac> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mfrac> + <mspace width="15px" height="15px" style="background: blue"/> + <mspace width="30px" height="15px" style="background: green"/> + </mfrac> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mfrac linethickness="0px"> + <mspace width="30px" height="15px" style="background: blue"/> + <mspace width="15px" height="15px" style="background: green"/> + </mfrac> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mfrac linethickness="0px"> + <mspace width="15px" height="15px" style="background: blue"/> + <mspace width="30px" height="15px" style="background: green"/> + </mfrac> + </math> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html new file mode 100644 index 0000000000..5b7a8dff47 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions bar</title> + <style type="text/css"> + #container { + position: absolute; + left: 10px; + top: 50px; + width: 150px; + height: 150px; + background: green; + } + </style> + </head> + <body> + <p>This test passes if you see a green square.</p> + <div id="container"></div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html new file mode 100644 index 0000000000..8284546e4f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>fractions bar</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verifies painting of the fraction bar"> + <link rel="match" href="frac-bar-001-ref.html"> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + /* The gap / shift / axisheight parameters are set to 0. */ + font-family: "TestFont"; + font-size: 1px; + } + #container { + position: absolute; + left: 0; + top: 0; + } + </style> + <script src="/common/reftest-wait.js"></script> + <script src="/mathml/support/fonts.js"></script> + <script> + window.addEventListener("load", () => { loadAllFonts().then(adjustPositionOfFraction); }); + + function adjustPositionOfFraction() + { + requestAnimationFrame(() => { + var container = document.getElementById("container"); + var numeratorBox = document.getElementById("numerator").getBoundingClientRect(); + container.style.left = (10 - numeratorBox.left) + "px"; + container.style.top = (50 - numeratorBox.top) + "px"; + requestAnimationFrame(takeScreenshot); + }); + } + </script> + </head> + <body> + <p>This test passes if you see a green square.</p> + <div id="container"> + <math> + <mfrac style="color: green; font-size: 15em"> + <mspace id="numerator" width="150px"></mspace> + <mspace></mspace> + </mfrac> + </math> + </div> + <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/presentation-markup/fractions/frac-bar-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002-ref.html new file mode 100644 index 0000000000..9d5eef896a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions bar</title> + <style type="text/css"> + #green { + position: absolute; + background: green; + width: 150px; + height: 150px; + left: 50px; + top: 50px; + } + </style> + </head> + <body> + <p>This test passes if you see a green <strong>square</strong> and no red.</p> + <div> + <div id="green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html new file mode 100644 index 0000000000..3eb5433e82 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-002.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>fractions bar</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verify painting of the fraction bar when margin/padding/border are involved."> + <link rel="match" href="frac-bar-002-ref.html"> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + /* The gap / shift / axisheight parameters are set to 0. */ + font-family: "TestFont"; + font-size: 1px; + } + #container { + position: absolute; + left: 0; + top: 0; + } + #red { + position: absolute; + background: red; + margin: 1px; + width: 148px; + height: 148px; + } + </style> + <script src="/mathml/support/fonts.js"></script> + <script src="/common/reftest-wait.js"></script> + <script> + window.addEventListener("load", () => { loadAllFonts().then(adjustPositionOfFraction); }); + + function adjustPositionOfFraction() + { + requestAnimationFrame(() => { + var container = document.getElementById("container"); + var red = document.getElementById("red"); + var numeratorBox = document.getElementById("numerator").getBoundingClientRect(); + const shift = 50; + const numeratorMargin = 20; + + /* Move the red square at the expected position, + with a 1px gap to avoid antialiasing issues. */ + red.style.left = `${shift}px`; + red.style.top = `${shift}px`; + + /* Move the fraction bar at the expected position. */ + container.style.left = (shift - numeratorBox.left + numeratorMargin) + "px"; + container.style.top = (shift - numeratorBox.bottom - numeratorMargin) + "px"; + requestAnimationFrame(takeScreenshot); + }); + } + </script> + </head> + <body> + <p>This test passes if you see a green <strong>square</strong> and no red.</p> + <div> + <div id="red"></div> + <div id="container"> + <math> + <!-- border, padding and margin should not affect the width of the fraction bar. --> + <mfrac style="color: green; font-size: 15em; + border: 30px solid transparent; + padding: 60px; margin: 120px; + "> + <!-- the bar width is the one of the numerator margin box i.e. 80 + 2 * (5 + 10 + 20) = 150px --> + <mspace id="numerator" width="80px" + style="border: 5px solid transparent; + padding: 10px; margin: 20px;"></mspace> + <mspace></mspace> + </mfrac> + </math> + </div> + </div> + <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/presentation-markup/fractions/frac-bar-003-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003-ref.html new file mode 100644 index 0000000000..6bb6370d6e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions bar (reference)</title> + <style type="text/css"> + #container { + position: absolute; + left: 10px; + top: 50px; + width: 150px; + height: 150px; + background: green; + } + </style> + </head> + <body> + <p>This test passes if you see a green square.</p> + <div id="container"></div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html new file mode 100644 index 0000000000..69b45ea29c --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-bar-003.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions bar</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verifies that the fraction bar takes the full width of the mfrac element"> + <link rel="match" href="frac-bar-003-ref.html"> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + /* The gap / shift / axisheight parameters are set to 0. */ + font-family: "TestFont"; + font-size: 1px; + } + #container { + position: absolute; + left: 10px; + top: 50px; + width: 150px; + height: 150px; + } + + /* Revert style specified in the UA style sheet that changes box size. */ + mfrac { padding: 0; } + </style> + <script src="/mathml/support/fonts.js"></script> + </head> + <body> + <p>This test passes if you see a green square.</p> + <div id="container"> + <math> + <mfrac style="width: 150px; color: green; font-size: 15em"> + <mspace></mspace> + <mspace></mspace> + </mfrac> + </math> + </div> + <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/presentation-markup/fractions/frac-color-001-notref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001-notref.html new file mode 100644 index 0000000000..498d6277a3 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001-notref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction bar color</title> + </head> + <body style="font-size: 20pt;"> + <p>This test passes if you see a fraction with a blue fraction bar.</p> + <math> + <mfrac> + <mspace width="200px" height="20px" style="background: black"></mspace> + <mspace width="200px" height="20px" style="background: black"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html new file mode 100644 index 0000000000..442388a6eb --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction bar color</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <meta name="assert" content="The CSS color property has an effect on the fraction bar."> + <link rel="mismatch" href="frac-color-001-notref.html"> + </head> + <body style="font-size: 20pt;"> + <p>This test passes if you see a fraction with a blue fraction bar.</p> + <math> + <mfrac style="color: blue;"> + <mspace width="200px" height="20px" style="background: black"></mspace> + <mspace width="200px" height="20px" style="background: black"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html new file mode 100644 index 0000000000..fe2f4fa7b1 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions color</title> + </head> + <body> + <p>This test passes if you see a green square and a blue square.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> + <div style="background: blue; width: 200px; height: 200px;"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html new file mode 100644 index 0000000000..5c87212f59 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-color-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions color</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <meta name="assert" content="Verifies the color property affects the fraction bar"> + <link rel="match" href="frac-color-002-ref.html"> + </head> + <body> + <p>This test passes if you see a green square and a blue square.</p> + <div style="background: green; width: 200px; height: 200px;"> + <math> + <mspace width="10px"></mspace> + <mfrac style="color: green"> + <mspace width="150px" height="20px"></mspace> + <mspace width="150px" height="20px"></mspace> + </mfrac> + </math> + </div> + <div style="background: blue; width: 200px; height: 200px;"> + <math> + <mspace width="10px"></mspace> + <mfrac style="color: blue"> + <mspace width="150px" height="20px"></mspace> + <mspace width="150px" height="20px"></mspace> + </mfrac> + </math> + </div> + <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/presentation-markup/fractions/frac-created-dynamically-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2-ref.html new file mode 100644 index 0000000000..d389906112 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mfrac created dynamically</title> + </head> + <body> + <p>This test passes if it renders the same as an invalid fraction with 3 children.</p> + <math> + <mfrac> + <mspace width="50px" height="50px" style="background: black"></mspace> + <mspace width="50px" height="50px" style="background: black"></mspace> + <mspace width="50px" height="50px" style="background: black"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html new file mode 100644 index 0000000000..8e9fa520ea --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-2.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>mfrac created dynamically</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="A dynamically added mfrac should render like the equivalent markup."> +<link rel="match" href="frac-created-dynamically-2-ref.html"> +<script> + window.addEventListener("load", function() { + + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + var mfrac = document.createElementNS("http://www.w3.org/1998/Math/MathML","mfrac"); + var mspace1 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace"); + mspace1.setAttribute("width", "50px"); + mspace1.setAttribute("height", "50px"); + mspace1.setAttribute("style", "background: black"); + var mspace2 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace"); + mspace2.setAttribute("width", "50px"); + mspace2.setAttribute("height", "50px"); + mspace2.setAttribute("style", "background: black"); + var mspace3 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace"); + mspace3.setAttribute("width", "50px"); + mspace3.setAttribute("height", "50px"); + mspace3.setAttribute("style", "background: black"); + document.getElementsByTagName("math")[0].appendChild(mfrac); + mfrac.appendChild(mspace1); + mfrac.appendChild(mspace2); + mfrac.appendChild(mspace3); + + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</head> +<body> + <p>This test passes if it renders the same as an invalid fraction with 3 children.</p> + <math></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/presentation-markup/fractions/frac-created-dynamically-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3-ref.html new file mode 100644 index 0000000000..f8db144cfe --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mfrac created dynamically</title> + </head> + <body> + <p>This test passes if you see a fraction 1/3.</p> + <math> + <mfrac> + <mn>1</mn> + <mn>3</mn> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html new file mode 100644 index 0000000000..1f7e23bb84 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>mfrac created dynamically</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="A dynamically added mfrac should render like the equivalent markup."> +<link rel="match" href="frac-created-dynamically-3-ref.html"> +<script> + window.addEventListener("load", function() { + + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + var mn3 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mn"); + mn3.appendChild(document.createTextNode("3")); + document.getElementsByTagName("mfrac")[0].appendChild(mn3); + document.getElementById("mn2").remove(); + + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</head> +<body> + <p>This test passes if you see a fraction 1/3.</p> + <math> + <mfrac> + <mn>1</mn> + <mn id="mn2">2</mn> + </mfrac> + </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/presentation-markup/fractions/frac-created-dynamically-4-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-4-ref.html new file mode 100644 index 0000000000..a084a81f0b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-4-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>mfrac childnode update</title> + </head> + <body> + <math> + <mfrac style="font-size: 300%"> + <mfrac> + <mi>a</mi> + <mi>b</mi> + </mfrac> + <mfrac> + <mi>c</mi> + <mi>d</mi> + </mfrac> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-4.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-4.html new file mode 100644 index 0000000000..66665620e3 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-4.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>mfrac childnode update</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="A dynamically created mfrac should render like the equivalent markup."> + <link rel="match" href="frac-created-dynamically-4-ref.html"> + <script type="text/javascript"> + function doTest() { + var x = document.getElementById("innerMfrac"); + var y = document.createElementNS("http://www.w3.org/1998/Math/MathML","mi"); + var z = document.createElementNS("http://www.w3.org/1998/Math/MathML","mi"); + y.innerHTML = "c"; + z.innerHTML = "d"; + x.appendChild(y); + x.appendChild(z); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("TestRendered",doTest); + </script> + </head> + <body> + <math> + <mfrac style="font-size: 300%"> + <mfrac> + <mi>a</mi> + <mi>b</mi> + </mfrac> + <mfrac id="innerMfrac"> + </mfrac> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html new file mode 100644 index 0000000000..e10405c572 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mfrac created dynamically</title> + </head> + <body> + <p>This test passes if you see a fraction.</p> + <math> + <mfrac> + <mspace width="50px" height="50px" style="background: black"></mspace> + <mspace width="50px" height="50px" style="background: black"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html new file mode 100644 index 0000000000..8f65e8d9cf --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-created-dynamically.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>mfrac created dynamically</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> +<meta name="assert" content="A dynamically added mfrac should render like the equivalent markup."> +<link rel="match" href="frac-created-dynamically-ref.html"> +<script> + window.addEventListener("load", function() { + + // force initial layout so we're sure what we're testing against + document.documentElement.getBoundingClientRect(); + + var mfrac = document.createElementNS("http://www.w3.org/1998/Math/MathML","mfrac"); + var mspace1 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace"); + mspace1.setAttribute("width", "50px"); + mspace1.setAttribute("height", "50px"); + mspace1.setAttribute("style", "background: black"); + var mspace2 = document.createElementNS("http://www.w3.org/1998/Math/MathML","mspace"); + mspace2.setAttribute("width", "50px"); + mspace2.setAttribute("height", "50px"); + mspace2.setAttribute("style", "background: black"); + mfrac.appendChild(mspace1); + mfrac.appendChild(mspace2); + document.getElementsByTagName("math")[0].appendChild(mfrac); + + document.documentElement.classList.remove('reftest-wait'); + }); +</script> +</head> +<body> + <p>This test passes if you see a fraction.</p> + <math></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/presentation-markup/fractions/frac-default-padding-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding-ref.html new file mode 100644 index 0000000000..93d3e0162b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fraction default padding</title> + </head> + <body> + <p>This test passes if you see three green squares of same size, separated by a gap of one pixel.</p> + <div> + <math> + <mspace width="150px" height="75px" depth="75px" style="background: green"/> + <mspace width="1px"/> + <mspace width="150px" height="75px" depth="75px" style="background: green"/> + <mspace width="1px"/> + <mspace width="150px" height="75px" depth="75px" style="background: green"/> + </math> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html new file mode 100644 index 0000000000..30f155661a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-default-padding.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fraction default padding</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verifies 1px padding is added around each side of the fraction."> + <link rel="match" href="frac-default-padding-ref.html"> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + /* The gap / shift / axisheight parameters are set to 0. */ + font-family: "TestFont"; + font-size: 1px; + } + </style> + </head> + <body> + <p>This test passes if you see three green squares of same size, separated by a gap of one pixel.</p> + <div> + <math> + <mspace width="150px" height="75px" depth="75px" style="background: green"/> + <mfrac style="color: green; font-size: 15em"> + <mspace id="numerator" width="150px"></mspace> + <mspace></mspace> + </mfrac> + <mspace width="150px" height="75px" depth="75px" style="background: green"/> + </math> + </div> + <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/presentation-markup/fractions/frac-invalid-2-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2-ref.html new file mode 100644 index 0000000000..d57c20901b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mfrac with one child</title> +</head> +<body> + <p>This test passes if you see a single rectangle.</p> + <math> + <mrow style="padding-inline-start: 1px; padding-inline-end: 1px;"> + <mspace width="200px" height="200px" style="background: green"></mspace> + </mrow> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html new file mode 100644 index 0000000000..729fe813d0 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mfrac with one child</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#mfrac"> +<meta name="assert" content="An mfrac with one child should render using mrow."> +<link rel="match" href="frac-invalid-2-ref.html"> +</head> +<body> + <p>This test passes if you see a single rectangle.</p> + <math> + <mfrac> + <mspace width="200px" height="200px" style="background: green"></mspace> + </mfrac> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html new file mode 100644 index 0000000000..703e4aeca0 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mfrac with three children</title> +</head> +<body> + <p>This test passes if you see a single rectangle.</p> + <math> + <mrow style="padding-inline-start: 1px; padding-inline-end: 1px;"> + <mspace width="50px" height="200px" style="background: green"></mspace> + <mspace width="50px" height="200px" style="background: green"></mspace> + <mspace width="100px" height="200px" style="background: green"></mspace> + </mrow> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html new file mode 100644 index 0000000000..d56b55ef80 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-3.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mfrac with three children</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#mfrac"> +<meta name="assert" content="An mfrac with no children should render using an empty mrow."> +<link rel="match" href="frac-invalid-3-ref.html"> +</head> +<body> + <p>This test passes if you see a single rectangle.</p> + <math> + <mfrac> + <mspace width="50px" height="200px" style="background: green"></mspace> + <mspace width="50px" height="200px" style="background: green"></mspace> + <mspace width="100px" height="200px" style="background: green"></mspace> + </mfrac> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html new file mode 100644 index 0000000000..beb3024732 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mfrac with zero children</title> +</head> +<body> + <p>This test passes if mfrac renders nothing.</p> + <math> + <mrow style="padding-inline-start: 1px; padding-inline-end: 1px;"> + </mrow> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html new file mode 100644 index 0000000000..78e11e7e2b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-invalid.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mfrac with zero children</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#mfrac"> +<meta name="assert" content="An mfrac with no children should render using an empty mrow."> +<link rel="match" href="frac-invalid-ref.html"> +</head> +<body> + <p>This test passes if mfrac renders nothing.</p> + <math> + <mfrac> + </mfrac> + </math> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html new file mode 100644 index 0000000000..f0b355c7bd --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions bevelled (reference)</title> + </head> + <body> + <p>Test passes is you see a blue rectangle <em>above</em> a green rectangle, separated by a horizontal bar.</p> + <p> + <math> + <mfrac> + <mspace width="100px" height="30px" style="background: lightblue"></mspace> + <mspace width="100px" height="30px" style="background: lightgreen"></mspace> + </mfrac> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html new file mode 100644 index 0000000000..a98fc0f979 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-legacy-bevelled-attribute.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions bevelled</title> + <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://github.com/mathml-refresh/mathml/issues/29"> + <meta name="assert" content="Verify that the MathML3 bevelled attribute is ignored."> + <link rel="match" href="frac-legacy-bevelled-attribute.tentative-ref.html"> + </head> + <body> + <p>Test passes is you see a blue rectangle <em>above</em> a green rectangle, separated by a horizontal bar.</p> + <p> + <math> + <mfrac bevelled="true"> + <mspace width="100px" height="30px" style="background: lightblue"></mspace> + <mspace width="100px" height="30px" style="background: lightgreen"></mspace> + </mfrac> + </math> + </p> + <script src="/mathml/support/feature-detection.js"></script> + <script> + MathMLFeatureDetection.ensure_for_match_reftest("has_mspace"); + MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html new file mode 100644 index 0000000000..4057f93fcc --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + font-family: "TestFont"; + font-size: 1px; + } + </style> + </head> + <body> + <p>This test passes if you see the same fraction eight times.</p> + <math> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html new file mode 100644 index 0000000000..99f7510263 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-001.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verifies deprecated 'thin', 'medium', 'thick' and unitless values have no effect on the linethickness of the mfrac element"> + <link rel="match" href="frac-linethickness-001-ref.html"> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + font-family: "TestFont"; + font-size: 1px; + } + </style> + </head> + <body> + <p>This test passes if you see the same fraction eight times.</p> + <math> + <mfrac linethickness="thin"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="medium"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="thick"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="5"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="100%"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="100%"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="2km"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + <mspace width="20px"/> + <mfrac linethickness="cat"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </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/presentation-markup/fractions/frac-linethickness-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-002.html new file mode 100644 index 0000000000..bb47f18687 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-002.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"> + <meta name="assert" content="Verifies fraction with positive, negative, percent and named space linethickness values."> + <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 type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 10 / 1000 = 100px; */ + font-family: "TestFont"; + font-size: 10px; + } + </style> + <script> + function LineThickness(aId) { + var mfrac = document.getElementById(aId); + var numBox = mfrac.firstElementChild.getBoundingClientRect(); + var denumBox = mfrac.lastElementChild.getBoundingClientRect(); + return denumBox.top - numBox.bottom; + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + var defaultRuleThickness = 100; + var epsilon = 2; + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(LineThickness("positive"), 5.67 * 10, epsilon); + }, "Positive"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + /* Negative values are treated as 0 */ + assert_approx_equals(LineThickness("negative"), 0, epsilon); + }, "Negative"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(LineThickness("percent"), defaultRuleThickness * 234 / 100, epsilon); + }, "Percentage"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + /* Namedspace values are invalid in MathML Core. */ + assert_approx_equals(LineThickness("namedspace"), defaultRuleThickness, epsilon); + }, "Named space"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + /* Calc() expressions are invalid in MathML Core. */ + assert_approx_equals(LineThickness("calc"), defaultRuleThickness, epsilon); + }, "Calc() expression"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + document.getElementById("dynamic-attach").setAttribute("linethickness", "400%"); + document.getElementById("dynamic-modify").setAttribute("linethickness", "200%"); + document.getElementById("dynamic-remove").removeAttribute("linethickness"); + assert_approx_equals(LineThickness("dynamic-attach"), defaultRuleThickness * 4, epsilon, "attach"); + assert_approx_equals(LineThickness("dynamic-modify"), defaultRuleThickness * 2, epsilon, "modify"); + assert_approx_equals(LineThickness("dynamic-remove"), defaultRuleThickness, epsilon, "remove"); + }, "Dynamic linethickness"); + + done(); + } + </script> + </head> + <body> + <math> + <mfrac id="positive" linethickness="5.67em"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="negative" linethickness="-1.23em"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="percent" linethickness="234%"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="namedspace" linethickness="veryverythickmathspace"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="calc" linethickness="calc(20px)"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="dynamic-attach"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="dynamic-modify" linethickness="300%"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + <math> + <mfrac id="dynamic-remove" linethickness="300%"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html new file mode 100644 index 0000000000..934d666333 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003-notref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + </head> + <body> + <p>This test passes if you see a fraction without fraction bar.</p> + <math> + <mfrac> + <mspace width="20px" height="5px" style="background: blue"></mspace> + <mspace width="20px" height="5px" style="background: cyan"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html new file mode 100644 index 0000000000..d930f058c5 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verifies fraction with 0px bar."> + <link rel="mismatch" href="frac-linethickness-003-notref.html"> + </head> + <body> + <p>This test passes if you see a fraction without fraction bar.</p> + <math> + <mfrac linethickness="0px"> + <mspace width="20px" height="5px" style="background: blue"></mspace> + <mspace width="20px" height="5px" style="background: cyan"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html new file mode 100644 index 0000000000..8014f0a895 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + font-family: "TestFont"; + font-size: 1px; + } + </style> + </head> + <body> + <p>This test passes if you see no fraction bar.</p> + <math> + <mfrac linethickness="0px"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html new file mode 100644 index 0000000000..bfb708c092 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-004.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>fractions linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verifies that unitless value of zero causes no fraction bar to be painted"> + <link rel="match" href="frac-linethickness-004-ref.html"> + <style type="text/css"> + @font-face { + font-family: TestFont; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } + math { + /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ + font-family: "TestFont"; + font-size: 1px; + } + </style> + </head> + <body> + <p>This test passes if you see no fraction bar.</p> + <math> + <mfrac linethickness="0"> + <mspace width="20px" height="10px" style="background: blue"></mspace> + <mspace width="20px" height="10px" style="background: cyan"></mspace> + </mfrac> + </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/presentation-markup/fractions/frac-linethickness-005-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-005-ref.html new file mode 100644 index 0000000000..1c231455bf --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-005-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>mfrac linethickness</title> + </head> + <body> + <math> + <mfrac style="font-size: 300%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-005.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-005.html new file mode 100644 index 0000000000..9ecc636215 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>mfrac linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Test dynamically removing a linethickness larger than 100%"> + <link rel="match" href="frac-linethickness-005-ref.html"> + <script type="text/javascript"> + function doTest() { + document.getElementById("testMfrac").removeAttribute("linethickness"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("TestRendered",doTest); + </script> + </head> + <body> + <math> + <mfrac id="testMfrac" style="font-size: 300%" linethickness="200%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-006-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-006-ref.html new file mode 100644 index 0000000000..1c231455bf --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-006-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>mfrac linethickness</title> + </head> + <body> + <math> + <mfrac style="font-size: 300%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-006.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-006.html new file mode 100644 index 0000000000..4ee477b813 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>mfrac linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Test dynamically removing a linethickness smaller than 100%"> + <link rel="match" href="frac-linethickness-006-ref.html"> + <script type="text/javascript"> + function doTest() { + document.getElementById("testMfrac").removeAttribute("linethickness"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("TestRendered",doTest); + </script> + </head> + <body> + <math> + <mfrac id="testMfrac" style="font-size: 300%" linethickness="50%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-007-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-007-ref.html new file mode 100644 index 0000000000..c5d73a9bba --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-007-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>mfrac linethickness</title> + </head> + <body> + <math> + <mfrac style="font-size: 300%" linethickness="200%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-007.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-007.html new file mode 100644 index 0000000000..8702c3c698 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>mfrac linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Test dynamically setting the linethickness to a value larger than 100%"> + <link rel="match" href="frac-linethickness-007-ref.html"> + <script type="text/javascript"> + function doTest() { + document.getElementById("testMfrac").setAttribute("linethickness","200%"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("TestRendered",doTest); + </script> + </head> + <body> + <math> + <mfrac id="testMfrac" style="font-size: 300%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-008-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-008-ref.html new file mode 100644 index 0000000000..0a6155e785 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-008-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>mfrac linethickness</title> + </head> + <body> + <math> + <mfrac style="font-size: 300%" linethickness="50%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-008.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-008.html new file mode 100644 index 0000000000..8e5bfe89f5 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-linethickness-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>mfrac linethickness</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Test dynamically setting the linethickness to a value smaller than 100%"> + <link rel="match" href="frac-linethickness-008-ref.html"> + <script type="text/javascript"> + function doTest() { + document.getElementById("testMfrac").setAttribute("linethickness","50%"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("TestRendered",doTest); + </script> + </head> + <body> + <math> + <mfrac id="testMfrac" style="font-size: 300%" linethickness="300%"> + <mi>a</mi> + <mi>b</mi> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html new file mode 100644 index 0000000000..e42cb96fe8 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction mrow</title> + </head> + <body style="font-size: 20pt;"> + <p>This test passes if you see a fraction with a blue square as numerator and a cyan square as denominator.</p> + <math> + <mfrac> + <mspace width="60px" height="60px" style="background: blue"></mspace> + <mspace width="60px" height="60px" style="background: cyan"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html new file mode 100644 index 0000000000..82e817e4de --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-mrow-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction mrow</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> + <meta name="assert" content="This test that <mrow> elements can be used as numerator and denominator of fractions."> + <link rel="match" href="frac-mrow-001-ref.html"> + </head> + <body style="font-size: 20pt;"> + <p>This test passes if you see a fraction with a blue square as numerator and a cyan square as denominator.</p> + <math> + <mfrac> + <mrow> + <mspace width="30px" height="60px" style="background: blue"></mspace> + <mspace width="30px" height="60px" style="background: blue "></mspace> + </mrow> + <mrow> + <mspace width="30px" height="60px" style="background: cyan"></mspace> + <mspace width="30px" height="60px" style="background: cyan "></mspace> + </mrow> + </mfrac> + </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/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html new file mode 100644 index 0000000000..09b83e9efb --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction numalign denomalign</title> + </head> + <body> + <p>This test passes if you see 6 fractions with numerators and + denominators horizontally centered.</p> + <p> + <math> + <mfrac> + <mrow> + <mspace width="10px" height="20px"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px"></mspace> + </mrow> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + </mfrac> + </math> + <math> + <mfrac> + <mrow> + <mspace width="10px" height="20px"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px"></mspace> + </mrow> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + </mfrac> + </math> + <math> + <mfrac> + <mrow> + <mspace width="10px" height="20px"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px"></mspace> + </mrow> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mrow> + <mspace width="10px" height="20px"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px"></mspace> + </mrow> + </mfrac> + </math> + <math> + <mfrac> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mrow> + <mspace width="10px" height="20px"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px"></mspace> + </mrow> + </mfrac> + </math> + <math> + <mfrac> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mrow> + <mspace width="10px" height="20px"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="10px" height="20px"></mspace> + </mrow> + </mfrac> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html new file mode 100644 index 0000000000..653962f33d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-numalign-denomalign-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction numalign denomalign</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Check that legacy numalign/denomalign attributes are ignored."> + <link rel="match" href="frac-numalign-denomalign-001-ref.html"> + </head> + <body> + <p>This test passes if you see 6 fractions with numerators and + denominators horizontally centered.</p> + <p> + <math> + <mfrac numalign="left"> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + </mfrac> + </math> + <math> + <mfrac numalign="center"> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + </mfrac> + </math> + <math> + <mfrac numalign="right"> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac denomalign="left"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mfrac> + </math> + <math> + <mfrac denomalign="center"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mfrac> + </math> + <math> + <mfrac denomalign="right"> + <mspace width="30px" height="20px" style="background: cyan;"></mspace> + <mspace width="10px" height="20px" style="background: blue;"></mspace> + </mfrac> + </math> + </p> + <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/presentation-markup/fractions/frac-parameters-1.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-1.html new file mode 100644 index 0000000000..3c5e35159e --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-1.html @@ -0,0 +1,440 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<meta name="assert" content="Element mfrac correctly uses the fraction parameters from the MATH table."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<style> + math, mspace { + font-size: 10px; + } + @font-face { + font-family: axisheight7000-rulethickness1000; + src: url("/fonts/math/fraction-axisheight7000-rulethickness1000.woff"); + } + @font-face { + font-family: denominatordisplaystylegapmin5000-rulethickness1000; + src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff"); + } + @font-face { + font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000; + src: url("/fonts/math/fraction-denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000.woff"); + } + @font-face { + font-family: denominatorgapmin4000-rulethickness1000; + src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff"); + } + @font-face { + font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000; + src: url("/fonts/math/fraction-denominatorshiftdown3000-axisheight1000-rulethickness1000.woff"); + } + @font-face { + font-family: numeratordisplaystylegapmin8000-rulethickness1000; + src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff"); + } + @font-face { + font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000; + src: url("/fonts/math/fraction-numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000.woff"); + } + @font-face { + font-family: numeratorgapmin9000-rulethickness1000; + src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff"); + } + @font-face { + font-family: numeratorshiftup11000-axisheight1000-rulethickness1000; + src: url("/fonts/math/fraction-numeratorshiftup11000-axisheight1000-rulethickness1000.woff"); + } + @font-face { + font-family: rulethickness10000; + src: url("/fonts/math/fraction-rulethickness10000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 7000 * emToPx; + var v2 = 1000 * emToPx; + assert_approx_equals(getBox("ref0001").top - getBox("num0001").bottom, + v1 + v2 / 2, epsilon, "mfrac: axis height"); + }, "AxisHeight"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 5000 * emToPx; + assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom, + v1, epsilon, "mfrac: denominator gap"); + }, "DenominatorDisplayStyleGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 6000 * emToPx; + assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom, + v1, epsilon, "mfrac: denominator shift"); + }, "DenominatorDisplayStyleShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 5000 * emToPx; + assert_approx_equals(getBox("den0002b").top - getBox("ref0002b").bottom, + v1, epsilon, "mfrac: denominator gap"); + }, "DenominatorDisplayStyleGapMin Displaystyle"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var v1 = 6000 * emToPx; + assert_approx_equals(getBox("den0003b").top - getBox("ref0003b").bottom, + v1, epsilon, "mfrac: denominator shift"); + }, "DenominatorDisplayStyleShiftDown Displaystyle"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var v1 = 5000 * emToPx; + assert_approx_equals(getBox("den0002c").top - getBox("ref0002c").bottom, + v1, epsilon, "mfrac: denominator gap"); + }, "DenominatorDisplayStyleGapMin Displaystyle on fraction"); + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var v1 = 6000 * emToPx; + assert_approx_equals(getBox("den0003c").top - getBox("ref0003c").bottom, + v1, epsilon, "mfrac: denominator shift"); + }, "DenominatorDisplayStyleShiftDown Displaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var v1 = 4000 * emToPx; + assert_approx_equals(getBox("den0004").top - getBox("ref0004").bottom, + v1, epsilon, "mfrac: denominator gap"); + }, "DenominatorGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 3000 * emToPx; + assert_approx_equals(getBox("den0005").top - getBox("ref0005").bottom, + v1, epsilon, "mfrac: denominator shift"); + }, "DenominatorShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + var v1 = 4000 * emToPx; + assert_approx_equals(getBox("den0004b").top - getBox("ref0004b").bottom, + v1, epsilon, "mfrac: denominator gap"); + }, "DenominatorGapMin Displaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 3000 * emToPx; + assert_approx_equals(getBox("den0005b").top - getBox("ref0005b").bottom, + v1, epsilon, "mfrac: denominator shift"); + }, "DenominatorShiftDown Displaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 8000 * emToPx; + assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom, + v1, epsilon, "mfrac: numerator gap"); + }, "NumeratorDisplayStyleGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 2000 * emToPx; + assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom, + v1, epsilon, "mfrac: numerator shift"); + }, "NumeratorDisplayStyleShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 8000 * emToPx; + assert_approx_equals(getBox("ref0006b").top - getBox("num0006b").bottom, + v1, epsilon, "mfrac: numerator gap"); + }, "NumeratorDisplayStyleGapMin Displaystyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 2000 * emToPx; + assert_approx_equals(getBox("ref0007b").top - getBox("num0007b").bottom, + v1, epsilon, "mfrac: numerator shift"); + }, "NumeratorDisplayStyleShiftDown Displaystyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 8000 * emToPx; + assert_approx_equals(getBox("ref0006c").top - getBox("num0006c").bottom, + v1, epsilon, "mfrac: numerator gap"); + }, "NumeratorDisplayStyleGapMin Displaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 2000 * emToPx; + assert_approx_equals(getBox("ref0007c").top - getBox("num0007c").bottom, + v1, epsilon, "mfrac: numerator shift"); + }, "NumeratorDisplayStyleShiftDown Displaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 9000 * emToPx; + assert_approx_equals(getBox("ref0008").top - getBox("num0008").bottom, + v1, epsilon, "mfrac: numerator gap"); + }, "NumeratorGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 11000 * emToPx; + assert_approx_equals(getBox("ref0009").top - getBox("num0009").bottom, + v1, epsilon, "mfrac: numerator shift"); + }, "NumeratorShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v1 = 10000 * emToPx; + assert_approx_equals(getBox("den0010").top - getBox("num0010").bottom, + v1, epsilon, "mfrac: rule thickness"); + }, "FractionRuleThickness"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math style="font-family: axisheight7000-rulethickness1000;"> + <mspace id="ref0001" depth="1em" width="3em" style="background: green"/> + <mfrac> + <mspace width="3em" height="1em" id="num0001" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> + <mspace id="ref0002" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac> + <mspace width="3em"/> + <mspace width="3em" height="1em" id="den0002" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math display="block" style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;"> + <mspace id="ref0003" width="3em" height="1em" style="background: green"/> + <mfrac> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0003" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> + <mspace id="ref0002b" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac> + <mspace width="3em"/> + <mspace width="3em" height="1em" id="den0002b" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;"> + <mspace id="ref0003b" width="3em" height="1em" style="background: green"/> + <mfrac> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0003b" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> + <mspace id="ref0002c" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac displaystyle="true"> + <mspace width="3em"/> + <mspace width="3em" height="1em" id="den0002c" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;"> + <mspace id="ref0003c" width="3em" height="1em" style="background: green"/> + <mfrac displaystyle="true"> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0003c" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: denominatorgapmin4000-rulethickness1000;"> + <mspace id="ref0004" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac> + <mspace width="3em"/> + <mspace width="3em" height="1em" id="den0004" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;"> + <mspace id="ref0005" width="3em" height="1em" style="background: green"/> + <mfrac> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0005" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: denominatorgapmin4000-rulethickness1000;"> + <mspace id="ref0004b" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac displaystyle="false"> + <mspace width="3em"/> + <mspace width="3em" height="1em" id="den0004b" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;"> + <mspace id="ref0005b" width="3em" height="1em" style="background: green"/> + <mfrac displaystyle="false"> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0005b" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> + <mspace id="ref0006" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac> + <mspace width="3em" depth="1em" id="num0006" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math display="block" style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;"> + <mspace id="ref0007" width="3em" + depth="1em" style="background: green"/> + <mfrac> + <mspace width="3em" height="1em" id="num0007" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> + <mspace id="ref0006b" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac> + <mspace width="3em" depth="1em" id="num0006b" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;"> + <mspace id="ref0007b" width="3em" + depth="1em" style="background: green"/> + <mfrac> + <mspace width="3em" height="1em" id="num0007b" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> + <mspace id="ref0006c" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac displaystyle="true"> + <mspace width="3em" depth="1em" id="num0006c" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;"> + <mspace id="ref0007c" width="3em" + depth="1em" style="background: green"/> + <mfrac displaystyle="true"> + <mspace width="3em" height="1em" id="num0007c" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: numeratorgapmin9000-rulethickness1000;"> + <mspace id="ref0008" width="3em" + height=".5em" depth=".5em" style="background: green"/> + <mfrac> + <mspace width="3em" depth="1em" id="num0008" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: numeratorshiftup11000-axisheight1000-rulethickness1000;"> + <mspace id="ref0009" width="3em" + depth="1em" style="background: green"/> + <mfrac> + <mspace width="3em" height="1em" id="num0009" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: rulethickness10000"> + <mfrac> + <mspace width="3em" height="1em" id="num0010" style="background: blue"/> + <mspace width="3em" depth="1em" id="den0010" style="background: green"/> + </mfrac> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html new file mode 100644 index 0000000000..d09ad8272c --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-2.html @@ -0,0 +1,290 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Stack parameters</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<meta name="assert" content="Element mfrac correctly uses the stack parameters from the MATH table."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/fonts.js"></script> +<style> + math, mspace { + font-size: 10px; + } + @font-face { + font-family: bottomdisplaystyleshiftdown5000-axisheight1000; + src: url("/fonts/math/stack-bottomdisplaystyleshiftdown5000-axisheight1000.woff"); + } + @font-face { + font-family: bottomshiftdown6000-axisheight1000; + src: url("/fonts/math/stack-bottomshiftdown6000-axisheight1000.woff"); + } + @font-face { + font-family: displaystylegapmin4000; + src: url("/fonts/math/stack-displaystylegapmin4000.woff"); + } + @font-face { + font-family: gapmin8000; + src: url("/fonts/math/stack-gapmin8000.woff"); + } + @font-face { + font-family: topdisplaystyleshiftup3000-axisheight1000; + src: url("/fonts/math/stack-topdisplaystyleshiftup3000-axisheight1000.woff"); + } + @font-face { + font-family: topshiftup9000-axisheight1000; + src: url("/fonts/math/stack-topshiftup9000-axisheight1000.woff"); + } +</style> +<script> + var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 + var epsilon = 1; + + function getBox(aId) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); + + function runTests() { + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom, + v, epsilon, "mfrac: denominator shift"); + }, "BottomDisplayStyleShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("den0002b").top - getBox("ref0002b").bottom, + v, epsilon, "mfrac: denominator shift"); + }, "BottomDisplayStyleShiftDown Displaystyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 5000 * emToPx; + assert_approx_equals(getBox("den0002c").top - getBox("ref0002c").bottom, + v, epsilon, "mfrac: denominator shift"); + }, "BottomDisplayStyleShiftDown Displaystyle om fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 6000 * emToPx; + assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom, + v, epsilon, "mfrac: denominator shift"); + }, "BottomShiftDown"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 4000 * emToPx; + assert_approx_equals(getBox("den0004").top - getBox("num0004").bottom, + v, epsilon, "mfrac: gap"); + }, "DisplayStyleGapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 4000 * emToPx; + assert_approx_equals(getBox("den0004b").top - getBox("num0004b").bottom, + v, epsilon, "mfrac: gap"); + }, "DisplayStyleGapMin Dsiplaystyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 4000 * emToPx; + assert_approx_equals(getBox("den0004c").top - getBox("num0004c").bottom, + v, epsilon, "mfrac: gap"); + }, "DisplayStyleGapMin Dsiplaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 8000 * emToPx; + assert_approx_equals(getBox("den0005").top - getBox("num0005").bottom, + v, epsilon, "mfrac: gap"); + }, "GapMin"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom, + v, epsilon, "mfrac: numerator shift"); + }, "TopDisplayStyleShiftUp"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("ref0006b").top - getBox("num0006b").bottom, + v, epsilon, "mfrac: numerator shift"); + }, "TopDisplayStyleShiftUp Displaystyle"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 3000 * emToPx; + assert_approx_equals(getBox("ref0006c").top - getBox("num0006c").bottom, + v, epsilon, "mfrac: numerator shift"); + }, "TopDisplayStyleShiftUp Displaystyle on fraction"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 9000 * emToPx; + assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom, + v, epsilon, "mfrac: numerator shift"); + }, "ToShiftUp"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + + var v = 9000 * emToPx; + assert_approx_equals(getBox("ref0007b").top - getBox("num0007b").bottom, + v, epsilon, "mfrac: numerator shift"); + }, "ToShiftUp with Displaystyle on fraction"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math display="block" style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;"> + <mspace id="ref0002" width="3em" height="1em" style="background: green"/> + <mfrac linethickness="0px"> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0002" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;"> + <mspace id="ref0002b" width="3em" height="1em" style="background: green"/> + <mfrac linethickness="0px"> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0002b" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;"> + <mspace id="ref0002c" width="3em" height="1em" style="background: green"/> + <mfrac displaystyle="true" linethickness="0px"> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0002c" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: bottomshiftdown6000-axisheight1000;"> + <mspace id="ref0003" width="3em" height="1em" style="background: green"/> + <mfrac linethickness="0px"> + <mspace width="3em"/> + <mspace width="3em" depth="1em" id="den0003" style="background: blue"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math display="block" style="font-family: displaystylegapmin4000;"> + <mfrac linethickness="0px"> + <mspace width="3em" height="1em" id="num0004" style="background: blue"/> + <mspace width="3em" depth="1em" id="den0004" style="background: green"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: displaystylegapmin4000;"> + <mfrac linethickness="0px"> + <mspace width="3em" height="1em" id="num0004b" style="background: blue"/> + <mspace width="3em" depth="1em" id="den0004b" style="background: green"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: displaystylegapmin4000;"> + <mfrac displaystyle="true" linethickness="0px"> + <mspace width="3em" height="1em" id="num0004c" style="background: blue"/> + <mspace width="3em" depth="1em" id="den0004c" style="background: green"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: gapmin8000;"> + <mfrac linethickness="0px"> + <mspace width="3em" height="1em" id="num0005" style="background: blue"/> + <mspace width="3em" depth="1em" id="den0005" style="background: green"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math display="block" style="font-family: topdisplaystyleshiftup3000-axisheight1000;"> + <mspace id="ref0006" width="3em" depth="1em" style="background: green"/> + <mfrac linethickness="0px"> + <mspace width="3em" height="1em" id="num0006" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: topdisplaystyleshiftup3000-axisheight1000;"> + <mspace id="ref0006b" width="3em" depth="1em" style="background: green"/> + <mfrac linethickness="0px"> + <mspace width="3em" height="1em" id="num0006b" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: topdisplaystyleshiftup3000-axisheight1000;"> + <mspace id="ref0006c" width="3em" depth="1em" style="background: green"/> + <mfrac displaystyle="true" linethickness="0px"> + <mspace width="3em" height="1em" id="num0006c" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math style="font-family: topshiftup9000-axisheight1000;"> + <mspace id="ref0007" width="3em" depth="1em" style="background: green"/> + <mfrac linethickness="0px"> + <mspace width="3em" height="1em" id="num0007" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true" style="font-family: topshiftup9000-axisheight1000;"> + <mspace id="ref0007b" width="3em" depth="1em" style="background: green"/> + <mfrac displaystyle="false" linethickness="0px"> + <mspace width="3em" height="1em" id="num0007b" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html new file mode 100644 index 0000000000..ddcb9d5a69 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-3.html @@ -0,0 +1,168 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Fraction/Stack parameters (fallback)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<meta name="assert" content="Element mfrac correctly uses the fraction fallback parameters."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<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> + /* Testing fallback values is tricky as we don't have a lot of flexibility to + make sure one parameter is not shadowed by another one. We also use the + Ahem font here, so can't really play with the fallback values involved. */ + math, mspace { + font-size: 200px; /* Large value because underlineThickness is small */ + } + math { + /* OS/2.sxHeight = 800 */ + /* post.underlineThickness == 20 */ + font-family: Ahem; + } +</style> +<script> + const emToPx = 200 / 1000; // font-size: 200px, font.em = 1000 + const epsilon = 1; + const xHeight = 800; + const underlineThickness = 20; + + // NB: This test assumes the fallback shifts are all equal to zero. + const axisHeight = xHeight / 2; + const fractionRuleThickness = underlineThickness; + const fractionNumeratorGapMin = underlineThickness; + const fractionDenominatorGapMin = underlineThickness; + const fractionNumeratorDisplayStyleGapMin = 3 * underlineThickness; + const fractionDenominatorDisplayStyleGapMin = 3 * underlineThickness; + const stackGapMin = 3 * underlineThickness; + const stackDisplayStyleGapMin = 7 * underlineThickness; + + 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_approx_equals(axisHeight * emToPx, + (getBox("ref0001").top - + getBox("num0001").bottom) - + (fractionRuleThickness/2 + + fractionNumeratorGapMin) * emToPx, + epsilon); + assert_approx_equals((getBox("den0002").top - + getBox("num0002").bottom), + (fractionNumeratorGapMin + + fractionRuleThickness + + fractionDenominatorGapMin) * emToPx, + epsilon); + }, "nonzero linethickness, displaystyle=false"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals(axisHeight * emToPx, + (getBox("ref0003").top - + getBox("num0003").bottom) - + (fractionRuleThickness/2 + + fractionNumeratorDisplayStyleGapMin) * emToPx, + epsilon, "mfrac: thickness, axis height"); + assert_approx_equals((getBox("den0004").top - + getBox("num0004").bottom), + (fractionNumeratorDisplayStyleGapMin + + fractionRuleThickness + + fractionDenominatorDisplayStyleGapMin) * emToPx, + epsilon); + }, "nonzero linethickness, displaystyle=true"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals((getBox("ref1001").top - + getBox("num1001").bottom), + stackGapMin/2 * emToPx, + epsilon); + assert_approx_equals((getBox("den1001").top) - + getBox("ref1001").top, + stackGapMin/2 * emToPx, + epsilon); + }, "linethickness=0, displaystyle=false"); + + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + assert_approx_equals((getBox("ref1002").top - + getBox("num1002").bottom), + stackDisplayStyleGapMin/2 * emToPx, + epsilon); + assert_approx_equals((getBox("den1002").top) - + getBox("ref1002").top, + stackDisplayStyleGapMin/2 * emToPx, + epsilon); + }, "linethickness=0, displaystyle=true"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mspace id="ref0001" height="0em" depth="1em" width="1em" style="background: green"/> + <mfrac> + <mspace width="1em" height="2em" depth="0em" id="num0001" style="background: blue"/> + <mspace width="1em" height="0em" depth="2em" id="den0001" style="background: purple"/> + </mfrac> + </math> + </p> + <p> + <math> + <mfrac> + <mspace width="1em" height="2em" depth="4em" id="num0002" style="background: blue"/> + <mspace width="1em" height="4em" depth="2em" id="den0002" style="background: purple"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true"> + <mspace id="ref0003" height="0em" depth="1em" width="1em" style="background: green"/> + <mfrac> + <mspace width="1em" height="2em" depth="0em" id="num0003" style="background: blue"/> + <mspace width="1em" height="0em" depth="2em" id="den0003" style="background: purple"/> + </mfrac> + </math> + </p> + <p> + <math displaystyle="true"> + <mfrac> + <mspace width="1em" height="2em" depth="4em" id="num0004" style="background: blue"/> + <mspace width="1em" height="4em" depth="2em" id="den0004" style="background: purple"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math> + <mspace id="ref1001" height="0em" depth="1em" width="1em" style="background: green"/> + <mfrac linethickness="0"> + <mspace width="1em" height="2em" depth="0em" id="num1001" style="background: blue"/> + <mspace width="1em" height="0em" depth="2em" id="den1001" style="background: purple"/> + </mfrac> + </math> + </p> + <hr/> + <p> + <math displaystyle="true"> + <mspace id="ref1002" height="0em" depth="1em" width="1em" style="background: green"/> + <mfrac linethickness="0"> + <mspace width="1em" height="2em" depth="0em" id="num1002" style="background: blue"/> + <mspace width="1em" height="0em" depth="2em" id="den1002" style="background: purple"/> + </mfrac> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html new file mode 100644 index 0000000000..06fe8d8d35 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<style> + math, mspace { + font-size: 20px; + } + @font-face { + font-family: denominatordisplaystylegapmin5000-rulethickness1000; + src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> + <mspace height="2em" depth="20em"/> + <mfrac> + <mspace width="3em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mspace width="1em" height="1em" style="background: blue"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mspace width="1em" depth="1em" style="background: blue"/> + </mfrac> + </math> + </p> + <div id="frame"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html new file mode 100644 index 0000000000..ee31231145 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-001.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters (display gap between bar and denominator)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="match" href="frac-parameters-gap-001-ref.html"/> +<meta name="assert" content="Element mfrac correctly uses the FractionDenomDisplayStyleGapMin parameter from the MATH table when denominator contains text."> +<style> + math, mspace, mtext { + font-size: 20px; + } + mtext { + font-family: math-text; + color: blue; + } + @font-face { + font-family: denominatordisplaystylegapmin5000-rulethickness1000; + src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff"); + } + @font-face { + /* + math-text has the following properties: + - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. + - glyph A: .5em ascent and .5em descent. + - glyph B: 1em ascent and 0em descent. + - glyph C: 0em ascent and 1em descent. + */ + font-family: math-text; + src: url("/fonts/math/math-text.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> + <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> + <mspace height="2em" depth="20em"/> + <!-- + All the fraction bars must be aligned. + The gap between the denominators and bar must be FractionDenomDisplayStyleGapMin. + The gap should be calculated using the exact bounding box of the glyphs. + Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. + --> + <mfrac> + <mspace width="3em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mtext>A</mtext> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mtext>B</mtext> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mtext>C</mtext> + </mfrac> + </math> + </p> + <div id="frame"></div> + <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/presentation-markup/fractions/frac-parameters-gap-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002-ref.html new file mode 100644 index 0000000000..30958a6a5f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<style> + math, mspace { + font-size: 20px; + } + @font-face { + font-family: denominatorgapmin4000-rulethickness1000; + src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math style="font-family: denominatorgapmin4000-rulethickness1000;"> + <mspace height="2em" depth="20em"/> + <mfrac> + <mspace width="3em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mspace width="1em" height="1em" style="background: blue"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mspace width="1em" depth="1em" style="background: blue"/> + </mfrac> + </math> + </p> + <div id="frame"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html new file mode 100644 index 0000000000..bf77b2d910 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-002.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters (inline gap between bar and denominator)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="match" href="frac-parameters-gap-002-ref.html"/> +<meta name="assert" content="Element mfrac correctly uses the FractionDenominatorGapMin parameter from the MATH table when denominator contains text."> +<style> + math, mspace, mtext { + font-size: 20px; + } + mtext { + font-family: math-text; + color: blue; + } + @font-face { + font-family: denominatorgapmin4000-rulethickness1000; + src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff"); + } + @font-face { + /* + math-text has the following properties: + - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. + - glyph A: .5em ascent and .5em descent. + - glyph B: 1em ascent and 0em descent. + - glyph C: 0em ascent and 1em descent. + */ + font-family: math-text; + src: url("/fonts/math/math-text.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math style="font-family: denominatorgapmin4000-rulethickness1000;"> + <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> + <mspace height="2em" depth="20em"/> + <!-- + All the fraction bars must be aligned. + The gap between the denominators and bar must be FractionDenominatorGapMin. + The gap should be calculated using the exact bounding box of the glyphs. + Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. + --> + <mfrac> + <mspace width="3em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mtext>A</mtext> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mtext>B</mtext> + </mfrac> + <mfrac> + <mspace width="3em"/> + <mtext>C</mtext> + </mfrac> + </math> + </p> + <div id="frame"></div> + <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/presentation-markup/fractions/frac-parameters-gap-003-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003-ref.html new file mode 100644 index 0000000000..70e2ec5a88 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<style> + math, mspace { + font-size: 20px; + } + @font-face { + font-family: numeratordisplaystylegapmin8000-rulethickness1000; + src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> + <mspace height="20em" depth="2em"/> + <mfrac> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mspace width="1em" depth=".5em" height=".5em" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mspace width="1em" height="1em" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mspace width="1em" depth="1em" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <div id="frame"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html new file mode 100644 index 0000000000..c35c11ffdc --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-003.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters (display gap between bar and numerator)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="match" href="frac-parameters-gap-003-ref.html"/> +<meta name="assert" content="Element mfrac correctly uses the FractionNumDisplayStyleGapMin parameter from the MATH table when numerator contains text."> +<style> + math, mspace, mtext { + font-size: 20px; + } + mtext { + font-family: math-text; + color: blue; + } + @font-face { + font-family: numeratordisplaystylegapmin8000-rulethickness1000; + src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff"); + } + @font-face { + /* + math-text has the following properties: + - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. + - glyph A: .5em ascent and .5em descent. + - glyph B: 1em ascent and 0em descent. + - glyph C: 0em ascent and 1em descent. + */ + font-family: math-text; + src: url("/fonts/math/math-text.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> + <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> + <mspace height="20em" depth="2em"/> + <!-- + All the fraction bars must be aligned. + The gap between the numerators and bar must be FractionNumDisplayStyleGapMin. + The gap should be calculated using the exact bounding box of the glyphs. + Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. + --> + <mfrac> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mtext>A</mtext> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mtext>B</mtext> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mtext>C</mtext> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <div id="frame"></div> + <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/presentation-markup/fractions/frac-parameters-gap-004-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004-ref.html new file mode 100644 index 0000000000..675d33fbcc --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<style> + math, mspace { + font-size: 20px; + } + @font-face { + font-family: numeratorgapmin9000-rulethickness1000; + src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math style="font-family: numeratorgapmin9000-rulethickness1000;"> + <mspace height="20em" depth="2em"/> + <mfrac> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mspace width="1em" height="1em" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mspace width="1em" depth="1em" style="background: blue"/> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <div id="frame"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html new file mode 100644 index 0000000000..6d567d02d9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-004.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters (inline gap between bar and numerator)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="match" href="frac-parameters-gap-004-ref.html"/> +<meta name="assert" content="Element mfrac correctly uses the FractionNumeratorGapMin parameter from the MATH table when numerator contains text."> +<style> + math, mspace, mtext { + font-size: 20px; + } + mtext { + font-family: math-text; + color: blue; + } + @font-face { + font-family: numeratorgapmin9000-rulethickness1000; + src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff"); + } + @font-face { + /* + math-text has the following properties: + - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. + - glyph A: .5em ascent and .5em descent. + - glyph B: 1em ascent and 0em descent. + - glyph C: 0em ascent and 1em descent. + */ + font-family: math-text; + src: url("/fonts/math/math-text.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math style="font-family: numeratorgapmin9000-rulethickness1000;"> + <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> + <mspace height="20em" depth="2em"/> + <!-- + All the fraction bars must be aligned. + The gap between the numerators and bar must be FractionNumeratorGapMin. + The gap should be calculated using the exact bounding box of the glyphs. + Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. + --> + <mfrac> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mtext>A</mtext> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mtext>B</mtext> + <mspace width="3em"/> + </mfrac> + <mfrac> + <mtext>C</mtext> + <mspace width="3em"/> + </mfrac> + </math> + </p> + <div id="frame"></div> + <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/presentation-markup/fractions/frac-parameters-gap-005-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005-ref.html new file mode 100644 index 0000000000..c794a50047 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<style> + math, mspace { + font-size: 20px; + } + @font-face { + font-family: displaystylegapmin4000; + src: url("/fonts/math/stack-displaystylegapmin4000.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math display="block" style="font-family: displaystylegapmin4000"> + <mspace height="10em" depth="10em"/> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1.5em"/> + <mspace width="1em" height="1em" style="background: blue"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth=".5em"/> + <mspace width="1em" depth="1em" style="background: blue"/> + </mfrac> + </math> + </p> + <div id="frame"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html new file mode 100644 index 0000000000..a0aa13e679 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-005.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Stack parameters (display gap between numerator and denominator)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="match" href="frac-parameters-gap-005-ref.html"/> +<meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackDisplayStyleGapMin parameter from the MATH table when denominator contains text."> +<style> + math, mspace, mtext { + font-size: 20px; + } + mtext { + font-family: math-text; + color: blue; + } + @font-face { + font-family: displaystylegapmin4000; + src: url("/fonts/math/stack-displaystylegapmin4000.woff"); + } + @font-face { + /* + math-text has the following properties: + - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. + - glyph A: .5em ascent and .5em descent. + - glyph B: 1em ascent and 0em descent. + - glyph C: 0em ascent and 1em descent. + */ + font-family: math-text; + src: url("/fonts/math/math-text.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math display="block" style="font-family: displaystylegapmin4000"> + <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> + <mspace height="10em" depth="10em"/> + <!-- + The gap between the numerators/denominators and the math axis must StackDisplayStyleGapMin / 2. + The gap should be calculated using the exact bounding box of the glyphs. + The numerator descent is .5em + the denominator ascent. + Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. + --> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mtext>A</mtext> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1.5em"/> + <mtext>B</mtext> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth=".5em"/> + <mtext>C</mtext> + </mfrac> + </math> + </p> + <div id="frame"></div> + <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/presentation-markup/fractions/frac-parameters-gap-006-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006-ref.html new file mode 100644 index 0000000000..02faaad19f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Fraction parameters</title> +<style> + math, mspace { + font-size: 20px; + } + @font-face { + font-family: gapmin8000; + src: url("/fonts/math/stack-gapmin8000.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math style="font-family: gapmin8000"> + <mspace height="10em" depth="10em"/> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mspace width="1em" height=".5em" depth=".5em" style="background: blue"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1.5em"/> + <mspace width="1em" height="1em" style="background: blue"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth=".5em"/> + <mspace width="1em" depth="1em" style="background: blue"/> + </mfrac> + </math> + </p> + <div id="frame"></div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html new file mode 100644 index 0000000000..1260126e55 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-parameters-gap-006.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Stack parameters (display gap between numerator and denominator)</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> +<link rel="match" href="frac-parameters-gap-006-ref.html"/> +<meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackGapMin parameter from the MATH table when denominator contains text."> +<style> + math, mspace, mtext { + font-size: 20px; + } + mtext { + font-family: math-text; + color: blue; + } + @font-face { + font-family: gapmin8000; + src: url("/fonts/math/stack-gapmin8000.woff"); + } + @font-face { + /* + math-text has the following properties: + - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. + - glyph A: .5em ascent and .5em descent. + - glyph B: 1em ascent and 0em descent. + - glyph C: 0em ascent and 1em descent. + */ + font-family: math-text; + src: url("/fonts/math/math-text.woff"); + } + #reference { + background: green; + } + #frame { + position: absolute; + border-top: 4px solid black; + border-bottom: 4px solid black; + width: 100%; + } +</style> +<script src="/mathml/support/fonts.js"></script> +<script> + function runTests() { + var div = document.getElementById("frame"); + var refBox = document.getElementById("reference").getBoundingClientRect(); + div.style.top = `${refBox.top-2}px`; + div.style.height = `${refBox.height-4}px`; + document.documentElement.classList.remove('reftest-wait'); + } + window.addEventListener("load", () => { loadAllFonts().then(runTests); }); +</script> +</head> +<body> + <p> + This test passes if the blue squares are aligned: + </p> + <p> + <math style="font-family: gapmin8000"> + <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> + <mspace height="10em" depth="10em"/> + <!-- + The gap between the numerators/denominators and the math axis must StackGapMin / 2. + The gap should be calculated using the exact bounding box of the glyphs. + The numerator descent is .5em + the denominator ascent. + Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. + --> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mspace id="reference" width="3em" height=".5em" depth=".5em"/> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1em"/> + <mtext>A</mtext> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth="1.5em"/> + <mtext>B</mtext> + </mfrac> + <mfrac linethickness="0px"> + <mspace width="3em" depth=".5em"/> + <mtext>C</mtext> + </mfrac> + </math> + </p> + <div id="frame"></div> + <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/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html new file mode 100644 index 0000000000..71f1583fd9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>fraction rendering from in-flow children</title> + </head> + <body> + <math> + <mfrac> + <mspace width="64px" height="48px" style="background: lightblue"></mspace> + <mspace width="128px" height="96px" style="background: lightgreen"></mspace> + </mfrac> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html new file mode 100644 index 0000000000..b57564b574 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-rendering-from-in-flow.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>fraction rendering from in-flow children</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <meta name="assert" content="Verify rendering of fractions is only affected by in-flow children."> + <style> + .oof1 { + position: absolute; + } + .oof2 { + position: fixed; + } + .nobox { + display: none; + } + </style> + <link rel="match" href="frac-rendering-from-in-flow-ref.html"> + </head> + <body> + <math> + <mfrac> + <mspace height="32px" width="24px" class="oof1"/> + <mspace height="16px" width="12px" class="oof2"/> + <mspace height="8px" width="4px" class="nobox"/> + <mspace width="64px" height="48px" style="background: lightblue"></mspace> + <mspace height="32px" width="24px" class="oof1"/> + <mspace height="16px" width="12px" class="oof2"/> + <mspace height="8px" width="4px" class="nobox"/> + <mspace width="128px" height="96px" style="background: lightgreen"></mspace> + <mspace height="32px" width="24px" class="oof1"/> + <mspace height="16px" width="12px" class="oof2"/> + <mspace height="8px" width="4px" class="nobox"/> + </mfrac> + </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/presentation-markup/fractions/frac-visibility-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001-ref.html new file mode 100644 index 0000000000..41a262d511 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction bar visibility</title> + </head> + <body> + <p>This test passes if you see a green square and no red.</p> + <div style="background: green; width: 200px; height: 200px;"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html new file mode 100644 index 0000000000..29212c0594 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/fractions/frac-visibility-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Fraction bar visibility</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> + <meta name="assert" content="The CSS visible property affects the rendering of the fraction bar."> + <link rel="match" href="frac-visibility-001-ref.html"> + </head> + <body> + <p>This test passes if you see a green square and no red.</p> + <div style="background: green; width: 200px; height: 200px;"> + <math> + <mfrac style="visibility: hidden; color: red"> + <mspace width="200px" height="20px"></mspace> + <mspace width="200px" height="20px"></mspace> + </mfrac> + </math> + </div> + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> + </body> +</html> |