mirror of
https://github.com/servo/servo.git
synced 2025-08-13 09:25:32 +01:00
Update web-platform-tests to revision e8bfc205e36ad699601212cd50083870bad9a75d
This commit is contained in:
Ms2ger
parent
65dd6d4340
commit
ccdb0a3458
1428 changed files with 118036 additions and 9786 deletions
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
|
||||
<meta name="assert" content="Verify fraction metrics for different sizes of numerator and denominator.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for numerator/denominator
|
||||
shifts and spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
box.center = (box.left + box.right) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
function getFractionAxis(aId) {
|
||||
return (getBox(aId).top * den.height + getBox(aId).bottom * num.height) / (num.height + den.height);
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 3;
|
||||
var mathAxis = getBox("axis").middle;
|
||||
// For stacks, nothing in the OpenType MATH specification seems to ensure
|
||||
// that the gap is split symmetrically around the math axis so we only
|
||||
// do the following verification for standard fractions.
|
||||
for (var i = 0; i <= 4; i++) {
|
||||
var frac = getBox("frac" + i);
|
||||
var num = getBox("frac" + i + "num");
|
||||
var den = getBox("frac" + i + "den");
|
||||
// To estimate the fraction axis, we calculate barycenter between the
|
||||
// top and bottom of the fraction, using the heights of numerator and
|
||||
// denominator as weights.
|
||||
var fracAxis = (frac.top * den.height + frac.bottom * num.height) / (num.height + den.height);
|
||||
assert_approx_equals(fracAxis, mathAxis, e, "frac" + i + " fraction bar");
|
||||
}
|
||||
}, "Fraction axis is aligned on the math axis");
|
||||
|
||||
test(function() {
|
||||
for (var i = 0; i < 10; i++) {
|
||||
assert_less_than(getBox("frac" + i + "num").bottom, getBox("frac" + i + "den").top, "numerator is above denominator");
|
||||
assert_less_than(getBox("frac" + i + "den").top - getBox("frac" + i + "num").bottom, 5, "The gap between numerator and denominator is not too large");
|
||||
}
|
||||
}, "Vertical positions of numerator and denominator");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
for (var i = 0; i < 10; i++)
|
||||
assert_approx_equals(getBox("frac" + i + "num").center, getBox("frac" + i + "den").center, e, "numerator and denominator are horizontally centered");
|
||||
}, "Horizontal alignments of numerator and denominator");
|
||||
|
||||
test(function() {
|
||||
var e = 5;
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var frac = getBox("frac" + i);
|
||||
var num = getBox("frac" + i + "num");
|
||||
var den = getBox("frac" + i + "den");
|
||||
assert_approx_equals(frac.height, den.bottom - num.top, e, "height of frac " + i + " is determined by the bottom/top sides of the denominator/numerator");
|
||||
assert_approx_equals(frac.width, Math.max(num.right, den.right) - Math.min(num.left, den.left), e, "width of frac " + i + " is determined by the left/right sides of the denominator/numerator (plus some spacing)");
|
||||
}
|
||||
}, "Dimension of mfrac elements");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mo id="axis">−</mo>
|
||||
<mfrac id="frac0">
|
||||
<mspace id="frac0num" width="15px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac0den" width="15px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac1">
|
||||
<mspace id="frac1num" width="30px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac1den" width="15px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac2">
|
||||
<mspace id="frac2num" width="15px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac2den" width="30px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac3">
|
||||
<mspace id="frac3num" width="15px" height="30px" mathbackground="blue"/>
|
||||
<mspace id="frac3den" width="15px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac4">
|
||||
<mspace id="frac4num" width="15px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac4den" width="15px" height="30px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac5" linethickness="0px">
|
||||
<mspace id="frac5num" width="15px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac5den" width="15px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac6" linethickness="0px">
|
||||
<mspace id="frac6num" width="30px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac6den" width="15px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac7" linethickness="0px">
|
||||
<mspace id="frac7num" width="15px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac7den" width="30px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac8" linethickness="0px">
|
||||
<mspace id="frac8num" width="15px" height="30px" mathbackground="blue"/>
|
||||
<mspace id="frac8den" width="15px" height="15px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
<mfrac id="frac9" linethickness="0px">
|
||||
<mspace id="frac9num" width="15px" height="15px" mathbackground="blue"/>
|
||||
<mspace id="frac9den" width="15px" height="30px" mathbackground="green"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
|
||||
<meta name="assert" content="Element mfrac correctly uses the fraction parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: axisheight7000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-axisheight7000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatordisplaystylegapmin5000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatordisplaystyleshiftdown6000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatordisplaystyleshiftdown6000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatorgapmin4000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatorshiftdown3000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatorshiftdown3000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratordisplaystylegapmin8000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratordisplaystyleshiftup2000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratordisplaystyleshiftup2000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratorgapmin9000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratorshiftup11000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratorshiftup11000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: rulethickness10000;
|
||||
src: url("/fonts/math/fraction-rulethickness10000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v1 = 7000 * emToPx;
|
||||
var v2 = 1000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0001").top - getBox("num0001").bottom,
|
||||
v1 + v2 / 2, epsilon, "mfrac: axis height");
|
||||
}, "AxisHeight");
|
||||
|
||||
test(function() {
|
||||
var v1 = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom,
|
||||
v1, epsilon, "mfrac: denominator gap");
|
||||
}, "DenominatorDisplayStyleGapMin");
|
||||
|
||||
test(function() {
|
||||
var v1 = 6000 * emToPx;
|
||||
assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom,
|
||||
v1, epsilon, "mfrac: denominator shift");
|
||||
}, "DenominatorDisplayStyleShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v1 = 4000 * emToPx;
|
||||
assert_approx_equals(getBox("den0004").top - getBox("ref0004").bottom,
|
||||
v1, epsilon, "mfrac: denominator gap");
|
||||
}, "DenominatorGapMin");
|
||||
|
||||
test(function() {
|
||||
var v1 = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("den0005").top - getBox("ref0005").bottom,
|
||||
v1, epsilon, "mfrac: denominator shift");
|
||||
}, "DenominatorShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v1 = 8000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom,
|
||||
v1, epsilon, "mfrac: numerator gap");
|
||||
}, "NumeratorDisplayStyleGapMin");
|
||||
|
||||
test(function() {
|
||||
var v1 = 2000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom,
|
||||
v1, epsilon, "mfrac: numerator shift");
|
||||
}, "NumeratorDisplayStyleShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v1 = 9000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0008").top - getBox("num0008").bottom,
|
||||
v1, epsilon, "mfrac: numerator gap");
|
||||
}, "NumeratorGapMin");
|
||||
|
||||
test(function() {
|
||||
var v1 = 11000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0009").top - getBox("num0009").bottom,
|
||||
v1, epsilon, "mfrac: numerator shift");
|
||||
}, "NumeratorShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v1 = 10000 * emToPx;
|
||||
assert_approx_equals(getBox("den0010").top - getBox("num0010").bottom,
|
||||
v1, epsilon, "mfrac: rule thickness");
|
||||
}, "FractionRuleThickness");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: axisheight7000-rulethickness1000;">
|
||||
<mspace id="ref0001" depth="1em" width="3em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em" height="1em" id="num0001" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
|
||||
<mspace id="ref0002" width="3em"
|
||||
height=".5em" depth=".5em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="3em" height="1em" id="den0002" mathbackground="blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: denominatordisplaystyleshiftdown6000-rulethickness1000;">
|
||||
<mspace id="ref0003" width="3em" height="1em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="3em" depth="1em" id="den0003" mathbackground="blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: denominatorgapmin4000-rulethickness1000;">
|
||||
<mspace id="ref0004" width="3em"
|
||||
height=".5em" depth=".5em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="3em" height="1em" id="den0004" mathbackground="blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: denominatorshiftdown3000-rulethickness1000;">
|
||||
<mspace id="ref0005" width="3em" height="1em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="3em" depth="1em" id="den0005" mathbackground="blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
|
||||
<mspace id="ref0006" width="3em"
|
||||
height=".5em" depth=".5em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em" depth="1em" id="num0006" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: numeratordisplaystyleshiftup2000-rulethickness1000;">
|
||||
<mspace id="ref0007" width="3em"
|
||||
depth="1em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em" height="1em" id="num0007" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: numeratorgapmin9000-rulethickness1000;">
|
||||
<mspace id="ref0008" width="3em"
|
||||
height=".5em" depth=".5em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em" depth="1em" id="num0008" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: numeratorshiftup11000-rulethickness1000;">
|
||||
<mspace id="ref0009" width="3em"
|
||||
depth="1em" mathbackground="green"/>
|
||||
<mfrac>
|
||||
<mspace width="3em" height="1em" id="num0009" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: rulethickness10000">
|
||||
<mfrac>
|
||||
<mspace width="3em" height="1em" id="num0010" mathbackground="blue"/>
|
||||
<mspace width="3em" depth="1em" id="den0010" mathbackground="green"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Stack parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
|
||||
<meta name="assert" content="Element mfrac correctly uses the stack parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: axisheight7000;
|
||||
src: url("/fonts/math/stack-axisheight7000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: bottomdisplaystyleshiftdown5000;
|
||||
src: url("/fonts/math/stack-bottomdisplaystyleshiftdown5000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: bottomshiftdown6000;
|
||||
src: url("/fonts/math/stack-bottomshiftdown6000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: displaystylegapmin4000;
|
||||
src: url("/fonts/math/stack-displaystylegapmin4000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: gapmin8000;
|
||||
src: url("/fonts/math/stack-gapmin8000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: topdisplaystyleshiftup3000;
|
||||
src: url("/fonts/math/stack-topdisplaystyleshiftup3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: topshiftup9000;
|
||||
src: url("/fonts/math/stack-topshiftup9000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v = 7000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0001").top - getBox("num0001").bottom,
|
||||
v, epsilon, "mfrac: axis height");
|
||||
}, "AxisHeight");
|
||||
|
||||
test(function() {
|
||||
var v = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom,
|
||||
v, epsilon, "mfrac: denominator shift");
|
||||
}, "BottomDisplayStyleShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v = 6000 * emToPx;
|
||||
assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom,
|
||||
v, epsilon, "mfrac: denominator shift");
|
||||
}, "BottomShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v = 4000 * emToPx;
|
||||
assert_approx_equals(getBox("den0004").top - getBox("num0004").bottom,
|
||||
v, epsilon, "mfrac: gap");
|
||||
}, "DisplayStyleGapMin");
|
||||
|
||||
test(function() {
|
||||
var v = 8000 * emToPx;
|
||||
assert_approx_equals(getBox("den0005").top - getBox("num0005").bottom,
|
||||
v, epsilon, "mfrac: gap");
|
||||
}, "GapMin");
|
||||
|
||||
test(function() {
|
||||
var v = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom,
|
||||
v, epsilon, "mfrac: numerator shift");
|
||||
}, "TopDisplayStyleShiftUp");
|
||||
|
||||
test(function() {
|
||||
var v = 9000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom,
|
||||
v, epsilon, "mfrac: numerator shift");
|
||||
}, "ToShiftUp");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: axisheight7000;">
|
||||
<mspace id="ref0001" depth="1em" width="3em" mathbackground="green"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" height="1em" id="num0001" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: bottomdisplaystyleshiftdown5000;">
|
||||
<mspace id="ref0002" width="3em" height="1em" mathbackground="green"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em"/>
|
||||
<mspace width="3em" depth="1em" id="den0002" mathbackground="blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: bottomshiftdown6000;">
|
||||
<mspace id="ref0003" width="3em" height="1em" mathbackground="green"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em"/>
|
||||
<mspace width="3em" depth="1em" id="den0003" mathbackground="blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: displaystylegapmin4000;">
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" height="1em" id="num0004" mathbackground="blue"/>
|
||||
<mspace width="3em" depth="1em" id="den0004" mathbackground="green"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: gapmin8000;">
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" height="1em" id="num0005" mathbackground="blue"/>
|
||||
<mspace width="3em" depth="1em" id="den0005" mathbackground="green"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block" style="font-family: topdisplaystyleshiftup3000;">
|
||||
<mspace id="ref0006" width="3em" depth="1em" mathbackground="green"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" height="1em" id="num0006" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: topshiftup9000;">
|
||||
<mspace id="ref0007" width="3em" depth="1em" mathbackground="green"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" height="1em" id="num0007" mathbackground="blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>mo axis height</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS2.SSS4">
|
||||
<meta name="assert" content="Element mo correctly uses the axis height parameter from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: axisheight5000-verticalarrow14000;
|
||||
src: url("/fonts/math/axisheight5000-verticalarrow14000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 5;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v1 = 5000 * emToPx;
|
||||
var moMiddle = (getBox("mo1").bottom + getBox("mo1").top) / 2;
|
||||
assert_approx_equals(getBox("mo1").height,
|
||||
14000 * emToPx, epsilon, "mo: size");
|
||||
assert_approx_equals(getBox("baseline1").bottom - moMiddle,
|
||||
v1, epsilon, "mo: axis height");
|
||||
}, "AxisHeight (size variant)");
|
||||
|
||||
test(function() {
|
||||
var v1 = 5000 * emToPx;
|
||||
var moMiddle = (getBox("mo2").bottom + getBox("mo2").top) / 2;
|
||||
assert_approx_equals(getBox("mo2").height,
|
||||
2 * (getBox("target2").height - v1),
|
||||
epsilon, "mo: size");
|
||||
assert_approx_equals(getBox("baseline2").bottom - moMiddle,
|
||||
v1, epsilon, "mo: axis height");
|
||||
}, "AxisHeight (glyph assembly)");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: axisheight5000-verticalarrow14000;">
|
||||
<mrow>
|
||||
<mspace id="baseline1" mathbackground="blue" width="50px" height="1px"/>
|
||||
<mpadded voffset="50px"><mspace mathbackground="cyan" width="50px" height="1px"/></mpadded>
|
||||
<mo id="mo1" symmetric="true" mathcolor="green">↨</mo>
|
||||
<mspace mathbackground="gray" width="10px" height="50px"/>
|
||||
</mrow>
|
||||
</math>
|
||||
<math style="font-family: axisheight5000-verticalarrow14000;">
|
||||
<mrow>
|
||||
<mspace id="baseline2" mathbackground="blue" width="50px" height="1px"/>
|
||||
<mpadded voffset="50px"><mspace mathbackground="cyan" width="50px" height="1px"/></mpadded>
|
||||
<mo id="mo2" symmetric="true" mathcolor="green">↨</mo>
|
||||
<mspace id="target2" mathbackground="gray" width="10px" height="200px"/>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Radical parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS3">
|
||||
<meta name="assert" content="Elements msqrt and mroot correctly use the radical parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: degreebottomraisepercent25-rulethickness1000;
|
||||
src: url("/fonts/math/radical-degreebottomraisepercent25-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: displaystyleverticalgap7000-rulethickness1000;
|
||||
src: url("/fonts/math/radical-displaystyleverticalgap7000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: extraascender3000-rulethickness1000;
|
||||
src: url("/fonts/math/radical-extraascender3000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: kernafterdegreeminus5000-rulethickness1000;
|
||||
src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: kernbeforedegree4000-rulethickness1000;
|
||||
src: url("/fonts/math/radical-kernbeforedegree4000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: verticalgap6000-rulethickness1000;
|
||||
src: url("/fonts/math/radical-verticalgap6000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: rulethickness8000;
|
||||
src: url("/fonts/math/radical-rulethickness8000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v1 = 25;
|
||||
var v2 = 1000 * emToPx;
|
||||
var radicalHeight = getBox("base001").height + v2;
|
||||
assert_approx_equals(getBox("ref001").top - getBox("index001").bottom,
|
||||
v1 * radicalHeight / 100, epsilon,
|
||||
"mroot: vertical position of index");
|
||||
}, "RadicalDegreeBottomRaisePercent");
|
||||
|
||||
test(function() {
|
||||
var v1 = 7000 * emToPx;
|
||||
var v2 = 1000 * emToPx;
|
||||
assert_approx_equals(getBox("base0021").top - getBox("radical0021").top,
|
||||
v1 + v2, epsilon,
|
||||
"msqrt: vertical gap");
|
||||
assert_approx_equals(getBox("base0022").top - getBox("radical0022").top,
|
||||
v1 + v2, epsilon,
|
||||
"mroot: vertical gap");
|
||||
}, "RadicalDisplayStyleVerticalGap");
|
||||
|
||||
test(function() {
|
||||
var v1 = 3000 * emToPx;
|
||||
var v2 = 1000 * emToPx;
|
||||
assert_approx_equals(getBox("base0031").top - getBox("radical0031").top,
|
||||
v1 + v2, epsilon,
|
||||
"msqrt: vertical gap");
|
||||
assert_approx_equals(getBox("base0032").top - getBox("radical0032").top,
|
||||
v1 + v2, epsilon,
|
||||
"mroot: vertical gap");
|
||||
}, "RadicalExtraAscender");
|
||||
|
||||
test(function() {
|
||||
// Note: the size variants of U+221A in this font have width 1000.
|
||||
var v1 = 5000 * emToPx;
|
||||
var radicalSymbolWidth = 1000 * emToPx;
|
||||
var radicalLeft = getBox("base004").left - radicalSymbolWidth;
|
||||
assert_approx_equals(getBox("index004").right - radicalLeft,
|
||||
v1, epsilon,
|
||||
"mroot: kern after degree");
|
||||
}, "RadicalKernAfterDegree");
|
||||
|
||||
test(function() {
|
||||
var v1 = 4000 * emToPx;
|
||||
assert_approx_equals(getBox("index005").left - getBox("radical005").left,
|
||||
v1, epsilon,
|
||||
"mroot: kern before degree");
|
||||
}, "RadicalKernBeforeDegree");
|
||||
|
||||
test(function() {
|
||||
var v = 8000 * emToPx;
|
||||
assert_approx_equals(getBox("base0061").top - getBox("radical0061").top,
|
||||
v, epsilon,
|
||||
"msqrt: vertical gap");
|
||||
assert_approx_equals(getBox("base0062").top - getBox("radical0062").top,
|
||||
v, epsilon,
|
||||
"msqrt: vertical gap");
|
||||
}, "RadicalRuleThickness");
|
||||
|
||||
test(function() {
|
||||
var v1 = 6000 * emToPx;
|
||||
var v2 = 1000 * emToPx;
|
||||
assert_approx_equals(getBox("base0071").top - getBox("radical0071").top,
|
||||
v1 + v2, epsilon,
|
||||
"msqrt: vertical gap");
|
||||
assert_approx_equals(getBox("base0072").top - getBox("radical0072").top,
|
||||
v1 + v2, epsilon,
|
||||
"msqrt: vertical gap");
|
||||
}, "RadicalVerticalGap");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: degreebottomraisepercent25-rulethickness1000;">
|
||||
<mspace id="ref001" width="3em" depth="1em" mathbackground="green"/>
|
||||
<mroot>
|
||||
<mspace id="base001" width="3em" height="10em" mathbackground="green"/>
|
||||
<mspace id="index001" width="3em" height="1em" mathbackground="blue"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math display="block"
|
||||
style="font-family: displaystyleverticalgap7000-rulethickness1000;">
|
||||
<msqrt mathbackground="green" id="radical0021">
|
||||
<mspace id="base0021" width="3em" height="1em" mathbackground="blue"/>
|
||||
</msqrt>
|
||||
<mroot mathbackground="green" id="radical0022">
|
||||
<mspace id="base0022" width="3em" height="1em" mathbackground="blue"/>
|
||||
<mspace width="3em" height="1em" mathbackground="black"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: extraascender3000-rulethickness1000;">
|
||||
<msqrt mathbackground="green" id="radical0031">
|
||||
<mspace id="base0031" width="3em" height="1em" mathbackground="blue"/>
|
||||
</msqrt>
|
||||
<mroot mathbackground="green" id="radical0032">
|
||||
<mspace id="base0032" width="3em" height="1em" mathbackground="blue"/>
|
||||
<mspace width="3em" height="1em" mathbackground="black"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: kernafterdegreeminus5000-rulethickness1000;">
|
||||
<mroot>
|
||||
<mspace id="base004" width="3em" height="2em" mathbackground="blue"/>
|
||||
<mspace id="index004" width="7em" height="1em" mathbackground="green"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: kernbeforedegree4000-rulethickness1000;">
|
||||
<mroot id="radical005" mathbackground="blue">
|
||||
<mspace width="3em" height="1em"/>
|
||||
<mspace id="index005" width="3em" height="1em" mathbackground="green"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: rulethickness8000;">
|
||||
<msqrt mathbackground="green" id="radical0061">
|
||||
<mspace id="base0061" width="3em" height="1em" mathbackground="blue"/>
|
||||
</msqrt>
|
||||
<mroot mathbackground="green" id="radical0062">
|
||||
<mspace id="base0062" width="3em" height="1em" mathbackground="blue"/>
|
||||
<mspace width="3em" height="1em" mathbackground="black"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: verticalgap6000-rulethickness1000;">
|
||||
<msqrt mathbackground="green" id="radical0071">
|
||||
<mspace id="base0071" width="3em" height="1em" mathbackground="blue"/>
|
||||
</msqrt>
|
||||
<mroot mathbackground="green" id="radical0072">
|
||||
<mspace id="base0072" width="3em" height="1em" mathbackground="blue"/>
|
||||
<mspace width="3em" height="1em" mathbackground="black"/>
|
||||
</mroot>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscripts and Superscripts metrics</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Basic metrics for elements msub, msup and msubsup.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for script shifts and
|
||||
spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_less_than_equal(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base");
|
||||
assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base");
|
||||
assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base");
|
||||
assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base");
|
||||
|
||||
e = 3;
|
||||
assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: space between base and subscript is small");
|
||||
assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base");
|
||||
assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base");
|
||||
assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base");
|
||||
assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base");
|
||||
}, "Respective horizontal positions");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom, e, "msub: base is placed on the baseline");
|
||||
assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom, e, "msup: base is placed on the baseline");
|
||||
assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bottom, e, "msubsup: base is placed on the baseline");
|
||||
}, "Alignment of the base on the baseline");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom, e, "msub: script is placed at the bottom of the base");
|
||||
assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e, "msup: script is placed at the top of the base");
|
||||
assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bottom, e, "msubsup: script is placed at the bottom of the base");
|
||||
assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").top, e, "msubsup: script is placed at the top of the base");
|
||||
}, "Vertical position of scripts");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBox("msubBase").left, e, "msub: width is determined by the left/right sides of base/script (+ some space after script)");
|
||||
assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBox("msupBase").left, e, "msup: width is determined by the left/right sides of base/script (+ some space after script)");
|
||||
assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub").right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "msubsup: width is determined by the left/right sides of base/scripts (+ some space after script)");
|
||||
}, "Width of scripted elements");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height, e, "msub: height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "msup: height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "msubsup: height is at least the one of the base");
|
||||
|
||||
e = 3;
|
||||
assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub: height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup: height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup: height is determined by the top/bottom sides of base/scripts");
|
||||
}, "Height of scripted elements");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
|
||||
<msub id="msub" mathbackground="green">
|
||||
<mspace id="msubBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msubSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msub>
|
||||
<msup id="msup" mathbackground="blue">
|
||||
<mspace id="msupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msup>
|
||||
<msubsup id="msubsup" mathbackground="green">
|
||||
<mspace id="msubsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msubsupSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="msubsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msubsup>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscripts and Superscripts metrics</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Basic metrics for the mmultiscript element.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for script shifts and
|
||||
spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_less_than_equal(getBox("msubBase").right, getBox("msubSub").left, e, "subscript is after base");
|
||||
assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e, "superscript is after base");
|
||||
assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "subscript is after base");
|
||||
assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "superscript is after base");
|
||||
|
||||
assert_greater_than_equal(getBox("premsubBase").right, getBox("premsubSub").left, e, "subscript is before base");
|
||||
assert_greater_than_equal(getBox("premsupBase").right, getBox("premsupSup").left, e, "superscript is before base");
|
||||
assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubsupSub").left, e, "subscript is before base");
|
||||
assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubsupSup").left, e, "superscript is before base");
|
||||
|
||||
e = 3;
|
||||
assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: space between base and subscript is small");
|
||||
assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base");
|
||||
assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base");
|
||||
assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base");
|
||||
assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base");
|
||||
|
||||
assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").right, e, "msub: space between base and subscript is small");
|
||||
assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").right, e, "msub: subscript is after base");
|
||||
assert_approx_equals(getBox("premsupBase").left, getBox("premsupSup").right, e, "msup: superscript is after base");
|
||||
assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSub").right, e, "msubsup: subscript is after base");
|
||||
assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSup").right, e, "msubsup: superscript is after base");
|
||||
}, "Respective horizontal positions");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
|
||||
assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
|
||||
assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
|
||||
assert_approx_equals(getBox("premsubBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
|
||||
assert_approx_equals(getBox("premsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
|
||||
assert_approx_equals(getBox("premsubsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
|
||||
}, "Alignment of the base on the baseline");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom, e, "script is placed at the bottom of the base");
|
||||
assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e, "script is placed at the top of the base");
|
||||
assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bottom, e, "script is placed at the bottom of the base");
|
||||
assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").top, e, "script is placed at the top of the base");
|
||||
|
||||
assert_approx_equals(getBox("premsubSub").middle, getBox("premsubBase").bottom, e, "script is placed at the bottom of the base");
|
||||
assert_approx_equals(getBox("premsupSup").middle, getBox("premsupBase").top, e, "script is placed at the top of the base");
|
||||
assert_approx_equals(getBox("premsubsupSub").middle, getBox("premsubsupBase").bottom, e, "script is placed at the bottom of the base");
|
||||
assert_approx_equals(getBox("premsubsupSup").middle, getBox("premsubsupBase").top, e, "script is placed at the top of the base");
|
||||
}, "Vertical position of scripts");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBox("msubBase").left, e, "width is determined by the left/right sides of base/script (+ some space after script)");
|
||||
assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBox("msupBase").left, e, "width is determined by the left/right sides of base/script (+ some space after script)");
|
||||
assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub").right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "width is determined by the left/right sides of base/scripts (+ some space after script)");
|
||||
|
||||
assert_approx_equals(getBox("premsub").width, getBox("premsubBase").right - getBox("premsubSub").left, e, "width is determined by the right/left sides of base/script (+ some space after script)");
|
||||
assert_approx_equals(getBox("premsup").width, getBox("premsupBase").right - getBox("premsupSup").left, e, "width is determined by the right/left sides of base/script (+ some space after script)");
|
||||
assert_approx_equals(getBox("premsubsup").width, getBox("premsubsupBase").right - Math.min(getBox("premsubsupSub").left, getBox("premsubsupSup").left), e, "width is determined by the right/left sides of base/scripts (+ some space after script)");
|
||||
}, "Width of scripted elements");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height, e, "height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("premsub").height, getBox("premsubBase").height, e, "height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("premsup").height, getBox("premsupBase").height, e, "height is at least the one of the base");
|
||||
assert_greater_than_equal(getBox("premsubsup").height, getBox("premsubsupBase").height, e, "height is at least the one of the base");
|
||||
|
||||
e = 3;
|
||||
assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("premsub").height, Math.max(getBox("premsubSub").bottom, getBox("premsubBase").bottom) - getBox("premsubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("premsup").height, getBox("premsupBase").bottom - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts");
|
||||
assert_approx_equals(getBox("premsubsup").height, Math.max(getBox("premsubSub").bottom, getBox("premsubBase").bottom) - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts");
|
||||
}, "Height of scripted elements");
|
||||
|
||||
test(function() {
|
||||
["none", "mprescripts"].forEach(function(name) {
|
||||
var elements = document.getElementsByTagName(name);
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var box = elements[i].getBoundingClientRect();
|
||||
assert_equals(box.height * box.width, 0, "<" + name + "> " + i + " has zero is empty");
|
||||
}
|
||||
});
|
||||
}, "Size of empty elements");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
|
||||
<mmultiscripts id="msub" mathbackground="green">
|
||||
<mspace id="msubBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msubSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<none/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="msup" mathbackground="green">
|
||||
<mspace id="msupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<none/>
|
||||
<mspace id="msupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="msubsup" mathbackground="green">
|
||||
<mspace id="msubsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msubsupSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="msubsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="premsub" mathbackground="green">
|
||||
<mspace id="premsubBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="premsubSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<none/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="premsup" mathbackground="green">
|
||||
<mspace id="premsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<none/>
|
||||
<mspace id="premsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="premsubsup" mathbackground="green">
|
||||
<mspace id="premsubsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="premsubsupSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="premsubsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscripts and Superscripts metrics</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Basic metrics for the mmultiscript element with many scripts.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for script shifts and
|
||||
spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 1;
|
||||
for (var i = 0; i < 5; i++)
|
||||
assert_approx_equals(getBox("multi" + i + "base").middle, getBox("baseline").bottom, e, "base " + i + "is placed on the baseline");
|
||||
}, "Alignment of the base on the baseline");
|
||||
|
||||
test(function() {
|
||||
var e = 5;
|
||||
assert_approx_equals(getBox("multi0").width, 30, e, "width of multi0");
|
||||
assert_approx_equals(getBox("multi0").height, 30, e, "height of multi0");
|
||||
assert_approx_equals(getBox("multi1").width, 30, e, "width of multi1");
|
||||
assert_approx_equals(getBox("multi1").height, 30, e, "height of multi1");
|
||||
for (i = 2; i <= 4; i++) {
|
||||
var scriptedBox = getBox("multi" + i);
|
||||
var lastPostScript = getBox("multi" + i + "postsup" + (i - 1));
|
||||
var firstPreScript = getBox("multi" + i + "presub1");
|
||||
assert_approx_equals(scriptedBox.height, firstPreScript.bottom - lastPostScript.top, e, "height of multiscript" + i);
|
||||
assert_approx_equals(scriptedBox.width, lastPostScript.right - firstPreScript.left, e, "width of multiscript" + i);
|
||||
}
|
||||
}, "Dimensions of the scripted elements");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
for (var i = 2; i <= 4; i++) {
|
||||
var base = getBox("multi" + i + "base");
|
||||
for (var j = 1; j < i; j++) {
|
||||
var presup = getBox("multi" + i + "presup" + j);
|
||||
var postsup = getBox("multi" + i + "postsup" + j);
|
||||
var presub = getBox("multi" + i + "presub" + j);
|
||||
var postsub = getBox("multi" + i + "postsub" + j);
|
||||
assert_approx_equals(base.top, presup.middle, e, "multi" + i + " " + j + " presup script");
|
||||
assert_approx_equals(base.top, postsup.middle, e, "multi" + i + " " + j + " postsup script");
|
||||
assert_approx_equals(base.bottom, presub.middle, e, "multi" + i + " " + j + " presub script");
|
||||
assert_approx_equals(base.bottom, postsub.middle, e, "multi" + i + " " + j + " postsub script");
|
||||
}
|
||||
}
|
||||
}, "Vertical positions of scripts");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
for (var i = 2; i <= 4; i++) {
|
||||
var base = getBox("multi" + i + "base");
|
||||
for (var j = 1; j < i; j++) {
|
||||
var presup = getBox("multi" + i + "presup" + j);
|
||||
var postsup = getBox("multi" + i + "postsup" + j);
|
||||
var presub = getBox("multi" + i + "presub" + j);
|
||||
var postsub = getBox("multi" + i + "postsub" + j);
|
||||
assert_approx_equals(presup.right, presub.right, e, "multi" + i + "pre");
|
||||
assert_approx_equals(postsup.left, postsub.left, e, "multi" + i + "post");
|
||||
}
|
||||
}
|
||||
}, "Horizontal alignment of scripts");
|
||||
|
||||
test(function() {
|
||||
for (var i = 2; i <= 4; i++) {
|
||||
var base = getBox("multi" + i + "base");
|
||||
var firstPostScript = getBox("multi" + i + "postsub1");
|
||||
var lastPreScript = getBox("multi" + i + "presup" + (i - 1));
|
||||
assert_less_than_equal(base.right, firstPostScript.left, 1, "postcripts are after base");
|
||||
assert_less_than_equal(lastPreScript.right, base.left, 1, "prescripts are before base");
|
||||
assert_approx_equals(base.right, firstPostScript.left, 5, "spacing after base is not too large");
|
||||
assert_approx_equals(lastPreScript.right, base.left, 5, "spacing before base is not too large");
|
||||
for (var j = 1; j < i - 1; j++) {
|
||||
var post = getBox("multi" + i + "postsub" + j);
|
||||
var postNext = getBox("multi" + i + "postsub" + (j + 1));
|
||||
var pre = getBox("multi" + i + "presup" + j);
|
||||
var preNext = getBox("multi" + i + "presup" + (j + 1));
|
||||
assert_less_than_equal(post.right, postNext.left, 1, "multi" + i + "order post" + j + " is before its successor");
|
||||
assert_less_than_equal(pre.right, preNext.left, 1, "multi" + i + "order pre" + j + " is before its successor");
|
||||
assert_approx_equals(post.right, postNext.left, 5, "multi" + i + "space after post" + j + " is not too large");
|
||||
assert_approx_equals(pre.right, preNext.left, 5, "multi" + i + "space after pre" + j + " is not too large");
|
||||
}
|
||||
}
|
||||
}, "Horizontal positions of scripts");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
|
||||
<mmultiscripts id="multi0" mathbackground="green">
|
||||
<mspace id="multi0base" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="multi1" mathbackground="green">
|
||||
<mspace id="multi1base" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="multi2" mathbackground="green">
|
||||
<mspace id="multi2base" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="multi2postsub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi2postsup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi2presub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi2presup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="multi3" mathbackground="green">
|
||||
<mspace id="multi3base" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="multi3postsub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi3postsup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi3postsub2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi3postsup2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi3presub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi3presup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi3presub2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi3presup2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="multi4" mathbackground="green">
|
||||
<mspace id="multi4base" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="multi4postsub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4postsup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4postsub2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4postsup2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4postsub3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4postsup3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi4presub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4presup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4presub2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4presup2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4presub3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi4presup3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<mmultiscripts id="multi5" mathbackground="green">
|
||||
<mspace id="multi5base" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="multi5postsub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsub2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsup2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsub3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsup3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsub4" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5postsup4" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi5presub1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presup1" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presub2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presup2" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presub3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presup3" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presub4" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi5presup4" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscripts and Superscripts metrics</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Verify metrics of scripted elements for bases of different heights.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for script shifts and
|
||||
spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
var sizeArray = [50, 75, 100];
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 1;
|
||||
sizeArray.forEach(function(size) {
|
||||
assert_approx_equals(getBox("msub" + size + "base").middle, getBox("baseline").bottom, e, "msub base " + size + "is placed on the baseline");
|
||||
assert_approx_equals(getBox("msup" + size + "base").middle, getBox("baseline").bottom, e, "msup base " + size + "is placed on the baseline");
|
||||
assert_approx_equals(getBox("msubsup" + size + "base").middle, getBox("baseline").bottom, e, "msubsup base " + size + "is placed on the baseline");
|
||||
assert_approx_equals(getBox("multi" + size + "base").middle, getBox("baseline").bottom, e, "mmultiscripts base " + size + "is placed on the baseline");
|
||||
});
|
||||
}, "Alignment on the baseline for bases of different heights");
|
||||
|
||||
test(function() {
|
||||
var e = 5;
|
||||
sizeArray.forEach(function(size) {
|
||||
assert_approx_equals(getBox("msub" + size + "sub").middle, getBox("msub" + size + "base").bottom, e, "msub script " + size + "is placed at the top of of the base");
|
||||
});
|
||||
}, "Vertical position of the scripts for bases of different heights");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
|
||||
<msub id="msub50">
|
||||
<mspace id="msub50base" width="30px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="msub50sub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msub>
|
||||
<msup id="msup50">
|
||||
<mspace id="msup50base" width="30px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="msup50sup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msup>
|
||||
<msubsup id="msubsup50">
|
||||
<mspace id="msubsup50base" width="30px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="msubsup50sub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="msubsup50sup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msubsup>
|
||||
<mmultiscripts id="multi50">
|
||||
<mspace id="multi50base" width="30px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="multi50postsub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi50postsup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi50presub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi50presup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<msub id="msub75">
|
||||
<mspace id="msub75base" width="30px" height="75px" depth="75px" mathbackground="black"/>
|
||||
<mspace id="msub75sub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msub>
|
||||
<msup id="msup75">
|
||||
<mspace id="msup75base" width="30px" height="75px" depth="75px" mathbackground="black"/>
|
||||
<mspace id="msup75sup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msup>
|
||||
<msubsup id="msubsup75">
|
||||
<mspace id="msubsup75base" width="30px" height="75px" depth="75px" mathbackground="black"/>
|
||||
<mspace id="msubsup75sub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="msubsup75sup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msubsup>
|
||||
<mmultiscripts id="multi75">
|
||||
<mspace id="multi75base" width="30px" height="75px" depth="75px" mathbackground="black"/>
|
||||
<mspace id="multi75postsub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi75postsup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi75presub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi75presub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
<msub id="msub100">
|
||||
<mspace id="msub100base" width="30px" height="100px" depth="100px" mathbackground="black"/>
|
||||
<mspace id="msub100sub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msub>
|
||||
<msup id="msup100">
|
||||
<mspace id="msup100base" width="30px" height="100px" depth="100px" mathbackground="black"/>
|
||||
<mspace id="msup100sup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msup>
|
||||
<msubsup id="msubsup100">
|
||||
<mspace id="msubsup100base" width="30px" height="100px" depth="100px" mathbackground="black"/>
|
||||
<mspace id="msubsup100sub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="msubsup100sup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</msubsup>
|
||||
<mmultiscripts id="multi100">
|
||||
<mspace id="multi100base" width="30px" height="100px" depth="100px" mathbackground="black"/>
|
||||
<mspace id="multi100postsub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi100postsup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multi100presub" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="multi100presup" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscripts and Superscripts metrics</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Verify metrics of scripted elements with tall scripts.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for script shifts and
|
||||
spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
var sizeArray = [50, 75, 100];
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 1;
|
||||
assert_approx_equals(getBox("msubbase").middle, getBox("baseline").bottom, e, "msub base is placed on the baseline");
|
||||
assert_approx_equals(getBox("msupbase").middle, getBox("baseline").bottom, e, "msup base is placed on the baseline");
|
||||
assert_approx_equals(getBox("msubsupbase").middle, getBox("baseline").bottom, e, "msubsup base is placed on the baseline");
|
||||
assert_approx_equals(getBox("multibase").middle, getBox("baseline").bottom, e, "mmultiscripts baseis placed on the baseline");
|
||||
}, "Alignment on the baseline with different and large script heights");
|
||||
|
||||
test(function() {
|
||||
assert_greater_than(getBox("msubsub").top, getBox("msubbase").top, "msub: subscript is below the top of the base");
|
||||
assert_less_than(getBox("msupsup").bottom, getBox("msupbase").bottom, "msup: supscript is above the bottom of the base");
|
||||
assert_greater_than(getBox("msubsupsub").top, getBox("msubsupbase").top, "msubsup: subscript is below the top of the base");
|
||||
assert_less_than(getBox("msubsupsup").bottom, getBox("msubsupbase").bottom, "msubsup: supscript is above the bottom of the base");
|
||||
assert_greater_than(getBox("multipostsub").top, getBox("multibase").top, "mmultiscripts: postsubscript is below the top of the base");
|
||||
assert_less_than(getBox("multipostsup").bottom, getBox("multibase").bottom, "mmultiscripts: postsupscript is above the bottom of the base");
|
||||
assert_greater_than(getBox("multipresub").top, getBox("multibase").top, "mmultiscripts: presubscript is below the top of the base");
|
||||
assert_less_than(getBox("multipresup").bottom, getBox("multibase").bottom, "mmultiscripts: presupscript is above the bottom of the base");
|
||||
}, "Tall subscripts/superscripts are not placed too high/low");
|
||||
|
||||
test(function() {
|
||||
assert_greater_than(getBox("msubsupsub").top, getBox("msubsupsup").bottom, "msubsup: subscript is below the superscript");
|
||||
assert_greater_than(getBox("multipresub").top, getBox("multipresup").bottom, "mmultiscripts: presubscript is below the presuperscript");
|
||||
assert_greater_than(getBox("multipostsub").top, getBox("multipostsup").bottom, "mmultiscripts: postsubscript is below the postsuperscript");
|
||||
}, "No collisions for tall subscripts and superscripts");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
|
||||
<msub id="msub">
|
||||
<mspace id="msubbase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msubsub" width="10px" height="50px" depth="50px" mathbackground="black"/>
|
||||
</msub>
|
||||
<msup id="msup">
|
||||
<mspace id="msupbase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msupsup" width="10px" height="75px" depth="75px" mathbackground="black"/>
|
||||
</msup>
|
||||
<msubsup id="msubsup">
|
||||
<mspace id="msubsupbase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="msubsupsub" width="10px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="msubsupsup" width="10px" height="75px" depth="75px" mathbackground="black"/>
|
||||
</msubsup>
|
||||
<mmultiscripts id="multi">
|
||||
<mspace id="multibase" width="30px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="multipostsub" width="10px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="multipostsup" width="10px" height="75px" depth="75px" mathbackground="black"/>
|
||||
<mprescripts/>
|
||||
<mspace id="multipresub" width="10px" height="50px" depth="50px" mathbackground="black"/>
|
||||
<mspace id="multipresup" width="10px" height="75px" depth="75px" mathbackground="black"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscripts and Superscripts parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Elements msub, msup, subsup and msubsup correctly use the subscript and superscript parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: spaceafterscript3000;
|
||||
src: url("/fonts/math/scripts-spaceafterscript3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: superscriptshiftup7000;
|
||||
src: url("/fonts/math/scripts-superscriptshiftup7000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: superscriptshiftupcramped5000;
|
||||
src: url("/fonts/math/scripts-superscriptshiftupcramped5000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: subscriptshiftdown6000;
|
||||
src: url("/fonts/math/scripts-subscriptshiftdown6000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: subsuperscriptgapmin11000;
|
||||
src: url("/fonts/math/scripts-subsuperscriptgapmin11000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: subsuperscriptgapmin11000superscriptbottommaxwithsubscript3000;
|
||||
src: url("/fonts/math/scripts-subsuperscriptgapmin11000-superscriptbottommaxwithsubscript3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: subscripttopmax4000;
|
||||
src: url("/fonts/math/scripts-subscripttopmax4000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: superscriptbottommin8000;
|
||||
src: url("/fonts/math/scripts-superscriptbottommin8000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: subscriptbaselinedropmin9000;
|
||||
src: url("/fonts/math/scripts-subscriptbaselinedropmin9000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: superscriptbaselinedropmax10000;
|
||||
src: url("/fonts/math/scripts-superscriptbaselinedropmax10000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("ref001").left - getBox("sub001").right, v, epsilon, "msub: Space after subscript");
|
||||
assert_approx_equals(getBox("ref002").left - getBox("sup002").right, v, epsilon, "msup: Space after superscript");
|
||||
assert_approx_equals(getBox("ref003").left - getBox("sup003").right, v, epsilon, "msubsup: Space after superscript");
|
||||
assert_approx_equals(getBox("sup0042").left - getBox("sup0041").right, v, epsilon, "mmultiscripts: Space after first superscript");
|
||||
assert_approx_equals(getBox("sup0043").left - getBox("sup0042").right, v, epsilon, "mmultiscripts: Space after second superscript");
|
||||
assert_approx_equals(getBox("ref004").left - getBox("sup0043").right, v, epsilon, "mmultiscripts: Space after last superscript");
|
||||
}, "SpaceAfterScript");
|
||||
|
||||
test(function() {
|
||||
var v = 7000 * emToPx;
|
||||
assert_approx_equals(getBox("ref101").bottom - getBox("sup102").bottom, v, epsilon, "msup: Superscript shift");
|
||||
assert_approx_equals(getBox("ref101").bottom - getBox("sup103").bottom, v, epsilon, "msubsup: Superscript shift");
|
||||
assert_approx_equals(getBox("ref101").bottom - getBox("sup1041").bottom, v, epsilon, "mmultiscripts: First superscript shift");
|
||||
assert_approx_equals(getBox("ref101").bottom - getBox("sup1042").bottom, v, epsilon, "mmultiscripts: Second superscript shift");
|
||||
assert_approx_equals(getBox("ref101").bottom - getBox("sup1043").bottom, v, epsilon, "mmultiscripts: Last superscript shift");
|
||||
}, "SuperscriptShiftUp");
|
||||
|
||||
test(function() {
|
||||
var v = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("ref201").bottom - getBox("sup202").bottom, v, epsilon, "msup: Superscript shift");
|
||||
assert_approx_equals(getBox("ref201").bottom - getBox("sup203").bottom, v, epsilon, "msubsup: Superscript shift");
|
||||
assert_approx_equals(getBox("ref201").bottom - getBox("sup2041").bottom, v, epsilon, "mmultiscripts: First superscript shift");
|
||||
assert_approx_equals(getBox("ref201").bottom - getBox("sup2042").bottom, v, epsilon, "mmultiscripts: Second superscript shift");
|
||||
assert_approx_equals(getBox("ref201").bottom - getBox("sup2043").bottom, v, epsilon, "mmultiscripts: Last superscript shift");
|
||||
}, "SuperscriptShiftUpCramped");
|
||||
|
||||
test(function() {
|
||||
var v = 6000 * emToPx;
|
||||
assert_approx_equals(getBox("sub301").bottom - getBox("ref300").bottom, v, epsilon, "msup: Subscript shift");
|
||||
assert_approx_equals(getBox("sub302").bottom - getBox("ref300").bottom, v, epsilon, "msubsup: Subscript shift");
|
||||
assert_approx_equals(getBox("sub303").bottom - getBox("ref300").bottom, v, epsilon, "mmultiscripts: First subscript shift");
|
||||
assert_approx_equals(getBox("sub304").bottom - getBox("ref300").bottom, v, epsilon, "mmultiscripts: Second subscript shift");
|
||||
}, "SubscriptShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v = 11000 * emToPx;
|
||||
assert_approx_equals(getBox("sub4011").top - getBox("sup4012").bottom, v, epsilon, "msubsup: SubSuperscript gap");
|
||||
assert_approx_equals(getBox("sub4021").top - getBox("sup4022").bottom, v, epsilon, "mmultiscripts: SubSuperscript gap");
|
||||
}, "SubSuperscriptGapMin");
|
||||
|
||||
test(function() {
|
||||
var v1 = 11000 * emToPx;
|
||||
var v2 = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("sub501").top - getBox("sup501").bottom, v1, epsilon, "msubsup: SubSuperscript gap");
|
||||
assert_approx_equals(getBox("ref500").bottom - getBox("sup501").bottom, v2, epsilon, "msubsup: Superscript bottom");
|
||||
assert_approx_equals(getBox("sub502").top - getBox("sup502").bottom, v1, epsilon, "mmultiscripts: SubSuperscript gap");
|
||||
assert_approx_equals(getBox("ref500").bottom - getBox("sup502").bottom, v2, epsilon, "mmultiscripts: Superscript bottom");
|
||||
}, "SuperscriptBottomMaxWithSubscript");
|
||||
|
||||
test(function() {
|
||||
var v = 4000 * emToPx;
|
||||
assert_approx_equals(getBox("ref600").bottom - getBox("sub601").top, v, epsilon, "msub: Subscript top");
|
||||
}, "SubscriptTopMax");
|
||||
|
||||
test(function() {
|
||||
var v = 8000 * emToPx;
|
||||
assert_approx_equals(getBox("ref700").bottom - getBox("sub701").bottom, v, epsilon, "msub: Superscript bottom");
|
||||
}, "SuperscriptBottomMin");
|
||||
|
||||
test(function() {
|
||||
var v = 9000 * emToPx;
|
||||
assert_approx_equals(getBox("sub801").bottom - getBox("base801").bottom, v, epsilon, "msub: Superscript drop");
|
||||
}, "SubscriptBaselineDrop");
|
||||
|
||||
test(function() {
|
||||
var v = 10000 * emToPx;
|
||||
assert_approx_equals(getBox("sup901").bottom - getBox("base901").top, v, epsilon, "msup: Superscript drop");
|
||||
}, "SuperscriptBaselineDrop");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: spaceafterscript3000;">
|
||||
<msub>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub001" height="1em" width="1em" mathbackground="red"/>
|
||||
</msub>
|
||||
<mspace id="ref001" height="1em" width="1em" mathbackground="green"/>
|
||||
</math>
|
||||
<math style="font-family: spaceafterscript3000;">
|
||||
<msup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sup002" height="1em" width="1em" mathbackground="red"/>
|
||||
</msup>
|
||||
<mspace id="ref002" height="1em" width="1em" mathbackground="green"/>
|
||||
</math>
|
||||
<math style="font-family: spaceafterscript3000;">
|
||||
<msubsup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace/>
|
||||
<mspace id="sup003" height="1em" width="1em" mathbackground="red"/>
|
||||
</msubsup>
|
||||
<mspace id="ref003" height="1em" width="1em" mathbackground="green"/>
|
||||
</math>
|
||||
<math style="font-family: spaceafterscript3000;">
|
||||
<mmultiscripts>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<none/>
|
||||
<mspace id="sup0041" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sup0042" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sup0043" height="1em" width="1em" mathbackground="red"/>
|
||||
</mmultiscripts>
|
||||
<mspace id="ref004" height="1em" width="1em" mathbackground="green"/>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: superscriptshiftup7000;">
|
||||
<mspace id="ref101" height="1em" width="1em" mathbackground="green"/>
|
||||
<msup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sup102" height="1em" width="1em" mathbackground="red"/>
|
||||
</msup>
|
||||
<msubsup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace height="1em" width="1em" mathbackground="red"/>
|
||||
<mspace id="sup103" height="1em" width="1em" mathbackground="red"/>
|
||||
</msubsup>
|
||||
<mmultiscripts>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<none/>
|
||||
<mspace id="sup1041" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sup1042" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sup1043" height="1em" width="1em" mathbackground="red"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: superscriptshiftupcramped5000;">
|
||||
<msqrt>
|
||||
<mspace id="ref201" height="1em" width="1em" mathbackground="green"/>
|
||||
<msup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sup202" height="1em" width="1em" mathbackground="red"/>
|
||||
</msup>
|
||||
<msubsup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace height="1em" width="1em" mathbackground="blue"/>
|
||||
<mspace id="sup203" height="1em" width="1em" mathbackground="red"/>
|
||||
</msubsup>
|
||||
<mmultiscripts>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<none/>
|
||||
<mspace id="sup2041" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sup2042" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sup2043" height="1em" width="1em" mathbackground="red"/>
|
||||
</mmultiscripts>
|
||||
</msqrt>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: subscriptshiftdown6000;">
|
||||
<mspace id="ref300" height="1em" width="1em" mathbackground="green"/>
|
||||
<msub>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub301" height="1em" width="1em" mathbackground="red"/>
|
||||
</msub>
|
||||
<msubsup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub302" height="1em" width="1em" mathbackground="red"/>
|
||||
<mspace height="1em" width="1em" mathbackground="blue"/>
|
||||
</msubsup>
|
||||
<mmultiscripts>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub303" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
<mspace id="sub304" height="1em" width="1em" mathbackground="red"/>
|
||||
<none/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: subsuperscriptgapmin11000;">
|
||||
<msubsup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub4011" height="1em" width="1em" mathbackground="red"/>
|
||||
<mspace id="sup4012" height="1em" width="1em" mathbackground="red"/>
|
||||
</msubsup>
|
||||
<mmultiscripts>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<none/>
|
||||
<none/>
|
||||
<mspace id="sub4021" height="1em" width="1em" mathbackground="red"/>
|
||||
<mspace id="sup4022" height="1em" width="1em" mathbackground="red"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: subsuperscriptgapmin11000superscriptbottommaxwithsubscript3000;">
|
||||
<mspace id="ref500" height="1em" width="1em" mathbackground="green"/>
|
||||
<msubsup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub501" height="1em" width="1em" mathbackground="red"/>
|
||||
<mspace id="sup501" height="1em" width="1em" mathbackground="red"/>
|
||||
</msubsup>
|
||||
<mmultiscripts>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<none/>
|
||||
<none/>
|
||||
<mspace id="sub502" height="1em" width="1em" mathbackground="red"/>
|
||||
<mspace id="sup502" height="1em" width="1em" mathbackground="red"/>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: subscripttopmax4000;">
|
||||
<mspace id="ref600" height="1em"
|
||||
width="1em" mathbackground="green"/>
|
||||
<msub>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub601" height="10em"
|
||||
width="1em" mathbackground="red"/>
|
||||
</msub>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: superscriptbottommin8000;">
|
||||
<mspace id="ref700" height="1em"
|
||||
width="1em" mathbackground="green"/>
|
||||
<msup>
|
||||
<mspace height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub701" depth="1em"
|
||||
width="1em" mathbackground="red"/>
|
||||
</msup>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: subscriptbaselinedropmin9000;">
|
||||
<msub>
|
||||
<mspace id="base801" height="2em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sub801" height="1em"
|
||||
width="1em" mathbackground="red"/>
|
||||
</msub>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: superscriptbaselinedropmax10000;">
|
||||
<msup>
|
||||
<mspace id="base901" height="15em" width="2em" mathbackground="blue"/>
|
||||
<mspace id="sup901" height="1em"
|
||||
width="1em" mathbackground="red"/>
|
||||
</msup>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Underscripts and Overscripts parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Elements munder, mover, munderover correctly .">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace, mo {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/* This test does not use any specific fonts and so the exact rules are not
|
||||
specified precisely. We assume reasonable values for script shifts and
|
||||
spacing. */
|
||||
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
box.center = (box.left + box.right) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var e = 1;
|
||||
for (var i = 0; i <= 3; i++) {
|
||||
assert_approx_equals(getBox("under" + i + "base").middle, getBox("baseline").bottom, e, "munder " + i + ": base is placed on the baseline");
|
||||
assert_approx_equals(getBox("over" + i + "base").middle, getBox("baseline").bottom, e, "mover " + i + ": base is placed on the baseline");
|
||||
}
|
||||
for (var i = 0; i <= 5; i++) {
|
||||
assert_approx_equals(getBox("underover" + i + "base").middle, getBox("baseline").bottom, e, "munderover " + i + ": base is placed on the baseline");
|
||||
}
|
||||
}, "Alignment of the base on the baseline");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
for (var i = 0; i <= 3; i++) {
|
||||
assert_approx_equals(getBox("under" + i + "under").center, getBox("under" + i + "base").center, e, "munder " + i + ": base and script are horizontally centered");
|
||||
assert_approx_equals(getBox("over" + i + "over").center, getBox("over" + i + "base").center, e, "mover " + i + ": base and script are horizontally centered");
|
||||
}
|
||||
for (var i = 0; i <= 5; i++) {
|
||||
assert_approx_equals(getBox("underover" + i + "under").center, getBox("underover" + i + "base").center, e, "munderover " + i + ": base and underscript are horizontally centered");
|
||||
assert_approx_equals(getBox("underover" + i + "over").center, getBox("underover" + i + "base").center, e, "munderover " + i + ": base and overscript are horizontally centered");
|
||||
}
|
||||
}, "Horizontal alignments of base and scripts");
|
||||
|
||||
test(function() {
|
||||
for (var i = 0; i <= 3; i++) {
|
||||
assert_greater_than_equal(getBox("under" + i + "under").top, getBox("under" + i + "base").bottom, "munder " + i + ": script is under base");
|
||||
assert_less_than_equal(getBox("over" + i + "over").bottom, getBox("over" + i + "base").top, "mover " + i + ": script is over base");
|
||||
}
|
||||
for (var i = 0; i <= 5; i++) {
|
||||
assert_greater_than_equal(getBox("underover" + i + "under").top, getBox("underover" + i + "base").bottom, "munderover " + i + ": underscript is under base");
|
||||
assert_less_than_equal(getBox("underover" + i + "over").bottom, getBox("underover" + i + "base").top, "munderover " + i + ": overscript is over base");
|
||||
}
|
||||
}, "Relative vertical positions of base and scripts");
|
||||
|
||||
test(function() {
|
||||
var e = 1;
|
||||
for (var i = 0; i <= 3; i++) {
|
||||
assert_approx_equals(getBox("under" + i).width, Math.max(getBox("under" + i + "base").width, getBox("under" + i + "under").width), e, "munder " + i + ": width is determined by the maximum of width of base and script");
|
||||
assert_approx_equals(getBox("over" + i).width, Math.max(getBox("over" + i + "base").width, getBox("over" + i + "over").width), e, "mover " + i + ": width is determined by the maximum of width of base and script");
|
||||
}
|
||||
for (var i = 0; i <= 5; i++) {
|
||||
assert_approx_equals(getBox("underover" + i).width, Math.max(getBox("underover" + i + "base").width, getBox("underover" + i + "under").width, getBox("underover" + i + "over").width), e, "munderover " + i + ": width is determined by the maximum of width of base and scripts");
|
||||
}
|
||||
}, "Width of scripted elements");
|
||||
|
||||
test(function() {
|
||||
var e = 3;
|
||||
for (var i = 0; i <= 3; i++) {
|
||||
assert_approx_equals(getBox("under" + i).height, getBox("under" + i + "base").height + getBox("under" + i + "under").height + e, e, "munder " + i + ": height is determined by the sum of heights of base and script plus some spacing.");
|
||||
assert_approx_equals(getBox("over" + i).height, getBox("over" + i + "base").height + getBox("over" + i + "over").height + e, e, "mover " + i + ": height is determined by the sum of heights of base and script plus some spacing.");
|
||||
}
|
||||
for (var i = 0; i <= 5; i++) {
|
||||
assert_approx_equals(getBox("underover" + i).height, getBox("underover" + i + "base").height + getBox("underover" + i + "under").height + getBox("underover" + i + "over").height + e, e, "munderover " + i + ": height is determined by the sum heights of base and scripts");
|
||||
}
|
||||
}, "Height of scripted elements");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math>
|
||||
<mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
|
||||
<munder id="under0">
|
||||
<mspace id="under0base" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="under0under" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munder>
|
||||
<munder id="under1">
|
||||
<mspace id="under1base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="under1under" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munder>
|
||||
<munder id="under2">
|
||||
<mspace id="under2base" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="under2under" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munder>
|
||||
<munder id="under3">
|
||||
<mspace id="under3base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="under3under" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
</munder>
|
||||
<mover id="over0">
|
||||
<mspace id="over0base" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="over0over" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mover>
|
||||
<mover id="over1">
|
||||
<mspace id="over1base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="over1over" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mover>
|
||||
<mover id="over2">
|
||||
<mspace id="over2base" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="over2over" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</mover>
|
||||
<mover id="over3">
|
||||
<mspace id="over3base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="over3over" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
</mover>
|
||||
<munderover id="underover0">
|
||||
<mspace id="underover0base" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover0under" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover0over" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munderover>
|
||||
<munderover id="underover1">
|
||||
<mspace id="underover1base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover1under" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover1over" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munderover>
|
||||
<munderover id="underover2">
|
||||
<mspace id="underover2base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover2under" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover2over" width="30px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munderover>
|
||||
<munderover id="underover3">
|
||||
<mspace id="underover3base" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="underover3under" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover3over" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munderover>
|
||||
<munderover id="underover4">
|
||||
<mspace id="underover4base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover4under" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
<mspace id="underover4over" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
</munderover>
|
||||
<munderover id="underover5">
|
||||
<mspace id="underover5base" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover5under" width="10px" height="5px" depth="5px" mathbackground="black"/>
|
||||
<mspace id="underover5over" width="10px" height="15px" depth="15px" mathbackground="black"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Underscripts and Overscripts parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Elements munder, mover, munderover correctly use the limit parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace, mo {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: lowerlimitbaselinedropmin3000;
|
||||
src: url("/fonts/math/limits-lowerlimitbaselinedropmin3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: lowerlimitgapmin11000;
|
||||
src: url("/fonts/math/limits-lowerlimitgapmin11000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: upperlimitbaselinerisemin5000;
|
||||
src: url("/fonts/math/limits-upperlimitbaselinerisemin5000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: upperlimitgapmin7000;
|
||||
src: url("/fonts/math/limits-upperlimitgapmin7000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom,
|
||||
v, epsilon, "munder: under shift");
|
||||
assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom,
|
||||
v, epsilon, "munderover: under shift");
|
||||
}, "LowerLimitBaselineDropMin");
|
||||
|
||||
test(function() {
|
||||
var v = 11000 * emToPx;
|
||||
assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom,
|
||||
v, epsilon, "munder: under gap");
|
||||
assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom,
|
||||
v, epsilon, "munderover: under gap");
|
||||
}, "LowerLimitGapMin");
|
||||
|
||||
test(function() {
|
||||
var v = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom,
|
||||
v, epsilon, "mover: over shift");
|
||||
assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom,
|
||||
v, epsilon, "munderover: over shift");
|
||||
}, "UpperLimitBaselineRiseMin");
|
||||
|
||||
test(function() {
|
||||
var v = 7000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom,
|
||||
v, epsilon, "mover: over shift");
|
||||
assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom,
|
||||
v, epsilon, "munderover: over shift");
|
||||
}, "UpperLimitGapMin");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: lowerlimitbaselinedropmin3000;">
|
||||
<mspace id="ref0001" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace id="under00011" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munderover>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace id="under00012" depth="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: lowerlimitgapmin11000;">
|
||||
<mspace id="ref0002" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace id="under00021" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munderover>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace id="under00022" depth="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: upperlimitbaselinerisemin5000;">
|
||||
<mspace id="ref0003" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace id="over00031" height="1em" width="3em" mathbackground="blue"/>
|
||||
</mover>
|
||||
<munderover>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
<mspace id="over00032" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: upperlimitgapmin7000;">
|
||||
<mspace id="ref0004" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace id="over00041" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</mover>
|
||||
<munderover>
|
||||
<mo movablelimits="false">∑</mo>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
<mspace id="over00042" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Underscripts and Overscripts parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Elements munder, mover, munderover correctly use the stretch stack parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace, mo {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: bottomshiftdown3000;
|
||||
src: url("/fonts/math/stretchstack-bottomshiftdown3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: gapbelowmin11000;
|
||||
src: url("/fonts/math/stretchstack-gapbelowmin11000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: topshiftup5000;
|
||||
src: url("/fonts/math/stretchstack-topshiftup5000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: gapabovemin7000;
|
||||
src: url("/fonts/math/stretchstack-gapabovemin7000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom,
|
||||
v, epsilon, "munder: under shift");
|
||||
assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom,
|
||||
v, epsilon, "munderover: under shift");
|
||||
}, "StretchStackBottomShiftDown");
|
||||
|
||||
test(function() {
|
||||
var v = 11000 * emToPx;
|
||||
assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom,
|
||||
v, epsilon, "munder: under gap");
|
||||
assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom,
|
||||
v, epsilon, "munderover: under gap");
|
||||
}, "StretchStackGapBelowMin");
|
||||
|
||||
test(function() {
|
||||
var v = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom,
|
||||
v, epsilon, "mover: over shift");
|
||||
assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom,
|
||||
v, epsilon, "munderover: over shift");
|
||||
}, "StretchStackTopShiftUp");
|
||||
|
||||
test(function() {
|
||||
var v = 7000 * emToPx;
|
||||
assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom,
|
||||
v, epsilon, "mover: over shift");
|
||||
assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom,
|
||||
v, epsilon, "munderover: over shift");
|
||||
}, "StretchStackGapAboveMin");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: bottomshiftdown3000;">
|
||||
<mspace id="ref0001" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder>
|
||||
<mo>→</mo>
|
||||
<mspace id="under00011" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munderover>
|
||||
<mo>→</mo>
|
||||
<mspace id="under00012" depth="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: gapbelowmin11000;">
|
||||
<mspace id="ref0002" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder>
|
||||
<mo>→</mo>
|
||||
<mspace id="under00021" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munderover>
|
||||
<mo>→</mo>
|
||||
<mspace id="under00022" depth="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: topshiftup5000;">
|
||||
<mspace id="ref0003" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover>
|
||||
<mo>→</mo>
|
||||
<mspace id="over00031" height="1em" width="3em" mathbackground="blue"/>
|
||||
</mover>
|
||||
<munderover>
|
||||
<mo>→</mo>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
<mspace id="over00032" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: gapabovemin7000;">
|
||||
<mspace id="ref0004" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover>
|
||||
<mo>→</mo>
|
||||
<mspace id="over00041" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</mover>
|
||||
<munderover>
|
||||
<mo>→</mo>
|
||||
<mspace height="1em" width="3em" mathbackground="black"/>
|
||||
<mspace id="over00042" depth="1em" width="3em" mathbackground="blue"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Underscripts and Overscripts parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Elements munder, mover, munderover correctly use underbar/overbar and AccentBaseHeight parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace, mo {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000underbarextradescender5000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-underbarextradescender5000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000underbarverticalgap7000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-underbarverticalgap7000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000overbarextraascender3000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-overbarextraascender3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000overbarverticalgap11000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-overbarverticalgap11000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 2;
|
||||
var axisBaseHeight = 4000 * emToPx;
|
||||
var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight
|
||||
var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
for (var i = 1; i <= 4; i++) {
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var baseId = ("base00" + i) + j;
|
||||
assert_approx_equals(getBox("ref00" + i).bottom,
|
||||
getBox(baseId).bottom,
|
||||
epsilon,
|
||||
"alignment of " + baseId);
|
||||
}
|
||||
}
|
||||
}, "Baseline alignment");
|
||||
|
||||
test(function() {
|
||||
for (var i = 1; i <= 4; i++) {
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var baseId = ("base00" + i) + j;
|
||||
assert_approx_equals(getBox(baseId).height,
|
||||
j == 2 || j == 5 ?
|
||||
tallBaseHeight :shortBaseHeight,
|
||||
epsilon,
|
||||
"height of " + baseId);
|
||||
}
|
||||
}
|
||||
}, "Heights of bases");
|
||||
|
||||
test(function() {
|
||||
var v = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var elId = "el001" + j;
|
||||
var baseId = "base001" + j;
|
||||
var underId = "under001" + j;
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
0, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom,
|
||||
v, epsilon,
|
||||
"extra descender below " + underId);
|
||||
}
|
||||
}, "AccentBaseHeight, UnderbarExtraDescender");
|
||||
|
||||
test(function() {
|
||||
var v = 7000 * emToPx;
|
||||
assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var elId = "el002" + j;
|
||||
var baseId = "base002" + j;
|
||||
var underId = "under002" + j;
|
||||
var gap = (j == 2 || j == 3 ? 0 : v);
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
gap, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
}
|
||||
}, "AccentBaseHeight, UnderbarVerticalGap");
|
||||
|
||||
test(function() {
|
||||
var v = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"mover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"mover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"mover: accent over short base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var elId = "el003" + j;
|
||||
var baseId = "base003" + j;
|
||||
if (j >= 4) {
|
||||
var underId = "under003" + j;
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
0, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
}
|
||||
var overId = "over003" + j;
|
||||
assert_approx_equals(getBox(overId).top - getBox(elId).top,
|
||||
v, epsilon,
|
||||
"extra ascender below " + overId);
|
||||
}
|
||||
}, "AccentBaseHeight, OverbarExtraAscender");
|
||||
|
||||
test(function() {
|
||||
v = 11000 * emToPx;
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom,
|
||||
shortBaseHeight + v, epsilon,
|
||||
"mover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"mover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"mover: accent over short base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom,
|
||||
shortBaseHeight + v, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 4; j <= 6; j++) {
|
||||
var baseId = "base004" + j;
|
||||
var underId = "under004" + j;
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
0, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
}
|
||||
}, "AccentBaseHeight, OverbarVerticalGap");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000underbarextradescender5000;">
|
||||
<mspace id="ref001" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder mathbackground="cyan" id="el0011">
|
||||
<mspace id="base0011" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0011" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0012" accentunder="true">
|
||||
<mspace id="base0012" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0012" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0013" accentunder="true">
|
||||
<mspace id="base0013" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0013" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munderover mathbackground="cyan" id="el0014">
|
||||
<mspace id="base0014" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0014" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0014" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0015" accent="true">
|
||||
<mspace id="base0015" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0015" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0015" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0016" accent="true">
|
||||
<mspace id="base0016" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0016" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0016" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000underbarverticalgap7000;">
|
||||
<mspace id="ref002" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder mathbackground="cyan" id="el0021">
|
||||
<mspace id="base0021" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0021" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0022" accentunder="true">
|
||||
<mspace id="base0022" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0022" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0023" accentunder="true">
|
||||
<mspace id="base0023" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0023" height="1em" width="3em" mathbackground="blue"/>
|
||||
</munder>
|
||||
<munderover mathbackground="cyan" id="el0024">
|
||||
<mspace id="base0024" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0024" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0024" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0025" accent="true">
|
||||
<mspace id="base0025" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0025" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0025" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0026" accent="true">
|
||||
<mspace id="base0026" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0026" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0026" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000overbarextraascender3000;">
|
||||
<mspace id="ref003" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover mathbackground="cyan" id="el0031">
|
||||
<mspace id="base0031" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="over0031" height="1em" width="3em" mathbackground="red"/>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0032" accent="true">
|
||||
<mspace id="base0032" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="over0032" height="1em" width="3em" mathbackground="red"/>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0033" accent="true">
|
||||
<mspace id="base0033" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="over0033" height="1em" width="3em" mathbackground="red"/>
|
||||
</mover>
|
||||
<munderover mathbackground="cyan" id="el0034">
|
||||
<mspace id="base0034" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0034" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0034" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0035" accent="true">
|
||||
<mspace id="base0035" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0035" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0035" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0036" accent="true">
|
||||
<mspace id="base0036" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0036" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0036" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000overbarverticalgap11000;">
|
||||
<mspace id="ref004" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover mathbackground="cyan" id="el0041">
|
||||
<mspace id="base0041" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="over0041" height="1em" width="3em" mathbackground="red"/>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0042" accent="true">
|
||||
<mspace id="base0042" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="over0042" height="1em" width="3em" mathbackground="red"/>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0043" accent="true">
|
||||
<mspace id="base0043" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="over0043" height="1em" width="3em" mathbackground="red"/>
|
||||
</mover>
|
||||
<munderover mathbackground="cyan" id="el0044">
|
||||
<mspace id="base0044" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0044" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0044" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0045" accent="true">
|
||||
<mspace id="base0045" height="5em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0045" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0045" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0046" accent="true">
|
||||
<mspace id="base0046" height="3em" width="1em" mathbackground="black"/>
|
||||
<mspace id="under0046" height="1em" width="3em" mathbackground="blue"/>
|
||||
<mspace id="over0046" height="1em" width="3em" mathbackground="red"/>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Underscripts and Overscripts parameters</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
|
||||
<meta name="assert" content="Elements munder, mover, munderover correctly use underbar/overbar and AccentBaseHeight parameters from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace, mo {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000underbarextradescender5000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-underbarextradescender5000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000underbarverticalgap7000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-underbarverticalgap7000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000overbarextraascender3000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-overbarextraascender3000.woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: accentbaseheight4000overbarverticalgap11000;
|
||||
src: url("/fonts/math/underover-accentbaseheight4000-overbarverticalgap11000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 2;
|
||||
var axisBaseHeight = 4000 * emToPx;
|
||||
var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight
|
||||
var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
for (var i = 1; i <= 4; i++) {
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var baseId = ("base00" + i) + j;
|
||||
assert_approx_equals(getBox("ref00" + i).bottom,
|
||||
getBox(baseId).bottom,
|
||||
epsilon,
|
||||
"alignment of " + baseId);
|
||||
}
|
||||
}
|
||||
}, "Baseline alignment");
|
||||
|
||||
test(function() {
|
||||
for (var i = 1; i <= 4; i++) {
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var baseId = ("base00" + i) + j;
|
||||
assert_approx_equals(getBox(baseId).height,
|
||||
j == 2 || j == 5 ?
|
||||
tallBaseHeight :shortBaseHeight,
|
||||
epsilon,
|
||||
"height of " + baseId);
|
||||
}
|
||||
}
|
||||
}, "Heights of bases");
|
||||
|
||||
test(function() {
|
||||
var v = 5000 * emToPx;
|
||||
assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var elId = "el001" + j;
|
||||
var baseId = "base001" + j;
|
||||
var underId = "under001" + j;
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
0, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom,
|
||||
v, epsilon,
|
||||
"extra descender below " + underId);
|
||||
}
|
||||
}, "AccentBaseHeight, UnderbarExtraDescender");
|
||||
|
||||
test(function() {
|
||||
var v = 7000 * emToPx;
|
||||
assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var elId = "el002" + j;
|
||||
var baseId = "base002" + j;
|
||||
var underId = "under002" + j;
|
||||
var gap = (j == 2 || j == 3 ? 0 : v);
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
gap, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
}
|
||||
}, "AccentBaseHeight, UnderbarVerticalGap");
|
||||
|
||||
test(function() {
|
||||
var v = 3000 * emToPx;
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"mover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"mover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"mover: accent over short base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom,
|
||||
shortBaseHeight, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 1; j <= 6; j++) {
|
||||
var elId = "el003" + j;
|
||||
var baseId = "base003" + j;
|
||||
if (j >= 4) {
|
||||
var underId = "under003" + j;
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
0, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
}
|
||||
var overId = "over003" + j;
|
||||
assert_approx_equals(getBox(overId).top - getBox(elId).top,
|
||||
v, epsilon,
|
||||
"extra ascender below " + overId);
|
||||
}
|
||||
}, "AccentBaseHeight, OverbarExtraAscender");
|
||||
|
||||
test(function() {
|
||||
v = 11000 * emToPx;
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom,
|
||||
shortBaseHeight + v, epsilon,
|
||||
"mover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"mover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"mover: accent over short base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom,
|
||||
shortBaseHeight + v, epsilon,
|
||||
"munderover: nonaccent over short base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom,
|
||||
tallBaseHeight, epsilon,
|
||||
"munderover: accent over tall base");
|
||||
assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom,
|
||||
axisBaseHeight, epsilon,
|
||||
"munderover: accent over short base");
|
||||
for (var j = 4; j <= 6; j++) {
|
||||
var baseId = "base004" + j;
|
||||
var underId = "under004" + j;
|
||||
assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
|
||||
0, epsilon,
|
||||
"gap between " + baseId + " and " + underId);
|
||||
}
|
||||
}, "AccentBaseHeight, OverbarVerticalGap");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000underbarextradescender5000;">
|
||||
<mspace id="ref001" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder mathbackground="cyan" id="el0011">
|
||||
<mspace id="base0011" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0011" mathcolor="blue">°</mo>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0012">
|
||||
<mspace id="base0012" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0012" mathcolor="blue">˘</mo>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0013">
|
||||
<mspace id="base0013" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0013" mathcolor="blue">˘</mo>
|
||||
</munder>
|
||||
<munderover mathbackground="cyan" id="el0014">
|
||||
<mspace id="base0014" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0014" mathcolor="blue">°</mo>
|
||||
<mo id="over0014" mathcolor="red">°</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0015" accent="true">
|
||||
<mspace id="base0015" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0015" mathcolor="blue">˘</mo>
|
||||
<mo id="over0015" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0016" accent="true">
|
||||
<mspace id="base0016" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0016" mathcolor="blue">˘</mo>
|
||||
<mo id="over0016" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000underbarverticalgap7000;">
|
||||
<mspace id="ref002" height="1em" width="3em" mathbackground="green"/>
|
||||
<munder mathbackground="cyan" id="el0021" accentunder="false">
|
||||
<mspace id="base0021" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0021" mathcolor="blue">˘</mo>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0022">
|
||||
<mspace id="base0022" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0022" mathcolor="blue" accent="true">˘</mo>
|
||||
</munder>
|
||||
<munder mathbackground="cyan" id="el0023">
|
||||
<mspace id="base0023" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0023" mathcolor="blue" accent="true">°</mo>
|
||||
</munder>
|
||||
<munderover mathbackground="cyan" id="el0024">
|
||||
<mspace id="base0024" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0024" mathcolor="blue" accent="false">˘</mo>
|
||||
<mo id="over0024" mathcolor="red" accent="false">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0025">
|
||||
<mspace id="base0025" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0025" mathcolor="blue" accent="false">˘</mo>
|
||||
<mo id="over0025" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0026">
|
||||
<mspace id="base0026" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0026" mathcolor="blue" accent="false">˘</mo>
|
||||
<mo id="over0026" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000overbarextraascender3000;">
|
||||
<mspace id="ref003" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover mathbackground="cyan" id="el0031">
|
||||
<mspace id="base0031" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="over0031" mathcolor="red">°</mo>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0032" accent="true">
|
||||
<mspace id="base0032" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="over0032" mathcolor="red">°</mo>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0033">
|
||||
<mspace id="base0033" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="over0033" mathcolor="red">˘</mo>
|
||||
</mover>
|
||||
<munderover mathbackground="cyan" id="el0034">
|
||||
<mspace id="base0034" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0034" mathcolor="blue">°</mo>
|
||||
<mo id="over0034" mathcolor="red" accent="false">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0035" accent="true">
|
||||
<mspace id="base0035" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0035" mathcolor="blue">˘</mo>
|
||||
<mo id="over0035" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0036" accent="true">
|
||||
<mspace id="base0036" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0036" mathcolor="blue">˘</mo>
|
||||
<mo id="over0036" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
<math style="font-family: accentbaseheight4000overbarverticalgap11000;">
|
||||
<mspace id="ref004" height="1em" width="3em" mathbackground="green"/>
|
||||
<mover mathbackground="cyan" id="el0041">
|
||||
<mspace id="base0041" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="over0041" mathcolor="red">°</mo>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0042" accent="true">
|
||||
<mspace id="base0042" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="over0042" mathcolor="red">°</mo>
|
||||
</mover>
|
||||
<mover mathbackground="cyan" id="el0043">
|
||||
<mspace id="base0043" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="over0043" mathcolor="red">˘</mo>
|
||||
</mover>
|
||||
<munderover mathbackground="cyan" id="el0044">
|
||||
<mspace id="base0044" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0044" mathcolor="blue">°</mo>
|
||||
<mo id="over0044" mathcolor="red" accent="false">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0045" accent="true">
|
||||
<mspace id="base0045" height="5em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0045" mathcolor="blue">˘</mo>
|
||||
<mo id="over0045" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
<munderover mathbackground="cyan" id="el0046" accent="true">
|
||||
<mspace id="base0046" height="3em" width="1em" mathbackground="black"/>
|
||||
<mo id="under0046" mathcolor="blue">˘</mo>
|
||||
<mo id="over0046" mathcolor="red">˘</mo>
|
||||
</munderover>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Space</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS2.SSS6">
|
||||
<meta name="assert" content="Verify mspace metrics for different values of height, depth and width">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
function getBox(aId) {
|
||||
var box = document.getElementById(aId).getBoundingClientRect();
|
||||
box.middle = (box.bottom + box.top) / 2;
|
||||
box.center = (box.left + box.right) / 2;
|
||||
return box;
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var empty = getBox("empty");
|
||||
assert_equals(empty.width, 0, "zero width");
|
||||
assert_approx_equals(getBox("baseline").bottom - empty.top, 0, epsilon, "zero depth");
|
||||
assert_approx_equals(empty.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth");
|
||||
}, "Empty mspace");
|
||||
|
||||
test(function() {
|
||||
for (var i = 0; i <= 2; i++) {
|
||||
var space = getBox("width" + i);
|
||||
assert_approx_equals(space.width, 25*(i+1), epsilon, "width " + i);
|
||||
assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i);
|
||||
assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i);
|
||||
}
|
||||
}, "Different widths");
|
||||
|
||||
test(function() {
|
||||
for (var i = 0; i <= 2; i++) {
|
||||
var space = getBox("height" + i);
|
||||
assert_equals(space.width, 0, "width" + i);
|
||||
assert_approx_equals(getBox("baseline").bottom - space.top, 25*(i+1), epsilon, "height" + i);
|
||||
assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i);
|
||||
}
|
||||
}, "Different heights");
|
||||
|
||||
test(function() {
|
||||
for (var i = 0; i <= 2; i++) {
|
||||
var space = getBox("depth" + i);
|
||||
assert_equals(space.width, 0, "width" + i);
|
||||
assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i);
|
||||
assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i);
|
||||
}
|
||||
}, "Different depths");
|
||||
|
||||
test(function() {
|
||||
for (var i = 0; i <= 2; i++) {
|
||||
var space = getBox("mspace" + i);
|
||||
assert_approx_equals(space.width, 25*(1+i%3), epsilon, "width" + i);
|
||||
assert_approx_equals(getBox("baseline").bottom - space.top, 25*(1+(i+1)%3), epsilon, "height" + i);
|
||||
assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i);
|
||||
}
|
||||
}, "Various combinations of height, depth and width.");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
|
||||
<math>
|
||||
<mspace id="empty"/>
|
||||
<mspace id="width0" width="25px"/>
|
||||
<mspace id="width1" width="50px"/>
|
||||
<mspace id="width2" width="75px"/>
|
||||
<mspace id="height0" height="25px"/>
|
||||
<mspace id="height1" height="50px"/>
|
||||
<mspace id="height2" height="75px"/>
|
||||
<mspace id="depth0" depth="25px"/>
|
||||
<mspace id="depth1" depth="50px"/>
|
||||
<mspace id="depth2" depth="75px"/>
|
||||
<mspace id="mspace0" width="25px" height="50px" depth="75px" mathbackground="green"/>
|
||||
<mspace id="mspace1" width="50px" height="75px" depth="25px" mathbackground="blue"/>
|
||||
<mspace id="mspace2" width="75px" height="25px" depth="50px" mathbackground="green"/>
|
||||
</math>
|
||||
</p>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>space (reference)</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square and no red.</p>
|
||||
<div style="position: relative;">
|
||||
<div style="position: absolute; top: 0px; left: 0px;
|
||||
background: green; width: 200px; height: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>space</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS2.SSS6">
|
||||
<link rel="match" href="space-2-ref.html"/>
|
||||
<meta name="assert" content="Verify mspace visual rendering for different values of height, depth and width">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square and no red.</p>
|
||||
<div style="position: relative;">
|
||||
<!-- Some green and red mspaces to draw a square -->
|
||||
<div style="position: absolute; top: 0px; left: 0px;
|
||||
width: 200px; height: 200px;">
|
||||
<math style="position: absolute; top: 0px; left: 0px">
|
||||
<mspace width="50px" height="100px" depth="100px" mathbackground="green"/>
|
||||
<mspace width="50px" height="100px" depth="100px" mathbackground="green"/>
|
||||
<mspace width="25px" depth="100px" mathbackground="green"/>
|
||||
<mspace width="25px" depth="100px" mathbackground="green"/>
|
||||
<mspace width="25px" height="100px" mathbackground="green"/>
|
||||
<mspace width="25px" height="100px" mathbackground="green"/>
|
||||
</math>
|
||||
<math style="position: absolute; top: 0px; left: 0px">
|
||||
<mspace width="100px" height="20px" depth="20px" mathbackground="red"/>
|
||||
<mspace width="50px" height="100px" mathbackground="red"/>
|
||||
<mspace width="50px" depth="100px" mathbackground="red"/>
|
||||
</math>
|
||||
</div>
|
||||
<!-- These green divs should cover the red mspace elements -->
|
||||
<div style="position: absolute; top: 0px; left: 0px;
|
||||
width: 200px; height: 200px;">
|
||||
<div style="position: absolute; top: 80px; left: 0px;
|
||||
width: 100px; height: 40px; background: green"></div>
|
||||
<div style="position: absolute; top: 0px; left: 100px;
|
||||
width: 50px; height: 100px; background: green"></div>
|
||||
<div style="position: absolute; top: 100px; left: 150px;
|
||||
width: 50px; height: 100px; background: green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>table axis height</title>
|
||||
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS5">
|
||||
<meta name="assert" content="Element mtable correctly uses the axis height parameter from the MATH table.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 10px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: axisheight5000-verticalarrow14000;
|
||||
src: url("/fonts/math/axisheight5000-verticalarrow14000.woff");
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 1;
|
||||
|
||||
function getBox(aId) {
|
||||
return document.getElementById(aId).getBoundingClientRect();
|
||||
}
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", function() {
|
||||
document.fonts.ready.then(runTests);
|
||||
});
|
||||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
var v1 = 5000 * emToPx;
|
||||
var tableMiddle = (getBox("table").bottom + getBox("table").top) / 2;
|
||||
assert_approx_equals(getBox("baseline").bottom - tableMiddle,
|
||||
v1, epsilon, "mtable: axis height");
|
||||
}, "AxisHeight");
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<math style="font-family: axisheight5000-verticalarrow14000">
|
||||
<mspace id="baseline" mathbackground="green" width="50px" height="1px"/>
|
||||
<mtable id="table" mathbackground="blue"><mtr><mtd><mspace width="100px" height="1px"/></mtd></mtr></mtable>
|
||||
</math>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue