23c7dfa744550ecf4032350fdf902f28863dac57
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / mathml / presentation-markup / scripts / underover-parameters-3.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Underscripts and Overscripts parameters</title>
6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#mundermover">
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     // Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
45     requestAnimationFrame(() => {   document.fonts.ready.then(runTests); });
46   });
47
48   function runTests() {
49     test(function() {
50       for (var i = 1; i <= 4; i++) {
51         for (var j = 1; j <= 6; j++) {
52            var baseId = ("base00" + i) + j;
53            assert_approx_equals(getBox("ref00" + i).bottom,
54                                 getBox(baseId).bottom,
55                                 epsilon,
56                                 "alignment of " + baseId);
57         }
58       }
59     }, "Baseline alignment");
60
61     test(function() {
62       for (var i = 1; i <= 4; i++) {
63         for (var j = 1; j <= 6; j++) {
64            var baseId = ("base00" + i) + j;
65            assert_approx_equals(getBox(baseId).height,
66                                 j == 2 || j == 5 ?
67                                 tallBaseHeight :shortBaseHeight,
68                                 epsilon,
69                                 "height of " + baseId);
70         }
71       }
72     }, "Heights of bases");
73
74     test(function() {
75       var v = 5000 * emToPx;
76       assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom,
77                            shortBaseHeight, epsilon,
78                            "munderover: nonaccent over short base");
79       assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom,
80                            tallBaseHeight, epsilon,
81                            "munderover: accent over tall base");
82       assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom,
83                            axisBaseHeight, epsilon,
84                            "munderover: accent over short base");
85       for (var j = 1; j <= 6; j++) {
86         var elId = "el001" + j;
87         var baseId = "base001" + j;
88         var underId = "under001" + j;
89         assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
90                              0, epsilon,
91                              "gap between " + baseId + " and " + underId);
92         assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom,
93                              v, epsilon,
94                              "extra descender below " + underId);
95       }
96     }, "AccentBaseHeight, UnderbarExtraDescender");
97
98     test(function() {
99       var v = 7000 * emToPx;
100       assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom,
101                            shortBaseHeight, epsilon,
102                            "munderover: nonaccent over short base");
103       assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom,
104                            tallBaseHeight, epsilon,
105                            "munderover: accent over tall base");
106       assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom,
107                            axisBaseHeight, epsilon,
108                            "munderover: accent over short base");
109       for (var j = 1; j <= 6; j++) {
110         var elId = "el002" + j;
111         var baseId = "base002" + j;
112         var underId = "under002" + j;
113         var gap = (j == 2 || j == 3 ? 0 : v);
114         assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
115                              gap, epsilon,
116                              "gap between " + baseId + " and " + underId);
117       }
118     }, "AccentBaseHeight, UnderbarVerticalGap");
119
120     test(function() {
121       var v = 3000 * emToPx;
122       assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom,
123                            shortBaseHeight, epsilon,
124                            "mover: nonaccent over short base");
125       assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom,
126                            tallBaseHeight, epsilon,
127                            "mover: accent over tall base");
128       assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom,
129                            axisBaseHeight, epsilon,
130                            "mover: accent over short base");
131       assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom,
132                            shortBaseHeight, epsilon,
133                            "munderover: nonaccent over short base");
134       assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom,
135                            tallBaseHeight, epsilon,
136                            "munderover: accent over tall base");
137       assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom,
138                            axisBaseHeight, epsilon,
139                            "munderover: accent over short base");
140       for (var j = 1; j <= 6; j++) {
141         var elId = "el003" + j;
142         var baseId = "base003" + j;
143         if (j >= 4) {
144           var underId = "under003" + j;
145           assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
146                                0, epsilon,
147                                "gap between " + baseId + " and " + underId);
148         }
149         var overId = "over003" + j;
150         assert_approx_equals(getBox(overId).top - getBox(elId).top,
151                              v, epsilon,
152                              "extra ascender below " + overId);
153       }
154     }, "AccentBaseHeight, OverbarExtraAscender");
155
156     test(function() {
157       v = 11000 * emToPx;
158       assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom,
159                            shortBaseHeight + v, epsilon,
160                            "mover: nonaccent over short base");
161       assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom,
162                            tallBaseHeight, epsilon,
163                            "mover: accent over tall base");
164       assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom,
165                            axisBaseHeight, epsilon,
166                            "mover: accent over short base");
167       assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom,
168                            shortBaseHeight + v, epsilon,
169                            "munderover: nonaccent over short base");
170       assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom,
171                            tallBaseHeight, epsilon,
172                            "munderover: accent over tall base");
173       assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom,
174                            axisBaseHeight, epsilon,
175                            "munderover: accent over short base");
176       for (var j = 4; j <= 6; j++) {
177         var baseId = "base004" + j;
178         var underId = "under004" + j;
179         assert_approx_equals(getBox(underId).top - getBox(baseId).bottom,
180                              0, epsilon,
181                              "gap between " + baseId + " and " + underId);
182       }
183     }, "AccentBaseHeight, OverbarVerticalGap");
184
185     done();
186   }
187 </script>
188 </head>
189 <body>
190   <div id="log"></div>
191     <p>
192       <math style="font-family: accentbaseheight4000underbarextradescender5000;">
193         <mspace id="ref001" height="1em" width="3em" style="background: green"/>
194         <munder style="background: cyan" id="el0011">
195           <mspace id="base0011" height="3em" width="1em" style="background: black"/>
196           <mspace id="under0011" height="1em" width="3em" style="background: blue"/>
197         </munder>
198         <munder style="background: cyan" id="el0012" accentunder="true">
199           <mspace id="base0012" height="5em" width="1em" style="background: black"/>
200           <mspace id="under0012" height="1em" width="3em" style="background: blue"/>
201         </munder>
202         <munder style="background: cyan" id="el0013" accentunder="true">
203           <mspace id="base0013" height="3em" width="1em" style="background: black"/>
204           <mspace id="under0013" height="1em" width="3em" style="background: blue"/>
205         </munder>
206         <munderover style="background: cyan" id="el0014">
207           <mspace id="base0014" height="3em" width="1em" style="background: black"/>
208           <mspace id="under0014" height="1em" width="3em" style="background: blue"/>
209           <mspace id="over0014" height="1em" width="3em" style="background: red"/>
210         </munderover>
211         <munderover style="background: cyan" id="el0015" accent="true">
212           <mspace id="base0015" height="5em" width="1em" style="background: black"/>
213           <mspace id="under0015" height="1em" width="3em" style="background: blue"/>
214           <mspace id="over0015" height="1em" width="3em" style="background: red"/>
215         </munderover>
216         <munderover style="background: cyan" id="el0016" accent="true">
217           <mspace id="base0016" height="3em" width="1em" style="background: black"/>
218           <mspace id="under0016" height="1em" width="3em" style="background: blue"/>
219           <mspace id="over0016" height="1em" width="3em" style="background: 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" style="background: green"/>
227         <munder style="background: cyan" id="el0021">
228           <mspace id="base0021" height="3em" width="1em" style="background: black"/>
229           <mspace id="under0021" height="1em" width="3em" style="background: blue"/>
230         </munder>
231         <munder style="background: cyan" id="el0022" accentunder="true">
232           <mspace id="base0022" height="5em" width="1em" style="background: black"/>
233           <mspace id="under0022" height="1em" width="3em" style="background: blue"/>
234         </munder>
235         <munder style="background: cyan" id="el0023" accentunder="true">
236           <mspace id="base0023" height="3em" width="1em" style="background: black"/>
237           <mspace id="under0023" height="1em" width="3em" style="background: blue"/>
238         </munder>
239         <munderover style="background: cyan" id="el0024">
240           <mspace id="base0024" height="3em" width="1em" style="background: black"/>
241           <mspace id="under0024" height="1em" width="3em" style="background: blue"/>
242           <mspace id="over0024" height="1em" width="3em" style="background: red"/>
243         </munderover>
244         <munderover style="background: cyan" id="el0025" accent="true">
245           <mspace id="base0025" height="5em" width="1em" style="background: black"/>
246           <mspace id="under0025" height="1em" width="3em" style="background: blue"/>
247           <mspace id="over0025" height="1em" width="3em" style="background: red"/>
248         </munderover>
249         <munderover style="background: cyan" id="el0026" accent="true">
250           <mspace id="base0026" height="3em" width="1em" style="background: black"/>
251           <mspace id="under0026" height="1em" width="3em" style="background: blue"/>
252           <mspace id="over0026" height="1em" width="3em" style="background: 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" style="background: green"/>
260         <mover style="background: cyan" id="el0031">
261           <mspace id="base0031" height="3em" width="1em" style="background: black"/>
262           <mspace id="over0031" height="1em" width="3em" style="background: red"/>
263         </mover>
264         <mover style="background: cyan" id="el0032" accent="true">
265           <mspace id="base0032" height="5em" width="1em" style="background: black"/>
266           <mspace id="over0032" height="1em" width="3em" style="background: red"/>
267         </mover>
268         <mover style="background: cyan" id="el0033" accent="true">
269           <mspace id="base0033" height="3em" width="1em" style="background: black"/>
270           <mspace id="over0033" height="1em" width="3em" style="background: red"/>
271         </mover>
272         <munderover style="background: cyan" id="el0034">
273           <mspace id="base0034" height="3em" width="1em" style="background: black"/>
274           <mspace id="under0034" height="1em" width="3em" style="background: blue"/>
275           <mspace id="over0034" height="1em" width="3em" style="background: red"/>
276         </munderover>
277         <munderover style="background: cyan" id="el0035" accent="true">
278           <mspace id="base0035" height="5em" width="1em" style="background: black"/>
279           <mspace id="under0035" height="1em" width="3em" style="background: blue"/>
280           <mspace id="over0035" height="1em" width="3em" style="background: red"/>
281         </munderover>
282         <munderover style="background: cyan" id="el0036" accent="true">
283           <mspace id="base0036" height="3em" width="1em" style="background: black"/>
284           <mspace id="under0036" height="1em" width="3em" style="background: blue"/>
285           <mspace id="over0036" height="1em" width="3em" style="background: 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" style="background: green"/>
293         <mover style="background: cyan" id="el0041">
294           <mspace id="base0041" height="3em" width="1em" style="background: black"/>
295           <mspace id="over0041" height="1em" width="3em" style="background: red"/>
296         </mover>
297         <mover style="background: cyan" id="el0042" accent="true">
298           <mspace id="base0042" height="5em" width="1em" style="background: black"/>
299           <mspace id="over0042" height="1em" width="3em" style="background: red"/>
300         </mover>
301         <mover style="background: cyan" id="el0043" accent="true">
302           <mspace id="base0043" height="3em" width="1em" style="background: black"/>
303           <mspace id="over0043" height="1em" width="3em" style="background: red"/>
304         </mover>
305         <munderover style="background: cyan" id="el0044">
306           <mspace id="base0044" height="3em" width="1em" style="background: black"/>
307           <mspace id="under0044" height="1em" width="3em" style="background: blue"/>
308           <mspace id="over0044" height="1em" width="3em" style="background: red"/>
309         </munderover>
310         <munderover style="background: cyan" id="el0045" accent="true">
311           <mspace id="base0045" height="5em" width="1em" style="background: black"/>
312           <mspace id="under0045" height="1em" width="3em" style="background: blue"/>
313           <mspace id="over0045" height="1em" width="3em" style="background: red"/>
314         </munderover>
315         <munderover style="background: cyan" id="el0046" accent="true">
316           <mspace id="base0046" height="3em" width="1em" style="background: black"/>
317           <mspace id="under0046" height="1em" width="3em" style="background: blue"/>
318           <mspace id="over0046" height="1em" width="3em" style="background: red"/>
319         </munderover>
320       </math>
321     </p>
322 </body>
323 </html>