math-script-level-001.tentative.html (3935B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>math-depth</title> 5 <meta charset="utf-8"> 6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> 7 <meta name="assert" content="Check the computed value of math-depth"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script> 11 function mathDepth(id) { 12 return window.getComputedStyle(document.getElementById(id)). 13 getPropertyValue("math-depth"); 14 } 15 setup({ explicit_done: true }); 16 window.addEventListener("load", function() { 17 test(function() { 18 assert_equals(mathDepth("initial"), "0"); 19 assert_equals(mathDepth("initialFrom11"), "0"); 20 }, "Initial value of math-depth"); 21 test(function() { 22 assert_equals(mathDepth("inherited11"), "11"); 23 assert_equals(mathDepth("inherited-7"), "-7"); 24 }, "Inherited values of math-depth"); 25 test(function() { 26 assert_equals(mathDepth("inherited9specifiedAutoInline"), "10"); 27 assert_equals(mathDepth("inherited9specifiedAutoDisplay"), "9"); 28 }, "Specified math-depth: auto-add"); 29 test(function() { 30 assert_equals(mathDepth("specified11"), "11"); 31 assert_equals(mathDepth("specified-7"), "-7"); 32 }, "Specified math-depth: <integer>"); 33 test(function() { 34 assert_equals(mathDepth("specifiedAdd10From5"), "15"); 35 assert_equals(mathDepth("specifiedAdd-15From5"), "-10"); 36 }, "Specified math-depth: add(<integer>)"); 37 test(function() { 38 assert_equals(mathDepth("invalidKeywordFrom3"), "3"); 39 assert_equals(mathDepth("invalidFloatFrom3"), "3"); 40 assert_equals(mathDepth("invalidCalcFrom3"), "3"); 41 assert_equals(mathDepth("invalidAddCalcFrom3"), "3"); 42 assert_equals(mathDepth("invalidAddFloatFrom3"), "3"); 43 }, "Specified math-depth: invalid expressions"); 44 test(function() { 45 const cssVariable = 3; 46 assert_equals(mathDepth("specifiedCalcFrom9"), `${Math.round(cssVariable/2)+10}`); 47 assert_equals(mathDepth("specifiedAddCalcFrom9"), `${9+(3*4-5)}`); 48 }, "Specified math-depth: calc() expressions"); 49 done(); 50 }); 51 </script> 52 </head> 53 <body> 54 <div id="log"></div> 55 <div id="initial"></div> 56 <div id="specified11" style="math-depth: 11"> 57 <div id="initialFrom11" style="math-depth: initial"></div> 58 <div id="inherited11"></div> 59 </div> 60 <div id="specified-7" style="math-depth: -7"> 61 <div id="inherited-7"></div> 62 </div> 63 <div style="math-depth: 9"> 64 <div style="math-style: compact"> 65 <div id="inherited9specifiedAutoInline" style="math-depth: auto-add" ></div> 66 </div> 67 <div style="math-style: normal"> 68 <div id="inherited9specifiedAutoDisplay" style="math-depth: auto-add" ></div> 69 </div> 70 </div> 71 <div style="math-depth: 5"> 72 <div id="specifiedAdd10From5" style="math-depth: add(10)"></div> 73 <div id="specifiedAdd-15From5" style="math-depth: add(-15)"></div> 74 </div> 75 <div style="math-depth: 3;"> 76 <div id="invalidKeywordFrom3" style="math-depth: auto"></div> 77 <div id="invalidFloatFrom3" style="math-depth: 3.14"></div> 78 <div id="invalidCalcFrom3" style="math-depth: 1,2"></div> 79 <div id="invalidAddCalcFrom3" style="math-depth: add(3,4)"></div> 80 <div id="invalidAddFloatFrom3" style="math-depth: add(3.14)"></div> 81 </div> 82 <div style="math-depth: 9;"> 83 <div id="specifiedCalcFrom9" style="--css-variable: 3; math-depth: calc(var(--css-variable)/2 + 10)"></div> 84 <div id="specifiedAddCalcFrom9" style="math-depth: add(calc(3*4 - 5))"></div> 85 </div> 86 </body> 87 </html>