Replace multiscripts-positions.html reftest with script tests
[WebKit-https.git] / LayoutTests / imported / mathml-in-html5 / mathml / presentation-markup / scripts / subsup-2.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="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS4">
7 <meta name="assert" content="Basic metrics for the mmultiscript element.">
8 <script src="../../../../../resources/testharness.js"></script>
9 <script src="../../../../../resources/testharnessreport.js"></script>
10 <style>
11   math, mspace {
12     font-size: 10px;
13   }
14 </style>
15 <script>
16   /* This test does not use any specific fonts and so the exact rules are not
17   specified precisely. We assume reasonable values for script shifts and
18   spacing. */
19
20   function getBox(aId) {
21     var box = document.getElementById(aId).getBoundingClientRect();
22     box.middle = (box.bottom + box.top) / 2;
23     return box;
24   }
25
26   setup({ explicit_done: true });
27   window.addEventListener("load", runTests);
28
29   function runTests() {
30     test(function() {
31       var e = 1;
32       assert_less_than_equal(getBox("msubBase").right, getBox("msubSub").left, e, "subscript is after base");
33       assert_less_than_equal(getBox("msupBase").right, getBox("msupSup").left, e, "superscript is after base");
34       assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "subscript is after base");
35       assert_less_than_equal(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "superscript is after base");
36
37      assert_greater_than_equal(getBox("premsubBase").right, getBox("premsubSub").left, e, "subscript is before base");
38       assert_greater_than_equal(getBox("premsupBase").right, getBox("premsupSup").left, e, "superscript is before base");
39       assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubsupSub").left, e, "subscript is before base");
40       assert_greater_than_equal(getBox("premsubsupBase").right, getBox("premsubsupSup").left, e, "superscript is before base");
41
42       e = 3;
43       assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: space between base and subscript is small");
44       assert_approx_equals(getBox("msubBase").right, getBox("msubSub").left, e, "msub: subscript is after base");
45       assert_approx_equals(getBox("msupBase").right, getBox("msupSup").left, e, "msup: superscript is after base");
46       assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSub").left, e, "msubsup: subscript is after base");
47       assert_approx_equals(getBox("msubsupBase").right, getBox("msubsupSup").left, e, "msubsup: superscript is after base");
48
49       assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").right, e, "msub: space between base and subscript is small");
50       assert_approx_equals(getBox("premsubBase").left, getBox("premsubSub").right, e, "msub: subscript is after base");
51       assert_approx_equals(getBox("premsupBase").left, getBox("premsupSup").right, e, "msup: superscript is after base");
52       assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSub").right, e, "msubsup: subscript is after base");
53       assert_approx_equals(getBox("premsubsupBase").left, getBox("premsubsupSup").right, e, "msubsup: superscript is after base");
54     }, "Respective horizontal positions");
55
56     test(function() {
57       var e = 1;
58       assert_approx_equals(getBox("msubBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
59       assert_approx_equals(getBox("msupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
60       assert_approx_equals(getBox("msubsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
61       assert_approx_equals(getBox("premsubBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
62       assert_approx_equals(getBox("premsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
63       assert_approx_equals(getBox("premsubsupBase").middle, getBox("baseline").bottom, e, "base is placed on the baseline");
64     }, "Alignment of the base on the baseline");
65
66     test(function() {
67       var e = 3;
68       assert_approx_equals(getBox("msubSub").middle, getBox("msubBase").bottom, e, "script is placed at the bottom of the base");
69       assert_approx_equals(getBox("msupSup").middle, getBox("msupBase").top, e, "script is placed at the top of the base");
70       assert_approx_equals(getBox("msubsupSub").middle, getBox("msubsupBase").bottom, e, "script is placed at the bottom of the base");
71       assert_approx_equals(getBox("msubsupSup").middle, getBox("msubsupBase").top, e, "script is placed at the top of the base");
72
73       assert_approx_equals(getBox("premsubSub").middle, getBox("premsubBase").bottom, e, "script is placed at the bottom of the base");
74       assert_approx_equals(getBox("premsupSup").middle, getBox("premsupBase").top, e, "script is placed at the top of the base");
75       assert_approx_equals(getBox("premsubsupSub").middle, getBox("premsubsupBase").bottom, e, "script is placed at the bottom of the base");
76       assert_approx_equals(getBox("premsubsupSup").middle, getBox("premsubsupBase").top, e, "script is placed at the top of the base");
77     }, "Vertical position of scripts");
78
79     test(function() {
80       var e = 3;
81       assert_approx_equals(getBox("msub").width, getBox("msubSub").right - getBox("msubBase").left, e, "width is determined by the left/right sides of base/script (+ some space after script)");
82       assert_approx_equals(getBox("msup").width, getBox("msupSup").right - getBox("msupBase").left, e, "width is determined by the left/right sides of base/script (+ some space after script)");
83       assert_approx_equals(getBox("msubsup").width, Math.max(getBox("msubsupSub").right, getBox("msubsupSup").right) - getBox("msubsupBase").left, e, "width is determined by the left/right sides of base/scripts (+ some space after script)");
84
85       assert_approx_equals(getBox("premsub").width, getBox("premsubBase").right - getBox("premsubSub").left, e, "width is determined by the right/left sides of base/script (+ some space after script)");
86       assert_approx_equals(getBox("premsup").width, getBox("premsupBase").right - getBox("premsupSup").left, e, "width is determined by the right/left sides of base/script (+ some space after script)");
87       assert_approx_equals(getBox("premsubsup").width, getBox("premsubsupBase").right - Math.min(getBox("premsubsupSub").left, getBox("premsubsupSup").left), e, "width is determined by the right/left sides of base/scripts (+ some space after script)");
88     }, "Width of scripted elements");
89
90     test(function() {
91       var e = 1;
92       assert_greater_than_equal(getBox("msub").height, getBox("msubBase").height, e, "height is at least the one of the base");
93       assert_greater_than_equal(getBox("msup").height, getBox("msupBase").height, e, "height is at least the one of the base");
94       assert_greater_than_equal(getBox("msubsup").height, getBox("msubsupBase").height, e, "height is at least the one of the base");
95       assert_greater_than_equal(getBox("premsub").height, getBox("premsubBase").height, e, "height is at least the one of the base");
96       assert_greater_than_equal(getBox("premsup").height, getBox("premsupBase").height, e, "height is at least the one of the base");
97   assert_greater_than_equal(getBox("premsubsup").height, getBox("premsubsupBase").height, e, "height is at least the one of the base");
98   
99       e = 3;
100       assert_approx_equals(getBox("msub").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - getBox("msubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts");
101       assert_approx_equals(getBox("msup").height, getBox("msupBase").bottom - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts");
102       assert_approx_equals(getBox("msubsup").height, Math.max(getBox("msubSub").bottom, getBox("msubBase").bottom) - Math.min(getBox("msupSup").top, getBox("msupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts");
103       assert_approx_equals(getBox("premsub").height, Math.max(getBox("premsubSub").bottom, getBox("premsubBase").bottom) - getBox("premsubBase").top, e, "msub height is determined by the top/bottom sides of base/scripts");
104       assert_approx_equals(getBox("premsup").height, getBox("premsupBase").bottom - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msup height is determined by the top/bottom sides of base/scripts");
105       assert_approx_equals(getBox("premsubsup").height, Math.max(getBox("premsubSub").bottom, getBox("premsubBase").bottom) - Math.min(getBox("premsupSup").top, getBox("premsupBase").top), e, "msubsup height is determined by the top/bottom sides of base/scripts");
106     }, "Height of scripted elements");
107
108     test(function() {
109       ["none", "mprescripts"].forEach(function(name) {
110         var elements = document.getElementsByTagName(name);
111         for (var i = 0; i < elements.length; i++) {
112           var box = elements[i].getBoundingClientRect();
113           assert_equals(box.height * box.width, 0, "<" + name + "> " + i + " has zero is empty");
114         }
115       });
116     }, "Size of empty elements");
117
118     done();
119   }
120 </script>
121 </head>
122 <body>
123   <p>
124     <math>
125       <mspace id="baseline" width="30px" height="2px" depth="0px" mathbackground="blue"/>
126       <mmultiscripts id="msub" mathbackground="green">
127         <mspace id="msubBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
128         <mspace id="msubSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
129         <none/>
130       </mmultiscripts>
131       <mmultiscripts id="msup" mathbackground="green">
132         <mspace id="msupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
133         <none/>
134         <mspace id="msupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
135       </mmultiscripts>
136       <mmultiscripts id="msubsup" mathbackground="green">
137         <mspace id="msubsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
138         <mspace id="msubsupSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
139         <mspace id="msubsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
140       </mmultiscripts>
141       <mmultiscripts id="premsub" mathbackground="green">
142         <mspace id="premsubBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
143         <mprescripts/>
144         <mspace id="premsubSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
145         <none/>
146       </mmultiscripts>
147       <mmultiscripts id="premsup" mathbackground="green">
148         <mspace id="premsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
149         <mprescripts/>
150         <none/>
151         <mspace id="premsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
152       </mmultiscripts>
153       <mmultiscripts id="premsubsup" mathbackground="green">
154         <mspace id="premsubsupBase" width="30px" height="15px" depth="15px" mathbackground="black"/>
155         <mprescripts/>
156         <mspace id="premsubsupSub" width="10px" height="5px" depth="5px" mathbackground="black"/>
157         <mspace id="premsubsupSup" width="10px" height="5px" depth="5px" mathbackground="black"/>
158       </mmultiscripts>
159     </math>
160   </p>
161   <hr/>
162 </body>
163 </html>