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=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 heigh
t to this cells.</h4> |
| 17 <h5>Test 1 - One row spanning cell present under the boundries of other row span
ning 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 c
ol1 rowspan=3 height=200px<br/>row2 col1 rowspan=3 height=200px<br/>row2 col1 ro
wspan=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 heig
ht=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 span
ning 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</t
d> |
| 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</t
d> |
| 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 - RowSpan and ColSpan. </h5> |
| 129 <table border="1" width="607"> |
| 130 <tbody> |
| 131 <tr data-expected-height="34"> |
| 132 <td>row0 col0</td> |
| 133 <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td> |
| 134 <td>row0 col2</td> |
| 135 </tr> |
| 136 <tr data-expected-height="34"> |
| 137 <td>row1 col0</td> |
| 138 </tr> |
| 139 <tr data-expected-height="34"> |
| 140 <td>row2 col0</td> |
| 141 </tr> |
| 142 <tr data-expected-height="19"> |
| 143 <td colspan="3">row3 col0 - colspan=3</td> |
| 144 </tr> |
| 145 <tr data-expected-height="34"> |
| 146 <td>row4 col0</td> |
| 147 </tr> |
| 148 </tbody> |
| 149 </table> |
| 150 <h5>Test 6 - Mix of baseline aligned and non-baseline aligned cells.</h5> |
| 151 <table border="1" width="607"> |
| 152 <tbody> |
| 153 <tr data-expected-height="104"> |
| 154 <td style="height:100px">row0 col0</td> |
| 155 <td style="vertical-align:top">row0 col1 vertical-align=top</td> |
| 156 <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td> |
| 157 </tr> |
| 158 <tr data-expected-height="19"> |
| 159 <td>row1 col0</td> |
| 160 </tr> |
| 161 <tr data-expected-height="77"> |
| 162 <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 -
rowspan=4 vertical-align=text-top</td> |
| 163 <td style="vertical-align:sub">row2 col1 vertical-align=sub</td> |
| 164 </tr> |
| 165 <tr data-expected-height="77"> |
| 166 <td style="vertical-align:middle">row3 col1 vertical-align=middle</td> |
| 167 </tr> |
| 168 <tr data-expected-height="69"> |
| 169 <td style="vertical-align:super">row4 col1 vertical-align=super</td> |
| 170 </tr> |
| 171 <tr data-expected-height="91"> |
| 172 <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-botto
m</td> |
| 173 </tr> |
| 174 <tr data-expected-height="19"> |
| 175 <td>row6 col0</td> |
| 176 </tr> |
| 177 </tbody> |
| 178 </table> |
| 179 <h5>Test 7 - CSS Table.</h5> |
| 180 <div id="div-table"> |
| 181 <span id="span-row"> |
| 182 <span id="span-cell">row0 col0</span> |
| 183 <div id="div-cell">row0 col1</div> |
| 184 <span id="span-cell">row0 col2</span> |
| 185 </span> |
| 186 <div id="div-row"> |
| 187 <div id="div-cell">row1 col0</div> |
| 188 <span id="span-cell">row1 col1</span> |
| 189 <div id="div-cell">row1 col2</div> |
| 190 </div> |
| 191 <div id="div-row"> |
| 192 <span id="span-cell">row2 col0</span> |
| 193 </div> |
| 194 <span id="span-row"> |
| 195 <div id="div-cell">row3 col0</div> |
| 196 </span> |
| 197 <span id="span-row"> |
| 198 <span id="span-cell">row4 col0</span> |
| 199 <span id="span-cell">row4 col1</span> |
| 200 <span id="span-cell">row4 col2</span> |
| 201 </span> |
| 202 <div id="div-row"> |
| 203 <span id="span-cell">row5 col0</span> |
| 204 <div id="div-cell">row5 col1</div> |
| 205 <span id="span-cell">row5 col2</span> |
| 206 </div> |
| 207 <span id="span-row"> |
| 208 <div id="div-cell">row6 col0</div> |
| 209 <span id="span-cell">row6 col1</span> |
| 210 </span> |
| 211 <div id="div-row"> |
| 212 <div id="div-cell">row7 col0</div> |
| 213 </div> |
| 214 <span id="span-row"> |
| 215 <span id="span-cell">row8 col0</span> |
| 216 </span> |
| 217 <div id="div-row"> |
| 218 <div id="div-cell">row9 col0</div> |
| 219 </div> |
| 220 <div id="div-row"> |
| 221 <div id="div-cell">row10 col0</div> |
| 222 </div> |
| 223 </div> |
| 224 <h5>Test 8 - Table Similar to CSS table with rowspan.</h5> |
| 225 <table border="1px"> |
| 226 <tr data-expected-height="21"> |
| 227 <td rowspan=5 style="height:300px">row0 col0</td> |
| 228 <td>row0 col1</td> |
| 229 <td>row0 col2</td> |
| 230 </tr> |
| 231 <tr data-expected-height="87"> |
| 232 <td rowspan=3 style="height:200px">row1 col1</td> |
| 233 <td rowspan=2 style="height:100px">row1 col2</td> |
| 234 <td>row1 col3</td> |
| 235 </tr> |
| 236 <tr data-expected-height="96"> |
| 237 <td>row2 col3</td> |
| 238 </tr> |
| 239 <tr data-expected-height="40"> |
| 240 <td>row3 col2</td> |
| 241 </tr> |
| 242 <tr data-expected-height="24"> |
| 243 <td>row4 col1</td> |
| 244 <td>row4 col2</td> |
| 245 <td>row4 col3</td> |
| 246 </tr> |
| 247 <tr data-expected-height="19"> |
| 248 <td>row5 col0</td> |
| 249 <td>row5 col1</td> |
| 250 <td>row5 col2</td> |
| 251 </tr> |
| 252 <tr data-expected-height="0"> |
| 253 <td rowspan=5 style="height:200px">row6 col0</td> |
| 254 <td rowspan=5 style="height:100px">row6 col1</td> |
| 255 </tr> |
| 256 <tr data-expected-height="37"> |
| 257 <td>row7 col1</td> |
| 258 </tr> |
| 259 <tr data-expected-height="38"> |
| 260 <td>row8 col1</td> |
| 261 </tr> |
| 262 <tr data-expected-height="49"> |
| 263 <td>row9 col1</td> |
| 264 </tr> |
| 265 <tr data-expected-height="49"> |
| 266 <td>row10 col1</td> |
| 267 </tr> |
| 268 </table> |
| 269 </body> |
| 270 </html> |
OLD | NEW |