third_party/WebKit/LayoutTests/fast/table/table-all-rowspans-height-distribution-in-rows.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=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 height to this cells.</h4>
  17 <h5>Test 1 - One row spanning cell present under the boundries of other row spanning cell and inner row spanning cell have lots of content.</h5>
  18 <table border="1">
  19   <tbody>
  20     <tr  data-expected-height="19">
  21       <td rowspan="6" style="height:400px">row0 col0 rowspan=6 height=400px</td>
  22       <td>row0 col1</td>
  23     </tr>
  24     <tr data-expected-height="19">
  25           <td>row1 col1</td>
  26         </tr>
  27     <tr data-expected-height="0">
  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 col1 rowspan=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 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/></td>
  29     </tr>
  30     <tr data-expected-height="165">
  31       <td>row3 col2</td>
  32     </tr>
  33     <tr data-expected-height="168">
  34       <td>row4 col2</td>
  35     </tr>
  36     <tr data-expected-height="20">
  37       <td>row5 col1</td>
  38     </tr>
  39     <tr data-expected-height="19">
  40       <td>row6 col0</td>
  41     </tr>
  42   </tbody>
  43 </table>
  44 <h5>Test 2 - One row spanning cell present under the boundries of other row spanning cell and inner row spanning cell have its own height.</h5>
  45 <table border="1" width="607">
  46   <tbody>
  47     <tr  data-expected-height="23">
  48       <td rowspan="6" style="height:600px">row0 col0 rowspan=6 height=600px</td>
  49       <td>row0 col1</td>
  50     </tr>
  51     <tr data-expected-height="24">
  52           <td>row1 col1</td>
  53         </tr>
  54     <tr data-expected-height="0">
  55       <td rowspan="3" style="height:400px">row2 col1 rowspan=3 height=400px</td>
  56     </tr>
  57     <tr data-expected-height="247">
  58       <td>row3 col2</td>
  59     </tr>
  60     <tr data-expected-height="260">
  61       <td>row4 col2</td>
  62     </tr>
  63     <tr data-expected-height="25">
  64       <td>row5 col1</td>
  65     </tr>
  66     <tr data-expected-height="19">
  67       <td>row6 col0</td>
  68     </tr>
  69   </tbody>
  70 </table>
  71 <h5>Test 3 - 2 same row spanning cells with diffrent heights.</h5>
  72 <table border="1">
  73   <tbody>
  74     <tr  data-expected-height="0">
  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>
  77     </tr>
  78     <tr data-expected-height="90">
  79           <td>row1 col1</td>
  80         </tr>
  81     <tr data-expected-height="94">
  82       <td>row2 col1</td>
  83     </tr>
  84     <tr data-expected-height="95">
  85       <td>row3 col1</td>
  86     </tr>
  87     <tr data-expected-height="99">
  88       <td>row4 col1</td>
  89     </tr>
  90     <tr data-expected-height="99">
  91       <td>row5 col1</td>
  92     </tr>
  93     <tr data-expected-height="19">
  94       <td>row6 col0</td>
  95     </tr>
  96   </tbody>
  97 </table>
  98 <h5>Test 4 - some rows are common between 2 row spanning cells.</h5>
  99 <table border="1">
 100   <tbody>
 101     <tr data-expected-height="43">
 102         <td rowspan="6" style="height:400px">row0 col0 rowspan=6 height=400px</td>
 103         <td>row0 col1</td>
 104     </tr>
 105     <tr data-expected-height="0">
 106         <td rowspan="6" style="height:800px">row1 col1 rowspan=6 height=800px</td>
 107     </tr>
 108     <tr data-expected-height="168">
 109         <td>row2 col2</td>
 110     </tr>
 111     <tr data-expected-height="177">
 112         <td>row3 col2</td>
 113     </tr>
 114     <tr data-expected-height="176">
 115         <td>row4 col2</td>
 116     </tr>
 117     <tr data-expected-height="189">
 118         <td>row5 col2</td>
 119     </tr>
 120     <tr data-expected-height="42">
 121         <td>row6 col2</td>
 122     </tr>
 123     <tr data-expected-height="19">
 124         <td>row7 col0</td>
 125     </tr>
 126   </tbody>
 127 </table>
 128 <h5>Test 5 - 2 spanning cells starts at diffrent row index but end at same row index.</h5>
 129 <table border="1">
 130   <tbody>
 131     <tr data-expected-height="35">
 132         <td rowspan="6" style="height:600px">row0 col0 rowspan=6 height=400px</td>
 133         <td>row0 col1</td>
 134     </tr>
 135     <tr data-expected-height="0">
 136         <td rowspan="5" style="height:300px">row1 col1 rowspan=6 height=800px</td>
 137     </tr>
 138     <tr data-expected-height="130">
 139         <td>row2 col2</td>
 140     </tr>
 141     <tr data-expected-height="132">
 142         <td>row3 col2</td>
 143     </tr>
 144     <tr data-expected-height="140">
 145         <td>row4 col2</td>
 146     </tr>
 147     <tr data-expected-height="140">
 148         <td>row5 col2</td>
 149     </tr>
 150     <tr data-expected-height="19">
 151         <td>row6 col2</td>
 152     </tr>
 153     <tr data-expected-height="19">
 154         <td>row7 col0</td>
 155     </tr>
 156   </tbody>
 157 </table>
 158 <h5>Test 6 - RowSpan and ColSpan. </h5>
 159 <table border="1" width="607">
 160   <tbody>
 161     <tr data-expected-height="34">
 162           <td>row0 col0</td>
 163           <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td>
 164       <td>row0 col2</td>
 165         </tr>
 166     <tr data-expected-height="34">
 167       <td>row1 col0</td>
 168     </tr>
 169     <tr data-expected-height="34">
 170       <td>row2 col0</td>
 171     </tr>
 172     <tr data-expected-height="19">
 173       <td colspan="3">row3 col0 - colspan=3</td>
 174     </tr>
 175     <tr data-expected-height="34">
 176       <td>row4 col0</td>
 177     </tr>
 178   </tbody>
 179 </table>
 180 <h5>Test 7 - Mix of baseline aligned and non-baseline aligned cells.</h5>
 181 <table border="1" width="607">
 182   <tbody>
 183     <tr data-expected-height="104">
 184           <td style="height:100px">row0 col0</td>
 185           <td style="vertical-align:top">row0 col1 vertical-align=top</td>
 186       <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td>
 187         </tr>
 188     <tr data-expected-height="19">
 189       <td>row1 col0</td>
 190     </tr>
 191     <tr data-expected-height="77">
 192       <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 - rowspan=4 vertical-align=text-top</td>
 193       <td style="vertical-align:sub">row2 col1 vertical-align=sub</td>
 194     </tr>
 195     <tr data-expected-height="77">
 196       <td style="vertical-align:middle">row3 col1 vertical-align=middle</td>
 197     </tr>
 198     <tr data-expected-height="69">
 199       <td style="vertical-align:super">row4 col1 vertical-align=super</td>
 200     </tr>
 201     <tr data-expected-height="91">
 202       <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-bottom</td>
 203     </tr>
 204     <tr data-expected-height="19">
 205       <td>row6 col0</td>
 206     </tr>
 207   </tbody>
 208 </table>
 209 <h5>Test 8 - CSS Table.</h5>
 210 <div id="div-table">
 211     <span id="span-row">
 212         <span id="span-cell">row0 col0</span>
 213         <div id="div-cell">row0 col1</div>
 214         <span id="span-cell">row0 col2</span>
 215     </span>
 216     <div id="div-row">
 217         <div id="div-cell">row1 col0</div>
 218         <span id="span-cell">row1 col1</span>
 219         <div id="div-cell">row1 col2</div>
 220     </div>
 221     <div id="div-row">
 222         <span id="span-cell">row2 col0</span>
 223     </div>
 224     <span id="span-row">
 225         <div id="div-cell">row3 col0</div>
 226     </span>
 227     <span id="span-row">
 228         <span id="span-cell">row4 col0</span>
 229         <span id="span-cell">row4 col1</span>
 230         <span id="span-cell">row4 col2</span>
 231     </span>
 232     <div id="div-row">
 233         <span id="span-cell">row5 col0</span>
 234         <div id="div-cell">row5 col1</div>
 235         <span id="span-cell">row5 col2</span>
 236     </div>
 237     <span id="span-row">
 238         <div id="div-cell">row6 col0</div>
 239         <span id="span-cell">row6 col1</span>
 240     </span>
 241     <div id="div-row">
 242         <div id="div-cell">row7 col0</div>
 243     </div>
 244     <span id="span-row">
 245         <span id="span-cell">row8 col0</span>
 246     </span>
 247     <div id="div-row">
 248         <div id="div-cell">row9 col0</div>
 249     </div>
 250     <div id="div-row">
 251         <div id="div-cell">row10 col0</div>
 252     </div>
 253 </div>
 254 <h5>Test 9 - Table Similar to CSS table with rowspan.</h5>
 255 <table border="1px">
 256     <tr data-expected-height="21">
 257         <td rowspan=5 style="height:300px">row0 col0</td>
 258         <td>row0 col1</td>
 259         <td>row0 col2</td>
 260     </tr>
 261     <tr data-expected-height="87">
 262         <td rowspan=3 style="height:200px">row1 col1</td>
 263         <td rowspan=2 style="height:100px">row1 col2</td>
 264         <td>row1 col3</td>
 265     </tr>
 266     <tr data-expected-height="96">
 267         <td>row2 col3</td>
 268     </tr>
 269     <tr data-expected-height="40">
 270         <td>row3 col2</td>
 271     </tr>
 272     <tr data-expected-height="24">
 273         <td>row4 col1</td>
 274         <td>row4 col2</td>
 275         <td>row4 col3</td>
 276     </tr>
 277     <tr data-expected-height="19">
 278         <td>row5 col0</td>
 279         <td>row5 col1</td>
 280         <td>row5 col2</td>
 281     </tr>
 282     <tr data-expected-height="0">
 283         <td rowspan=5 style="height:200px">row6 col0</td>
 284         <td rowspan=5 style="height:100px">row6 col1</td>
 285     </tr>
 286     <tr data-expected-height="37">
 287         <td>row7 col1</td>
 288     </tr>
 289     <tr data-expected-height="38">
 290         <td>row8 col1</td>
 291     </tr>
 292     <tr data-expected-height="49">
 293         <td>row9 col1</td>
 294     </tr>
 295     <tr data-expected-height="49">
 296         <td>row10 col1</td>
 297     </tr>
 298 </table>
 299 </body>
 300 </html>