Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/math-script-level-and-math-style/math-script-level-004.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>math-script-level</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 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>