Change fast/s* and fast/t* files to use pre and post js files in LayoutTests/resources.
[WebKit-https.git] / LayoutTests / fast / table / Rowspan-value-more-than-number-of-rows-present.html
1
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html>
4 <head>
5     <title>Rowspan Test</title>
6         <style>#T1-1,#T1-2,#T2-1,#T2-2,#T3-1,#T3-2,#T4-1,#T4-2,#T5-1,#T5-2,#T7-1,#T7-2,#T8-1,#T8-2,#T9-1,#T9-2,#T10-1,#T10-4,#T11-2,#T11-4,#T12-2,#T12-4,#T13-1,#T13-2,#T13-3,#T13-4,#T13-5,#T14-1,#T14-2,#T15-1,#T15-2,#T15-3,#T16-1,#T16-2,#T16-3{color:green}#T10-2,#T10-3,#T11-1,#T11-3,#T12-1,#T12-3{color:blue} @font-face {font-family: 'myahem';src: url(../../resources/Ahem.ttf);}</style>
7         <script src="../../resources/js-test-pre.js"></script>
8 </head>
9 <body>
10 <h3>Test for bugzilla bug : <a href="https://bugs.webkit.org/show_bug.cgi?id=18092">18092</a>. 'Baseline of last row cells in the table' is not aligned with 'baseline of rowspan cell' when 'rowspan value' is greater than 'number of remaining rows after rowspan cell + 1'.</h3>
11 <h4>'Baseline of last cell aligned with rowspan cell' should aligned with 'baseline of rowspan cell'.</h4>
12 <div id="Tests">
13 <h5>Test 1</h5>
14 <table border="1" width="607">
15   <tbody>
16     <tr>
17           <td>row0 col0</td>
18           <td>row0 col1</td>
19         </tr>
20     <tr>
21       <td rowspan="2" width="260" id="T1-1">
22         <div style="height:50px; width:350px">row1 col0 - rowspan=2</div>
23       </td>
24     </tr>
25     <tr>
26       <td id="T1-2">row2 col0</td>
27     </tr>
28     <tr>
29       <td>row3 col0</td>
30     </tr>
31   </tbody>
32 </table>
33 <h5>Test 2</h5>
34 <table border="1" width="607">
35   <tbody>
36     <tr>
37       <td rowspan="2" width="260" id="T2-1">
38         <div style="width:350px">row0 col0 - rowspan=2</div>
39       </td>
40     </tr>
41     <tr>
42       <td id="T2-2">row1 <br/> col0</td>
43     </tr>
44     <tr>
45       <td>row2 col0</td>
46     </tr>
47   </tbody>
48 </table>
49 <h5>Test 3</h5>
50 <table border="1" width="607">
51   <tbody>
52     <tr>
53       <td rowspan="3" width="260" id="T3-1">
54         <div style="height:100px; width:350px">row0 col0 - rowspan=3</div>
55       </td>
56     </tr>
57     <tr>
58       <td>row1 col0</td>
59     </tr>
60     <tr>
61       <td id="T3-2">row2 col0</td>
62     </tr>
63   </tbody>
64 </table>
65 <h5>Test 4</h5>
66 <table border="1" width="607">
67   <tbody>
68     <tr>
69       <td rowspan="4" width="260" id="T4-1">
70         <div style="height:100px; width:350px">row0 col0 - rowspan=4</div>
71       </td>
72     </tr>
73     <tr>
74       <td>row1 col0</td>
75     </tr>
76     <tr>
77       <td id="T4-2">row2 col0</td>
78     </tr>
79   </tbody>
80 </table>
81 <h5>Test 5</h5>
82 <table border="1" width="607">
83   <tbody>
84     <tr>
85           <td>row0 col0</td>
86       <td rowspan="5" width="260" id="T5-1">
87         <div style="height:100px; width:350px">row0 col1 - rowspan=5</div>
88       </td>
89     </tr>
90     <tr>
91       <td>row1 col0</td>
92     </tr>
93     <tr>
94       <td id="T5-2">row2 col0</td>
95     </tr>
96   </tbody>
97 </table>
98 <h5>Test 6</h5>
99 <table border="1" width="607">
100   <tbody>
101     <tr>
102       <td rowspan="4" width="260">
103         <div>row0 col0 - rowspan=4</div>
104       </td>
105     </tr>
106   </tbody>
107 </table>
108 <h5>Test 7</h5>
109 <table border="1" width="607">
110   <tbody>
111     <tr>
112           <td>row0 col0</td>
113           <td>row0 col1</td>
114       <td rowspan="4" width="260" id="T7-1">
115         <div style="height:100px; width:350px">row0 col2 - rowspan=4</div>
116       </td>
117     </tr>
118     <tr>
119       <td>row1 col0</td>
120     </tr>
121     <tr>
122       <td id="T7-2">row2 col0</td>
123     </tr>
124   </tbody>
125 </table>
126 <h5>Test 8</h5>
127 <table border="1" width="607">
128   <tbody>
129     <tr>
130           <td>row0 col0</td>
131       <td rowspan="5" width="260" id="T8-1">
132         <div style="height:100px; width:350px">row0 col1 - rowspan=5</div>
133       </td>
134     </tr>
135     <tr>
136       <td>row1 col0</td>
137           <td>row1 col1</td>
138     </tr>
139     <tr>
140       <td id="T8-2">row2 col0</td>
141     </tr>
142   </tbody>
143 </table>
144 <h5>Test 9</h5>
145 <table border="1">
146   <tbody>
147     <tr>
148           <td>row0 col0</td>
149       <td rowspan="4" id="T9-1">
150         <div>row0 col1 - rowspan=4</div>
151       </td>
152     </tr>
153     <tr>
154       <td>row1 col0</td>
155           <td>row1 col1</td>
156     </tr>
157     <tr>
158       <td id="T9-2">row2 col0</td>
159     </tr>
160   </tbody>
161 </table>
162 <h5>Test 10</h5>
163 <table border="1" width="607">
164   <tbody>
165     <tr>
166       <td rowspan="7" width="260" id="T10-1">
167         <div style="height:250px;width:350px">row0 col0 - rowspan=7</div>
168       </td>
169     </tr>
170     <tr>
171       <td rowspan="3" width="100" id="T10-2">
172         <div style="height:150px; width:350px">row1 col0 - rowspan=3</div>
173       </td>
174     </tr>
175     <tr>
176       <td>row2 col0</td>
177     </tr>
178     <tr>
179       <td id="T10-3">row3 col0</td>
180     </tr>
181     <tr>
182       <td>row4 col0</td>
183     </tr>
184     <tr>
185       <td id="T10-4">row5 col0</td>
186     </tr>
187   </tbody>
188 </table>
189 <h5>Test 11</h5>
190 <table border="1" width="907">
191   <tbody>
192     <tr>
193       <td rowspan="3" width="260" id="T11-1">
194         <div style="height:50px; width:350px">row0 col0 - rowspan=3</div>
195       </td>
196     </tr>
197     <tr>
198       <td rowspan="7" width="100" id="T11-2">
199         <div style="height:150px; width:350px">row1 col0 - rowspan=7</div>
200       </td>
201     </tr>
202     <tr>
203       <td id="T11-3">row2 col0</td>
204     </tr>
205     <tr>
206       <td>row3 col0</td>
207     </tr>
208     <tr>
209       <td>row4 col0</td>
210     </tr>
211     <tr>
212       <td id="T11-4">row5 col0</td>
213     </tr>
214   </tbody>
215 </table>
216 <h5>Test 12</h5>
217 <table border="1" width="907">
218   <tbody>
219     <tr>
220       <td rowspan="3" width="260" id="T12-1">
221         <div style="width:350px">row0 col0 - rowspan=3</div>
222       </td>
223     </tr>
224     <tr>
225       <td rowspan="3" width="100" id="T12-2">
226         <div style="height:100px;width:350px">row1 col0 - rowspan=3</div>
227       </td>
228     </tr>
229     <tr>
230       <td id="T12-3">row2 <br/> col0</td>
231     </tr>
232     <tr>
233       <td id="T12-4">row3 col0</td>
234     </tr>
235     <tr>
236       <td>row4 col0</td>
237     </tr>
238     <tr>
239       <td>row5 col0</td>
240     </tr>
241   </tbody>
242 </table>
243 <h5>Test 13</h5>
244 <table border="1">
245   <tbody>
246     <tr>
247       <td>r0 c0</td>
248       <td>r0 c1</td>
249       <td>r0 c2</td>
250       <td rowspan="6" id="T13-1">
251             <div style="height:100px">r0 c3 rowspan=6</div>
252           </td>
253     </tr>
254     <tr>
255       <td>r1 c0</td>
256       <td>r1 c1</td>
257       <td>r1 c2</td>
258       <td>r1 c3</td>
259     </tr>
260     <tr>
261       <td>r2 c0</td>
262       <td>r2 c1</td>
263       <td>r2 c2</td>
264       <td>r2 c3</td>
265     </tr>
266     <tr>
267       <td colspan="4" id="T13-2">r3 c0 colspan=4</td>
268       <td id="T13-3">r3 c1</td>
269       <td id="T13-4">r3 c2</td>
270       <td id="T13-5">r3 c3</td>
271     </tr>
272   </tbody>
273 </table>
274 <h5>Test 14</h5>
275 <table border="1">
276   <tbody>
277     <tr>
278       <td>r0 c0</td>
279     </tr>
280     <tr>
281       <td>r1 c0</td>
282       <td>r1 c1</td>
283       <td rowspan="6" id="T14-1">
284           <div style="height:100px">r1 c2 rowspan=6</div>
285           </td>
286     </tr>
287     <tr>
288       <td>r2 c0</td>
289       <td>r2 c1</td>
290     </tr>
291     <tr>
292         <td id="T14-2"></td>
293     </tr>
294   </tbody>
295 </table>
296 <h5>Test 15</h5>
297 <table border="1" width="607">
298   <tbody>
299     <tr>
300       <td rowspan="4" width="260" id="T15-1">
301         <div style="height:100px; width:350px">row0 col0 - rowspan=4</div>
302       </td>
303           <td rowspan="3" id="T15-2">row0 col1 - rowspan=3</td>
304     </tr>
305     <tr><td id="T15-3">row2 col0</td></tr>
306   </tbody>
307 </table>
308 <h5>Test 16</h5>
309 <table border="1" width="607">
310   <tbody>
311     <tr>
312       <td rowspan="4" width="260" id="T16-1">
313         <div style="width:350px">row0 col0 - rowspan=4</div>
314       </td>
315           <td rowspan="3" id="T16-2">
316         <div style="height:100px;">row0 col1 - rowspan=3</div>
317       </td>
318     </tr>
319     <tr><td id="T16-3">row2 col0</td></tr>
320   </tbody>
321 </table>
322 </div>
323 <div id="console"></div>
324 <script>
325   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 1 : ")));
326   document.getElementById('console').appendChild(document.createElement('br'));
327   shouldBe("(document.getElementById('T1-1').offsetTop + document.getElementById('T1-1').offsetHeight)", "(document.getElementById('T1-2').offsetTop + document.getElementById('T1-2').offsetHeight)");
328   document.getElementById('console').appendChild(document.createElement('br'));
329   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 2 : ")));
330   document.getElementById('console').appendChild(document.createElement('br'));
331   shouldBe("(document.getElementById('T2-1').offsetTop + document.getElementById('T2-1').offsetHeight)", "(document.getElementById('T2-2').offsetTop + document.getElementById('T2-2').offsetHeight)");
332   document.getElementById('console').appendChild(document.createElement('br'));
333   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 3 : ")));
334   document.getElementById('console').appendChild(document.createElement('br'));
335   shouldBe("(document.getElementById('T3-1').offsetTop + document.getElementById('T3-1').offsetHeight)", "(document.getElementById('T3-2').offsetTop + document.getElementById('T3-2').offsetHeight)");
336   document.getElementById('console').appendChild(document.createElement('br'));
337   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 4 : ")));
338   document.getElementById('console').appendChild(document.createElement('br'));
339   shouldBe("(document.getElementById('T4-1').offsetTop + document.getElementById('T4-1').offsetHeight)", "(document.getElementById('T4-2').offsetTop + document.getElementById('T4-2').offsetHeight)");
340   document.getElementById('console').appendChild(document.createElement('br'));
341   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 5 : ")));
342   document.getElementById('console').appendChild(document.createElement('br'));
343   shouldBe("(document.getElementById('T5-1').offsetTop + document.getElementById('T5-1').offsetHeight)", "(document.getElementById('T5-2').offsetTop + document.getElementById('T5-2').offsetHeight)");
344   document.getElementById('console').appendChild(document.createElement('br'));
345   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 7 : ")));
346   document.getElementById('console').appendChild(document.createElement('br'));
347   shouldBe("(document.getElementById('T7-1').offsetTop + document.getElementById('T7-1').offsetHeight)", "(document.getElementById('T7-2').offsetTop + document.getElementById('T7-2').offsetHeight)");
348   document.getElementById('console').appendChild(document.createElement('br'));
349   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 8 : ")));
350   document.getElementById('console').appendChild(document.createElement('br'));
351   shouldBe("(document.getElementById('T8-1').offsetTop + document.getElementById('T8-1').offsetHeight)", "(document.getElementById('T8-2').offsetTop + document.getElementById('T8-2').offsetHeight)");
352   document.getElementById('console').appendChild(document.createElement('br'));
353   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 9 : ")));
354   document.getElementById('console').appendChild(document.createElement('br'));
355   shouldBe("(document.getElementById('T9-1').offsetTop + document.getElementById('T9-1').offsetHeight)", "(document.getElementById('T9-2').offsetTop + document.getElementById('T9-2').offsetHeight)");
356   document.getElementById('console').appendChild(document.createElement('br'));
357   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 10 : ")));
358   document.getElementById('console').appendChild(document.createElement('br'));
359   shouldBe("(document.getElementById('T10-1').offsetTop + document.getElementById('T10-1').offsetHeight)", "(document.getElementById('T10-4').offsetTop + document.getElementById('T10-4').offsetHeight)");
360   shouldBe("(document.getElementById('T10-2').offsetTop + document.getElementById('T10-2').offsetHeight)", "(document.getElementById('T10-3').offsetTop + document.getElementById('T10-3').offsetHeight)");
361   document.getElementById('console').appendChild(document.createElement('br'));
362   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 11 : ")));
363   document.getElementById('console').appendChild(document.createElement('br'));
364   shouldBe("(document.getElementById('T11-1').offsetTop + document.getElementById('T11-1').offsetHeight)", "(document.getElementById('T11-3').offsetTop + document.getElementById('T11-3').offsetHeight)");
365   shouldBe("(document.getElementById('T11-2').offsetTop + document.getElementById('T11-2').offsetHeight)", "(document.getElementById('T11-4').offsetTop + document.getElementById('T11-4').offsetHeight)");
366   document.getElementById('console').appendChild(document.createElement('br'));
367   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 12 : ")));
368   document.getElementById('console').appendChild(document.createElement('br'));
369   shouldBe("(document.getElementById('T12-1').offsetTop + document.getElementById('T12-1').offsetHeight)", "(document.getElementById('T12-3').offsetTop + document.getElementById('T12-3').offsetHeight)");
370   shouldBe("(document.getElementById('T12-2').offsetTop + document.getElementById('T12-2').offsetHeight)", "(document.getElementById('T12-4').offsetTop + document.getElementById('T12-4').offsetHeight)");
371   document.getElementById('console').appendChild(document.createElement('br'));
372   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 13 : ")));
373   document.getElementById('console').appendChild(document.createElement('br'));
374   shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-2').offsetTop + document.getElementById('T13-2').offsetHeight)");
375   shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-3').offsetTop + document.getElementById('T13-3').offsetHeight)");
376   shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-4').offsetTop + document.getElementById('T13-4').offsetHeight)");
377   shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-5').offsetTop + document.getElementById('T13-5').offsetHeight)");
378   document.getElementById('console').appendChild(document.createElement('br'));
379   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 14 : ")));
380   document.getElementById('console').appendChild(document.createElement('br'));
381   shouldBe("(document.getElementById('T14-1').offsetTop + document.getElementById('T14-1').offsetHeight)", "(document.getElementById('T14-2').offsetTop + document.getElementById('T14-2').offsetHeight)");
382   document.getElementById('console').appendChild(document.createElement('br'));
383   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 15 : ")));
384   document.getElementById('console').appendChild(document.createElement('br'));
385   shouldBe("(document.getElementById('T15-1').offsetTop + document.getElementById('T15-1').offsetHeight)", "(document.getElementById('T15-2').offsetTop + document.getElementById('T15-2').offsetHeight)");
386   shouldBe("(document.getElementById('T15-1').offsetTop + document.getElementById('T15-1').offsetHeight)", "(document.getElementById('T15-3').offsetTop + document.getElementById('T15-3').offsetHeight)");
387   document.getElementById('console').appendChild(document.createElement('br'));
388   document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 16 : ")));
389   document.getElementById('console').appendChild(document.createElement('br'));
390   shouldBe("(document.getElementById('T16-1').offsetTop + document.getElementById('T16-1').offsetHeight)", "(document.getElementById('T16-2').offsetTop + document.getElementById('T16-2').offsetHeight)");
391   shouldBe("(document.getElementById('T16-1').offsetTop + document.getElementById('T16-1').offsetHeight)", "(document.getElementById('T16-3').offsetTop + document.getElementById('T16-3').offsetHeight)");
392   document.getElementById('Tests').parentNode.removeChild(document.getElementById('Tests'));
393 </script>
394 </body>
395 </html>