1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Edge cases for minsize and maxsize</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes">
<meta name="assert" content="Verify edge cases for minsize and maxsize .">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
math {
font: 25px/1 Ahem;
}
@font-face {
font-family: operators;
src: url("/fonts/math/operators.woff"); /* AxisHeight == 0 */
}
mo {
font-family: operators;
}
@font-face {
font-family: stretchy;
src: url("/fonts/math/stretchy.woff");
}
</style>
<script>
setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });
function runTests() {
var epsilon = 1;
var emToPx = 25;
test(function() {
assert_approx_equals(document.getElementById("negative_minsize").getBoundingClientRect().height, 5 * emToPx, epsilon);
}, `minsize < 0 is treated as 0`);
test(function() {
assert_approx_equals(document.getElementById("maxsize_less_than_minsize").getBoundingClientRect().height, 7 * emToPx, epsilon);
}, `maxsize < minsize is treated as maxsize = minsize`);
test(function() {
assert_less_than(document.getElementById("minsize_less_than_negative_maxsize").getBoundingClientRect().height, 2 * emToPx);
}, `minsize < maxsize < 0 is treated as maxsize = minsize = 0`);
test(function() {
assert_approx_equals(document.getElementById("zero_target_size_with_minsize").getBoundingClientRect().height, 2 * emToPx, epsilon);
assert_approx_equals(document.getElementById("zero_target_size_with_minsize").getBoundingClientRect().bottom - document.getElementById("zero_target_size_with_minsize_math_axis").getBoundingClientRect().bottom, emToPx, epsilon);
}, `target size = 0 is treated as Tascent = Tdescent = minsize/2`);
test(function() {
assert_approx_equals(document.getElementById("percent_minsize").getBoundingClientRect().height, 12 * emToPx, epsilon, "percent minsize");
assert_approx_equals(document.getElementById("percent_maxsize").getBoundingClientRect().height, 3 * emToPx, epsilon, "percent maxsize");
}, `minsize/maxsize percentages are relative to the unstretched size`);
test(function() {
// - The unstretched size is a lower bound for the stretched size, so
// specifying a lower minsize has no effect. This test only verifies
// that the default minsize is at most 100% the unstretched size.
const unstretched_size = 1 * emToPx;
assert_approx_equals(document.getElementById("default_minsize").getBoundingClientRect().height, unstretched_size, epsilon, "default minsize is 100%");
// Previous version of MathML Core were defining minsize as 1em rather
// than 100% the unstretched size. So try the same test with a .5em
// unstretched size.
const unstretched_size_2 = .5 * emToPx;
assert_approx_equals(document.getElementById("default_minsize_2").getBoundingClientRect().height, unstretched_size_2, epsilon, "default minsize is not 1em");
// - The target size is an upper bound for the stretched size, so
// specifying a larger maxsize has no effect. This test only
// verifies that the default maxsize is at least 300 times the
// unstretched size.
assert_approx_equals(document.getElementById("default_maxsize").getBoundingClientRect().height, 300 * emToPx, epsilon, "default maxsize is infinity");
}, `default minsize/maxsize values`);
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math>
<mrow>
<mspace width="1em" height="5em" style="background: blue"/>
<mo id="negative_minsize" minsize="-10em" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height="5em" style="background: blue"/>
<mo id="maxsize_less_than_minsize" minsize="7em" maxsize="2em" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height="5em" style="background: blue"/>
<mo id="minsize_less_than_negative_maxsize" minsize="-2em" maxsize="-1em" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace id="zero_target_size_with_minsize_math_axis" width="1em" height="0em" style="background: blue"/>
<mo id="zero_target_size_with_minsize" minsize="2em" stretchy="true" symmetric="true">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height="6em" style="background: blue"/>
<mo id="percent_minsize" minsize="1200%" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height="6em" style="background: blue"/>
<mo id="percent_maxsize" maxsize="300%" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height=".5em" style="background: blue"/>
<mo id="default_minsize" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height=".25em" style="background: blue"/>
<mo style="font-family: stretchy" id="default_minsize_2" stretchy="true" symmetric="false">↨</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
<p>
<math>
<mrow>
<mspace width="1em" height="300em" style="background: blue"/>
<mo id="default_maxsize" stretchy="true" symmetric="false">⥯</mo>
<mpadded height="0" depth="0"><mn><!-- not space like --></mn></mpadded>
</mrow>
</math>
</p>
</body>
</html>
|