1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Underscripts and Overscripts parameters</title>
6<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
7<meta name="assert" content="Elements munder, mover, munderover correctly use underbar/overbar and AccentBaseHeight parameters from the MATH table.">
8<script src="../../../../../resources/testharness.js"></script>
9<script src="../../../../../resources/testharnessreport.js"></script>
10<style>
11 math, mspace, mo {
12 font-size: 10px;
13 }
14 @font-face {
15 font-family: accentbaseheight4000underbarextradescender5000;
16 src: url("../../../fonts/math/underover-accentbaseheight4000-underbarextradescender5000.woff");
17 }
18 @font-face {
19 font-family: accentbaseheight4000underbarverticalgap7000;
20 src: url("../../../fonts/math/underover-accentbaseheight4000-underbarverticalgap7000.woff");
21 }
22 @font-face {
23 font-family: accentbaseheight4000overbarextraascender3000;
24 src: url("../../../fonts/math/underover-accentbaseheight4000-overbarextraascender3000.woff");
25 }
26 @font-face {
27 font-family: accentbaseheight4000overbarverticalgap11000;
28 src: url("../../../fonts/math/underover-accentbaseheight4000-overbarverticalgap11000.woff");
29 }
30</style>
31<script>
32 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
33 var epsilon = 2;
34 var axisBaseHeight = 4000 * emToPx;
35 var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight
36 var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight
37
38 function getBox(aId) {
39 return document.getElementById(aId).getBoundingClientRect();
40 }
41
42 setup({ explicit_done: true });
43 window.addEventListener("load", function() {
44 document.fonts.ready.then(function() {
45 window.setTimeout(runTests, 250);
46 });
47 });
48
49 function runTests() {
50 test(function() {
51 for (var i = 1; i <= 4; i++) {
52 for (var j = 1; j <= 6; j++) {
53 var baseId = ("base00" + i) + j;
54 assert_approx_equals(getBox("ref00" + i).bottom,
55 getBox(baseId).bottom,
56 epsilon,
57 "alignment of " + baseId);
58 }
59 }
60 }, "Baseline alignment");
61
62 test(function() {
63 for (var i = 1; i <= 4; i++) {
64 for (var j = 1; j <= 6; j++) {
65 var baseId = ("base00" + i) + j;
66 assert_approx_equals(getBox(baseId).height,
67 j == 2 || j == 5 ?
68 tallBaseHeight :shortBaseHeight,
69 epsilon,
70 "height of " + baseId);
71 }
72 }
73 }, "Heights of bases");
74
75 test(function() {
76 var v = 5000 * emToPx;
77 assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom,
78 shortBaseHeight, epsilon,
79 "munderover: nonaccent over short base");
80 assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom,
81 tallBaseHeight, epsilon,
82 "munderover: accent over tall base");
83 assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom,
84 axisBaseHeight, epsilon,
85 "munderover: accent over short base");
86 for (var j = 1; j <= 6; j++) {
87 var elId = "el001" + j;
88 var baseId = "base001" + j;
89 var underId = "under001" + j;
90 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
91 0, epsilon,
92 "gap between " + baseId + " and " + underId);
93 assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom,
94 v, epsilon,
95 "extra descender below " + underId);
96 }
97 }, "AccentBaseHeight, UnderbarExtraDescender");
98
99 test(function() {
100 var v = 7000 * emToPx;
101 assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom,
102 shortBaseHeight, epsilon,
103 "munderover: nonaccent over short base");
104 assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom,
105 tallBaseHeight, epsilon,
106 "munderover: accent over tall base");
107 assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom,
108 axisBaseHeight, epsilon,
109 "munderover: accent over short base");
110 for (var j = 1; j <= 6; j++) {
111 var elId = "el002" + j;
112 var baseId = "base002" + j;
113 var underId = "under002" + j;
114 var gap = document.getElementById(elId).getAttribute("accentunder") === "true" ? 0 : v;
115 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
116 gap, epsilon,
117 "gap between " + baseId + " and " + underId);
118 }
119 }, "AccentBaseHeight, UnderbarVerticalGap");
120
121 test(function() {
122 var v = 3000 * emToPx;
123 assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom,
124 shortBaseHeight, epsilon,
125 "mover: nonaccent over short base");
126 assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom,
127 tallBaseHeight, epsilon,
128 "mover: accent over tall base");
129 assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom,
130 axisBaseHeight, epsilon,
131 "mover: accent over short base");
132 assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom,
133 shortBaseHeight, epsilon,
134 "munderover: nonaccent over short base");
135 assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom,
136 tallBaseHeight, epsilon,
137 "munderover: accent over tall base");
138 assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom,
139 axisBaseHeight, epsilon,
140 "munderover: accent over short base");
141 for (var j = 1; j <= 6; j++) {
142 var elId = "el003" + j;
143 var baseId = "base003" + j;
144 if (j >= 4) {
145 var underId = "under003" + j;
146 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
147 0, epsilon,
148 "gap between " + baseId + " and " + underId);
149 }
150 var overId = "over003" + j;
151 assert_approx_equals(getBox(overId).top - getBox(elId).top,
152 v, epsilon,
153 "extra ascender below " + overId);
154 }
155 }, "AccentBaseHeight, OverbarExtraAscender");
156
157 test(function() {
158 v = 11000 * emToPx;
159 assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom,
160 shortBaseHeight + v, epsilon,
161 "mover: nonaccent over short base");
162 assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom,
163 tallBaseHeight, epsilon,
164 "mover: accent over tall base");
165 assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom,
166 axisBaseHeight, epsilon,
167 "mover: accent over short base");
168 assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom,
169 shortBaseHeight + v, epsilon,
170 "munderover: nonaccent over short base");
171 assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom,
172 tallBaseHeight, epsilon,
173 "munderover: accent over tall base");
174 assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom,
175 axisBaseHeight, epsilon,
176 "munderover: accent over short base");
177 for (var j = 4; j <= 6; j++) {
178 var baseId = "base004" + j;
179 var underId = "under004" + j;
180 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
181 0, epsilon,
182 "gap between " + baseId + " and " + underId);
183 }
184 }, "AccentBaseHeight, OverbarVerticalGap");
185
186 done();
187 }
188</script>
189</head>
190<body>
191 <p>
192 <math style="font-family: accentbaseheight4000underbarextradescender5000;">
193 <mspace id="ref001" height="1em" width="3em" mathbackground="green"/>
194 <munder mathbackground="cyan" id="el0011">
195 <mspace id="base0011" height="3em" width="1em" mathbackground="black"/>
196 <mspace id="under0011" height="1em" width="3em" mathbackground="blue"/>
197 </munder>
198 <munder mathbackground="cyan" id="el0012" accentunder="true">
199 <mspace id="base0012" height="5em" width="1em" mathbackground="black"/>
200 <mspace id="under0012" height="1em" width="3em" mathbackground="blue"/>
201 </munder>
202 <munder mathbackground="cyan" id="el0013" accentunder="true">
203 <mspace id="base0013" height="3em" width="1em" mathbackground="black"/>
204 <mspace id="under0013" height="1em" width="3em" mathbackground="blue"/>
205 </munder>
206 <munderover mathbackground="cyan" id="el0014">
207 <mspace id="base0014" height="3em" width="1em" mathbackground="black"/>
208 <mspace id="under0014" height="1em" width="3em" mathbackground="blue"/>
209 <mspace id="over0014" height="1em" width="3em" mathbackground="red"/>
210 </munderover>
211 <munderover mathbackground="cyan" id="el0015" accent="true">
212 <mspace id="base0015" height="5em" width="1em" mathbackground="black"/>
213 <mspace id="under0015" height="1em" width="3em" mathbackground="blue"/>
214 <mspace id="over0015" height="1em" width="3em" mathbackground="red"/>
215 </munderover>
216 <munderover mathbackground="cyan" id="el0016" accent="true">
217 <mspace id="base0016" height="3em" width="1em" mathbackground="black"/>
218 <mspace id="under0016" height="1em" width="3em" mathbackground="blue"/>
219 <mspace id="over0016" height="1em" width="3em" mathbackground="red"/>
220 </munderover>
221 </math>
222 </p>
223 <hr/>
224 <p>
225 <math style="font-family: accentbaseheight4000underbarverticalgap7000;">
226 <mspace id="ref002" height="1em" width="3em" mathbackground="green"/>
227 <munder mathbackground="cyan" id="el0021">
228 <mspace id="base0021" height="3em" width="1em" mathbackground="black"/>
229 <mspace id="under0021" height="1em" width="3em" mathbackground="blue"/>
230 </munder>
231 <munder mathbackground="cyan" id="el0022" accentunder="true">
232 <mspace id="base0022" height="5em" width="1em" mathbackground="black"/>
233 <mspace id="under0022" height="1em" width="3em" mathbackground="blue"/>
234 </munder>
235 <munder mathbackground="cyan" id="el0023" accentunder="true">
236 <mspace id="base0023" height="3em" width="1em" mathbackground="black"/>
237 <mspace id="under0023" height="1em" width="3em" mathbackground="blue"/>
238 </munder>
239 <munderover mathbackground="cyan" id="el0024">
240 <mspace id="base0024" height="3em" width="1em" mathbackground="black"/>
241 <mspace id="under0024" height="1em" width="3em" mathbackground="blue"/>
242 <mspace id="over0024" height="1em" width="3em" mathbackground="red"/>
243 </munderover>
244 <munderover mathbackground="cyan" id="el0025" accent="true">
245 <mspace id="base0025" height="5em" width="1em" mathbackground="black"/>
246 <mspace id="under0025" height="1em" width="3em" mathbackground="blue"/>
247 <mspace id="over0025" height="1em" width="3em" mathbackground="red"/>
248 </munderover>
249 <munderover mathbackground="cyan" id="el0026" accent="true">
250 <mspace id="base0026" height="3em" width="1em" mathbackground="black"/>
251 <mspace id="under0026" height="1em" width="3em" mathbackground="blue"/>
252 <mspace id="over0026" height="1em" width="3em" mathbackground="red"/>
253 </munderover>
254 </math>
255 </p>
256 <hr/>
257 <p>
258 <math style="font-family: accentbaseheight4000overbarextraascender3000;">
259 <mspace id="ref003" height="1em" width="3em" mathbackground="green"/>
260 <mover mathbackground="cyan" id="el0031">
261 <mspace id="base0031" height="3em" width="1em" mathbackground="black"/>
262 <mspace id="over0031" height="1em" width="3em" mathbackground="red"/>
263 </mover>
264 <mover mathbackground="cyan" id="el0032" accent="true">
265 <mspace id="base0032" height="5em" width="1em" mathbackground="black"/>
266 <mspace id="over0032" height="1em" width="3em" mathbackground="red"/>
267 </mover>
268 <mover mathbackground="cyan" id="el0033" accent="true">
269 <mspace id="base0033" height="3em" width="1em" mathbackground="black"/>
270 <mspace id="over0033" height="1em" width="3em" mathbackground="red"/>
271 </mover>
272 <munderover mathbackground="cyan" id="el0034">
273 <mspace id="base0034" height="3em" width="1em" mathbackground="black"/>
274 <mspace id="under0034" height="1em" width="3em" mathbackground="blue"/>
275 <mspace id="over0034" height="1em" width="3em" mathbackground="red"/>
276 </munderover>
277 <munderover mathbackground="cyan" id="el0035" accent="true">
278 <mspace id="base0035" height="5em" width="1em" mathbackground="black"/>
279 <mspace id="under0035" height="1em" width="3em" mathbackground="blue"/>
280 <mspace id="over0035" height="1em" width="3em" mathbackground="red"/>
281 </munderover>
282 <munderover mathbackground="cyan" id="el0036" accent="true">
283 <mspace id="base0036" height="3em" width="1em" mathbackground="black"/>
284 <mspace id="under0036" height="1em" width="3em" mathbackground="blue"/>
285 <mspace id="over0036" height="1em" width="3em" mathbackground="red"/>
286 </munderover>
287 </math>
288 </p>
289 <hr/>
290 <p>
291 <math style="font-family: accentbaseheight4000overbarverticalgap11000;">
292 <mspace id="ref004" height="1em" width="3em" mathbackground="green"/>
293 <mover mathbackground="cyan" id="el0041">
294 <mspace id="base0041" height="3em" width="1em" mathbackground="black"/>
295 <mspace id="over0041" height="1em" width="3em" mathbackground="red"/>
296 </mover>
297 <mover mathbackground="cyan" id="el0042" accent="true">
298 <mspace id="base0042" height="5em" width="1em" mathbackground="black"/>
299 <mspace id="over0042" height="1em" width="3em" mathbackground="red"/>
300 </mover>
301 <mover mathbackground="cyan" id="el0043" accent="true">
302 <mspace id="base0043" height="3em" width="1em" mathbackground="black"/>
303 <mspace id="over0043" height="1em" width="3em" mathbackground="red"/>
304 </mover>
305 <munderover mathbackground="cyan" id="el0044">
306 <mspace id="base0044" height="3em" width="1em" mathbackground="black"/>
307 <mspace id="under0044" height="1em" width="3em" mathbackground="blue"/>
308 <mspace id="over0044" height="1em" width="3em" mathbackground="red"/>
309 </munderover>
310 <munderover mathbackground="cyan" id="el0045" accent="true">
311 <mspace id="base0045" height="5em" width="1em" mathbackground="black"/>
312 <mspace id="under0045" height="1em" width="3em" mathbackground="blue"/>
313 <mspace id="over0045" height="1em" width="3em" mathbackground="red"/>
314 </munderover>
315 <munderover mathbackground="cyan" id="el0046" accent="true">
316 <mspace id="base0046" height="3em" width="1em" mathbackground="black"/>
317 <mspace id="under0046" height="1em" width="3em" mathbackground="blue"/>
318 <mspace id="over0046" height="1em" width="3em" mathbackground="red"/>
319 </munderover>
320 </math>
321 </p>
322 <hr/>
323</body>
324</html>