| <!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> |
