third_party/WebKit/LayoutTests/fast/table/table-all-rowspans-height-distribution-in-rows-except-overlapped.html

   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 black }
  12     </style>
  13 </head>
  14 <body onload="checkLayout('tr')">
  15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=249600">249600</a>. Extra logical height is not properly spread over the 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 height 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 height and 2 rows have fixed height and in second spanning cell, 1 row have fixed height, 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-bottom</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="21">
 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="87">
 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="96">
 397         <td>row2 col3</td>
 398     </tr>
 399     <tr data-expected-height="40">
 400         <td>row3 col2</td>
 401     </tr>
 402     <tr data-expected-height="24">
 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>