OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Table rowspan</title> | 4 <title>Table rowspan</title> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <style> | 6 <style> |
7 td { font: 15px/1 Ahem } | 7 td { font: 15px/1 Ahem } |
8 #div-table { display: table; border-spacing: 2px } | 8 #div-table { display: table; border-spacing: 2px } |
9 #div-row, #span-row { display: table-row } | 9 #div-row, #span-row { display: table-row } |
10 #div-cell, #span-cell { display: table-cell } | 10 #div-cell, #span-cell { display: table-cell } |
11 #div-table, #div-row, #span-row, #div-cell, #span-cell{ border: 1px solid bl
ack } | 11 #div-table, #div-row, #span-row, #div-cell, #span-cell{ border: 1px solid bl
ack } |
12 </style> | 12 </style> |
13 </head> | 13 </head> |
14 <body onload="checkLayout('tr')"> | 14 <body onload="checkLayout('tr')"> |
15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d
etail?id=252120">252120</a>. Content of the row spanning cell is flowing out of
the cell boundries.</h3> | 15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d
etail?id=252120">252120</a>. Content of the row spanning cell is flowing out of
the cell boundries.</h3> |
16 <h4>Row spanning cell height is not set as per its content height or given heigh
t to this cells.</h4> | 16 <h4>Row spanning cell height is not set as per its content height or given heigh
t to this cells.</h4> |
17 <h5>Test 1 - One row spanning cell present under the boundries of other row span
ning cell and inner row spanning cell have lots of content.</h5> | 17 <h5>Test 1 - One row spanning cell present under the boundries of other row span
ning cell and inner row spanning cell have lots of content.</h5> |
18 <table border="1"> | 18 <table border="1"> |
19 <tbody> | 19 <tbody> |
20 <tr data-expected-height="19"> | 20 <tr data-expected-height="19"> |
21 <td rowspan="6" style="height:400px">row0 col0 rowspan=6 height=400px</td> | 21 <td rowspan="6" style="height:400px">row0 col0 rowspan=6 height=400px</td> |
22 <td>row0 col1</td> | 22 <td>row0 col1</td> |
23 </tr> | 23 </tr> |
24 <tr data-expected-height="19"> | 24 <tr data-expected-height="19"> |
25 <td>row1 col1</td> | 25 <td>row1 col1</td> |
26 </tr> | 26 </tr> |
27 <tr data-expected-height="0"> | 27 <tr data-expected-height="261"> |
28 <td rowspan="3" style="height:200px">row2 col1 rowspan=3 height=200px<br/>
row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 c
ol1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 ro
wspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=
3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 heig
ht=200px<br/>row2 col1 rowspan=3 height=200px<br/></td> | 28 <td rowspan="3" style="height:200px">row2 col1 rowspan=3 height=200px<br/>
row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 c
ol1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 ro
wspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=
3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 heig
ht=200px<br/>row2 col1 rowspan=3 height=200px<br/></td> |
29 </tr> | 29 </tr> |
30 <tr data-expected-height="165"> | 30 <tr data-expected-height="34"> |
31 <td>row3 col2</td> | 31 <td>row3 col2</td> |
32 </tr> | 32 </tr> |
33 <tr data-expected-height="168"> | 33 <tr data-expected-height="34"> |
34 <td>row4 col2</td> | 34 <td>row4 col2</td> |
35 </tr> | 35 </tr> |
36 <tr data-expected-height="20"> | 36 <tr data-expected-height="20"> |
37 <td>row5 col1</td> | 37 <td>row5 col1</td> |
38 </tr> | 38 </tr> |
39 <tr data-expected-height="19"> | 39 <tr data-expected-height="19"> |
40 <td>row6 col0</td> | 40 <td>row6 col0</td> |
41 </tr> | 41 </tr> |
42 </tbody> | 42 </tbody> |
43 </table> | 43 </table> |
44 <h5>Test 2 - One row spanning cell present under the boundries of other row span
ning cell and inner row spanning cell have its own height.</h5> | 44 <h5>Test 2 - One row spanning cell present under the boundries of other row span
ning cell and inner row spanning cell have its own height.</h5> |
45 <table border="1" width="607"> | 45 <table border="1" width="607"> |
46 <tbody> | 46 <tbody> |
47 <tr data-expected-height="23"> | 47 <tr data-expected-height="19"> |
48 <td rowspan="6" style="height:600px">row0 col0 rowspan=6 height=600px</td> | 48 <td rowspan="6" style="height:600px">row0 col0 rowspan=6 height=600px</td> |
49 <td>row0 col1</td> | 49 <td>row0 col1</td> |
50 </tr> | 50 </tr> |
51 <tr data-expected-height="24"> | 51 <tr data-expected-height="19"> |
52 <td>row1 col1</td> | 52 <td>row1 col1</td> |
53 </tr> | 53 </tr> |
54 <tr data-expected-height="0"> | 54 <tr data-expected-height="461"> |
55 <td rowspan="3" style="height:400px">row2 col1 rowspan=3 height=400px</td> | 55 <td rowspan="3" style="height:400px">row2 col1 rowspan=3 height=400px</td> |
56 </tr> | 56 </tr> |
57 <tr data-expected-height="247"> | 57 <tr data-expected-height="34"> |
58 <td>row3 col2</td> | 58 <td>row3 col2</td> |
59 </tr> | 59 </tr> |
60 <tr data-expected-height="260"> | 60 <tr data-expected-height="34"> |
61 <td>row4 col2</td> | 61 <td>row4 col2</td> |
62 </tr> | 62 </tr> |
63 <tr data-expected-height="25"> | 63 <tr data-expected-height="25"> |
64 <td>row5 col1</td> | 64 <td>row5 col1</td> |
65 </tr> | 65 </tr> |
66 <tr data-expected-height="19"> | 66 <tr data-expected-height="19"> |
67 <td>row6 col0</td> | 67 <td>row6 col0</td> |
68 </tr> | 68 </tr> |
69 </tbody> | 69 </tbody> |
70 </table> | 70 </table> |
71 <h5>Test 3 - 2 same row spanning cells with different heights.</h5> | 71 <h5>Test 3 - 2 same row spanning cells with different heights.</h5> |
72 <table border="1"> | 72 <table border="1"> |
73 <tbody> | 73 <tbody> |
74 <tr data-expected-height="0"> | 74 <tr data-expected-height="308"> |
75 <td rowspan="6" style="height:300px">row0 col0 rowspan=6 height=300px</td> | 75 <td rowspan="6" style="height:300px">row0 col0 rowspan=6 height=300px</td> |
76 <td rowspan="6" style="height:500px">row0 col1 rowspan=6 height=500px</td> | 76 <td rowspan="6" style="height:500px">row0 col1 rowspan=6 height=500px</td> |
77 </tr> | 77 </tr> |
78 <tr data-expected-height="90"> | 78 <tr data-expected-height="34"> |
79 <td>row1 col1</td> | 79 <td>row1 col1</td> |
80 </tr> | 80 </tr> |
81 <tr data-expected-height="94"> | 81 <tr data-expected-height="34"> |
82 <td>row2 col1</td> | 82 <td>row2 col1</td> |
83 </tr> | 83 </tr> |
84 <tr data-expected-height="95"> | 84 <tr data-expected-height="34"> |
85 <td>row3 col1</td> | 85 <td>row3 col1</td> |
86 </tr> | 86 </tr> |
87 <tr data-expected-height="99"> | 87 <tr data-expected-height="34"> |
88 <td>row4 col1</td> | 88 <td>row4 col1</td> |
89 </tr> | 89 </tr> |
90 <tr data-expected-height="99"> | 90 <tr data-expected-height="99"> |
91 <td>row5 col1</td> | 91 <td>row5 col1</td> |
92 </tr> | 92 </tr> |
93 <tr data-expected-height="19"> | 93 <tr data-expected-height="19"> |
94 <td>row6 col0</td> | 94 <td>row6 col0</td> |
95 </tr> | 95 </tr> |
96 </tbody> | 96 </tbody> |
97 </table> | 97 </table> |
98 <h5>Test 4 - some rows are common between 2 row spanning cells.</h5> | 98 <h5>Test 4 - some rows are common between 2 row spanning cells.</h5> |
99 <table border="1"> | 99 <table border="1"> |
100 <tbody> | 100 <tbody> |
101 <tr data-expected-height="43"> | 101 <tr data-expected-height="19"> |
102 <td rowspan="6" style="height:400px">row0 col0 rowspan=6 height=400px</t
d> | 102 <td rowspan="6" style="height:400px">row0 col0 rowspan=6 height=400px</t
d> |
103 <td>row0 col1</td> | 103 <td>row0 col1</td> |
104 </tr> | 104 </tr> |
105 <tr data-expected-height="0"> | 105 <tr data-expected-height="623"> |
106 <td rowspan="6" style="height:800px">row1 col1 rowspan=6 height=800px</t
d> | 106 <td rowspan="6" style="height:800px">row1 col1 rowspan=6 height=800px</t
d> |
107 </tr> | 107 </tr> |
108 <tr data-expected-height="168"> | 108 <tr data-expected-height="34"> |
109 <td>row2 col2</td> | 109 <td>row2 col2</td> |
110 </tr> | 110 </tr> |
111 <tr data-expected-height="177"> | 111 <tr data-expected-height="34"> |
112 <td>row3 col2</td> | 112 <td>row3 col2</td> |
113 </tr> | 113 </tr> |
114 <tr data-expected-height="176"> | 114 <tr data-expected-height="34"> |
115 <td>row4 col2</td> | 115 <td>row4 col2</td> |
116 </tr> | 116 </tr> |
117 <tr data-expected-height="189"> | 117 <tr data-expected-height="34"> |
118 <td>row5 col2</td> | 118 <td>row5 col2</td> |
119 </tr> | 119 </tr> |
120 <tr data-expected-height="42"> | 120 <tr data-expected-height="42"> |
121 <td>row6 col2</td> | 121 <td>row6 col2</td> |
122 </tr> | 122 </tr> |
123 <tr data-expected-height="19"> | 123 <tr data-expected-height="19"> |
124 <td>row7 col0</td> | 124 <td>row7 col0</td> |
125 </tr> | 125 </tr> |
126 </tbody> | 126 </tbody> |
127 </table> | 127 </table> |
128 <h5>Test 5 - 2 spanning cells starts at different row index but end at same row
index.</h5> | 128 <h5>Test 5 - 2 spanning cells starts at different row index but end at same row
index.</h5> |
129 <table border="1"> | 129 <table border="1"> |
130 <tbody> | 130 <tbody> |
131 <tr data-expected-height="35"> | 131 <tr data-expected-height="19"> |
132 <td rowspan="6" style="height:600px">row0 col0 rowspan=6 height=400px</t
d> | 132 <td rowspan="6" style="height:600px">row0 col0 rowspan=6 height=400px</t
d> |
133 <td>row0 col1</td> | 133 <td>row0 col1</td> |
134 </tr> | 134 </tr> |
135 <tr data-expected-height="0"> | 135 <tr data-expected-height="423"> |
136 <td rowspan="5" style="height:300px">row1 col1 rowspan=6 height=800px</t
d> | 136 <td rowspan="5" style="height:300px">row1 col1 rowspan=6 height=800px</t
d> |
137 </tr> | 137 </tr> |
138 <tr data-expected-height="130"> | 138 <tr data-expected-height="34"> |
139 <td>row2 col2</td> | 139 <td>row2 col2</td> |
140 </tr> | 140 </tr> |
141 <tr data-expected-height="132"> | 141 <tr data-expected-height="34"> |
142 <td>row3 col2</td> | 142 <td>row3 col2</td> |
143 </tr> | 143 </tr> |
144 <tr data-expected-height="140"> | 144 <tr data-expected-height="34"> |
145 <td>row4 col2</td> | 145 <td>row4 col2</td> |
146 </tr> | 146 </tr> |
147 <tr data-expected-height="140"> | 147 <tr data-expected-height="34"> |
148 <td>row5 col2</td> | 148 <td>row5 col2</td> |
149 </tr> | 149 </tr> |
150 <tr data-expected-height="19"> | 150 <tr data-expected-height="19"> |
151 <td>row6 col2</td> | 151 <td>row6 col2</td> |
152 </tr> | 152 </tr> |
153 <tr data-expected-height="19"> | 153 <tr data-expected-height="19"> |
154 <td>row7 col0</td> | 154 <td>row7 col0</td> |
155 </tr> | 155 </tr> |
156 </tbody> | 156 </tbody> |
157 </table> | 157 </table> |
(...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
272 <tr data-expected-height="24"> | 272 <tr data-expected-height="24"> |
273 <td>row4 col1</td> | 273 <td>row4 col1</td> |
274 <td>row4 col2</td> | 274 <td>row4 col2</td> |
275 <td>row4 col3</td> | 275 <td>row4 col3</td> |
276 </tr> | 276 </tr> |
277 <tr data-expected-height="19"> | 277 <tr data-expected-height="19"> |
278 <td>row5 col0</td> | 278 <td>row5 col0</td> |
279 <td>row5 col1</td> | 279 <td>row5 col1</td> |
280 <td>row5 col2</td> | 280 <td>row5 col2</td> |
281 </tr> | 281 </tr> |
282 <tr data-expected-height="0"> | 282 <tr data-expected-height="74"> |
283 <td rowspan=5 style="height:200px">row6 col0</td> | 283 <td rowspan=5 style="height:200px">row6 col0</td> |
284 <td rowspan=5 style="height:100px">row6 col1</td> | 284 <td rowspan=5 style="height:100px">row6 col1</td> |
285 </tr> | 285 </tr> |
286 <tr data-expected-height="37"> | 286 <tr data-expected-height="19"> |
287 <td>row7 col1</td> | 287 <td>row7 col1</td> |
288 </tr> | 288 </tr> |
289 <tr data-expected-height="38"> | 289 <tr data-expected-height="19"> |
290 <td>row8 col1</td> | 290 <td>row8 col1</td> |
291 </tr> | 291 </tr> |
292 <tr data-expected-height="49"> | 292 <tr data-expected-height="19"> |
293 <td>row9 col1</td> | 293 <td>row9 col1</td> |
294 </tr> | 294 </tr> |
295 <tr data-expected-height="49"> | 295 <tr data-expected-height="19"> |
296 <td>row10 col1</td> | 296 <td>row10 col1</td> |
297 </tr> | 297 </tr> |
298 </table> | 298 </table> |
299 </body> | 299 </body> |
300 </html> | 300 </html> |
OLD | NEW |