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=78724">78724</a>. Extra logical height is not properly spread over the
rows in a row-spanning cell.</h3> | 15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d
etail?id=254914">254914</a>. Height of fixed height cell is not proper when cell
's row is under row spanning cell.</h3> |
16 <h4>Rows in rowspan should get proportional height.</h4> | 16 <h4>Rows in rowspan should get proportional height.</h4> |
17 <h5>Test 1 - One rowSpan cell</h5> | 17 <h5>Test 1 - One rowSpan cell</h5> |
18 <table border="1"> | 18 <table border="1"> |
19 <tbody> | 19 <tbody> |
20 <tr> | 20 <tr> |
21 <td>row0 col0</td> | 21 <td>row0 col0</td> |
22 </tr> | 22 </tr> |
23 <tr data-expected-height="19"> | 23 <tr data-expected-height="19"> |
24 <td rowspan="4">row1 col0 - rowspan=4</td> | 24 <td rowspan="4">row1 col0 - rowspan=4</td> |
25 <td>row1 col1</td> | 25 <td>row1 col1</td> |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
60 </tbody> | 60 </tbody> |
61 </table> | 61 </table> |
62 <h5>Test 3 - One rowSpan cell and specified rowSpan cell height</h5> | 62 <h5>Test 3 - One rowSpan cell and specified rowSpan cell height</h5> |
63 <table border="1"> | 63 <table border="1"> |
64 <tbody> | 64 <tbody> |
65 <tr> | 65 <tr> |
66 <td>row0 col0</td> | 66 <td>row0 col0</td> |
67 </tr> | 67 </tr> |
68 <tr data-expected-height="57"> | 68 <tr data-expected-height="57"> |
69 <td>row1 col0</td> | 69 <td>row1 col0</td> |
70 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4</td> | 70 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p
x</td> |
71 </tr> | 71 </tr> |
72 <tr data-expected-height="57"> | 72 <tr data-expected-height="57"> |
73 <td>row2 col0</td> | 73 <td>row2 col0</td> |
74 </tr> | 74 </tr> |
75 <tr data-expected-height="74"> | 75 <tr data-expected-height="74"> |
76 <td>row3 col0</td> | 76 <td>row3 col0</td> |
77 </tr> | 77 </tr> |
78 <tr data-expected-height="76"> | 78 <tr data-expected-height="75"> |
79 <td>row4 col0</td> | 79 <td>row4 col0</td> |
80 </tr> | 80 </tr> |
81 <tr data-expected-height="19"> | 81 <tr data-expected-height="19"> |
82 <td>row5 col0</td> | 82 <td>row5 col0</td> |
83 <td>row5 col1</td> | 83 <td>row5 col1</td> |
84 </tr> | 84 </tr> |
85 </tbody> | 85 </tbody> |
86 </table> | 86 </table> |
87 <h5>Test 4 - One rowSpan cell and specified cells height</h5> | 87 <h5>Test 4 - One rowSpan cell and one cell have fixed height.</h5> |
88 <table border="1"> | 88 <table border="1"> |
89 <tbody> | 89 <tbody> |
90 <tr> | 90 <tr> |
| 91 <td>row0 col0</td> |
| 92 </tr> |
| 93 <tr data-expected-height="60"> |
| 94 <td>row1 col0</td> |
| 95 <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p
x</td> |
| 96 </tr> |
| 97 <tr data-expected-height="60"> |
| 98 <td>row2 col0</td> |
| 99 </tr> |
| 100 <tr data-expected-height="44"> |
| 101 <td style="height:40px">row3 col0 height=40px</td> |
| 102 </tr> |
| 103 <tr data-expected-height="85"> |
| 104 <td>row4 col0</td> |
| 105 </tr> |
| 106 <tr data-expected-height="19"> |
| 107 <td>row5 col0</td> |
| 108 <td>row5 col1</td> |
| 109 </tr> |
| 110 </tbody> |
| 111 </table> |
| 112 <h5>Test 5 - One rowSpan cell and one cell have percent height.</h5> |
| 113 <table border="1"> |
| 114 <tbody> |
| 115 <tr> |
| 116 <td>row0 col0</td> |
| 117 </tr> |
| 118 <tr data-expected-height="23"> |
| 119 <td>row1 col0</td> |
| 120 <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p
x</td> |
| 121 </tr> |
| 122 <tr data-expected-height="183"> |
| 123 <td style="height:40%">row2 col0 height=40%</td> |
| 124 </tr> |
| 125 <tr data-expected-height="41"> |
| 126 <td>row3 col0</td> |
| 127 </tr> |
| 128 <tr data-expected-height="47"> |
| 129 <td>row4 col0</td> |
| 130 </tr> |
| 131 <tr data-expected-height="19"> |
| 132 <td>row5 col0</td> |
| 133 <td>row5 col1</td> |
| 134 </tr> |
| 135 </tbody> |
| 136 </table> |
| 137 <h5>Test 6 - One rowSpan cell, one cell have percent height and another one cell
have fixed height.</h5> |
| 138 <table border="1"> |
| 139 <tbody> |
| 140 <tr> |
| 141 <td>row0 col0</td> |
| 142 </tr> |
| 143 <tr data-expected-height="19"> |
| 144 <td>row1 col0</td> |
| 145 <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p
x</td> |
| 146 </tr> |
| 147 <tr data-expected-height="183"> |
| 148 <td style="height:40%">row2 col0 height=40%</td> |
| 149 </tr> |
| 150 <tr data-expected-height="44"> |
| 151 <td style="height:40px">row3 col0 height=40px</td> |
| 152 </tr> |
| 153 <tr data-expected-height="49"> |
| 154 <td>row4 col0</td> |
| 155 </tr> |
| 156 <tr data-expected-height="19"> |
| 157 <td>row5 col0</td> |
| 158 <td>row5 col1</td> |
| 159 </tr> |
| 160 </tbody> |
| 161 </table> |
| 162 <h5>Test 7 - One rowSpan cell and two cells have percent height but total percen
t is less than 100.</h5> |
| 163 <table border="1"> |
| 164 <tbody> |
| 165 <tr> |
91 <td>row0 col0</td> | 166 <td>row0 col0</td> |
92 </tr> | 167 </tr> |
93 <tr data-expected-height="33"> | 168 <tr data-expected-height="33"> |
94 <td>row1 col0</td> | 169 <td>row1 col0</td> |
95 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4</td> | 170 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p
x</td> |
96 </tr> | 171 </tr> |
97 <tr data-expected-height="130"> | 172 <tr data-expected-height="37"> |
98 <td style="height:70px">row2 col0</td> | 173 <td>row2 col0</td> |
99 </tr> | 174 </tr> |
100 <tr data-expected-height="43"> | 175 <tr data-expected-height="131"> |
101 <td style="height:30px">row3 col0</td> | 176 <td style="height:30%">row3 col0 height=30%</td> |
102 </tr> | 177 </tr> |
103 <tr data-expected-height="136"> | 178 <tr data-expected-height="142"> |
104 <td style="height:100px">row4 col0</td> | 179 <td style="height:40%">row4 col0 height=40%</td> |
105 </tr> | 180 </tr> |
106 <tr data-expected-height="54"> | 181 <tr data-expected-height="19"> |
107 <td style="height:50px">row5 col0</td> | 182 <td>row5 col0</td> |
108 <td>row5 col1</td> | 183 <td>row5 col1</td> |
109 </tr> | 184 </tr> |
110 </tbody> | 185 </tbody> |
111 </table> | 186 </table> |
112 <h5>Test 5 - RowSpan and ColSpan. </h5> | 187 <h5>Test 8 - One rowSpan cell and three cells have percent height but total perc
ent is more than 100.</h5> |
| 188 <table border="1"> |
| 189 <tbody> |
| 190 <tr> |
| 191 <td>row0 col0</td> |
| 192 </tr> |
| 193 <tr data-expected-height="203"> |
| 194 » <td style="height:60%">row1 col0 height=60%</td> |
| 195 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p
x</td> |
| 196 » </tr> |
| 197 <tr data-expected-height="34"> |
| 198 <td style="height:40%">row2 col0 height=40%</td> |
| 199 </tr> |
| 200 <tr data-expected-height="19"> |
| 201 <td>row3 col0</td> |
| 202 </tr> |
| 203 <tr data-expected-height="34"> |
| 204 <td style="height:50%">row4 col0 height=50%</td> |
| 205 </tr> |
| 206 <tr data-expected-height="19"> |
| 207 <td>row5 col0</td> |
| 208 <td>row5 col1</td> |
| 209 </tr> |
| 210 </tbody> |
| 211 </table> |
| 212 <h5>Test 9 - One rowSpan cell and specified cells height.</h5> |
| 213 <table border="1"> |
| 214 <tbody> |
| 215 <tr> |
| 216 <td>row0 col0</td> |
| 217 </tr> |
| 218 <tr data-expected-height="74"> |
| 219 » <td style="height:70px">row1 col0 height=70px</td> |
| 220 » <td rowspan="4" style="height:500px">row1 col1 - rowspan=4 height=500p
x</td> |
| 221 » </tr> |
| 222 <tr data-expected-height="74"> |
| 223 <td style="height:70px">row2 col0 height=70px</td> |
| 224 </tr> |
| 225 <tr data-expected-height="59"> |
| 226 <td style="height:30px">row3 col0 height=30px</td> |
| 227 </tr> |
| 228 <tr data-expected-height="182"> |
| 229 <td style="height:100px">row4 col0 height=100px</td> |
| 230 </tr> |
| 231 <tr data-expected-height="54"> |
| 232 <td style="height:50px">row5 col0 height=50px</td> |
| 233 <td>row5 col1</td> |
| 234 </tr> |
| 235 </tbody> |
| 236 </table> |
| 237 <h5>Test 10 - RowSpan and ColSpan. </h5> |
113 <table border="1" width="607"> | 238 <table border="1" width="607"> |
114 <tbody> | 239 <tbody> |
115 <tr data-expected-height="34"> | 240 <tr data-expected-height="34"> |
116 <td>row0 col0</td> | 241 <td>row0 col0</td> |
117 <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td> | 242 <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td> |
118 <td>row0 col2</td> | 243 <td>row0 col2</td> |
119 </tr> | 244 </tr> |
120 <tr data-expected-height="34"> | 245 <tr data-expected-height="34"> |
121 <td>row1 col0</td> | 246 <td>row1 col0</td> |
122 </tr> | 247 </tr> |
123 <tr data-expected-height="34"> | 248 <tr data-expected-height="34"> |
124 <td>row2 col0</td> | 249 <td>row2 col0</td> |
125 </tr> | 250 </tr> |
126 <tr data-expected-height="19"> | 251 <tr data-expected-height="19"> |
127 <td colspan="3">row3 col0 - colspan=3</td> | 252 <td colspan="3">row3 col0 - colspan=3</td> |
128 </tr> | 253 </tr> |
129 <tr data-expected-height="34"> | 254 <tr data-expected-height="34"> |
130 <td>row4 col0</td> | 255 <td>row4 col0</td> |
131 </tr> | 256 </tr> |
132 </tbody> | 257 </tbody> |
133 </table> | 258 </table> |
134 <h5>Test 6 - Mix of baseline aligned and non-baseline aligned cells.</h5> | 259 <h5>Test 11 - Mix of baseline aligned and non-baseline aligned cells.</h5> |
135 <table border="1" width="607"> | 260 <table border="1" width="607"> |
136 <tbody> | 261 <tbody> |
137 <tr data-expected-height="104"> | 262 <tr data-expected-height="104"> |
138 <td style="height:100px">row0 col0</td> | 263 <td style="height:100px">row0 col0</td> |
139 <td style="vertical-align:top">row0 col1 vertical-align=top</td> | 264 <td style="vertical-align:top">row0 col1 vertical-align=top</td> |
140 <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td> | 265 <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td> |
141 </tr> | 266 </tr> |
142 <tr data-expected-height="19"> | 267 <tr data-expected-height="19"> |
143 <td>row1 col0</td> | 268 <td>row1 col0</td> |
144 </tr> | 269 </tr> |
145 <tr data-expected-height="77"> | 270 <tr data-expected-height="77"> |
146 <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 -
rowspan=4 vertical-align=text-top</td> | 271 <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 -
rowspan=4 vertical-align=text-top</td> |
147 <td style="vertical-align:sub">row2 col1 vertical-align=sub</td> | 272 <td style="vertical-align:sub">row2 col1 vertical-align=sub</td> |
148 </tr> | 273 </tr> |
149 <tr data-expected-height="77"> | 274 <tr data-expected-height="77"> |
150 <td style="vertical-align:middle">row3 col1 vertical-align=middle</td> | 275 <td style="vertical-align:middle">row3 col1 vertical-align=middle</td> |
151 </tr> | 276 </tr> |
152 <tr data-expected-height="69"> | 277 <tr data-expected-height="69"> |
153 <td style="vertical-align:super">row4 col1 vertical-align=super</td> | 278 <td style="vertical-align:super">row4 col1 vertical-align=super</td> |
154 </tr> | 279 </tr> |
155 <tr data-expected-height="91"> | 280 <tr data-expected-height="91"> |
156 <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-botto
m</td> | 281 <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-botto
m</td> |
157 </tr> | 282 </tr> |
158 <tr data-expected-height="19"> | 283 <tr data-expected-height="19"> |
159 <td>row6 col0</td> | 284 <td>row6 col0</td> |
160 </tr> | 285 </tr> |
161 </tbody> | 286 </tbody> |
162 </table> | 287 </table> |
163 <h5>Test 7 - CSS Table.</h5> | 288 <h5>Test 12 - CSS Table.</h5> |
164 <div id="div-table"> | 289 <div id="div-table"> |
165 <span id="span-row"> | 290 <span id="span-row"> |
166 <span id="span-cell">row0 col0</span> | 291 <span id="span-cell">row0 col0</span> |
167 <div id="div-cell">row0 col1</div> | 292 <div id="div-cell">row0 col1</div> |
168 <span id="span-cell">row0 col2</span> | 293 <span id="span-cell">row0 col2</span> |
169 </span> | 294 </span> |
170 <div id="div-row"> | 295 <div id="div-row"> |
171 <div id="div-cell">row1 col0</div> | 296 <div id="div-cell">row1 col0</div> |
172 <span id="span-cell">row1 col1</span> | 297 <span id="span-cell">row1 col1</span> |
173 <div id="div-cell">row1 col2</div> | 298 <div id="div-cell">row1 col2</div> |
(...skipping 24 matching lines...) Expand all Loading... |
198 <span id="span-row"> | 323 <span id="span-row"> |
199 <span id="span-cell">row8 col0</span> | 324 <span id="span-cell">row8 col0</span> |
200 </span> | 325 </span> |
201 <div id="div-row"> | 326 <div id="div-row"> |
202 <div id="div-cell">row9 col0</div> | 327 <div id="div-cell">row9 col0</div> |
203 </div> | 328 </div> |
204 <div id="div-row"> | 329 <div id="div-row"> |
205 <div id="div-cell">row10 col0</div> | 330 <div id="div-cell">row10 col0</div> |
206 </div> | 331 </div> |
207 </div> | 332 </div> |
208 <h5>Test 8 - Table Similar to CSS table with rowspan.</h5> | 333 <h5>Test 13 - Table Similar to CSS table with rowspan.</h5> |
209 <table border="1px"> | 334 <table border="1px"> |
210 <tr data-expected-height="39"> | 335 <tr data-expected-height="39"> |
211 <td rowspan=5 style="height:300px">row0 col0</td> | 336 <td rowspan=5 style="height:300px">row0 col0</td> |
212 <td>row0 col1</td> | 337 <td>row0 col1</td> |
213 <td>row0 col2</td> | 338 <td>row0 col2</td> |
214 </tr> | 339 </tr> |
215 <tr data-expected-height="47"> | 340 <tr data-expected-height="48"> |
216 <td rowspan=3 style="height:200px">row1 col1</td> | 341 <td rowspan=3 style="height:200px">row1 col1</td> |
217 <td rowspan=2 style="height:100px">row1 col2</td> | 342 <td rowspan=2 style="height:100px">row1 col2</td> |
218 <td>row1 col3</td> | 343 <td>row1 col3</td> |
219 </tr> | 344 </tr> |
220 <tr data-expected-height="47"> | 345 <tr data-expected-height="47"> |
221 <td>row2 col3</td> | 346 <td>row2 col3</td> |
222 </tr> | 347 </tr> |
223 <tr data-expected-height="59"> | 348 <tr data-expected-height="59"> |
224 <td>row3 col2</td> | 349 <td>row3 col2</td> |
225 </tr> | 350 </tr> |
(...skipping 19 matching lines...) Expand all Loading... |
245 </tr> | 370 </tr> |
246 <tr data-expected-height="19"> | 371 <tr data-expected-height="19"> |
247 <td>row9 col1</td> | 372 <td>row9 col1</td> |
248 </tr> | 373 </tr> |
249 <tr data-expected-height="19"> | 374 <tr data-expected-height="19"> |
250 <td>row10 col1</td> | 375 <td>row10 col1</td> |
251 </tr> | 376 </tr> |
252 </table> | 377 </table> |
253 </body> | 378 </body> |
254 </html> | 379 </html> |
OLD | NEW |