math-script-level-002.tentative.html (8845B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>math-script-level</title> 5 <meta charset="utf-8"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746"> 7 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property"> 8 <link rel="help" href="https://www.w3.org/TR/cssom-1/#serialize-a-css-component-value"> 9 <meta name="assert" content="Verify effect of math-depth: auto-add | add(<integer) | (<integer>, starting from different values of math-depth."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 .container { 15 /* Ahem font does not have a MATH table so the font-size scale factor 16 is always 0.71^{computed - inherited math script level} */ 17 font: 20px/1 Ahem; 18 } 19 </style> 20 <script> 21 var epsilon = .1; 22 function fontSize(id) { 23 return parseFloat((/(.+)px/).exec(getComputedStyle(document.getElementById(id)).getPropertyValue("font-size"))[1]); 24 } 25 setup({ explicit_done: true }); 26 window.addEventListener("load", function() { 27 document.fonts.ready.then(function() { 28 test(function() { 29 assert_equals(fontSize("autoDisplay"), 200); 30 assert_equals(fontSize("autoInline"), 500 * .71); 31 }, "auto"); 32 test(function() { 33 var initialSize = 2000 * Math.pow(.71, 7); 34 assert_approx_equals(fontSize("autoDisplayFrom7"), initialSize, epsilon); 35 assert_approx_equals(fontSize("autoInlineFrom7"), initialSize * .71, epsilon); 36 }, "auto ; starting from level 7"); 37 test(function() { 38 assert_equals(fontSize("add0"), 200); 39 assert_equals(fontSize("add-1"), 100); 40 assert_equals(fontSize("add1"), 355); 41 assert_approx_equals(fontSize("add-2"), 397, 1); 42 assert_approx_equals(fontSize("add2"), 504, 1); 43 assert_approx_equals(fontSize("add-9"), 654, 1); 44 assert_approx_equals(fontSize("add9"), 92, 1); 45 }, "add(<integer>)"); 46 test(function() { 47 assert_equals(fontSize("add0from3"), 200); 48 assert_equals(fontSize("add-1from3"), 100); 49 assert_equals(fontSize("add1from3"), 355); 50 assert_approx_equals(fontSize("add-2from3"), 397, 1); 51 assert_approx_equals(fontSize("add2from3"), 504, 1); 52 assert_approx_equals(fontSize("add-9from3"), 654, 1); 53 assert_approx_equals(fontSize("add9from3"), 92, 1); 54 }, "add(<integer>) ; starting from level 3"); 55 test(function() { 56 assert_equals(fontSize("set0"), 200); 57 assert_equals(fontSize("set-1"), 100); 58 assert_equals(fontSize("set1"), 355); 59 assert_approx_equals(fontSize("set-2"), 397, 1); 60 assert_approx_equals(fontSize("set2"), 504, 1); 61 assert_approx_equals(fontSize("set-9"), 654, 1); 62 assert_approx_equals(fontSize("set9"), 92, 1); 63 }, "<integer>"); 64 test(function() { 65 assert_equals(fontSize("set50"), 200); 66 assert_equals(fontSize("set49"), 100); 67 assert_equals(fontSize("set51"), 355); 68 assert_approx_equals(fontSize("set48"), 397, 1); 69 assert_approx_equals(fontSize("set52"), 504, 1); 70 assert_approx_equals(fontSize("set41"), 654, 1); 71 assert_approx_equals(fontSize("set59"), 92, 1); 72 }, "<integer> ; starting from level 50"); 73 done(); 74 }); 75 }); 76 </script> 77 </head> 78 <body> 79 <div id="log"></div> 80 <div> 81 <div class="container"> 82 <div> 83 <div style="font-size: 200px; math-style: normal"> 84 <div id="autoDisplay" style="font-size: math; math-depth: auto-add"></div> 85 </div> 86 <div style="font-size: 500px; math-style: compact"> 87 <div id="autoInline" style="font-size: math; math-depth: auto-add"></div> 88 </div> 89 </div> 90 <div style="font-size: 2000px;"> 91 <div style="math-style: normal; font-size: math; math-depth: 7"> 92 <div id="autoDisplayFrom7" style="font-size: math; math-depth: auto-add"></div> 93 </div> 94 <div style="math-style: compact; font-size: math; math-depth: 7"> 95 <div id="autoInlineFrom7" style="font-size: math; math-depth: auto-add"></div> 96 </div> 97 </div> 98 <div> 99 <div style="font-size: 200px"> 100 <div id="add0" style="font-size: math; math-depth: add(0)"></div> 101 </div> 102 <div style="font-size: 71px"> 103 <div id="add-1" style="font-size: math; math-depth: add(-1)"></div> 104 </div> 105 <div style="font-size: 500px"> 106 <div id="add1" style="font-size: math; math-depth: add(1)"></div> 107 </div> 108 <div style="font-size: 200px"> 109 <div id="add-2" style="font-size: math; math-depth: add(-2)"></div> 110 </div> 111 <div style="font-size: 1000px"> 112 <div id="add2" style="font-size: math; math-depth: add(2)"></div> 113 </div> 114 <div style="font-size: 30px"> 115 <div id="add-9" style="font-size: math; math-depth: add(-9)"></div> 116 </div> 117 <div style="font-size: 2000px"> 118 <div id="add9" style="font-size: math; math-depth: add(9)"></div> 119 </div> 120 </div> 121 <div style="math-depth: 3;"> 122 <div style="font-size: 200px;"> 123 <div id="add0from3" style="font-size: math; math-depth: add(0)"></div> 124 </div> 125 <div style="font-size: 71px;"> 126 <div id="add-1from3" style="font-size: math; math-depth: add(-1)"></div> 127 </div> 128 <div style="font-size: 500px;"> 129 <div id="add1from3" style="font-size: math; math-depth: add(1)"></div> 130 </div> 131 <div style="font-size: 200px;"> 132 <div id="add-2from3" style="font-size: math; math-depth: add(-2)"></div> 133 </div> 134 <div style="font-size: 1000px;"> 135 <div id="add2from3" style="font-size: math; math-depth: add(2)"></div> 136 </div> 137 <div style="font-size: 30px;"> 138 <div id="add-9from3" style="font-size: math; math-depth: add(-9)"></div> 139 </div> 140 <div style="font-size: 2000px;"> 141 <div id="add9from3" style="font-size: math; math-depth: add(9)"></div> 142 </div> 143 </div> 144 <div> 145 <div style="font-size: 200px"> 146 <div id="set0" style="font-size: math; math-depth: 0"></div> 147 </div> 148 <div style="font-size: 71px"> 149 <div id="set-1" style="font-size: math; math-depth: -1"></div> 150 </div> 151 <div style="font-size: 500px"> 152 <div id="set1" style="font-size: math; math-depth: 1"></div> 153 </div> 154 <div style="font-size: 200px"> 155 <div id="set-2" style="font-size: math; math-depth: -2"></div> 156 </div> 157 <div style="font-size: 1000px"> 158 <div id="set2" style="font-size: math; math-depth: 2"></div> 159 </div> 160 <div style="font-size: 30px"> 161 <div id="set-9" style="font-size: math; math-depth: -9"></div> 162 </div> 163 <div style="font-size: 2000px"> 164 <div id="set9" style="font-size: math; math-depth: 9"></div> 165 </div> 166 </div> 167 </div> 168 <div style="math-depth: 50"> 169 <div style="font-size: 200px;"> 170 <div id="set50" style="font-size: math; math-depth: 50"></div> 171 </div> 172 <div style="font-size: 71px;"> 173 <div id="set49" style="font-size: math; math-depth: 49"></div> 174 </div> 175 <div style="font-size: 500px;"> 176 <div id="set51" style="font-size: math; math-depth: 51"></div> 177 </div> 178 <div style="font-size: 200px;"> 179 <div id="set48" style="font-size: math; math-depth: 48"></div> 180 </div> 181 <div style="font-size: 1000px;"> 182 <div id="set52" style="font-size: math; math-depth: 52"></div> 183 </div> 184 <div style="font-size: 30px;"> 185 <div id="set41" style="font-size: math; math-depth: 41"></div> 186 </div> 187 <div style="font-size: 2000px;"> 188 <div id="set59" style="font-size: math; math-depth: 59"></div> 189 </div> 190 </div> 191 </div> 192 </div> 193 </body> 194 </html>