table-width-redistribution-fixed.html (13011B)
1 <!doctype html> 2 <title>Fixed table final assignable distribution</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" type="text/css" href="./support/table-tentative.css"> 7 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 8 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> 9 <style> 10 main table { 11 background: gray; 12 border-spacing: 8px 8px; 13 table-layout: fixed; 14 } 15 main table:hover { table-layout: auto; } /* useful for comparisons */ 16 main td { 17 background: #BFB; 18 font-size: 10px; 19 } 20 main td > div { 21 display: inline-block; 22 background: rgba(56,162,56,0.3); 23 height:10px; 24 } 25 </style> 26 <main> 27 <h1>Fixed tables: Compute column computed widths from assignable table width</h1> 28 <ul> 29 <li>auto columns have a min width of 0. Max width still gets computed.</li> 30 <li>percent columns have a min width of 0.</li> 31 <li>fixed column.min_width is css width. It never changes.</li> 32 <li>fixed column.max_width is max(cells.max_width, css width).</li> 33 <li>colspan header cells distribute 34 <ul> 35 <li>max_width evenly between columns.</li> 36 <li>do not distribute min width</li> 37 <li>percentage evenly between columns</li> 38 </ul> 39 </li> 40 </ul> 41 42 <h2>Is table treated as fixed?</h2> 43 <p class="testdesc">table width:auto is not treated as fixed.</p> 44 <table style="table-layout:fixed; width:auto" data-expected-width=324> 45 <tr> 46 <td style="width:200px">200</td> 47 <td><div style="width:100px">min</div></td> 48 </tr> 49 </table> 50 <p class="testdesc">table width:px is treated as fixed.</p> 51 <table style="table-layout:fixed; width:224px" data-expected-width=224> 52 <tr> 53 <td style="width:200px">200</td> 54 <td><div style="width:100px">min</div></td> 55 </tr> 56 </table> 57 <p class="testdesc">table width:min-content is treated as fixed.</p> 58 <table style="table-layout:fixed; width:min-content" data-expected-width=224> 59 <tr> 60 <td style="width:200px">200</td> 61 <td><div style="width:100px">min</div></td> 62 </tr> 63 </table> 64 65 <h2>Fixed only</h2> 66 67 <p class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/75 68 When table.css_width is < columns.css_width, how is the conflict resolved? 69 columns.css_width wins</p> 70 <table style="width:50px" data-expected-width=224> 71 <tr> 72 <td style="width:100px" data-expected-width=100> 73 <div style="width:50px">50</div><div style="width:50px">50</div></td> 74 <td style="width:100px" data-expected-width=100> 75 <div style="width:50px">50</div><div style="width:25px">25</div></td> 76 </tr> 77 </table> 78 79 <p class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115 80 When table.css_width is > columns.css_width , how is the conflict resolved? 81 table.css_width wins</p> 82 <table style="width:300px" data-expected-width=300> 83 <tr> 84 <td style="width:100px" data-expected-width=138> 85 <div style="width:100px">100</div><div style="width:100px">100</div></td> 86 <td style="width:100px" data-expected-width=138> 87 <div style="width:90px">90</div><div style="width:25px">25</div></td> 88 </tr> 89 </table> 90 91 <p class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100 92 Fixed cells must grow, but their min widths differ. 93 Fixed cells grow in proportion to their css width. 94 <table style="width:calc(300px + 24px)" data-expected-width=324> 95 <tr> 96 <td style="width:100px" data-expected-width=150> 97 <div style="width:50px">50</div></td> 98 <td style="width:100px" data-expected-width=150> 99 <div style="width:100px">100</div></td> 100 </tr> 101 </table> 102 103 <p class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100 104 What happens when column.min_width > column.css_width 105 column.css_width wins over column.min_width. 106 <table style="width:100px" data-expected-width=224> 107 <tr> 108 <td style="width:100px" data-expected-width=100> 109 <div style="width:200px"></div></td> 110 <td style="width:100px" data-expected-width=100> 111 <div style="width:200px"></div></td> 112 </tr> 113 </table> 114 115 <p class="testdesc">Table: 1px. 116 What happens to min_width when multiple cells specify css_width of the same column? 117 1st cell wins. 118 <table style="width:1px" data-expected-width=116> 119 <tr> 120 <td style="width:100px" data-expected-width=100> 121 <div style="width:200px">200</div></td> 122 </tr> 123 <td style="width:150px" data-expected-width=100> 124 <div style="width:150px">150</div></td> 125 </tr> 126 </table> 127 128 <h2>Auto only</h2> 129 130 <p class="testdesc">Width is distributed evenly 131 </p> 132 <table style="width:548px"> 133 <tr> 134 <td data-expected-width=100><div style="width:10px;height:30px"></div></td> 135 <td data-expected-width=100><div style="width:20px;height:30px"></div></td> 136 <td data-expected-width=100><div style="width:30px;height:30px"></div></td> 137 <td data-expected-width=100><div style="width:40px;height:30px"></div></td> 138 <td data-expected-width=100><div style="width:120px;height:30px"></div></td> 139 </tr> 140 </table> 141 142 <h2>Colspan distribution</h2> 143 144 <p class="testdesc">Table: 1px 145 Does column.min_width change with colspan distribution from later rows to first row? 146 No 147 <table style="width:1px" data-expected-width=74> 148 <tr> 149 <td data-expected-width=0> 150 <div style="width:50px"></div></td> 151 <td style="width:50px" data-expected-width=50> 152 <div style="width:50px"></div></td> 153 </tr> 154 <tr> 155 <td colspan=2 style="width:200px" data-expected-width=58> 156 <div style="width:200px"></div></td> 157 </tr> 158 </table> 159 160 <p class="testdesc">Table: 632px 161 Does column.percent change with colspan distribution? 162 No. 163 <table style="width:632px" data-expected-width=632> 164 <tr> 165 <td data-expected-width=360> 166 <div style="width:50px"></div></td> 167 <td style="width:20%" data-expected-width=120> 168 <div style="width:50px"></div></td> 169 <td style="width:20%" data-expected-width=120></td> 170 </tr> 171 <tr> 172 <td colspan="2" style="width:90%"> 173 <div style="width:100px"></div></td> 174 <td>auto</td> 175 </tr> 176 </table> 177 178 <h2>Colspan header cells</h2> 179 <section> 180 <ol> 181 <li>Fixed/percentage colspan cells get distributed evenly.</li> 182 <li>Auto cells</li> 183 </ol> 184 185 <p class="testdesc">Assignable: 400px 186 Fixed header cells with colspan. 187 Columns divded evenly</p> 188 <p class="error">Legacy Chrome is slightly off, something about spacing and wide cells.</p> 189 <table style="width:calc(600px + 40px)" data-expected-width=640> 190 <tr> 191 <td colspan=2 style="width:108px" data-expected-width=208>108</td> 192 <td colspan=2 style="width:208px" data-expected-width=408>208</td> 193 </tr> 194 <tr> 195 <td data-expected-width=100>1</td> 196 <td>1</td> 197 <td data-expected-width=200>1</td> 198 <td>1</td> 199 </tr> 200 </table> 201 202 <p class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40% 203 Percentage header cells with colspan 204 C0 splits into C0.0 and C0.1, 16px each with 20% 205 C1 splits into C1.0 and C1.1, 6px each with 10% 206 Assignable width is 400, everyone gets according to percent. 207 80/80/40/40/160.</p> 208 <p class="error">Firefox is slightly off, with C2 taking 6px more. Unknown what math is used to get this answer.</p> 209 <table style="width:448px" data-expected-width=448> 210 <tr> 211 <td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td> 212 <td colspan=2 style="width:20%" data-expected-width=88><div style="width:160px"></div></td> 213 <td style="width:40%" data-expected-width=160><div style="width:40px"></div></td> 214 </tr> 215 <tr> 216 <td data-expected-width=80>Auto</td> 217 <td data-expected-width=80>Auto</td> 218 <td data-expected-width=40>Auto</td> 219 <td data-expected-width=40>Auto</td> 220 <td data-expected-width=160>Auto</td> 221 </tr> 222 </table> 223 224 <p class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto 225 Auto header cells with colspan, table is min width 226 min_width does not get redistributed. 227 </p> 228 <table style="width:1px" data-expected-width=132> 229 <tr> 230 <td colspan=2 data-expected-width=8> 231 <div style="width:100px">100</div></td> 232 <td style="width:100px" data-expected-width=100>100</td> 233 </tr> 234 <tr> 235 <td data-expected-width=0>x</td> 236 <td data-expected-width=0>x</td> 237 <td data-expected-width=100>x</td> 238 </tr> 239 </table> 240 241 <p class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto 242 Auto colspan cells, and nothing else. Tricky because this means that internally 243 table has to represent 8 cells, and wide cells that span beyond table width 244 are usually truncated. 245 C0: 20*2+8=48, C1: 20*8 + 7*8=216</p> 246 <table style="width:calc(200px + 88px)" data-expected-width=288> 247 <tr> 248 <td colspan=2 style="height:20px" data-expected-width=48></td> 249 <td colspan=8 style="height:20px" data-expected-width=216></td> 250 </tr> 251 </table> 252 253 <h2>Percentage only</h2> 254 255 <p class="testdesc">Assignable: 100px;columns add to 100%, auto width 256 Columns are exact percentage size. 257 <table style="width:calc(100px + 32px)" data-expected-width=132> 258 <tr> 259 <td style="width:50%" data-expected-width=50>50%</td> 260 <td style="width:30%" data-expected-width=30>30%</td> 261 <td style="width:20%" data-expected-width=20>20%</td> 262 </tr> 263 </table> 264 265 <p class="testdesc">Assignable: 100px;columns add to 50%, auto width 266 Columns grow proportional to percent. 267 <table style="width:calc(100px + 32px)" data-expected-width=132> 268 <tr> 269 <td style="width:25%" data-expected-width=50>25%</td> 270 <td style="width:15%" data-expected-width=30>15%</td> 271 <td style="width:10%" data-expected-width=20>10%</td> 272 </tr> 273 </table> 274 275 276 <p class="testdesc">Assignable: 100px;columns add to 50%, with min width 277 Min width is ignored. 278 <table style="width:calc(100px + 32px)" data-expected-width=132> 279 <tr> 280 <td style="width:50%" data-expected-width=50><div style="width:50px">50</div></td> 281 <td style="width:30%" data-expected-width=30><div style="width:50px">50</div></td> 282 <td style="width:20%" data-expected-width=20><div style="width:50px">50</div></td> 283 </tr> 284 </table> 285 286 <p class="testdesc">Assignable: 100px;columns add to 1000% 287 Columns are scaled so they add up to 100% 288 <table style="width:calc(100px + 32px)" data-expected-width=132> 289 <tr> 290 <td style="width:200%" data-expected-width=20><div style="width:50px">50</div></td> 291 <td style="width:300%" data-expected-width=30><div style="width:50px">50</div></td> 292 <td style="width:500%" data-expected-width=50><div style="width:50px">50</div></td> 293 </tr> 294 </table> 295 296 297 298 <h2>Percentage/auto/fixed mix</h2> 299 300 <p class="testdesc">Assignable: 100px;C0:50% C1:100px C2: Auto 301 C0, C1 get assigned values, C2 fills the rest. 302 <table style="width:calc(100px + 32px)" data-expected-width=132> 303 <tr> 304 <td style="width:50%" data-expected-width=50>50%</td> 305 <td style="width:30px" data-expected-width=30>30px</td> 306 <td data-expected-width=20></td> 307 </tr> 308 </table> 309 310 <p class="testdesc">Assignable: 100px;C0:50% C1:50px 311 Clean split 312 <table style="width:calc(100px + 24px)" data-expected-width=124> 313 <tr> 314 <td style="width:50%" data-expected-width=50>50%</td> 315 <td style="width:50px" data-expected-width=50>50px</td> 316 </tr> 317 </table> 318 319 <p class="testdesc">Assignable: 100px;C0:20% C1:60% C2:60px 320 Overconstrained: widths add up to 140. 321 Fixed widths get distributed first, percentage takes the rest. 322 <table style="width:calc(100px + 32px)" data-expected-width=132> 323 <tr> 324 <td style="width:20%" data-expected-width=10>20%</td> 325 <td style="width:60%" data-expected-width=30>60%</td> 326 <td style="width:60px" data-expected-width=60>60px</td> 327 </tr> 328 </table> 329 330 <h2>Fixed 0-width columns</h2> 331 <p>Fixed 0-width columns are an exception. They are treated as a mix of fixed and auto columns.</p> 332 <li>If there are only zero-width columns, width is distibuted evenly.</li> 333 <li>If there are any fixed,percentage, or auto columns, 0-width columns do not grow.</li> 334 <p class="testdesc">Assignable: 100px;C0:0-width, C1:0-width 335 All 0-width columns grow. 336 </p> 337 <table style="width:calc(100px + 24px)" data-expected-width=124> 338 <tr> 339 <td style="width:0" data-expected-width=50>0</td> 340 <td style="width:0" data-expected-width=50>0</td> 341 </tr> 342 </table> 343 <p class="testdesc">Assignable: 100px;C0:0-width, C1:auto 344 0-width column does not grow. 345 </p> 346 <table style="width:calc(100px + 24px)" data-expected-width=124> 347 <tr> 348 <td style="width:0" data-expected-width=0>0</td> 349 <td style="width:auto" data-expected-width=100>0</td> 350 </tr> 351 </table> 352 <p class="testdesc">Assignable: 100px;C0:0-width, C1:50px 353 0-width column does not grow. 354 </p> 355 <table style="width:calc(100px + 24px)" data-expected-width=124> 356 <tr> 357 <td style="width:0" data-expected-width=0>0</td> 358 <td style="width:50px" data-expected-width=100>0</td> 359 </tr> 360 </table> 361 <p class="testdesc">Assignable: 100px;C0:0-width, C1:50% 362 0-width column does not grow. 363 </p> 364 <table style="width:calc(100px + 24px)" data-expected-width=124> 365 <tr> 366 <td style="width:0" data-expected-width=0>0</td> 367 <td style="width:50%" data-expected-width=100>0</td> 368 </tr> 369 </table> 370 371 </main> 372 <script> 373 checkLayout("table"); 374 </script>