diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html')
| -rw-r--r-- | testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html new file mode 100644 index 0000000000..e9be1f2965 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/scriptlevel-001.html @@ -0,0 +1,219 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Automatic scriptlevel</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> +<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="assert" content="Verify automatic scriptlevel changes"> +<style> + #container, math { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/mathml-fragments.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function fontSize(element) { + return parseFloat((/(.+)px/).exec(window.getComputedStyle(element).getPropertyValue("font-size"))[1]); + } + function runTests() { + var container = document.getElementById("container"); + var epsilon = .1 + var fontSizeAtScriptLevelZero = fontSize(container); + + test(function() { + var element = document.getElementById("mfrac_displaystyle"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "numerator"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "denominator"); + }, "automatic scriptlevel on mfrac (displaystyle=true)"); + + test(function() { + var element = document.getElementById("mfrac_notdisplaystyle"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero * .71, epsilon, "numerator"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "denominator"); + }, "automatic scriptlevel on mfrac (displaystyle=false)"); + + test(function() { + var element = document.getElementsByTagName("mroot")[0]; + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71 * .71, epsilon, "index"); + }, "automatic scriptlevel on mroot"); + + ["msub", "msup", "msubsup", "munder", "mover", "munderover", "mmultiscripts"].forEach(tag => { + test(function() { + var element = document.getElementsByTagName(tag)[0]; + for (var i = 0; i < element.children.length; i++) + assert_approx_equals(fontSize(element.children[i]), i > 0 ? fontSizeAtScriptLevelZero * .71 : fontSizeAtScriptLevelZero, epsilon, `child ${i}`); + }, `automatic scriptlevel on ${tag}`); + }); + + test(function() { + var element = document.querySelector("munder[accentunder='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); + }, `automatic scriptlevel on munder (accentunder=true)`); + + test(function() { + var element = document.querySelector("mover[accent='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "over"); + }, `automatic scriptlevel on mover (accent=true)`); + + test(function() { + var element = document.querySelector("munderover[accentunder='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over"); + }, `automatic scriptlevel on munderover (accentunder=true)`); + + test(function() { + var element = document.querySelector("munderover[accent='true']"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); + }, `automatic scriptlevel on munderover (accent=true)`); + + test(function() { + var element = document.getElementById("munderover-dynamic-case-insensitive") + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); + + element.removeAttribute("accent"); + element.setAttribute("accentunder", "TrUe"); + assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); + assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); + assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over"); + }, "checking dynamic/case-insensitive accent/accentunder"); + + done(); + } +</script> +</head> +<body> + <div id="log"></div> + <div id="container"> + <p> + <math displaystyle="true"> + <mfrac id="mfrac_displaystyle"> + <mn>0</mn> + <mn>1</mn> + </mfrac> + </math> + + <math displaystyle="false"> + <mfrac id="mfrac_notdisplaystyle"> + <mn>0</mn> + <mn>1</mn> + </mfrac> + </math> + </p> + <p> + <math> + <mroot> + <mn>0</mn> + <mn>1</mn> + </mroot> + </math> + </p> + <p> + <math> + <msub> + <mn>0</mn> + <mn>1</mn> + </msub> + </math> + <math> + <msup> + <mn>0</mn> + <mn>1</mn> + </msup> + </math> + <math> + <msubsup> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </msubsup> + </math> + <math> + <munder> + <mn>0</mn> + <mn>1</mn> + </munder> + </math> + <math> + <mover> + <mn>0</mn> + <mn>1</mn> + </mover> + </math> + <math> + <munderover> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + <math> + <mmultiscripts> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + <mn>3</mn> + <mn>4</mn> + <mprescripts/> + <mn>6</mn> + <mn>7</mn> + <mn>8</mn> + <mn>9</mn> + </mmultiscripts> + </math> + </p> + <p> + <math> + <munder accentunder="true"> + <mn>0</mn> + <mn>1</mn> + </munder> + </math> + <math> + <mover accent="true"> + <mn>0</mn> + <mn>1</mn> + </mover> + </math> + <math> + <munderover accent="true"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + <math> + <munderover accentunder="true"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + </p> + <p> + <math> + <munderover id="munderover-dynamic-case-insensitive" accent="TrUe"> + <mn>0</mn> + <mn>1</mn> + <mn>2</mn> + </munderover> + </math> + </p> + </div> +</body> +</html> |