diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style')
23 files changed, 1279 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-001.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-001.tentative-ref.html new file mode 100644 index 0000000000..45e72ffcf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-001.tentative-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>font-size: math (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <div class="container"> + <div style="font-size: medium;"> + <div style="font-size: 1em;">X</div> + </div> + <div style="font-size: x-large;"> + <div style="font-size: 200%"> + <div style="font-size: 3em"> + <div style="font-size: smaller"> + <div style="font-size: 1em;"> + <div style="font-size: larger"> + <div style="font-size: 4em"> + <div style="font-size: 500%">X</div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-001.tentative.html new file mode 100644 index 0000000000..b996498560 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-001.tentative.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>font-size: math</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="Test that a specified font-size: math behaves like 1em when mixed with other keyword and relative sizes."> + <link rel="match" href="font-size-math-001.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <div class="container"> + <div style="font-size: medium;"> + <div style="font-size: math;">X</div> + </div> + <div style="font-size: x-large;"> + <div style="font-size: 200%"> + <div style="font-size: 3em"> + <div style="font-size: smaller"> + <div style="font-size: math;"> + <div style="font-size: larger"> + <div style="font-size: 4em"> + <div style="font-size: 500%">X</div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-002.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-002.tentative-ref.html new file mode 100644 index 0000000000..caf4183693 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-002.tentative-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>font-size: math inheritance (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 100px.</p> + <div class="container"> + <div> + <div> + <div> + <div> + <div>X</div> + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-002.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-002.tentative.html new file mode 100644 index 0000000000..7491409f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/font-size-math-002.tentative.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>font-size: math inheritance</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="Test inheritance for a specified font-size: math."> + <link rel="match" href="font-size-math-002.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 100px.</p> + <div class="container"> + <div style="font-size: math"> + <div> + <div> + <div> + <div style="math-depth: 1">X</div> + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html new file mode 100644 index 0000000000..00e0c62772 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-depth-001-crash.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-depth limits</title> + <meta charset="utf-8"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="Check change between possible limits or overflowing values of an integer math-depth do not cause any crash"> + <style> + @font-face { + font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40; + src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown40.woff"); + } + body { + font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40; + } + </style> + </head> + <body> + <div style="math-depth: -128"> + <div style="font-size: math; math-depth: 127"> + <div style="font-size: math; math-depth: -128"> + </div> + </div> + </div> + <div style="math-depth: -32768"> + <div style="font-size: math; math-depth: 32767"> + <div style="font-size: math; math-depth: -32768"> + </div> + </div> + </div> + <div style="math-depth: -2147483648"> + <div style="font-size: math; math-depth: 2147483647"> + <div style="font-size: math; math-depth: -2147483648"> + </div> + </div> + </div> + <div style="math-depth: -9223372036854775808"> + <div style="font-size: math; math-depth: 9223372036854775807"> + <div style="font-size: math; math-depth: -9223372036854775808"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html new file mode 100644 index 0000000000..9dff79025a --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-001.tentative.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-depth</title> + <meta charset="utf-8"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="Check the computed value of math-depth"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script> + function mathDepth(id) { + return window.getComputedStyle(document.getElementById(id)). + getPropertyValue("math-depth"); + } + setup({ explicit_done: true }); + window.addEventListener("load", function() { + test(function() { + assert_equals(mathDepth("initial"), "0"); + assert_equals(mathDepth("initialFrom11"), "0"); + }, "Initial value of math-depth"); + test(function() { + assert_equals(mathDepth("inherited11"), "11"); + assert_equals(mathDepth("inherited-7"), "-7"); + }, "Inherited values of math-depth"); + test(function() { + assert_equals(mathDepth("inherited9specifiedAutoInline"), "10"); + assert_equals(mathDepth("inherited9specifiedAutoDisplay"), "9"); + }, "Specified math-depth: auto-add"); + test(function() { + assert_equals(mathDepth("specified11"), "11"); + assert_equals(mathDepth("specified-7"), "-7"); + }, "Specified math-depth: <integer>"); + test(function() { + assert_equals(mathDepth("specifiedAdd10From5"), "15"); + assert_equals(mathDepth("specifiedAdd-15From5"), "-10"); + }, "Specified math-depth: add(<integer>)"); + test(function() { + assert_equals(mathDepth("invalidKeywordFrom3"), "3"); + assert_equals(mathDepth("invalidFloatFrom3"), "3"); + assert_equals(mathDepth("invalidCalcFrom3"), "3"); + assert_equals(mathDepth("invalidAddCalcFrom3"), "3"); + assert_equals(mathDepth("invalidAddFloatFrom3"), "3"); + }, "Specified math-depth: invalid expressions"); + test(function() { + const cssVariable = 3; + assert_equals(mathDepth("specifiedCalcFrom9"), `${Math.round(cssVariable/2)+10}`); + assert_equals(mathDepth("specifiedAddCalcFrom9"), `${9+(3*4-5)}`); + }, "Specified math-depth: calc() expressions"); + done(); + }); + </script> + </head> + <body> + <div id="log"></div> + <div id="initial"></div> + <div id="specified11" style="math-depth: 11"> + <div id="initialFrom11" style="math-depth: initial"></div> + <div id="inherited11"></div> + </div> + <div id="specified-7" style="math-depth: -7"> + <div id="inherited-7"></div> + </div> + <div style="math-depth: 9"> + <div style="math-style: compact"> + <div id="inherited9specifiedAutoInline" style="math-depth: auto-add" ></div> + </div> + <div style="math-style: normal"> + <div id="inherited9specifiedAutoDisplay" style="math-depth: auto-add" ></div> + </div> + </div> + <div style="math-depth: 5"> + <div id="specifiedAdd10From5" style="math-depth: add(10)"></div> + <div id="specifiedAdd-15From5" style="math-depth: add(-15)"></div> + </div> + <div style="math-depth: 3;"> + <div id="invalidKeywordFrom3" style="math-depth: auto"></div> + <div id="invalidFloatFrom3" style="math-depth: 3.14"></div> + <div id="invalidCalcFrom3" style="math-depth: 1,2"></div> + <div id="invalidAddCalcFrom3" style="math-depth: add(3,4)"></div> + <div id="invalidAddFloatFrom3" style="math-depth: add(3.14)"></div> + </div> + <div style="math-depth: 9;"> + <div id="specifiedCalcFrom9" style="--css-variable: 3; math-depth: calc(var(--css-variable)/2 + 10)"></div> + <div id="specifiedAddCalcFrom9" style="math-depth: add(calc(3*4 - 5))"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html new file mode 100644 index 0000000000..ab0f8fa955 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-002.tentative.html @@ -0,0 +1,194 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <link rel="help" href="https://www.w3.org/TR/cssom-1/#serialize-a-css-component-value"> + <meta name="assert" content="Verify effect of math-depth: auto-add | add(<integer) | (<integer>, starting from different values of math-depth."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 20px/1 Ahem; + } + </style> + <script> + var epsilon = .1; + function fontSize(id) { + return parseFloat((/(.+)px/).exec(getComputedStyle(document.getElementById(id)).getPropertyValue("font-size"))[1]); + } + setup({ explicit_done: true }); + window.addEventListener("load", function() { + document.fonts.ready.then(function() { + test(function() { + assert_equals(fontSize("autoDisplay"), 200); + assert_equals(fontSize("autoInline"), 500 * .71); + }, "auto"); + test(function() { + var initialSize = 2000 * Math.pow(.71, 7); + assert_approx_equals(fontSize("autoDisplayFrom7"), initialSize, epsilon); + assert_approx_equals(fontSize("autoInlineFrom7"), initialSize * .71, epsilon); + }, "auto ; starting from level 7"); + test(function() { + assert_equals(fontSize("add0"), 200); + assert_equals(fontSize("add-1"), 100); + assert_equals(fontSize("add1"), 355); + assert_approx_equals(fontSize("add-2"), 397, 1); + assert_approx_equals(fontSize("add2"), 504, 1); + assert_approx_equals(fontSize("add-9"), 654, 1); + assert_approx_equals(fontSize("add9"), 92, 1); + }, "add(<integer>)"); + test(function() { + assert_equals(fontSize("add0from3"), 200); + assert_equals(fontSize("add-1from3"), 100); + assert_equals(fontSize("add1from3"), 355); + assert_approx_equals(fontSize("add-2from3"), 397, 1); + assert_approx_equals(fontSize("add2from3"), 504, 1); + assert_approx_equals(fontSize("add-9from3"), 654, 1); + assert_approx_equals(fontSize("add9from3"), 92, 1); + }, "add(<integer>) ; starting from level 3"); + test(function() { + assert_equals(fontSize("set0"), 200); + assert_equals(fontSize("set-1"), 100); + assert_equals(fontSize("set1"), 355); + assert_approx_equals(fontSize("set-2"), 397, 1); + assert_approx_equals(fontSize("set2"), 504, 1); + assert_approx_equals(fontSize("set-9"), 654, 1); + assert_approx_equals(fontSize("set9"), 92, 1); + }, "<integer>"); + test(function() { + assert_equals(fontSize("set50"), 200); + assert_equals(fontSize("set49"), 100); + assert_equals(fontSize("set51"), 355); + assert_approx_equals(fontSize("set48"), 397, 1); + assert_approx_equals(fontSize("set52"), 504, 1); + assert_approx_equals(fontSize("set41"), 654, 1); + assert_approx_equals(fontSize("set59"), 92, 1); + }, "<integer> ; starting from level 50"); + done(); + }); + }); + </script> + </head> + <body> + <div id="log"></div> + <div> + <div class="container"> + <div> + <div style="font-size: 200px; math-style: normal"> + <div id="autoDisplay" style="font-size: math; math-depth: auto-add"></div> + </div> + <div style="font-size: 500px; math-style: compact"> + <div id="autoInline" style="font-size: math; math-depth: auto-add"></div> + </div> + </div> + <div style="font-size: 2000px;"> + <div style="math-style: normal; font-size: math; math-depth: 7"> + <div id="autoDisplayFrom7" style="font-size: math; math-depth: auto-add"></div> + </div> + <div style="math-style: compact; font-size: math; math-depth: 7"> + <div id="autoInlineFrom7" style="font-size: math; math-depth: auto-add"></div> + </div> + </div> + <div> + <div style="font-size: 200px"> + <div id="add0" style="font-size: math; math-depth: add(0)"></div> + </div> + <div style="font-size: 71px"> + <div id="add-1" style="font-size: math; math-depth: add(-1)"></div> + </div> + <div style="font-size: 500px"> + <div id="add1" style="font-size: math; math-depth: add(1)"></div> + </div> + <div style="font-size: 200px"> + <div id="add-2" style="font-size: math; math-depth: add(-2)"></div> + </div> + <div style="font-size: 1000px"> + <div id="add2" style="font-size: math; math-depth: add(2)"></div> + </div> + <div style="font-size: 30px"> + <div id="add-9" style="font-size: math; math-depth: add(-9)"></div> + </div> + <div style="font-size: 2000px"> + <div id="add9" style="font-size: math; math-depth: add(9)"></div> + </div> + </div> + <div style="math-depth: 3;"> + <div style="font-size: 200px;"> + <div id="add0from3" style="font-size: math; math-depth: add(0)"></div> + </div> + <div style="font-size: 71px;"> + <div id="add-1from3" style="font-size: math; math-depth: add(-1)"></div> + </div> + <div style="font-size: 500px;"> + <div id="add1from3" style="font-size: math; math-depth: add(1)"></div> + </div> + <div style="font-size: 200px;"> + <div id="add-2from3" style="font-size: math; math-depth: add(-2)"></div> + </div> + <div style="font-size: 1000px;"> + <div id="add2from3" style="font-size: math; math-depth: add(2)"></div> + </div> + <div style="font-size: 30px;"> + <div id="add-9from3" style="font-size: math; math-depth: add(-9)"></div> + </div> + <div style="font-size: 2000px;"> + <div id="add9from3" style="font-size: math; math-depth: add(9)"></div> + </div> + </div> + <div> + <div style="font-size: 200px"> + <div id="set0" style="font-size: math; math-depth: 0"></div> + </div> + <div style="font-size: 71px"> + <div id="set-1" style="font-size: math; math-depth: -1"></div> + </div> + <div style="font-size: 500px"> + <div id="set1" style="font-size: math; math-depth: 1"></div> + </div> + <div style="font-size: 200px"> + <div id="set-2" style="font-size: math; math-depth: -2"></div> + </div> + <div style="font-size: 1000px"> + <div id="set2" style="font-size: math; math-depth: 2"></div> + </div> + <div style="font-size: 30px"> + <div id="set-9" style="font-size: math; math-depth: -9"></div> + </div> + <div style="font-size: 2000px"> + <div id="set9" style="font-size: math; math-depth: 9"></div> + </div> + </div> + </div> + <div style="math-depth: 50"> + <div style="font-size: 200px;"> + <div id="set50" style="font-size: math; math-depth: 50"></div> + </div> + <div style="font-size: 71px;"> + <div id="set49" style="font-size: math; math-depth: 49"></div> + </div> + <div style="font-size: 500px;"> + <div id="set51" style="font-size: math; math-depth: 51"></div> + </div> + <div style="font-size: 200px;"> + <div id="set48" style="font-size: math; math-depth: 48"></div> + </div> + <div style="font-size: 1000px;"> + <div id="set52" style="font-size: math; math-depth: 52"></div> + </div> + <div style="font-size: 30px;"> + <div id="set41" style="font-size: math; math-depth: 41"></div> + </div> + <div style="font-size: 2000px;"> + <div id="set59" style="font-size: math; math-depth: 59"></div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html new file mode 100644 index 0000000000..d73e71f41c --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-depth</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see two squares of side 100px.</p> + <div class="container"> + <div>X</div> + </div> + <br/> + <div class="container"> + <div>X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html new file mode 100644 index 0000000000..47b67aa8a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-003.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-depth</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="If specified font-size is not 'math' then math-depth does not affect the computed value of font-size."> + <link rel="match" href="math-script-level-003.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see two squares of side 100px.</p> + <div class="container"> + <!-- font-size: <length> --> + <div style="math-depth: 1; font-size: 100px;">X</div> + </div> + <br/> + <div class="container"> + <!-- inherited font-size --> + <div style="math-depth: 1;">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html new file mode 100644 index 0000000000..a46c478596 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html @@ -0,0 +1,410 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="Check the resolved value of math-script-level"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + @font-face { + font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40; + src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown40.woff"); + } + @font-face { + font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40; + src: url("/fonts/math/scriptpercentscaledown0-scriptscriptpercentscaledown40.woff"); + } + @font-face { + font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0; + src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown0.woff"); + } + #scale80-40-scaledown, #scale80-40-scaleup { + font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40; + } + #scale0-40-scaledown, #scale0-40-scaleup { + font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40; + } + #scale80-0-scaledown, #scale80-0-scaleup { + font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0; + } + #default-scaledown, #default-scaleup { + /* Ahem font does not have any MATH table, so uses default scale. */ + font-family: Ahem; + } + .big { font-size: 3000px; } + .small { font-size: 150px; } + .level-3 { font-size: math; math-depth: -3; } + .level-1 { font-size: math; math-depth: -1; } + .level0 { font-size: math; math-depth: 0; } + .level1 { font-size: math; math-depth: 1; } + .level2 { font-size: math; math-depth: 2; } + .level3 { font-size: math; math-depth: 3; } + .level5 { font-size: math; math-depth: 5; } + </style> + <script> + const big = 3000; + const small = 150; + setup({ explicit_done: true }); + function fontSize(element) { + return parseFloat((/(.+)px/).exec(getComputedStyle(element). + getPropertyValue("font-size"))[1]); + } + function CheckFontSizes(id, sizes) { + var container = document.getElementById(id); + for (var level in sizes) { + var divs = container.getElementsByClassName(`level${level}`); + for (var i = 0; i < divs.length; i++) { + assert_approx_equals(fontSize(divs[i]), sizes[level], 1, `Wrong font-size (id=${id} ; level=${level} ; i=${i})`); + } + } + } + window.addEventListener("load", function() { + document.fonts.ready.then(function() { + test(function() { + CheckFontSizes("scale80-40-scaledown", { + "-3": big, + "-1": big * .71 * .71, + "0": big * .71 * .71 * .71, + "1": big * .71 * .71 * .71 * .8, + "2": big * .71 * .71 * .71 * .4, + "3": big * .71 * .71 * .71 * .4 * .71, + "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71 + }); + CheckFontSizes("scale80-40-scaleup", { + "5": small, + "3": small / (.71 * .71), + "2": small / (.71 * .71 * .71), + "1": small / (.71 * .71 * .71 * (.4 / .8)), + "0": small / (.71 * .71 * .71 * .4), + "-1": small / (.71 * .71 * .71 * .4 * .71), + "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71) + }); + }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=40"); + + test(function() { + var scriptPercentScaleDown = .71; + CheckFontSizes("scale0-40-scaledown", { + "-3": big, + "-1": big * .71 * .71, + "0": big * .71 * .71 * .71, + "1": big * .71 * .71 * .71 * scriptPercentScaleDown, + "2": big * .71 * .71 * .71 * .4, + "3": big * .71 * .71 * .71 * .4 * .71, + "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71 + }); + CheckFontSizes("scale0-40-scaleup", { + "5": small, + "3": small / (.71 * .71), + "2": small / (.71 * .71 * .71), + "1": small / (.71 * .71 * .71 * (.4 / scriptPercentScaleDown)), + "0": small / (.71 * .71 * .71 * .4), + "-1": small / (.71 * .71 * .71 * .4 * .71), + "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71) + }); + }, "scriptPercentScaleDown=0, scriptScriptPercentScaleDown=40"); + + test(function() { + var scriptScriptPercentScaleDown = 0.5041; + CheckFontSizes("scale80-0-scaledown", { + "-3": big, + "-1": big * .71 * .71, + "0": big * .71 * .71 * .71, + "1": big * .71 * .71 * .71 * .8, + "2": big * .71 * .71 * .71 * scriptScriptPercentScaleDown, + "3": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71, + "5": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71 + }); + CheckFontSizes("scale80-0-scaleup", { + "5": small, + "3": small / (.71 * .71), + "2": small / (.71 * .71 * .71), + "1": small / (.71 * .71 * .71 * (scriptScriptPercentScaleDown / .8)), + "0": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown), + "-1": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71), + "-3": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71) + }); + }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=0"); + + test(function() { + CheckFontSizes("default-scaledown", { + "-3": big, + "-1": big * .71 * .71, + "0": big * .71 * .71 * .71, + "1": big * .71 * .71 * .71 * .71, + "2": big * .71 * .71 * .71 * .71 * .71, + "3": big * .71 * .71 * .71 * .71 * .71 * .71, + "5": big * .71 * .71 * .71 * .71 * .71 * .71 * .71 * .71 + }); + CheckFontSizes("default-scaleup", { + "5": small, + "3": small / (.71 * .71), + "2": small / (.71 * .71 * .71), + "1": small / (.71 * .71 * .71 * .71), + "0": small / (.71 * .71 * .71 * .71 * .71), + "-1": small / (.71 * .71 * .71 * .71 * .71 * .71), + "-3": small / (.71 * .71 * .71 * .71 * .71 * .71 * .71 * .71) + }); + }, "No MATH table"); + + done(); + }); + }); + </script> + </head> + <body> + <div id="log"></div> + + <div class="level-3" id="scale80-40-scaledown"> + <div class="big"> + <div class="level5"><!-- -3 to 5 --></div> + <div class="level3"><!-- -3 to 3 --></div> + <div class="level2"><!-- -3 to 2 --></div> + <div class="level1"><!-- -3 to 1 --></div> + <div class="level0"><!-- -3 to 0 --></div> + <div class="level-1"><!-- -3 to -1 --> + <div class="level5"><!-- -1 to 5 --></div> + <div class="level3"><!-- -1 to 3 --></div> + <div class="level2"><!-- -1 to 2 --></div> + <div class="level1"><!-- -1 to 1 --></div> + <div class="level0"><!-- -1 to 0 --> + <div class="level5"><!-- 0 to 5 --></div> + <div class="level3"><!-- 0 to 3 --></div> + <div class="level2"><!-- 0 to 2 --></div> + <div class="level1"><!-- 0 to 1 --> + <div class="level5"><!-- 1 to 5 --></div> + <div class="level3"><!-- 1 to 3 --></div> + <div class="level2"><!-- 1 to 2 --> + <div class="level5"><!-- 2 to 5 --></div> + <div class="level3"><!-- 2 to 3 --> + <div class="level5"><!-- 3 to 5 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level5" id="scale80-40-scaleup"> + <div class="small"> + <div class="level-3"><!-- 5 to -3 --></div> + <div class="level-1"><!-- 5 to -1 --></div> + <div class="level0"><!-- 5 to 0 --></div> + <div class="level1"><!-- 5 to 1 --></div> + <div class="level2"><!-- 5 to 2 --></div> + <div class="level3"><!-- 5 to 3 --> + <div class="level-3"><!-- 3 to -3 --></div> + <div class="level-1"><!-- 3 to -1 --></div> + <div class="level0"><!-- 3 to 0 --></div> + <div class="level1"><!-- 3 to 1 --></div> + <div class="level2"><!-- 3 to 2 --> + <div class="level-3"><!-- 2 to -3 --></div> + <div class="level-1"><!-- 2 to -1 --></div> + <div class="level0"><!-- 2 to 0 --></div> + <div class="level1"><!-- 2 to 1 --> + <div class="level-3"><!-- 1 to -3 --></div> + <div class="level-1"><!-- 1 to -1 --></div> + <div class="level0"><!-- 1 to 0 --> + <div class="level-3"><!-- 0 to -3 --></div> + <div class="level-1"><!-- 0 to -1 --> + <div class="level-3"><!-- -1 to -3 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level-3" id="scale0-40-scaledown"> + <div class="big"> + <div class="level5"><!-- -3 to 5 --></div> + <div class="level3"><!-- -3 to 3 --></div> + <div class="level2"><!-- -3 to 2 --></div> + <div class="level1"><!-- -3 to 1 --></div> + <div class="level0"><!-- -3 to 0 --></div> + <div class="level-1"><!-- -3 to -1 --> + <div class="level5"><!-- -1 to 5 --></div> + <div class="level3"><!-- -1 to 3 --></div> + <div class="level2"><!-- -1 to 2 --></div> + <div class="level1"><!-- -1 to 1 --></div> + <div class="level0"><!-- -1 to 0 --> + <div class="level5"><!-- 0 to 5 --></div> + <div class="level3"><!-- 0 to 3 --></div> + <div class="level2"><!-- 0 to 2 --></div> + <div class="level1"><!-- 0 to 1 --> + <div class="level5"><!-- 1 to 5 --></div> + <div class="level3"><!-- 1 to 3 --></div> + <div class="level2"><!-- 1 to 2 --> + <div class="level5"><!-- 2 to 5 --></div> + <div class="level3"><!-- 2 to 3 --> + <div class="level5"><!-- 3 to 5 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level5" id="scale0-40-scaleup"> + <div class="small"> + <div class="level-3"><!-- 5 to -3 --></div> + <div class="level-1"><!-- 5 to -1 --></div> + <div class="level0"><!-- 5 to 0 --></div> + <div class="level1"><!-- 5 to 1 --></div> + <div class="level2"><!-- 5 to 2 --></div> + <div class="level3"><!-- 5 to 3 --> + <div class="level-3"><!-- 3 to -3 --></div> + <div class="level-1"><!-- 3 to -1 --></div> + <div class="level0"><!-- 3 to 0 --></div> + <div class="level1"><!-- 3 to 1 --></div> + <div class="level2"><!-- 3 to 2 --> + <div class="level-3"><!-- 2 to -3 --></div> + <div class="level-1"><!-- 2 to -1 --></div> + <div class="level0"><!-- 2 to 0 --></div> + <div class="level1"><!-- 2 to 1 --> + <div class="level-3"><!-- 1 to -3 --></div> + <div class="level-1"><!-- 1 to -1 --></div> + <div class="level0"><!-- 1 to 0 --> + <div class="level-3"><!-- 0 to -3 --></div> + <div class="level-1"><!-- 0 to -1 --> + <div class="level-3"><!-- -1 to -3 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level-3" id="scale80-0-scaledown"> + <div class="big"> + <div class="level5"><!-- -3 to 5 --></div> + <div class="level3"><!-- -3 to 3 --></div> + <div class="level2"><!-- -3 to 2 --></div> + <div class="level1"><!-- -3 to 1 --></div> + <div class="level0"><!-- -3 to 0 --></div> + <div class="level-1"><!-- -3 to -1 --> + <div class="level5"><!-- -1 to 5 --></div> + <div class="level3"><!-- -1 to 3 --></div> + <div class="level2"><!-- -1 to 2 --></div> + <div class="level1"><!-- -1 to 1 --></div> + <div class="level0"><!-- -1 to 0 --> + <div class="level5"><!-- 0 to 5 --></div> + <div class="level3"><!-- 0 to 3 --></div> + <div class="level2"><!-- 0 to 2 --></div> + <div class="level1"><!-- 0 to 1 --> + <div class="level5"><!-- 1 to 5 --></div> + <div class="level3"><!-- 1 to 3 --></div> + <div class="level2"><!-- 1 to 2 --> + <div class="level5"><!-- 2 to 5 --></div> + <div class="level3"><!-- 2 to 3 --> + <div class="level5"><!-- 3 to 5 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level5" id="scale80-0-scaleup"> + <div class="small"> + <div class="level-3"><!-- 5 to -3 --></div> + <div class="level-1"><!-- 5 to -1 --></div> + <div class="level0"><!-- 5 to 0 --></div> + <div class="level1"><!-- 5 to 1 --></div> + <div class="level2"><!-- 5 to 2 --></div> + <div class="level3"><!-- 5 to 3 --> + <div class="level-3"><!-- 3 to -3 --></div> + <div class="level-1"><!-- 3 to -1 --></div> + <div class="level0"><!-- 3 to 0 --></div> + <div class="level1"><!-- 3 to 1 --></div> + <div class="level2"><!-- 3 to 2 --> + <div class="level-3"><!-- 2 to -3 --></div> + <div class="level-1"><!-- 2 to -1 --></div> + <div class="level0"><!-- 2 to 0 --></div> + <div class="level1"><!-- 2 to 1 --> + <div class="level-3"><!-- 1 to -3 --></div> + <div class="level-1"><!-- 1 to -1 --></div> + <div class="level0"><!-- 1 to 0 --> + <div class="level-3"><!-- 0 to -3 --></div> + <div class="level-1"><!-- 0 to -1 --> + <div class="level-3"><!-- -1 to -3 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level-3" id="default-scaledown"> + <div class="big"> + <div class="level5"><!-- -3 to 5 --></div> + <div class="level3"><!-- -3 to 3 --></div> + <div class="level2"><!-- -3 to 2 --></div> + <div class="level1"><!-- -3 to 1 --></div> + <div class="level0"><!-- -3 to 0 --></div> + <div class="level-1"><!-- -3 to -1 --> + <div class="level5"><!-- -1 to 5 --></div> + <div class="level3"><!-- -1 to 3 --></div> + <div class="level2"><!-- -1 to 2 --></div> + <div class="level1"><!-- -1 to 1 --></div> + <div class="level0"><!-- -1 to 0 --> + <div class="level5"><!-- 0 to 5 --></div> + <div class="level3"><!-- 0 to 3 --></div> + <div class="level2"><!-- 0 to 2 --></div> + <div class="level1"><!-- 0 to 1 --> + <div class="level5"><!-- 1 to 5 --></div> + <div class="level3"><!-- 1 to 3 --></div> + <div class="level2"><!-- 1 to 2 --> + <div class="level5"><!-- 2 to 5 --></div> + <div class="level3"><!-- 2 to 3 --> + <div class="level5"><!-- 3 to 5 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div class="level5" id="default-scaleup"> + <div class="small"> + <div class="level-3"><!-- 5 to -3 --></div> + <div class="level-1"><!-- 5 to -1 --></div> + <div class="level0"><!-- 5 to 0 --></div> + <div class="level1"><!-- 5 to 1 --></div> + <div class="level2"><!-- 5 to 2 --></div> + <div class="level3"><!-- 5 to 3 --> + <div class="level-3"><!-- 3 to -3 --></div> + <div class="level-1"><!-- 3 to -1 --></div> + <div class="level0"><!-- 3 to 0 --></div> + <div class="level1"><!-- 3 to 1 --></div> + <div class="level2"><!-- 3 to 2 --> + <div class="level-3"><!-- 2 to -3 --></div> + <div class="level-1"><!-- 2 to -1 --></div> + <div class="level0"><!-- 2 to 0 --></div> + <div class="level1"><!-- 2 to 1 --> + <div class="level-3"><!-- 1 to -3 --></div> + <div class="level-1"><!-- 1 to -1 --></div> + <div class="level0"><!-- 1 to 0 --> + <div class="level-3"><!-- 0 to -3 --></div> + <div class="level-1"><!-- 0 to -1 --> + <div class="level-3"><!-- -1 to -3 --></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html new file mode 100644 index 0000000000..8540de4194 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p> + <div class="container"> + <div style="font-size: 100px">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html new file mode 100644 index 0000000000..bb59dfdd17 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-001.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property"> + <meta name="assert" content="If specified font-size is math and specified math-depth is 'auto-add' and the inherited value of math-style is 'normal' then the computed math-depth is the one of its parent."> + <link rel="match" href="math-script-level-auto-and-math-style-001.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p> + <div class="container" style="math-style: normal;"> + <div style="font-size: math; math-depth: auto-add">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html new file mode 100644 index 0000000000..f3ddde49f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 500px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 500 × 0.71^(1 − 0) = 355px.</p> + <div class="container"> + <div style="font-size: 355px">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html new file mode 100644 index 0000000000..21c912528a --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-002.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property"> + <meta name="assert" content="If the specified font-size is 'math' and specified math-depth is 'auto-add' and the inherited value of math-style is 'compact' then the computed math-depth is the one of its parent."> + <link rel="match" href="math-script-level-auto-and-math-style-002.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 500px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 500 × 0.71^(1 − 0) = 355px.</p> + <div class="container" style="math-style: compact;"> + <div style="font-size: math; math-depth: auto-add">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html new file mode 100644 index 0000000000..741da4f75c --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 500px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 500px.</p> + <div class="container"> + <div style="font-size: 500px">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html new file mode 100644 index 0000000000..5739a12bb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-003.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property"> + <meta name="assert" content="Initial value of math-style is 'normal'"> + <link rel="match" href="math-script-level-auto-and-math-style-003.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 500px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 500px.</p> + <div class="container"> + <div style="font-size: math; math-depth: auto-add">X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html new file mode 100644 index 0000000000..edda57e25e --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 500px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 500px.</p> + <div class="container"> + <div> + <div> + <div style="font-size: 500px">X</div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html new file mode 100644 index 0000000000..aed3bf9142 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-004.tentative.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property"> + <meta name="assert" content="Initial value of math-style is 'normal'"> + <link rel="match" href="math-script-level-auto-and-math-style-004.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 500px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 500px.</p> + <div class="container"> + <div style="math-style: compact"> + <div style="math-style: initial"> + <div style="font-size: math; math-depth: auto-add">X</div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html new file mode 100644 index 0000000000..3f1641e4a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p> + <div class="container"> + <div> + <div> + <div> + <div style="font-size: 100px">X</div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html new file mode 100644 index 0000000000..01b876b515 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-auto-and-math-style-005.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level: auto and math-style</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property"> + <meta name="assert" content="math-style is inherited"> + <link rel="match" href="math-script-level-auto-and-math-style-005.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 100px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 100 × 0.71^(0 − 0) = 100px.</p> + <div class="container"> + <div style="math-style: normal;"> + <div> + <div> + <div style="font-size: math; math-depth: auto-add">X</div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html new file mode 100644 index 0000000000..cb5326ad71 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level (reference)</title> + <meta charset="utf-8"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 12px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 12px.</p> + <div class="container"> + <div> + <div>X</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html new file mode 100644 index 0000000000..36b477aa32 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-script-level-font-size-clamping-001.tentative.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-script-level clamping</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3739"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> + <meta name="assert" content="Clamping due to browser's min font size only affects the used size."> + <link rel="match" href="math-script-level-font-size-clamping-001.tentative-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + .container { + /* Ahem font does not have a MATH table so the font-size scale factor + is always 0.71^{computed - inherited math script level} */ + font: 12px/1 Ahem; + } + </style> + </head> + <body> + <p>Test passes if you see a square of side 12px.</p> + <div class="container"><!-- Initial size is 12px. --> + <div style="font-size: math; math-depth: add(8);"><!-- Size is 12*.71^8 = 0.7749042374949131 < 1px. --> + <div style="font-size: math; math-depth: add(-8);">X</div><!-- back to 12px. --> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html new file mode 100644 index 0000000000..e63f28b191 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/math-script-level-and-math-style/math-style-001.tentative.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>math-style</title> + <meta charset="utf-8"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> + <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property"> + <meta name="assert" content="Check the resolved value of math-style"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script> + function mathStyle(id) { + return window.getComputedStyle(document.getElementById(id)). + getPropertyValue("math-style"); + } + setup({ explicit_done: true }); + window.addEventListener("load", function() { + test(function() { + assert_equals(mathStyle("initial"), "normal"); + }, "Initial value of math-style"); + test(function() { + assert_equals(mathStyle("specifiedInline"), "compact"); + assert_equals(mathStyle("specifiedDisplay"), "normal"); + }, "Specified values of math-style"); + test(function() { + assert_equals(mathStyle("inheritedInline"), "compact"); + assert_equals(mathStyle("inheritedDisplay"), "normal"); + }, "Inherited values of math-style"); + done(); + }); + </script> + </head> + <body> + <div id="log"></div> + <div id="initial"></div> + <div id="specifiedInline" style="math-style: compact"> + <div id="inheritedInline"></div> + </div> + <div id="specifiedDisplay" style="math-style: normal"> + <div id="inheritedDisplay"></div> + </div> + </body> +</html> |