third_party/WebKit/LayoutTests/fast/table/table-rowspan-height-distribution-in-rows-1.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=78724">78724</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 - 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</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 specified cells height</h5>
  88 <table border="1">
  89   <tbody>
  90     <tr>
  91       <td>row0 col0</td>
  92     </tr>
  93     <tr data-expected-height="59">
  94           <td>row1 col0</td>
  95           <td rowspan="4" style="height:300px">row1 col1 - rowspan=4</td>
  96         </tr>
  97     <tr data-expected-height="74">
  98       <td style="height:70px">row2 col0</td>
  99     </tr>
 100     <tr data-expected-height="34">
 101       <td style="height:30px">row3 col0</td>
 102     </tr>
 103     <tr data-expected-height="104">
 104       <td style="height:100px">row4 col0</td>
 105     </tr>
 106     <tr data-expected-height="54">
 107       <td style="height:50px">row5 col0</td>
 108       <td>row5 col1</td>
 109     </tr>
 110   </tbody>
 111 </table>
 112 <h5>Test 5 - RowSpan and ColSpan. </h5>
 113 <table border="1" width="607">
 114   <tbody>
 115     <tr data-expected-height="34">
 116           <td>row0 col0</td>
 117           <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td>
 118       <td>row0 col2</td>
 119         </tr>
 120     <tr data-expected-height="34">
 121       <td>row1 col0</td>
 122     </tr>
 123     <tr data-expected-height="34">
 124       <td>row2 col0</td>
 125     </tr>
 126     <tr data-expected-height="19">
 127       <td colspan="3">row3 col0 - colspan=3</td>
 128     </tr>
 129     <tr data-expected-height="34">
 130       <td>row4 col0</td>
 131     </tr>
 132   </tbody>
 133 </table>
 134 <h5>Test 6 - Mix of baseline aligned and non-baseline aligned cells.</h5>
 135 <table border="1" width="607">
 136   <tbody>
 137     <tr data-expected-height="104">
 138           <td style="height:100px">row0 col0</td>
 139           <td style="vertical-align:top">row0 col1 vertical-align=top</td>
 140       <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td>
 141         </tr>
 142     <tr data-expected-height="19">
 143       <td>row1 col0</td>
 144     </tr>
 145     <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>
 147       <td style="vertical-align:sub">row2 col1 vertical-align=sub</td>
 148     </tr>
 149     <tr data-expected-height="77">
 150       <td style="vertical-align:middle">row3 col1 vertical-align=middle</td>
 151     </tr>
 152     <tr data-expected-height="69">
 153       <td style="vertical-align:super">row4 col1 vertical-align=super</td>
 154     </tr>
 155     <tr data-expected-height="91">
 156       <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-bottom</td>
 157     </tr>
 158     <tr data-expected-height="19">
 159       <td>row6 col0</td>
 160     </tr>
 161   </tbody>
 162 </table>
 163 <h5>Test 7 - CSS Table.</h5>
 164 <div id="div-table">
 165     <span id="span-row">
 166         <span id="span-cell">row0 col0</span>
 167         <div id="div-cell">row0 col1</div>
 168         <span id="span-cell">row0 col2</span>
 169     </span>
 170     <div id="div-row">
 171         <div id="div-cell">row1 col0</div>
 172         <span id="span-cell">row1 col1</span>
 173         <div id="div-cell">row1 col2</div>
 174     </div>
 175     <div id="div-row">
 176         <span id="span-cell">row2 col0</span>
 177     </div>
 178     <span id="span-row">
 179         <div id="div-cell">row3 col0</div>
 180     </span>
 181     <span id="span-row">
 182         <span id="span-cell">row4 col0</span>
 183         <span id="span-cell">row4 col1</span>
 184         <span id="span-cell">row4 col2</span>
 185     </span>
 186     <div id="div-row">
 187         <span id="span-cell">row5 col0</span>
 188         <div id="div-cell">row5 col1</div>
 189         <span id="span-cell">row5 col2</span>
 190     </div>
 191     <span id="span-row">
 192         <div id="div-cell">row6 col0</div>
 193         <span id="span-cell">row6 col1</span>
 194     </span>
 195     <div id="div-row">
 196         <div id="div-cell">row7 col0</div>
 197     </div>
 198     <span id="span-row">
 199         <span id="span-cell">row8 col0</span>
 200     </span>
 201     <div id="div-row">
 202         <div id="div-cell">row9 col0</div>
 203     </div>
 204     <div id="div-row">
 205         <div id="div-cell">row10 col0</div>
 206     </div>
 207 </div>
 208 <h5>Test 8 - Table Similar to CSS table with rowspan.</h5>
 209 <table border="1px">
 210     <tr data-expected-height="21">
 211         <td rowspan=5 style="height:300px">row0 col0</td>
 212         <td>row0 col1</td>
 213         <td>row0 col2</td>
 214     </tr>
 215     <tr data-expected-height="87">
 216         <td rowspan=3 style="height:200px">row1 col1</td>
 217         <td rowspan=2 style="height:100px">row1 col2</td>
 218         <td>row1 col3</td>
 219     </tr>
 220     <tr data-expected-height="96">
 221         <td>row2 col3</td>
 222     </tr>
 223     <tr data-expected-height="40">
 224         <td>row3 col2</td>
 225     </tr>
 226     <tr data-expected-height="24">
 227         <td>row4 col1</td>
 228         <td>row4 col2</td>
 229         <td>row4 col3</td>
 230     </tr>
 231     <tr data-expected-height="19">
 232         <td>row5 col0</td>
 233         <td>row5 col1</td>
 234         <td>row5 col2</td>
 235     </tr>
 236     <tr data-expected-height="0">
 237         <td rowspan=5 style="height:200px">row6 col0</td>
 238         <td rowspan=5 style="height:100px">row6 col1</td>
 239     </tr>
 240     <tr data-expected-height="37">
 241         <td>row7 col1</td>
 242     </tr>
 243     <tr data-expected-height="38">
 244         <td>row8 col1</td>
 245     </tr>
 246     <tr data-expected-height="49">
 247         <td>row9 col1</td>
 248     </tr>
 249     <tr data-expected-height="49">
 250         <td>row10 col1</td>
 251     </tr>
 252 </table>
 253 </body>
 254 </html>