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