| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Table rowspan</title> |
| 5 <script src="../../resources/check-layout.js"></script> |
| 6 <style> |
| 7 td { font: 15px/1 Ahem } |
| 8 #div-table { display: table; border-spacing: 2px } |
| 9 #div-row, #span-row { display: table-row } |
| 10 #div-cell, #span-cell { display: table-cell } |
| 11 #div-table, #div-row, #span-row, #div-cell, #span-cell{ border: 1px solid bl
ack } |
| 12 </style> |
| 13 </head> |
| 14 <body onload="checkLayout('tr')"> |
| 15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d
etail?id=249600">249600</a>. Extra logical height is not properly spread over th
e rows in a row-spanning cell.</h3> |
| 16 <h4>Rows in rowspan should get proportional height.</h4> |
| 17 <h5>Test 1 - Three rowSpan cells</h5> |
| 18 <table border="1"> |
| 19 <tbody> |
| 20 <tr> |
| 21 <td>row0 col0</td> |
| 22 </tr> |
| 23 <tr data-expected-height="19"> |
| 24 <td rowspan="4">row1 col0 - rowspan=4</td> |
| 25 <td>row1 col1</td> |
| 26 </tr> |
| 27 <tr data-expected-height="19"> |
| 28 <td>row2 col1</td> |
| 29 </tr> |
| 30 <tr data-expected-height="19"> |
| 31 <td>row3 col1</td> |
| 32 </tr> |
| 33 <tr data-expected-height="19"> |
| 34 <td>row4 col1</td> |
| 35 </tr> |
| 36 <tr data-expected-height="19"> |
| 37 <td>row5 col0</td> |
| 38 </tr> |
| 39 <tr> |
| 40 <td>row6 col0</td> |
| 41 </tr> |
| 42 <tr data-expected-height="57"> |
| 43 <td>row7 col0</td> |
| 44 <td rowspan="4" style="height:300px">row7 col1 - rowspan=4</td> |
| 45 </tr> |
| 46 <tr data-expected-height="57"> |
| 47 <td>row8 col0</td> |
| 48 </tr> |
| 49 <tr data-expected-height="74"> |
| 50 <td>row9 col0</td> |
| 51 </tr> |
| 52 <tr data-expected-height="75"> |
| 53 <td>row10 col0</td> |
| 54 </tr> |
| 55 <tr data-expected-height="19"> |
| 56 <td>row11 col0</td> |
| 57 <td>row11 col1</td> |
| 58 </tr> |
| 59 <tr> |
| 60 <td>row12 col0</td> |
| 61 </tr> |
| 62 <tr data-expected-height="59"> |
| 63 <td>row13 col0</td> |
| 64 <td rowspan="4" style="height:300px">row13 col1 - rowspan=4</td> |
| 65 </tr> |
| 66 <tr data-expected-height="74"> |
| 67 <td style="height:70px">row14 col0</td> |
| 68 </tr> |
| 69 <tr data-expected-height="34"> |
| 70 <td style="height:30px">row15 col0</td> |
| 71 </tr> |
| 72 <tr data-expected-height="104"> |
| 73 <td style="height:100px">row16 col0</td> |
| 74 </tr> |
| 75 <tr data-expected-height="54"> |
| 76 <td style="height:50px">row17 col0</td> |
| 77 <td>row17 col1</td> |
| 78 </tr> |
| 79 </tbody> |
| 80 </table> |
| 81 <h5>Test 2 - Three rowSpan cell and specified table width</h5> |
| 82 <table border="1" width="607"> |
| 83 <tbody> |
| 84 <tr data-expected-height="19"> |
| 85 <td rowspan="5">row0 col0 - rowspan=5</td> |
| 86 <td>row0 col1</td> |
| 87 </tr> |
| 88 <tr data-expected-height="19"> |
| 89 <td>row1 col1</td> |
| 90 </tr> |
| 91 <tr data-expected-height="19"> |
| 92 <td>row2 col1</td> |
| 93 </tr> |
| 94 <tr data-expected-height="19"> |
| 95 <td>row3 col1</td> |
| 96 </tr> |
| 97 <tr data-expected-height="19"> |
| 98 <td>row4 col1</td> |
| 99 </tr> |
| 100 <tr> |
| 101 <td>row5 col0</td> |
| 102 </tr> |
| 103 <tr data-expected-height="57"> |
| 104 <td>row6 col0</td> |
| 105 <td rowspan="4" style="height:300px">row6 col1 - rowspan=4</td> |
| 106 </tr> |
| 107 <tr data-expected-height="57"> |
| 108 <td>row7 col0</td> |
| 109 </tr> |
| 110 <tr data-expected-height="74"> |
| 111 <td>row8 col0</td> |
| 112 </tr> |
| 113 <tr data-expected-height="75"> |
| 114 <td>row9 col0</td> |
| 115 </tr> |
| 116 <tr data-expected-height="19"> |
| 117 <td>row10 col0</td> |
| 118 <td>row10 col1</td> |
| 119 </tr> |
| 120 <tr> |
| 121 <td>row11 col0</td> |
| 122 </tr> |
| 123 <tr data-expected-height="59"> |
| 124 <td>row12 col0</td> |
| 125 <td rowspan="4" style="height:300px">row12 col1 - rowspan=4</td> |
| 126 </tr> |
| 127 <tr data-expected-height="74"> |
| 128 <td style="height:70px">row13 col0</td> |
| 129 </tr> |
| 130 <tr data-expected-height="34"> |
| 131 <td style="height:30px">row14 col0</td> |
| 132 </tr> |
| 133 <tr data-expected-height="104"> |
| 134 <td style="height:100px">row15 col0</td> |
| 135 </tr> |
| 136 <tr data-expected-height="54"> |
| 137 <td style="height:50px">row16 col0</td> |
| 138 <td>row16 col1</td> |
| 139 </tr> |
| 140 </tbody> |
| 141 </table> |
| 142 <h5>Test 3 - Continuous 3 rowSpan cells</h5> |
| 143 <table border="1"> |
| 144 <tbody> |
| 145 <tr> |
| 146 <td>row0 col0</td> |
| 147 </tr> |
| 148 <tr data-expected-height="19"> |
| 149 <td rowspan="4">row1 col0 - rowspan=4</td> |
| 150 <td>row1 col1</td> |
| 151 </tr> |
| 152 <tr data-expected-height="19"> |
| 153 <td>row2 col1</td> |
| 154 </tr> |
| 155 <tr data-expected-height="19"> |
| 156 <td>row3 col1</td> |
| 157 </tr> |
| 158 <tr data-expected-height="19"> |
| 159 <td>row4 col1</td> |
| 160 </tr> |
| 161 <tr data-expected-height="57"> |
| 162 <td>row5 col0</td> |
| 163 <td rowspan="4" style="height:300px">row5 col1 - rowspan=4</td> |
| 164 </tr> |
| 165 <tr data-expected-height="57"> |
| 166 <td>row6 col0</td> |
| 167 </tr> |
| 168 <tr data-expected-height="74"> |
| 169 <td>row7 col0</td> |
| 170 </tr> |
| 171 <tr data-expected-height="75"> |
| 172 <td>row8 col0</td> |
| 173 </tr> |
| 174 <tr data-expected-height="59"> |
| 175 <td>row9 col0</td> |
| 176 <td rowspan="4" style="height:300px">row9 col1 - rowspan=4</td> |
| 177 </tr> |
| 178 <tr data-expected-height="74"> |
| 179 <td style="height:70px">row10 col0</td> |
| 180 </tr> |
| 181 <tr data-expected-height="34"> |
| 182 <td style="height:30px">row11 col0</td> |
| 183 </tr> |
| 184 <tr data-expected-height="104"> |
| 185 <td style="height:100px">row12 col0</td> |
| 186 </tr> |
| 187 <tr data-expected-height="54"> |
| 188 <td style="height:50px">row13 col0</td> |
| 189 <td>row13 col1</td> |
| 190 </tr> |
| 191 </tbody> |
| 192 </table> |
| 193 <h5>Test 4 - Two rowSpan cells, 2 rows in first spanning cell have percent heigh
t and 2 rows in second spanning cell have fixed height</h5> |
| 194 <table border="1"> |
| 195 <tbody> |
| 196 <tr> |
| 197 <td>row0 col0</td> |
| 198 </tr> |
| 199 <tr data-expected-height="21"> |
| 200 <td rowspan="4" style="height:300px">row1 col0 - rowspan=4</td> |
| 201 <td>row1 col1</td> |
| 202 </tr> |
| 203 <tr data-expected-height="199" style="height:20%"> |
| 204 <td>row2 col1</td> |
| 205 </tr> |
| 206 <tr data-expected-height="19"> |
| 207 <td>row3 col1</td> |
| 208 </tr> |
| 209 <tr data-expected-height="74" style="height:30%"> |
| 210 <td>row4 col1</td> |
| 211 </tr> |
| 212 <tr data-expected-height="19"> |
| 213 <td>row5 col0</td> |
| 214 </tr> |
| 215 <tr> |
| 216 <td>row6 col0</td> |
| 217 </tr> |
| 218 <tr data-expected-height="58"> |
| 219 <td>row7 col0</td> |
| 220 <td rowspan="4" style="height:300px">row7 col1 - rowspan=4</td> |
| 221 </tr> |
| 222 <tr data-expected-height="50" style="height:50px"> |
| 223 <td>row8 col0</td> |
| 224 </tr> |
| 225 <tr data-expected-height="89"> |
| 226 <td>row9 col0</td> |
| 227 </tr> |
| 228 <tr data-expected-height="70" style="height:70px"> |
| 229 <td>row10 col0</td> |
| 230 </tr> |
| 231 <tr data-expected-height="19"> |
| 232 <td>row11 col0</td> |
| 233 <td>row11 col1</td> |
| 234 </tr> |
| 235 <tr> |
| 236 <td>row12 col0</td> |
| 237 </tr> |
| 238 </tbody> |
| 239 </table> |
| 240 </table> |
| 241 <h5>Test 5 - Two rowSpan cells, in first spanning cell, 2 rows have percent heig
ht and 2 rows have fixed height and in second spanning cell, 1 row have fixed he
ight, 1 row have percent height and remaining are auto.</h5> |
| 242 <table border="1"> |
| 243 <tbody> |
| 244 <tr> |
| 245 <td>row0 col0</td> |
| 246 </tr> |
| 247 <tr data-expected-height="64"> |
| 248 <td rowspan="4" style="height:300px">row1 col0 - rowspan=4</td> |
| 249 <td style="height:60px">row1 col1</td> |
| 250 </tr> |
| 251 <tr data-expected-height="152" style="height:20%"> |
| 252 <td>row2 col1</td> |
| 253 </tr> |
| 254 <tr data-expected-height="40" style="height:40px"> |
| 255 <td>row3 col1</td> |
| 256 </tr> |
| 257 <tr data-expected-height="19" style="height:30%"> |
| 258 <td>row4 col1</td> |
| 259 </tr> |
| 260 <tr data-expected-height="19"> |
| 261 <td>row5 col0</td> |
| 262 </tr> |
| 263 <tr> |
| 264 <td>row6 col0</td> |
| 265 </tr> |
| 266 <tr data-expected-height="19"> |
| 267 <td>row7 col0</td> |
| 268 <td rowspan="4" style="height:300px">row7 col1 - rowspan=4</td> |
| 269 </tr> |
| 270 <tr data-expected-height="218" style="height:30%"> |
| 271 <td>row8 col0</td> |
| 272 </tr> |
| 273 <tr data-expected-height="20"> |
| 274 <td>row9 col0</td> |
| 275 </tr> |
| 276 <tr data-expected-height="50" style="height:50px"> |
| 277 <td>row10 col0</td> |
| 278 </tr> |
| 279 <tr data-expected-height="19"> |
| 280 <td>row11 col0</td> |
| 281 <td>row11 col1</td> |
| 282 </tr> |
| 283 <tr> |
| 284 <td>row12 col0</td> |
| 285 </tr> |
| 286 </tbody> |
| 287 </table> |
| 288 <h5>Test 6 - RowSpan and ColSpan. </h5> |
| 289 <table border="1" width="607"> |
| 290 <tbody> |
| 291 <tr data-expected-height="34"> |
| 292 <td>row0 col0</td> |
| 293 <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td> |
| 294 <td>row0 col2</td> |
| 295 </tr> |
| 296 <tr data-expected-height="34"> |
| 297 <td>row1 col0</td> |
| 298 </tr> |
| 299 <tr data-expected-height="34"> |
| 300 <td>row2 col0</td> |
| 301 </tr> |
| 302 <tr data-expected-height="19"> |
| 303 <td colspan="3">row3 col0 - colspan=3</td> |
| 304 </tr> |
| 305 <tr data-expected-height="34"> |
| 306 <td>row4 col0</td> |
| 307 </tr> |
| 308 </tbody> |
| 309 </table> |
| 310 <h5>Test 7 - Mix of baseline aligned and non-baseline aligned cells.</h5> |
| 311 <table border="1" width="607"> |
| 312 <tbody> |
| 313 <tr data-expected-height="104"> |
| 314 <td style="height:100px">row0 col0</td> |
| 315 <td style="vertical-align:top">row0 col1 vertical-align=top</td> |
| 316 <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td> |
| 317 </tr> |
| 318 <tr data-expected-height="19"> |
| 319 <td>row1 col0</td> |
| 320 </tr> |
| 321 <tr data-expected-height="77"> |
| 322 <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 -
rowspan=4 vertical-align=text-top</td> |
| 323 <td style="vertical-align:sub">row2 col1 vertical-align=sub</td> |
| 324 </tr> |
| 325 <tr data-expected-height="77"> |
| 326 <td style="vertical-align:middle">row3 col1 vertical-align=middle</td> |
| 327 </tr> |
| 328 <tr data-expected-height="69"> |
| 329 <td style="vertical-align:super">row4 col1 vertical-align=super</td> |
| 330 </tr> |
| 331 <tr data-expected-height="91"> |
| 332 <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-botto
m</td> |
| 333 </tr> |
| 334 <tr data-expected-height="19"> |
| 335 <td>row6 col0</td> |
| 336 </tr> |
| 337 </tbody> |
| 338 </table> |
| 339 <h5>Test 8 - CSS Table.</h5> |
| 340 <div id="div-table"> |
| 341 <span id="span-row"> |
| 342 <span id="span-cell">row0 col0</span> |
| 343 <div id="div-cell">row0 col1</div> |
| 344 <span id="span-cell">row0 col2</span> |
| 345 </span> |
| 346 <div id="div-row"> |
| 347 <div id="div-cell">row1 col0</div> |
| 348 <span id="span-cell">row1 col1</span> |
| 349 <div id="div-cell">row1 col2</div> |
| 350 </div> |
| 351 <div id="div-row"> |
| 352 <span id="span-cell">row2 col0</span> |
| 353 </div> |
| 354 <span id="span-row"> |
| 355 <div id="div-cell">row3 col0</div> |
| 356 </span> |
| 357 <span id="span-row"> |
| 358 <span id="span-cell">row4 col0</span> |
| 359 <span id="span-cell">row4 col1</span> |
| 360 <span id="span-cell">row4 col2</span> |
| 361 </span> |
| 362 <div id="div-row"> |
| 363 <span id="span-cell">row5 col0</span> |
| 364 <div id="div-cell">row5 col1</div> |
| 365 <span id="span-cell">row5 col2</span> |
| 366 </div> |
| 367 <span id="span-row"> |
| 368 <div id="div-cell">row6 col0</div> |
| 369 <span id="span-cell">row6 col1</span> |
| 370 </span> |
| 371 <div id="div-row"> |
| 372 <div id="div-cell">row7 col0</div> |
| 373 </div> |
| 374 <span id="span-row"> |
| 375 <span id="span-cell">row8 col0</span> |
| 376 </span> |
| 377 <div id="div-row"> |
| 378 <div id="div-cell">row9 col0</div> |
| 379 </div> |
| 380 <div id="div-row"> |
| 381 <div id="div-cell">row10 col0</div> |
| 382 </div> |
| 383 </div> |
| 384 <h5>Test 9 - Table Similar to CSS table with rowspan.</h5> |
| 385 <table border="1px"> |
| 386 <tr data-expected-height="39"> |
| 387 <td rowspan=5 style="height:300px">row0 col0</td> |
| 388 <td>row0 col1</td> |
| 389 <td>row0 col2</td> |
| 390 </tr> |
| 391 <tr data-expected-height="48"> |
| 392 <td rowspan=3 style="height:200px">row1 col1</td> |
| 393 <td rowspan=2 style="height:100px">row1 col2</td> |
| 394 <td>row1 col3</td> |
| 395 </tr> |
| 396 <tr data-expected-height="47"> |
| 397 <td>row2 col3</td> |
| 398 </tr> |
| 399 <tr data-expected-height="59"> |
| 400 <td>row3 col2</td> |
| 401 </tr> |
| 402 <tr data-expected-height="60"> |
| 403 <td>row4 col1</td> |
| 404 <td>row4 col2</td> |
| 405 <td>row4 col3</td> |
| 406 </tr> |
| 407 <tr data-expected-height="19"> |
| 408 <td>row5 col0</td> |
| 409 <td>row5 col1</td> |
| 410 <td>row5 col2</td> |
| 411 </tr> |
| 412 <tr data-expected-height="0"> |
| 413 <td rowspan=5 style="height:200px">row6 col0</td> |
| 414 <td rowspan=5 style="height:100px">row6 col1</td> |
| 415 </tr> |
| 416 <tr data-expected-height="37"> |
| 417 <td>row7 col1</td> |
| 418 </tr> |
| 419 <tr data-expected-height="38"> |
| 420 <td>row8 col1</td> |
| 421 </tr> |
| 422 <tr data-expected-height="49"> |
| 423 <td>row9 col1</td> |
| 424 </tr> |
| 425 <tr data-expected-height="49"> |
| 426 <td>row10 col1</td> |
| 427 </tr> |
| 428 </table> |
| 429 </body> |
| 430 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 19390002:
Spanning logical height is not added properly in all spanning rows. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@RowSpan_B254914_6