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