Bug 201603 - Synchronize MathML WPT tests against upstream
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / mathml / presentation-markup / scripts / subsup-4.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Subscripts and Superscripts metrics</title>
6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
7 <meta name="assert" content="Verify metrics of scripted elements for bases of different heights.">
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 {
13     font-size: 10px;
14   }
15 </style>
16 <script>
17   /* This test does not use any specific fonts and so the exact rules are not
18   specified precisely. We assume reasonable values for script shifts and
19   spacing. */
20
21   function getBox(aId) {
22     var box = document.getElementById(aId).getBoundingClientRect();
23     box.middle = (box.bottom + box.top) / 2;
24     return box;
25   }
26
27   setup({ explicit_done: true });
28   window.addEventListener("load", runTests);
29
30   var sizeArray = [50, 75, 100];
31
32   function runTests() {
33     test(function() {
34       assert_true(MathMLFeatureDetection.has_mspace());
35
36       var e = 1;
37       sizeArray.forEach(function(size) {
38          assert_approx_equals(getBox("msub" + size + "base").middle, getBox("baseline").bottom, e, "msub base " + size + "is placed on the baseline");
39          assert_approx_equals(getBox("msup" + size + "base").middle, getBox("baseline").bottom, e, "msup base " + size + "is placed on the baseline");
40          assert_approx_equals(getBox("msubsup" + size + "base").middle, getBox("baseline").bottom, e, "msubsup base " + size + "is placed on the baseline");
41          assert_approx_equals(getBox("multi" + size + "base").middle, getBox("baseline").bottom, e, "mmultiscripts base " + size + "is placed on the baseline");
42       });
43     }, "Alignment on the baseline for bases of different heights");
44
45     test(function() {
46       assert_true(MathMLFeatureDetection.has_mspace());
47
48       var e = 5;
49       sizeArray.forEach(function(size) {
50          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");
51       });
52     }, "Vertical position of the scripts for bases of different heights");
53
54     done();
55   }
56 </script>
57 </head>
58 <body>
59   <div id="log"></div>
60   <p>
61     <math>
62       <mspace id="baseline" width="30px" height="2px" depth="0px" style="background: blue"/>
63       <msub id="msub50">
64         <mspace id="msub50base" width="30px" height="50px" depth="50px" style="background: black"/>
65         <mspace id="msub50sub" width="10px" height="5px" depth="5px" style="background: black"/>
66       </msub>
67       <msup id="msup50">
68         <mspace id="msup50base" width="30px" height="50px" depth="50px" style="background: black"/>
69         <mspace id="msup50sup" width="10px" height="5px" depth="5px" style="background: black"/>
70       </msup>
71       <msubsup id="msubsup50">
72         <mspace id="msubsup50base" width="30px" height="50px" depth="50px" style="background: black"/>
73         <mspace id="msubsup50sub" width="10px" height="5px" depth="5px" style="background: black"/>
74         <mspace id="msubsup50sup" width="10px" height="5px" depth="5px" style="background: black"/>
75       </msubsup>
76       <mmultiscripts id="multi50">
77         <mspace id="multi50base" width="30px" height="50px" depth="50px" style="background: black"/>
78         <mspace id="multi50postsub" width="10px" height="5px" depth="5px" style="background: black"/>
79         <mspace id="multi50postsup" width="10px" height="5px" depth="5px" style="background: black"/>
80         <mprescripts/>
81         <mspace id="multi50presub" width="10px" height="5px" depth="5px" style="background: black"/>
82         <mspace id="multi50presup" width="10px" height="5px" depth="5px" style="background: black"/>
83       </mmultiscripts>
84       <msub id="msub75">
85         <mspace id="msub75base" width="30px" height="75px" depth="75px" style="background: black"/>
86         <mspace id="msub75sub" width="10px" height="5px" depth="5px" style="background: black"/>
87       </msub>
88       <msup id="msup75">
89         <mspace id="msup75base" width="30px" height="75px" depth="75px" style="background: black"/>
90         <mspace id="msup75sup" width="10px" height="5px" depth="5px" style="background: black"/>
91       </msup>
92       <msubsup id="msubsup75">
93         <mspace id="msubsup75base" width="30px" height="75px" depth="75px" style="background: black"/>
94         <mspace id="msubsup75sub" width="10px" height="5px" depth="5px" style="background: black"/>
95         <mspace id="msubsup75sup" width="10px" height="5px" depth="5px" style="background: black"/>
96       </msubsup>
97       <mmultiscripts id="multi75">
98         <mspace id="multi75base" width="30px" height="75px" depth="75px" style="background: black"/>
99         <mspace id="multi75postsub" width="10px" height="5px" depth="5px" style="background: black"/>
100         <mspace id="multi75postsup" width="10px" height="5px" depth="5px" style="background: black"/>
101         <mprescripts/>
102         <mspace id="multi75presub" width="10px" height="5px" depth="5px" style="background: black"/>
103         <mspace id="multi75presub" width="10px" height="5px" depth="5px" style="background: black"/>
104       </mmultiscripts>
105       <msub id="msub100">
106         <mspace id="msub100base" width="30px" height="100px" depth="100px" style="background: black"/>
107         <mspace id="msub100sub" width="10px" height="5px" depth="5px" style="background: black"/>
108       </msub>
109       <msup id="msup100">
110         <mspace id="msup100base" width="30px" height="100px" depth="100px" style="background: black"/>
111         <mspace id="msup100sup" width="10px" height="5px" depth="5px" style="background: black"/>
112       </msup>
113       <msubsup id="msubsup100">
114         <mspace id="msubsup100base" width="30px" height="100px" depth="100px" style="background: black"/>
115         <mspace id="msubsup100sub" width="10px" height="5px" depth="5px" style="background: black"/>
116         <mspace id="msubsup100sup" width="10px" height="5px" depth="5px" style="background: black"/>
117       </msubsup>
118       <mmultiscripts id="multi100">
119         <mspace id="multi100base" width="30px" height="100px" depth="100px" style="background: black"/>
120         <mspace id="multi100postsub" width="10px" height="5px" depth="5px" style="background: black"/>
121         <mspace id="multi100postsup" width="10px" height="5px" depth="5px" style="background: black"/>
122         <mprescripts/>
123         <mspace id="multi100presub" width="10px" height="5px" depth="5px" style="background: black"/>
124         <mspace id="multi100presup" width="10px" height="5px" depth="5px" style="background: black"/>
125       </mmultiscripts>
126     </math>
127   </p>
128 </body>
129 </html>