third_party/WebKit/LayoutTests/fast/table/table-rowspan-height-distribution-in-rows-2.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=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>
  17 <h5>Test 1 - One rowSpan cell</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   </tbody>
  40 </table>
  41 <h5>Test 2 - One rowSpan cell and specified table width</h5>
  42 <table border="1" width="607">
  43   <tbody>
  44     <tr data-expected-height="19">
  45           <td rowspan="5">row0 col0 - rowspan=5</td>
  46           <td>row0 col1</td>
  47         </tr>
  48     <tr data-expected-height="19">
  49       <td>row1 col1</td>
  50     </tr>
  51     <tr data-expected-height="19">
  52       <td>row2 col1</td>
  53     </tr>
  54     <tr data-expected-height="19">
  55       <td>row3 col1</td>
  56     </tr>
  57     <tr data-expected-height="19">
  58       <td>row4 col1</td>
  59     </tr>
  60   </tbody>
  61 </table>
  62 <h5>Test 3 - One rowSpan cell and specified rowSpan cell height</h5>
  63 <table border="1">
  64   <tbody>
  65     <tr>
  66       <td>row0 col0</td>
  67     </tr>
  68     <tr data-expected-height="57">
  69           <td>row1 col0</td>
  70           <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300px</td>
  71         </tr>
  72     <tr data-expected-height="57">
  73       <td>row2 col0</td>
  74     </tr>
  75     <tr data-expected-height="74">
  76       <td>row3 col0</td>
  77     </tr>
  78     <tr data-expected-height="75">
  79       <td>row4 col0</td>
  80     </tr>
  81     <tr data-expected-height="19">
  82       <td>row5 col0</td>
  83       <td>row5 col1</td>
  84     </tr>
  85   </tbody>
  86 </table>
  87 <h5>Test 4 - One rowSpan cell and one cell have fixed height.</h5>
  88 <table border="1">
  89   <tbody>
  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=300px</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=300px</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=300px</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 percent is less than 100.</h5>
 163 <table border="1">
 164   <tbody>
 165     <tr>
 166       <td>row0 col0</td>
 167     </tr>
 168     <tr data-expected-height="33">
 169           <td>row1 col0</td>
 170           <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300px</td>
 171         </tr>
 172     <tr data-expected-height="37">
 173       <td>row2 col0</td>
 174     </tr>
 175     <tr data-expected-height="131">
 176       <td style="height:30%">row3 col0 height=30%</td>
 177     </tr>
 178     <tr data-expected-height="142">
 179       <td style="height:40%">row4 col0 height=40%</td>
 180     </tr>
 181     <tr data-expected-height="19">
 182       <td>row5 col0</td>
 183       <td>row5 col1</td>
 184     </tr>
 185   </tbody>
 186 </table>
 187 <h5>Test 8 - One rowSpan cell and three cells have percent height but total percent 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=300px</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=500px</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>
 238 <table border="1" width="607">
 239   <tbody>
 240     <tr data-expected-height="34">
 241           <td>row0 col0</td>
 242           <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td>
 243       <td>row0 col2</td>
 244         </tr>
 245     <tr data-expected-height="34">
 246       <td>row1 col0</td>
 247     </tr>
 248     <tr data-expected-height="34">
 249       <td>row2 col0</td>
 250     </tr>
 251     <tr data-expected-height="19">
 252       <td colspan="3">row3 col0 - colspan=3</td>
 253     </tr>
 254     <tr data-expected-height="34">
 255       <td>row4 col0</td>
 256     </tr>
 257   </tbody>
 258 </table>
 259 <h5>Test 11 - Mix of baseline aligned and non-baseline aligned cells.</h5>
 260 <table border="1" width="607">
 261   <tbody>
 262     <tr data-expected-height="104">
 263           <td style="height:100px">row0 col0</td>
 264           <td style="vertical-align:top">row0 col1 vertical-align=top</td>
 265       <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td>
 266         </tr>
 267     <tr data-expected-height="19">
 268       <td>row1 col0</td>
 269     </tr>
 270     <tr data-expected-height="77">
 271       <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 - rowspan=4 vertical-align=text-top</td>
 272       <td style="vertical-align:sub">row2 col1 vertical-align=sub</td>
 273     </tr>
 274     <tr data-expected-height="77">
 275       <td style="vertical-align:middle">row3 col1 vertical-align=middle</td>
 276     </tr>
 277     <tr data-expected-height="69">
 278       <td style="vertical-align:super">row4 col1 vertical-align=super</td>
 279     </tr>
 280     <tr data-expected-height="91">
 281       <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-bottom</td>
 282     </tr>
 283     <tr data-expected-height="19">
 284       <td>row6 col0</td>
 285     </tr>
 286   </tbody>
 287 </table>
 288 <h5>Test 12 - CSS Table.</h5>
 289 <div id="div-table">
 290     <span id="span-row">
 291         <span id="span-cell">row0 col0</span>
 292         <div id="div-cell">row0 col1</div>
 293         <span id="span-cell">row0 col2</span>
 294     </span>
 295     <div id="div-row">
 296         <div id="div-cell">row1 col0</div>
 297         <span id="span-cell">row1 col1</span>
 298         <div id="div-cell">row1 col2</div>
 299     </div>
 300     <div id="div-row">
 301         <span id="span-cell">row2 col0</span>
 302     </div>
 303     <span id="span-row">
 304         <div id="div-cell">row3 col0</div>
 305     </span>
 306     <span id="span-row">
 307         <span id="span-cell">row4 col0</span>
 308         <span id="span-cell">row4 col1</span>
 309         <span id="span-cell">row4 col2</span>
 310     </span>
 311     <div id="div-row">
 312         <span id="span-cell">row5 col0</span>
 313         <div id="div-cell">row5 col1</div>
 314         <span id="span-cell">row5 col2</span>
 315     </div>
 316     <span id="span-row">
 317         <div id="div-cell">row6 col0</div>
 318         <span id="span-cell">row6 col1</span>
 319     </span>
 320     <div id="div-row">
 321         <div id="div-cell">row7 col0</div>
 322     </div>
 323     <span id="span-row">
 324         <span id="span-cell">row8 col0</span>
 325     </span>
 326     <div id="div-row">
 327         <div id="div-cell">row9 col0</div>
 328     </div>
 329     <div id="div-row">
 330         <div id="div-cell">row10 col0</div>
 331     </div>
 332 </div>
 333 <h5>Test 13 - Table Similar to CSS table with rowspan.</h5>
 334 <table border="1px">
 335     <tr data-expected-height="21">
 336         <td rowspan=5 style="height:300px">row0 col0</td>
 337         <td>row0 col1</td>
 338         <td>row0 col2</td>
 339     </tr>
 340     <tr data-expected-height="87">
 341         <td rowspan=3 style="height:200px">row1 col1</td>
 342         <td rowspan=2 style="height:100px">row1 col2</td>
 343         <td>row1 col3</td>
 344     </tr>
 345     <tr data-expected-height="96">
 346         <td>row2 col3</td>
 347     </tr>
 348     <tr data-expected-height="40">
 349         <td>row3 col2</td>
 350     </tr>
 351     <tr data-expected-height="24">
 352         <td>row4 col1</td>
 353         <td>row4 col2</td>
 354         <td>row4 col3</td>
 355     </tr>
 356     <tr data-expected-height="19">
 357         <td>row5 col0</td>
 358         <td>row5 col1</td>
 359         <td>row5 col2</td>
 360     </tr>
 361     <tr data-expected-height="0">
 362         <td rowspan=5 style="height:200px">row6 col0</td>
 363         <td rowspan=5 style="height:100px">row6 col1</td>
 364     </tr>
 365     <tr data-expected-height="37">
 366         <td>row7 col1</td>
 367     </tr>
 368     <tr data-expected-height="38">
 369         <td>row8 col1</td>
 370     </tr>
 371     <tr data-expected-height="49">
 372         <td>row9 col1</td>
 373     </tr>
 374     <tr data-expected-height="49">
 375         <td>row10 col1</td>
 376     </tr>
 377 </table>
 378 </body>
 379 </html>