math-script-level-004.tentative.html (18035B)
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 <meta name="assert" content="Check the resolved value of math-script-level"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 @font-face { 14 font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40; 15 src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown40.woff"); 16 } 17 @font-face { 18 font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40; 19 src: url("/fonts/math/scriptpercentscaledown0-scriptscriptpercentscaledown40.woff"); 20 } 21 @font-face { 22 font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0; 23 src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown0.woff"); 24 } 25 #scale80-40-scaledown, #scale80-40-scaleup { 26 font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40; 27 } 28 #scale0-40-scaledown, #scale0-40-scaleup { 29 font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40; 30 } 31 #scale80-0-scaledown, #scale80-0-scaleup { 32 font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0; 33 } 34 #default-scaledown, #default-scaleup { 35 /* Ahem font does not have any MATH table, so uses default scale. */ 36 font-family: Ahem; 37 } 38 .big { font-size: 3000px; } 39 .small { font-size: 150px; } 40 .level-3 { font-size: math; math-depth: -3; } 41 .level-1 { font-size: math; math-depth: -1; } 42 .level0 { font-size: math; math-depth: 0; } 43 .level1 { font-size: math; math-depth: 1; } 44 .level2 { font-size: math; math-depth: 2; } 45 .level3 { font-size: math; math-depth: 3; } 46 .level5 { font-size: math; math-depth: 5; } 47 </style> 48 <script> 49 const big = 3000; 50 const small = 150; 51 setup({ explicit_done: true }); 52 function fontSize(element) { 53 return parseFloat((/(.+)px/).exec(getComputedStyle(element). 54 getPropertyValue("font-size"))[1]); 55 } 56 function CheckFontSizes(id, sizes) { 57 var container = document.getElementById(id); 58 for (var level in sizes) { 59 var divs = container.getElementsByClassName(`level${level}`); 60 for (var i = 0; i < divs.length; i++) { 61 assert_approx_equals(fontSize(divs[i]), sizes[level], 1, `Wrong font-size (id=${id} ; level=${level} ; i=${i})`); 62 } 63 } 64 } 65 window.addEventListener("load", function() { 66 document.fonts.ready.then(function() { 67 test(function() { 68 CheckFontSizes("scale80-40-scaledown", { 69 "-3": big, 70 "-1": big * .71 * .71, 71 "0": big * .71 * .71 * .71, 72 "1": big * .71 * .71 * .71 * .8, 73 "2": big * .71 * .71 * .71 * .4, 74 "3": big * .71 * .71 * .71 * .4 * .71, 75 "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71 76 }); 77 CheckFontSizes("scale80-40-scaleup", { 78 "5": small, 79 "3": small / (.71 * .71), 80 "2": small / (.71 * .71 * .71), 81 "1": small / (.71 * .71 * .71 * (.4 / .8)), 82 "0": small / (.71 * .71 * .71 * .4), 83 "-1": small / (.71 * .71 * .71 * .4 * .71), 84 "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71) 85 }); 86 }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=40"); 87 88 test(function() { 89 var scriptPercentScaleDown = .71; 90 CheckFontSizes("scale0-40-scaledown", { 91 "-3": big, 92 "-1": big * .71 * .71, 93 "0": big * .71 * .71 * .71, 94 "1": big * .71 * .71 * .71 * scriptPercentScaleDown, 95 "2": big * .71 * .71 * .71 * .4, 96 "3": big * .71 * .71 * .71 * .4 * .71, 97 "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71 98 }); 99 CheckFontSizes("scale0-40-scaleup", { 100 "5": small, 101 "3": small / (.71 * .71), 102 "2": small / (.71 * .71 * .71), 103 "1": small / (.71 * .71 * .71 * (.4 / scriptPercentScaleDown)), 104 "0": small / (.71 * .71 * .71 * .4), 105 "-1": small / (.71 * .71 * .71 * .4 * .71), 106 "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71) 107 }); 108 }, "scriptPercentScaleDown=0, scriptScriptPercentScaleDown=40"); 109 110 test(function() { 111 var scriptScriptPercentScaleDown = 0.5041; 112 CheckFontSizes("scale80-0-scaledown", { 113 "-3": big, 114 "-1": big * .71 * .71, 115 "0": big * .71 * .71 * .71, 116 "1": big * .71 * .71 * .71 * .8, 117 "2": big * .71 * .71 * .71 * scriptScriptPercentScaleDown, 118 "3": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71, 119 "5": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71 120 }); 121 CheckFontSizes("scale80-0-scaleup", { 122 "5": small, 123 "3": small / (.71 * .71), 124 "2": small / (.71 * .71 * .71), 125 "1": small / (.71 * .71 * .71 * (scriptScriptPercentScaleDown / .8)), 126 "0": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown), 127 "-1": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71), 128 "-3": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71) 129 }); 130 }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=0"); 131 132 test(function() { 133 CheckFontSizes("default-scaledown", { 134 "-3": big, 135 "-1": big * .71 * .71, 136 "0": big * .71 * .71 * .71, 137 "1": big * .71 * .71 * .71 * .71, 138 "2": big * .71 * .71 * .71 * .71 * .71, 139 "3": big * .71 * .71 * .71 * .71 * .71 * .71, 140 "5": big * .71 * .71 * .71 * .71 * .71 * .71 * .71 * .71 141 }); 142 CheckFontSizes("default-scaleup", { 143 "5": small, 144 "3": small / (.71 * .71), 145 "2": small / (.71 * .71 * .71), 146 "1": small / (.71 * .71 * .71 * .71), 147 "0": small / (.71 * .71 * .71 * .71 * .71), 148 "-1": small / (.71 * .71 * .71 * .71 * .71 * .71), 149 "-3": small / (.71 * .71 * .71 * .71 * .71 * .71 * .71 * .71) 150 }); 151 }, "No MATH table"); 152 153 done(); 154 }); 155 }); 156 </script> 157 </head> 158 <body> 159 <div id="log"></div> 160 161 <div class="level-3" id="scale80-40-scaledown"> 162 <div class="big"> 163 <div class="level5"><!-- -3 to 5 --></div> 164 <div class="level3"><!-- -3 to 3 --></div> 165 <div class="level2"><!-- -3 to 2 --></div> 166 <div class="level1"><!-- -3 to 1 --></div> 167 <div class="level0"><!-- -3 to 0 --></div> 168 <div class="level-1"><!-- -3 to -1 --> 169 <div class="level5"><!-- -1 to 5 --></div> 170 <div class="level3"><!-- -1 to 3 --></div> 171 <div class="level2"><!-- -1 to 2 --></div> 172 <div class="level1"><!-- -1 to 1 --></div> 173 <div class="level0"><!-- -1 to 0 --> 174 <div class="level5"><!-- 0 to 5 --></div> 175 <div class="level3"><!-- 0 to 3 --></div> 176 <div class="level2"><!-- 0 to 2 --></div> 177 <div class="level1"><!-- 0 to 1 --> 178 <div class="level5"><!-- 1 to 5 --></div> 179 <div class="level3"><!-- 1 to 3 --></div> 180 <div class="level2"><!-- 1 to 2 --> 181 <div class="level5"><!-- 2 to 5 --></div> 182 <div class="level3"><!-- 2 to 3 --> 183 <div class="level5"><!-- 3 to 5 --></div> 184 </div> 185 </div> 186 </div> 187 </div> 188 </div> 189 </div> 190 </div> 191 192 <div class="level5" id="scale80-40-scaleup"> 193 <div class="small"> 194 <div class="level-3"><!-- 5 to -3 --></div> 195 <div class="level-1"><!-- 5 to -1 --></div> 196 <div class="level0"><!-- 5 to 0 --></div> 197 <div class="level1"><!-- 5 to 1 --></div> 198 <div class="level2"><!-- 5 to 2 --></div> 199 <div class="level3"><!-- 5 to 3 --> 200 <div class="level-3"><!-- 3 to -3 --></div> 201 <div class="level-1"><!-- 3 to -1 --></div> 202 <div class="level0"><!-- 3 to 0 --></div> 203 <div class="level1"><!-- 3 to 1 --></div> 204 <div class="level2"><!-- 3 to 2 --> 205 <div class="level-3"><!-- 2 to -3 --></div> 206 <div class="level-1"><!-- 2 to -1 --></div> 207 <div class="level0"><!-- 2 to 0 --></div> 208 <div class="level1"><!-- 2 to 1 --> 209 <div class="level-3"><!-- 1 to -3 --></div> 210 <div class="level-1"><!-- 1 to -1 --></div> 211 <div class="level0"><!-- 1 to 0 --> 212 <div class="level-3"><!-- 0 to -3 --></div> 213 <div class="level-1"><!-- 0 to -1 --> 214 <div class="level-3"><!-- -1 to -3 --></div> 215 </div> 216 </div> 217 </div> 218 </div> 219 </div> 220 </div> 221 </div> 222 223 <div class="level-3" id="scale0-40-scaledown"> 224 <div class="big"> 225 <div class="level5"><!-- -3 to 5 --></div> 226 <div class="level3"><!-- -3 to 3 --></div> 227 <div class="level2"><!-- -3 to 2 --></div> 228 <div class="level1"><!-- -3 to 1 --></div> 229 <div class="level0"><!-- -3 to 0 --></div> 230 <div class="level-1"><!-- -3 to -1 --> 231 <div class="level5"><!-- -1 to 5 --></div> 232 <div class="level3"><!-- -1 to 3 --></div> 233 <div class="level2"><!-- -1 to 2 --></div> 234 <div class="level1"><!-- -1 to 1 --></div> 235 <div class="level0"><!-- -1 to 0 --> 236 <div class="level5"><!-- 0 to 5 --></div> 237 <div class="level3"><!-- 0 to 3 --></div> 238 <div class="level2"><!-- 0 to 2 --></div> 239 <div class="level1"><!-- 0 to 1 --> 240 <div class="level5"><!-- 1 to 5 --></div> 241 <div class="level3"><!-- 1 to 3 --></div> 242 <div class="level2"><!-- 1 to 2 --> 243 <div class="level5"><!-- 2 to 5 --></div> 244 <div class="level3"><!-- 2 to 3 --> 245 <div class="level5"><!-- 3 to 5 --></div> 246 </div> 247 </div> 248 </div> 249 </div> 250 </div> 251 </div> 252 </div> 253 254 <div class="level5" id="scale0-40-scaleup"> 255 <div class="small"> 256 <div class="level-3"><!-- 5 to -3 --></div> 257 <div class="level-1"><!-- 5 to -1 --></div> 258 <div class="level0"><!-- 5 to 0 --></div> 259 <div class="level1"><!-- 5 to 1 --></div> 260 <div class="level2"><!-- 5 to 2 --></div> 261 <div class="level3"><!-- 5 to 3 --> 262 <div class="level-3"><!-- 3 to -3 --></div> 263 <div class="level-1"><!-- 3 to -1 --></div> 264 <div class="level0"><!-- 3 to 0 --></div> 265 <div class="level1"><!-- 3 to 1 --></div> 266 <div class="level2"><!-- 3 to 2 --> 267 <div class="level-3"><!-- 2 to -3 --></div> 268 <div class="level-1"><!-- 2 to -1 --></div> 269 <div class="level0"><!-- 2 to 0 --></div> 270 <div class="level1"><!-- 2 to 1 --> 271 <div class="level-3"><!-- 1 to -3 --></div> 272 <div class="level-1"><!-- 1 to -1 --></div> 273 <div class="level0"><!-- 1 to 0 --> 274 <div class="level-3"><!-- 0 to -3 --></div> 275 <div class="level-1"><!-- 0 to -1 --> 276 <div class="level-3"><!-- -1 to -3 --></div> 277 </div> 278 </div> 279 </div> 280 </div> 281 </div> 282 </div> 283 </div> 284 285 <div class="level-3" id="scale80-0-scaledown"> 286 <div class="big"> 287 <div class="level5"><!-- -3 to 5 --></div> 288 <div class="level3"><!-- -3 to 3 --></div> 289 <div class="level2"><!-- -3 to 2 --></div> 290 <div class="level1"><!-- -3 to 1 --></div> 291 <div class="level0"><!-- -3 to 0 --></div> 292 <div class="level-1"><!-- -3 to -1 --> 293 <div class="level5"><!-- -1 to 5 --></div> 294 <div class="level3"><!-- -1 to 3 --></div> 295 <div class="level2"><!-- -1 to 2 --></div> 296 <div class="level1"><!-- -1 to 1 --></div> 297 <div class="level0"><!-- -1 to 0 --> 298 <div class="level5"><!-- 0 to 5 --></div> 299 <div class="level3"><!-- 0 to 3 --></div> 300 <div class="level2"><!-- 0 to 2 --></div> 301 <div class="level1"><!-- 0 to 1 --> 302 <div class="level5"><!-- 1 to 5 --></div> 303 <div class="level3"><!-- 1 to 3 --></div> 304 <div class="level2"><!-- 1 to 2 --> 305 <div class="level5"><!-- 2 to 5 --></div> 306 <div class="level3"><!-- 2 to 3 --> 307 <div class="level5"><!-- 3 to 5 --></div> 308 </div> 309 </div> 310 </div> 311 </div> 312 </div> 313 </div> 314 </div> 315 316 <div class="level5" id="scale80-0-scaleup"> 317 <div class="small"> 318 <div class="level-3"><!-- 5 to -3 --></div> 319 <div class="level-1"><!-- 5 to -1 --></div> 320 <div class="level0"><!-- 5 to 0 --></div> 321 <div class="level1"><!-- 5 to 1 --></div> 322 <div class="level2"><!-- 5 to 2 --></div> 323 <div class="level3"><!-- 5 to 3 --> 324 <div class="level-3"><!-- 3 to -3 --></div> 325 <div class="level-1"><!-- 3 to -1 --></div> 326 <div class="level0"><!-- 3 to 0 --></div> 327 <div class="level1"><!-- 3 to 1 --></div> 328 <div class="level2"><!-- 3 to 2 --> 329 <div class="level-3"><!-- 2 to -3 --></div> 330 <div class="level-1"><!-- 2 to -1 --></div> 331 <div class="level0"><!-- 2 to 0 --></div> 332 <div class="level1"><!-- 2 to 1 --> 333 <div class="level-3"><!-- 1 to -3 --></div> 334 <div class="level-1"><!-- 1 to -1 --></div> 335 <div class="level0"><!-- 1 to 0 --> 336 <div class="level-3"><!-- 0 to -3 --></div> 337 <div class="level-1"><!-- 0 to -1 --> 338 <div class="level-3"><!-- -1 to -3 --></div> 339 </div> 340 </div> 341 </div> 342 </div> 343 </div> 344 </div> 345 </div> 346 347 <div class="level-3" id="default-scaledown"> 348 <div class="big"> 349 <div class="level5"><!-- -3 to 5 --></div> 350 <div class="level3"><!-- -3 to 3 --></div> 351 <div class="level2"><!-- -3 to 2 --></div> 352 <div class="level1"><!-- -3 to 1 --></div> 353 <div class="level0"><!-- -3 to 0 --></div> 354 <div class="level-1"><!-- -3 to -1 --> 355 <div class="level5"><!-- -1 to 5 --></div> 356 <div class="level3"><!-- -1 to 3 --></div> 357 <div class="level2"><!-- -1 to 2 --></div> 358 <div class="level1"><!-- -1 to 1 --></div> 359 <div class="level0"><!-- -1 to 0 --> 360 <div class="level5"><!-- 0 to 5 --></div> 361 <div class="level3"><!-- 0 to 3 --></div> 362 <div class="level2"><!-- 0 to 2 --></div> 363 <div class="level1"><!-- 0 to 1 --> 364 <div class="level5"><!-- 1 to 5 --></div> 365 <div class="level3"><!-- 1 to 3 --></div> 366 <div class="level2"><!-- 1 to 2 --> 367 <div class="level5"><!-- 2 to 5 --></div> 368 <div class="level3"><!-- 2 to 3 --> 369 <div class="level5"><!-- 3 to 5 --></div> 370 </div> 371 </div> 372 </div> 373 </div> 374 </div> 375 </div> 376 </div> 377 378 <div class="level5" id="default-scaleup"> 379 <div class="small"> 380 <div class="level-3"><!-- 5 to -3 --></div> 381 <div class="level-1"><!-- 5 to -1 --></div> 382 <div class="level0"><!-- 5 to 0 --></div> 383 <div class="level1"><!-- 5 to 1 --></div> 384 <div class="level2"><!-- 5 to 2 --></div> 385 <div class="level3"><!-- 5 to 3 --> 386 <div class="level-3"><!-- 3 to -3 --></div> 387 <div class="level-1"><!-- 3 to -1 --></div> 388 <div class="level0"><!-- 3 to 0 --></div> 389 <div class="level1"><!-- 3 to 1 --></div> 390 <div class="level2"><!-- 3 to 2 --> 391 <div class="level-3"><!-- 2 to -3 --></div> 392 <div class="level-1"><!-- 2 to -1 --></div> 393 <div class="level0"><!-- 2 to 0 --></div> 394 <div class="level1"><!-- 2 to 1 --> 395 <div class="level-3"><!-- 1 to -3 --></div> 396 <div class="level-1"><!-- 1 to -1 --></div> 397 <div class="level0"><!-- 1 to 0 --> 398 <div class="level-3"><!-- 0 to -3 --></div> 399 <div class="level-1"><!-- 0 to -1 --> 400 <div class="level-3"><!-- -1 to -3 --></div> 401 </div> 402 </div> 403 </div> 404 </div> 405 </div> 406 </div> 407 </div> 408 409 </body> 410 </html>