Unreviewed, use RELEASE_AND_RETURN to suppress exception verification failure
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / mathml / presentation-markup / tables / table-002.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Basic table alignment</title>
6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#table-or-matrix-mtable">
7 <meta name="assert" content="Verify alignment of cells in basic 2x2, 4x3 and 3x4 math tables.">
8 <script src="/resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script>
10 <script src="/mathml/support/feature-detection.js"></script>
11 <script>
12   setup({ explicit_done: true });
13   window.addEventListener("load", runTests);
14   function runTests() {
15       var epsilon = 1;
16       test(function() {
17           assert_true(MathMLFeatureDetection.has_mspace());
18           const ascents = [40, 0, 20, 30, 10, 80, 0, 40, 70, 30];
19           const row = document.getElementById("vertical").firstElementChild;
20           const cells = Array.from(row.getElementsByTagName("mtd"));
21           for (var i = 0; i < cells.length - 1; i++) {
22               var space1 = cells[i].firstElementChild.getBoundingClientRect();
23               var space2 = cells[i + 1].firstElementChild.getBoundingClientRect();
24               assert_approx_equals(space1.top + ascents[i],
25                                    space2.top + ascents[i + 1],
26                                    epsilon,
27                                    `Baselines of cells ${i} and ${i + 1} should be aligned.`);
28           }
29       }, `Vertical alignment of cells`);
30
31       test(function() {
32           assert_true(MathMLFeatureDetection.has_mspace());
33           const table = document.getElementById("horizontal");
34           const rows = Array.from(table.getElementsByTagName("mtr"));
35           for (var j = 0; j < rows.length - 1; j++) {
36               var space1 = rows[j].firstElementChild.firstElementChild.getBoundingClientRect();
37               var space2 = rows[j + 1].firstElementChild.firstElementChild.getBoundingClientRect();
38               assert_approx_equals((space1.left + space1.right) / 2,
39                                    (space2.left + space2.right) / 2,
40                                    epsilon,
41                                    `Baselines of cells ${j} and ${j + 1} should be aligned.`);
42           }
43       }, `Horizontal alignment of cells`);
44
45       done();
46   }
47 </script>
48 </head>
49 <body>
50   <div id="log"></div>
51   <p>
52     <math>
53       <mtable id="vertical">
54         <mtr>
55           <mtd>
56             <mspace width="10px" height="40px" depth="0px" style="background: lightblue;"></mspace>
57           </mtd>
58           <mtd>
59             <mspace width="10px" height="0px" depth="40px" style="background: lightgreen;"></mspace>
60           </mtd>
61           <mtd>
62             <mspace width="10px" height="20px" depth="20px" style="background: cyan;"></mspace>
63           </mtd>
64           <mtd>
65             <mspace width="10px" height="30px" depth="10px" style="background: purple;"></mspace>
66           </mtd>
67           <mtd>
68             <mspace width="10px" height="10px" depth="30px" style="background: orange;"></mspace>
69           </mtd>
70           <mtd>
71             <mspace width="10px" height="80px" depth="0px" style="background: blue;"></mspace>
72           </mtd>
73           <mtd>
74             <mspace width="10px" height="0px" depth="80px" style="background: green;"></mspace>
75           </mtd>
76           <mtd>
77             <mspace width="10px" height="40px" depth="40px" style="background: yellow;"></mspace>
78           </mtd>
79           <mtd>
80             <mspace width="10px" height="70px" depth="30px" style="background: red;"></mspace>
81           </mtd>
82           <mtd>
83             <mspace width="10px" height="30px" depth="70px" style="background: black;"></mspace>
84           </mtd>
85         </mtr>
86       </mtable>
87     </math>
88   </p>
89   <p>
90     <math>
91       <mtable id="horizontal">
92         <mtr>
93           <mtd>
94             <mspace width="10px" height="10px" style="background: lightblue;"></mspace>
95           </mtd>
96         </mtr>
97         <mtr>
98           <mtd>
99             <mspace width="40px" height="10px" style="background: lightgreen;"></mspace>
100           </mtd>
101         </mtr>
102         <mtr>
103           <mtd>
104             <mspace width="30px" height="10px" style="background: cyan;"></mspace>
105           </mtd>
106         </mtr>
107         <mtr>
108           <mtd>
109             <mspace width="20px" height="10px" style="background: purple;"></mspace>
110           </mtd>
111         </mtr>
112         <mtr>
113           <mtd>
114             <mspace width="50px" height="10px" style="background: orange;"></mspace>
115           </mtd>
116         </mtr>
117         <mtr>
118           <mtd>
119             <mspace width="100px" height="10px" style="background: blue;"></mspace>
120           </mtd>
121         </mtr>
122         <mtr>
123           <mtd>
124             <mspace width="90px" height="10px" style="background: green;"></mspace>
125           </mtd>
126         </mtr>
127         <mtr>
128           <mtd>
129             <mspace width="70px" height="10px" style="background: yellow;"></mspace>
130           </mtd>
131         </mtr>
132         <mtr>
133           <mtd>
134             <mspace width="80px" height="10px" style="background: red;"></mspace>
135           </mtd>
136         </mtr>
137         <mtr>
138           <mtd>
139             <mspace width="40px" height="10px" style="background: black;"></mspace>
140           </mtd>
141         </mtr>
142       </mtable>
143     </math>
144   </p>
145 </body>
146 </html>