[LFC][Integration] Generalize run iterator for non-text runs
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / mathml / presentation-markup / tables / table-001.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Basic table layout</title>
6 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#table-or-matrix-mtable">
7 <meta name="assert" content="Verify position 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       Array.from(document.getElementsByTagName("mtable")).forEach(table => {
16           const id = table.getAttribute("id");
17           const rtl = window.getComputedStyle(table).direction === "rtl";
18           test(function() {
19               assert_true(MathMLFeatureDetection.has_mspace());
20               const rows = Array.from(table.getElementsByTagName("mtr"));
21               for (var j = 0; j < rows.length; j++) {
22                   var cells = Array.from(rows[j].getElementsByTagName("mtd"));
23                   for (var i = 0; i < cells.length - 1; i++) {
24                       var space1 = cells[i].firstElementChild.getBoundingClientRect();
25                       var space2 = cells[i + 1].firstElementChild.getBoundingClientRect();
26                       assert_equals(space1.top, space2.top,
27                                     `Cells (${i},${j}) and (${i + 1},${j}) should have same vertical position`);
28                       if (rtl) {
29                           assert_greater_than(space1.left, space2.right,
30                                               `Cell (${i},${j}) should be on the right of (${i + 1},${j})`);
31                       } else {
32                           assert_less_than(space1.right, space2.left,
33                                            `Cell (${i},${j}) should be on the left of (${i + 1},${j})`);
34                       }
35                   }
36               }
37
38               for (var j = 0; j < rows.length - 1; j++) {
39                   var cells1 = Array.from(rows[j].getElementsByTagName("mtd"));
40                   var cells2 = Array.from(rows[j + 1].getElementsByTagName("mtd"));
41                   for (var i = 0; i < cells1.length; i++) {
42                       var space1 = cells1[i].firstElementChild.getBoundingClientRect();
43                       var space2 = cells2[i].firstElementChild.getBoundingClientRect();
44                       assert_equals(space1.left, space2.left,
45                                     `Cells (${i},${j}) and (${i},${j + 1}) should have same horizontal position`);
46                       assert_less_than(space1.bottom, space2.top,
47                                        `Cell (${i},${j}) should be above (${i},${j + 1})`);
48                   }
49               }
50           }, `Layout of ${id}`);
51
52       });
53       done();
54   }
55 </script>
56 </head>
57 <body>
58   <div id="log"></div>
59   <p>
60     <math>
61       <mtable id="table-001">
62         <mtr>
63           <mtd>
64             <mspace width="20px" height="10px" style="background: lightblue;"></mspace>
65           </mtd>
66           <mtd>
67             <mspace width="20px" height="10px" style="background: lightgreen;"></mspace>
68           </mtd>
69         </mtr>
70         <mtr>
71           <mtd>
72             <mspace width="20px" height="10px" style="background: blue;"></mspace>
73           </mtd>
74           <mtd>
75             <mspace width="20px" height="10px" style="background: green;"></mspace>
76           </mtd>
77         </mtr>
78       </mtable>
79       <mtable id="table-002">
80         <mtr>
81           <mtd>
82             <mspace width="20px" height="10px" style="background: lightblue;"></mspace>
83           </mtd>
84           <mtd>
85             <mspace width="20px" height="10px" style="background: lightgreen;"></mspace>
86           </mtd>
87           <mtd>
88             <mspace width="20px" height="10px" style="background: cyan;"></mspace>
89           </mtd>
90           <mtd>
91             <mspace width="20px" height="10px" style="background: purple;"></mspace>
92           </mtd>
93         </mtr>
94         <mtr>
95           <mtd>
96             <mspace width="20px" height="10px" style="background: blue;"></mspace>
97           </mtd>
98           <mtd>
99             <mspace width="20px" height="10px" style="background: green;"></mspace>
100           </mtd>
101           <mtd>
102             <mspace width="20px" height="10px" style="background: yellow;"></mspace>
103           </mtd>
104           <mtd>
105             <mspace width="20px" height="10px" style="background: orange;"></mspace>
106           </mtd>
107         </mtr>
108         <mtr>
109           <mtd>
110             <mspace width="20px" height="10px" style="background: black;"></mspace>
111           </mtd>
112           <mtd>
113             <mspace width="20px" height="10px" style="background: red;"></mspace>
114           </mtd>
115           <mtd>
116             <mspace width="20px" height="10px" style="background: gray;"></mspace>
117           </mtd>
118           <mtd>
119             <mspace width="20px" height="10px" style="background: maroon;"></mspace>
120           </mtd>
121         </mtr>
122       </mtable>
123       <mtable id="table-003">
124         <mtr>
125           <mtd>
126             <mspace width="20px" height="10px" style="background: lightblue;"></mspace>
127           </mtd>
128           <mtd>
129             <mspace width="20px" height="10px" style="background: lightgreen;"></mspace>
130           </mtd>
131           <mtd>
132             <mspace width="20px" height="10px" style="background: cyan;"></mspace>
133           </mtd>
134         </mtr>
135         <mtr>
136           <mtd>
137             <mspace width="20px" height="10px" style="background: blue;"></mspace>
138           </mtd>
139           <mtd>
140             <mspace width="20px" height="10px" style="background: green;"></mspace>
141           </mtd>
142           <mtd>
143             <mspace width="20px" height="10px" style="background: orange;"></mspace>
144           </mtd>
145         </mtr>
146         <mtr>
147           <mtd>
148             <mspace width="20px" height="10px" style="background: black;"></mspace>
149           </mtd>
150           <mtd>
151             <mspace width="20px" height="10px" style="background: maroon;"></mspace>
152           </mtd>
153           <mtd>
154             <mspace width="20px" height="10px" style="background: gray;"></mspace>
155           </mtd>
156         </mtr>
157         <mtr>
158           <mtd>
159             <mspace width="20px" height="10px" style="background: red;"></mspace>
160           </mtd>
161           <mtd>
162             <mspace width="20px" height="10px" style="background: purple;"></mspace>
163           </mtd>
164           <mtd>
165             <mspace width="20px" height="10px" style="background: yellow;"></mspace>
166           </mtd>
167
168         </mtr>
169       </mtable>
170     </math>
171   </p>
172   <p>
173     <math dir="rtl">
174       <mtable id="table-011">
175         <mtr>
176           <mtd>
177             <mspace width="20px" height="10px" style="background: lightblue;"></mspace>
178           </mtd>
179           <mtd>
180             <mspace width="20px" height="10px" style="background: lightgreen;"></mspace>
181           </mtd>
182         </mtr>
183         <mtr>
184           <mtd>
185             <mspace width="20px" height="10px" style="background: blue;"></mspace>
186           </mtd>
187           <mtd>
188             <mspace width="20px" height="10px" style="background: green;"></mspace>
189           </mtd>
190         </mtr>
191       </mtable>
192       <mtable id="table-012">
193         <mtr>
194           <mtd>
195             <mspace width="20px" height="10px" style="background: lightblue;"></mspace>
196           </mtd>
197           <mtd>
198             <mspace width="20px" height="10px" style="background: lightgreen;"></mspace>
199           </mtd>
200           <mtd>
201             <mspace width="20px" height="10px" style="background: cyan;"></mspace>
202           </mtd>
203           <mtd>
204             <mspace width="20px" height="10px" style="background: purple;"></mspace>
205           </mtd>
206         </mtr>
207         <mtr>
208           <mtd>
209             <mspace width="20px" height="10px" style="background: blue;"></mspace>
210           </mtd>
211           <mtd>
212             <mspace width="20px" height="10px" style="background: green;"></mspace>
213           </mtd>
214           <mtd>
215             <mspace width="20px" height="10px" style="background: yellow;"></mspace>
216           </mtd>
217           <mtd>
218             <mspace width="20px" height="10px" style="background: orange;"></mspace>
219           </mtd>
220         </mtr>
221         <mtr>
222           <mtd>
223             <mspace width="20px" height="10px" style="background: black;"></mspace>
224           </mtd>
225           <mtd>
226             <mspace width="20px" height="10px" style="background: red;"></mspace>
227           </mtd>
228           <mtd>
229             <mspace width="20px" height="10px" style="background: gray;"></mspace>
230           </mtd>
231           <mtd>
232             <mspace width="20px" height="10px" style="background: maroon;"></mspace>
233           </mtd>
234         </mtr>
235       </mtable>
236       <mtable id="table-013">
237         <mtr>
238           <mtd>
239             <mspace width="20px" height="10px" style="background: lightblue;"></mspace>
240           </mtd>
241           <mtd>
242             <mspace width="20px" height="10px" style="background: lightgreen;"></mspace>
243           </mtd>
244           <mtd>
245             <mspace width="20px" height="10px" style="background: cyan;"></mspace>
246           </mtd>
247         </mtr>
248         <mtr>
249           <mtd>
250             <mspace width="20px" height="10px" style="background: blue;"></mspace>
251           </mtd>
252           <mtd>
253             <mspace width="20px" height="10px" style="background: green;"></mspace>
254           </mtd>
255           <mtd>
256             <mspace width="20px" height="10px" style="background: orange;"></mspace>
257           </mtd>
258         </mtr>
259         <mtr>
260           <mtd>
261             <mspace width="20px" height="10px" style="background: black;"></mspace>
262           </mtd>
263           <mtd>
264             <mspace width="20px" height="10px" style="background: maroon;"></mspace>
265           </mtd>
266           <mtd>
267             <mspace width="20px" height="10px" style="background: gray;"></mspace>
268           </mtd>
269         </mtr>
270         <mtr>
271           <mtd>
272             <mspace width="20px" height="10px" style="background: red;"></mspace>
273           </mtd>
274           <mtd>
275             <mspace width="20px" height="10px" style="background: purple;"></mspace>
276           </mtd>
277           <mtd>
278             <mspace width="20px" height="10px" style="background: yellow;"></mspace>
279           </mtd>
280
281         </mtr>
282       </mtable>
283     </math>
284   </p>
285 </body>
286 </html>