Bug 201603 - Synchronize MathML WPT tests against upstream
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / mathml / presentation-markup / scripts / subsup-parameters-2.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Subscripts and Superscripts parameters</title>
6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
7 <meta name="assert" content="Elements msub, msup, subsup and msubsup correctly use the italic correction 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 {
13     font-size: 10px;
14   }
15   @font-face {
16     font-family: largeop-displayoperatorminheight5000;
17     src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
18   }
19   @font-face {
20     font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;
21     src: url("/fonts/math/largeop-displayoperatorminheight2000-2AFF-italiccorrection3000.woff");
22   }
23 </style>
24 <script>
25   function getBox(aId) {
26     return document.getElementById(aId).getBoundingClientRect();
27   }
28
29   setup({ explicit_done: true });
30   window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
31
32   /*
33     These two tests verify that:
34     - In msub, the script is at the right of the base minus the italic correction.
35     - In msup, the script is just at the right of the base.
36     - In msubsup, the scripts are shifted by the italic correction.
37     - In mmultiscripts, postscript pairs are shifted by the italic correction.
38     - In mmultiscripts, prescript pairs are vertically aligned.
39   */
40   var epsilon = 1;
41   function runTests() {
42     test(function() {
43       assert_true(MathMLFeatureDetection.has_mspace());
44
45       var v = 0;
46       assert_approx_equals(getBox("base001").right - getBox("sub001").left, v, epsilon, "msub");
47       assert_approx_equals(getBox("sup002").left, getBox("base002").right, epsilon, "msup");
48       assert_approx_equals(getBox("sup003").left - getBox("sub003").left, v, epsilon, "msubsup");
49       assert_approx_equals(getBox("sup004").left - getBox("sub004").left, v, epsilon, "mmultiscripts postscripts");
50       assert_approx_equals(getBox("sup005").left - getBox("sub005").left, 0, epsilon, "mmultiscripts prescripts");
51     }, "Null Italic Correction");
52     test(function() {
53       assert_true(MathMLFeatureDetection.has_mspace());
54
55       var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
56       var v = 3000 * emToPx;
57       assert_approx_equals(getBox("base011").right - getBox("sub011").left, v, epsilon, "msub");
58       assert_approx_equals(getBox("sup012").left, getBox("base012").right, epsilon, "msup");
59       assert_approx_equals(getBox("sup013").left - getBox("sub013").left, v, epsilon, "msubsup");
60       assert_approx_equals(getBox("sup014").left - getBox("sub014").left, v, epsilon, "mmultiscripts postscripts");
61       assert_approx_equals(getBox("sup015").left - getBox("sub015").left, 0, epsilon, "mmultiscripts prescripts");
62     }, "NonNull Italic Correction");
63     done();
64   }
65 </script>
66 </head>
67 <body>
68   <div id="log"></div>
69   <h2>Null Italic Correction</h2>
70   <p>
71     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;">
72       <msub>
73         <mo id="base001" lspace="0px" rspace="0px">&#x2AFF;</mo>
74         <mspace id="sub001" height="1em" width="1em" style="background: blue"/>
75       </msub>
76     </math>
77     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;">
78       <msup>
79         <mo id="base002" lspace="0px" rspace="0px">&#x2AFF;</mo>
80         <mspace id="sup002" height="1em" width="1em" style="background: blue"/>
81       </msup>
82     </math>
83     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;">
84       <msubsup>
85         <mo lspace="0px" rspace="0px">&#x2AFF;</mo>
86         <mspace id="sub003" height="1em" width="1em" style="background: blue"/>
87         <mspace id="sup003" height="1em" width="1em" style="background: green"/>
88       </msubsup>
89     </math>
90     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;">
91       <mmultiscripts>
92         <mo lspace="0px" rspace="0px">&#x2AFF;</mo>
93         <mspace id="sub004" height="1em" width="1em" style="background: blue"/>
94         <mspace id="sup004" height="1em" width="1em" style="background: green"/>
95         <mprescripts/>
96         <mspace id="sub005" height="1em" width="1em" style="background: magenta"/>
97         <mspace id="sup005" height="1em" width="1em" style="background: cyan"/>
98       </mmultiscripts>
99     </math>
100   </p>
101   <h2>NonNull Italic Correction</h2>
102   <p>
103     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;">
104       <msub>
105         <mo id="base011" lspace="0px" rspace="0px">&#x2AFF;</mo>
106         <mspace id="sub011" height="1em" width="1em" style="background: blue"/>
107       </msub>
108     </math>
109     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;">
110       <msup>
111         <mo id="base012" lspace="0px" rspace="0px">&#x2AFF;</mo>
112         <mspace id="sup012" height="1em" width="1em" style="background: blue"/>
113       </msup>
114     </math>
115     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;">
116       <msubsup>
117         <mo lspace="0px" rspace="0px">&#x2AFF;</mo>
118         <mspace id="sub013" height="1em" width="1em" style="background: blue"/>
119         <mspace id="sup013" height="1em" width="1em" style="background: green"/>
120       </msubsup>
121     </math>
122     <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;">
123       <mmultiscripts>
124         <mo lspace="0px" rspace="0px">&#x2AFF;</mo>
125         <mspace id="sub014" height="1em" width="1em" style="background: blue"/>
126         <mspace id="sup014" height="1em" width="1em" style="background: green"/>
127         <mprescripts/>
128         <mspace id="sub015" height="1em" width="1em" style="background: magenta"/>
129         <mspace id="sup015" height="1em" width="1em" style="background: cyan"/>
130       </mmultiscripts>
131     </math>
132   </p>
133 </body>
134 </html>