Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /mathml/presentation-markup/operators/mo-font-relative-lengths-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font-relative lengths on an operator</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<meta name="assert" content="Verify font-relative lengths refer to the core operator, not the embellished operator">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
math {
font: 100px/1 Ahem;
}
@font-face {
font-family: operators;
src: url("/fonts/math/operators.woff");
}
mo {
font-family: operators;
}
</style>
<script>
setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });
function runTests() {
var epsilon = 1;
var baseSizePx = 100;
test(function() {
var beforeRight = document.getElementById("before1").getBoundingClientRect().right;
var afterLeft = document.getElementById("after1").getBoundingClientRect().left;
var fontScalePercent = .5;
var lspaceEm = 1;
var moWidthEm = 1;
assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (lspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * lspaceEm");
}, `font-relative lspace refers to the core operator`);
test(function() {
var beforeRight = document.getElementById("before2").getBoundingClientRect().right;
var afterLeft = document.getElementById("after2").getBoundingClientRect().left;
var fontScalePercent = 2;
var rspaceEm = 1;
var moWidthEm = 1;
assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (rspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * rspaceEm");
}, `font-relative rspace refers to the core operator`);
test(function() {
var moStretchSize = document.getElementById("operator1").getBoundingClientRect().height;
var fontScalePercent = .5;
var minsizeEm = 8;
var beforeHeight = document.getElementById("before1").getBoundingClientRect().height;
assert_approx_equals(moStretchSize, baseSizePx * minsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * minsizeEm");
// This is really testing the same thing but do make sure minsize is
// applied i.e. the unconstrained target size is less than the actual
// stretch size.
assert_approx_equals(beforeHeight, moStretchSize / 2, epsilon);
}, `font-relative minsize refers to the core operator`);
test(function() {
var moStretchSize = document.getElementById("operator2").getBoundingClientRect().height;
var fontScalePercent = 2;
var maxsizeEm = 1;
var afterHeight = document.getElementById("after2").getBoundingClientRect().height;
assert_approx_equals(moStretchSize, baseSizePx * maxsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * maxsizeEm");
// This is really testing the same thing but do make sure maxsize is
// applied i.e. the unconstrained target size is more than the actual
// stretch size.
assert_approx_equals(afterHeight, 2 * moStretchSize, epsilon);
}, `font-relative maxsize refers to the core operator`);
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math>
<mrow>
<mspace id="before1" width="1em" height="1em" depth="1em" style="background: blue"/>
<mrow style="font-size: 50%;">
<mo id="operator1" lspace="1em" rspace="0em" minsize="8em">⥯</mo>
<mspace id="after1" width="1em" height=".5em" depth=".5em" style="background: green"/>
</mrow>
<mn><!-- not space like --></mn>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mrow style="font-size: 200%">
<mspace id="before2" width="1em" height=".5em" depth=".5em" style="background: green"/>
<mo id="operator2" lspace="0em" rspace="1em" maxsize="1em">⥯</mo>
</mrow>
<mspace id="after2" width="1em" height="2em" depth="2em" style="background: blue"/>
<mn><!-- not space like --></mn>
</mrow>
</math>
</p>
</body>
</html>