table-height-redistribution.html (9876B)
1 <!doctype html> 2 <title>TABLE height redistribution</title> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src="/resources/check-layout-th.js"></script> 6 <link rel='stylesheet' href='../support/base.css' /> 7 <link rel='stylesheet' href='./support/table-tentative.css' /> 8 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 9 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" /> 10 <style> 11 main table { 12 border-spacing: 0px; 13 background: rgba(255,0,0,0.3); 14 height: 100px; 15 width: 100px; 16 } 17 main td { 18 padding: 0; 19 } 20 main table tbody:nth-child(1) { 21 background: #CCC; 22 } 23 main table tbody:nth-child(2) { 24 background: #AAA; 25 } 26 main table tbody:nth-child(3) { 27 background: #999; 28 } 29 main table thead { 30 background: rgba(0,255,0,0.3); 31 } 32 main table tfoot { 33 background: rgba(255,255,0,0.3); 34 } 35 36 .debug { 37 width:100px; 38 height:1px; 39 position:relative; 40 } 41 .debug pre { 42 position:absolute; 43 font: 30px/30px monospace; 44 left: 120px; 45 top:-30px; 46 } 47 48 </style> 49 <main> 50 <h1>Tests for redistribution of table height to row group height.</h1> 51 <p>This algorithm has not been standardized. Browsers implementations disagree a lot. 52 Legacy Chrome used to always distribute all the height to the first tbody.</p> 53 54 <pre class=error>Major incompatibility: Legacy: 55 - ignores any height set on sections. 56 - does not size the table unless section has a TR 57 - does not grow sections without TDs 58 - only distributes height to the 1st tbody 59 FF 60 - does not prioritize thead for height distribution most of the time. 61 - y offset of multiple tbodies can be incorrect. 62 </pre> 63 64 <h2>Empty table</h2> 65 <p>Empty tables always grow to specified height in all browsers.</p> 66 <p class="testdesc">no sections</p> 67 <table data-expected-height=100></table> 68 69 <p class="testdesc">no sections, no border spacing</p> 70 <table style="border-spacing: 0" data-expected-height=100></table> 71 72 <p class="testdesc">collapsed table no sections</p> 73 <table style="border-collapse:collapse" data-expected-height=100></table> 74 75 <p class="testdesc">fixed table no sections</p> 76 <table style="table-layout:fixed" data-expected-height=100></table> 77 78 <h2>One TBODY</h2> 79 <p>The big difference here is between empty TBODY, and a body with an empty TR</p> 80 <li>FF: always sizes the table, only sizes TBODY if it has TR.</li> 81 <li>Legacy: does not size the table unless TBODY has TR</li> 82 <p>FF: sizes the table, but tbody size remains 0 unless tbody is not empty.</p> 83 <p>Legacy table size remains 0, or border-spacing</p> 84 85 <p class="testdesc">single empty tbody</p> 86 <table data-expected-height=100> 87 <tbody data-expected-height=100></tbody> 88 </table> 89 90 <p class="testdesc">single tbody+tr</p> 91 <table data-expected-height=100> 92 <tbody data-expected-height=100><tr></tr></tbody> 93 </table> 94 95 <p class="testdesc">border spacing</p> 96 <p class="error">FF/Legacy do not apply border-spacing</p> 97 <table style="border-spacing: 10px" data-expected-height=100> 98 <tbody data-expected-height=80><tr></tr></tbody> 99 </table> 100 101 <p class="testdesc">collapsed table</p> 102 <table style="border-collapse:collapse" data-expected-height=100> 103 <tbody data-expected-height=100><tr></tr></tbody> 104 </table> 105 106 <p class="testdesc">fixed table</p> 107 <table style="table-layout:fixed" data-expected-height=100> 108 <tbody data-expected-height=100><tr></tr></tbody> 109 </table> 110 111 <p class="testdesc">tbody has fixed height</p> 112 <p class="error">FF adds tbody height to table?</p> 113 <table data-expected-height=100> 114 <tbody style="height:50px" data-expected-height=100><tr></tr></tbody> 115 </table> 116 117 <p class="testdesc">tbody has fixed height > table</p> 118 <p class="error">Legacy: table size wins. FF: table size wins, but body grows to 300px?</p> 119 <table data-expected-height=200> 120 <tbody style="height:200px" data-expected-height=200><tr></tr></tbody> 121 </table> 122 123 <p class="testdesc">tr has fixed height > table</p> 124 <p class="error">FF: table size wins, but body is 300.</p> 125 <table data-expected-height=200> 126 <tbody data-expected-height=200><tr style="height:200px"></tr></tbody> 127 </table> 128 129 <p class="testdesc">tbody has percentage height > table</p> 130 <table data-expected-height=100> 131 <tbody style="height:200%" data-expected-height=100><tr></tr></tbody> 132 </table> 133 134 <p class="testdesc">tr has percentage height > table</p> 135 <p class=error>FF/Legacy: table wins. FF: body is 200px</p> 136 <table data-expected-height=100> 137 <tbody data-expected-height=100><tr style="height:200%"></tr></tbody> 138 </table> 139 140 <p class="testdesc">non-empty tbody</p> 141 <table data-expected-height=100> 142 <tbody data-expected-height=100><tr></tr></tbody> 143 </table> 144 145 <p class="testdesc">non-empty thead</p> 146 <table data-expected-height=100> 147 <thead data-expected-height=100><tr></tr></thead> 148 </table> 149 150 <h2>THEAD TBODY</h2> 151 152 <p class="testdesc">empty thead, empty tbody</p> 153 <p class="error">FF thead/tbody both grow</p> 154 <table data-expected-height=100> 155 <thead data-expected-height=0><tr></tr></thead> 156 <tbody data-expected-height=100><tr></tr></tbody> 157 </table> 158 159 <p class="testdesc">sized thead, empty tbody</p> 160 <table data-expected-height=100> 161 <thead data-expected-height=20><td style="height:20px">thead</td></thead> 162 <tbody data-expected-height=80><tr></tr></tbody> 163 </table> 164 165 <p class="testdesc">table layout fixed, thead with td, tbody</p> 166 <table style="table-layout:fixed" data-expected-height=100> 167 <thead data-expected-height=20> 168 <tr> 169 <td style="height:20px">thead</td> 170 </tr> 171 </thead> 172 <tbody data-expected-height=80><tr><td>x</td></tr></tbody> 173 </table> 174 175 <p class="testdesc">table layout fixed, thead+td, tbody+td</p> 176 <table style="table-layout:fixed" data-expected-height=100> 177 <thead data-expected-height=20> 178 <tr> 179 <td style="height:20px">thead</td> 180 </tr> 181 </thead> 182 <tbody data-expected-height=80><tr><td>x</td></tr></tbody> 183 </table> 184 185 <p class="testdesc">thead with td</p> 186 <table data-expected-height=100> 187 <thead data-expected-height=20> 188 <tr> 189 <td style="height:20px">thead</td> 190 </tr> 191 </thead> 192 <tbody data-expected-height=80> 193 <tr> 194 </tr> 195 </tbody> 196 </table> 197 198 <p class="testdesc">tfoot with td</p> 199 <table data-expected-height=100> 200 <tfoot data-expected-height=20> 201 <tr> 202 <td style="height:20px">tfoot</td> 203 </tr> 204 </tfoot> 205 <tbody data-expected-height=80> 206 <tr> 207 </tr> 208 </tbody> 209 </table> 210 211 <h2>Multiple TBODY</h2> 212 <p class="error">Legacy does not distribute any heights when tr is empty.</p> 213 <p class="error">Legacy always distributes everything to 1st tbody.</p> 214 215 <p class="testdesc">2 tbody</p> 216 <table data-expected-height=100> 217 <tbody data-expected-height=50><tr></tr></tbody> 218 <tbody data-expected-height=50><tr></tr></tbody> 219 </table> 220 221 <p class="testdesc">2 tbody, with non-empty tds</p> 222 <p class="error">Legacy distributes everything to 1st tbody</p> 223 <table data-expected-height=100> 224 <tbody data-expected-height=50><tr><td>x</td></tr></tbody> 225 <tbody data-expected-height=50><tr><td>x</td></tr></tbody> 226 </table> 227 228 229 <p class="testdesc">2 tbody, 40%, auto, no td</p> 230 <p class="error">FF: distributes everything to auto when empty. Legacy does not distribute</p> 231 <table data-expected-height=100> 232 <tbody style="height:40%" data-expected-height=40><tr></tr></tbody> 233 <tbody data-expected-height=60><tr></tr></tbody> 234 </table> 235 236 <p class="testdesc">2 tbody, 40%, auto, non-empty td</p> 237 <table data-expected-height=100> 238 <tbody style="height:40%" data-expected-height=40><tr><td>x</td></tr></tbody> 239 <tbody data-expected-height=60><tr><td>x</td></tr></tbody> 240 </table> 241 242 <p class="testdesc">2 tbody, 40px, auto, non-empty td</p> 243 <p class="error">FF gets confused with 2nd body placement</p> 244 <table data-expected-height=100> 245 <tbody style="height:40px" data-expected-height=40><tr><td>x</td></tr></tbody> 246 <tbody data-expected-height=60 data-offset-y=40><tr><td>x</td></tr></tbody> 247 </table> 248 249 <p class="testdesc">2 tbody, 40%, 40px, non-empty td</p> 250 <p class="error">FF splits evenly</p> 251 <table data-expected-height=100> 252 <tbody style="height:40%" data-expected-height=40><tr><td>x</td></tr></tbody> 253 <tbody style="height:40px" data-expected-height=60 data-offset-y=40><tr><td>x</td></tr></tbody> 254 </table> 255 256 <h2>Sized THEAD/TBODY</h2> 257 <p class=error>FF does not prioritize TBODY for distribution</p> 258 <p class="testdesc">20px thead, 30px tbody</p> 259 <table data-expected-height=100> 260 <thead data-expected-height=20 style="height:20px"> 261 <tr><td>x</td></tr> 262 </thead> 263 <tbody data-expected-height=80 style="height:30px"> 264 <tr><td>x</td></tr> 265 </tbody> 266 </table> 267 268 <p class="testdesc">20px thead's tr, 30px tbody's tr</p> 269 <table data-expected-height=100> 270 <thead data-expected-height=20 > 271 <tr style="height:20px"><td>x</td></tr> 272 </thead> 273 <tbody data-expected-height=80 > 274 <tr style="height:30px"><td>x</td></tr> 275 </tbody> 276 </table> 277 278 <p class="testdesc">20px thead's td, 30px tbody's td</p> 279 <table data-expected-height=100> 280 <thead data-expected-height=20 > 281 <tr><td style="height:20px">x</td></tr> 282 </thead> 283 <tbody data-expected-height=80 > 284 <tr><td style="height:30px">x</td></tr> 285 </tbody> 286 </table> 287 288 </main> 289 290 <script> 291 checkLayout("table"); 292 293 // Display body sizes next to the table. 294 for (let table of Array.from(document.querySelectorAll("table"))) { 295 let d = document.createElement("div"); 296 d.classList.add("debug"); 297 let log = document.createElement("pre"); 298 d.appendChild(log); 299 300 let text = ""; 301 let x; 302 x = table.querySelector("thead"); 303 if (x) 304 text += `h:${x.offsetHeight}\n`; 305 x = table.querySelectorAll("tbody"); 306 if (x.length > 0) 307 for (body of Array.from(x)) 308 text += `b:${body.offsetHeight}\n`; 309 x = table.querySelector("tfoot"); 310 if (x) 311 text += `f:${x.offsetHeight}\n`; 312 log.innerText = text; 313 314 table.parentNode.insertBefore(d, table); 315 } 316 </script>