table-width-redistribution.html (14551B)
1 <!doctype html> 2 <title>Auto 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 } 14 main td { 15 background: #BFB; 16 font-size: 10px; 17 } 18 main td > div { 19 display: inline-block; 20 background: rgba(56,162,56,0.3); 21 } 22 </style> 23 <main> 24 <h1>Compute column computed widths from assignable table width</h1> 25 <h2>Test design</h2> 26 <p>All examples have border-spacing:8, td.padding:0</p> 27 28 <h2>Table css sizing</h2> 29 30 <p class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100 31 When table.css_width is < columns.css_width, column.min_width is lower limit. 32 <p class="error"> 33 <table style="width:50px" data-expected-width=124> 34 <tr> 35 <td style="width:100px" data-expected-width=50> 36 <div style="width:50px">50</div><div style="width:50px">50</div></td> 37 <td style="width:100px" data-expected-width=50> 38 <div style="width:50px">50</div><div style="width:25px">25</div></td> 39 </tr> 40 </table> 41 42 43 <p class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115 44 When table.css_width is > columns.css_width , how is the conflict resolved? 45 table.css_width wins</p> 46 <table style="width:300px" data-expected-width=300> 47 <tr> 48 <td style="width:100px" data-expected-width=138> 49 <div style="width:100px">100</div><div style="width:100px">100</div></td> 50 <td style="width:100px" data-expected-width=138> 51 <div style="width:90px">90</div><div style="width:25px">25</div></td> 52 </tr> 53 </table> 54 55 <h2>Content sizings: min|max|fit|fill-available</h2> 56 57 <p class="testdesc">table width:min-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 58 </p> 59 <p class="error">Edge treats as max-content.</p> 60 <table style="width:min-content" data-expected-width=182> 61 <tr> 62 <td data-expected-width=50> 63 <div style="width:50px" >au</div><div style="width:50px">to</div></td> 64 <td style="width:100px" data-expected-width=50> 65 <div style="width:50px" >fix</div><div style="width:25px">ed</div></td> 66 <td style="width:20%" data-expected-width=50> 67 <div style="width:50px">per</div><div style="width:25px">cent</div></td> 68 </tr> 69 </table> 70 71 <p class="testdesc">table width:max-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 72 Each column gets maximum width. 73 C0: 100 C1:100 C2: 75 74 max-content does not allow for assignable size to be influenced by inverse percent. 75 Table size is 275 + 32 = 307 76 If percent influenced table size, table size would have been 407 77 </p> 78 <table style="width:max-content" data-expected-width=307> 79 <tr> 80 <td data-expected-width=120> 81 <div style="width:50px">50</div><div style="width:50px">50</div></td> 82 <td style="width:100px" data-expected-width=100> 83 <div style="width:50px">50</div><div style="width:25px">25</div></td> 84 <td style="width:20%" data-expected-width=55> 85 <div style="width:50px">50</div><div style="width:25px">25</div></td> 86 </tr> 87 </table> 88 89 <p class="testdesc">table width:fit-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 90 Percent column determines assignable table width, which gets distributed to all columns. 91 Assignable width from %: 20%=75, 100%=375</p> 92 </p> 93 <table style="width:fit-content" data-expected-width=407> 94 <tr> 95 <td data-expected-width=200> 96 <div style="width:50px" >au</div><div style="width:50px">to</div></td> 97 <td style="width:100px" data-expected-width=100> 98 <div style="width:50px" >fix</div><div style="width:25px">ed</div></td> 99 <td style="width:20%" data-expected-width=75> 100 <div style="width:50px">per</div><div style="width:25px">cent</div></td> 101 </tr> 102 </table> 103 104 <p class="testdesc">table width:-webkit-fill-available; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 105 </p> 106 <p class="error">Edge treats as fit-content</p> 107 <div style="width:632px"> 108 <table style="width:-webkit-fill-available;width:-moz-available;" data-expected-width=632> 109 <tr> 110 <td data-expected-width=380> 111 <div style="width:50px" >au</div><div style="width:50px">to</div></td> 112 <td style="width:100px" data-expected-width=100> 113 <div style="width:50px" >fix</div><div style="width:25px">ed</div></td> 114 <td style="width:20%" data-expected-width=120> 115 <div style="width:50px">per</div><div style="width:25px">cent</div></td> 116 </tr> 117 </table> 118 </div> 119 120 <h2>Auto columns distribution</h2> 121 122 <p class="testdesc">Assi:300px C0: Auto/75/75 C1:Auto/25/25 123 Non-empty auto cells get surplus width proportionally to their max width. 124 Guess3: 100. Guess4: 300, diff 200, fixed priority. 125 C0: 75 + 75/100*200 = 225 C1: 25 + 25/100*200 = 75</p> 126 <table style="width:calc(300px + 24px)" data-expected-width=324> 127 <tr> 128 <td data-expected-width=225><div style="width:75px">75</div></td> 129 <td data-expected-width=75><div style="width:25px">25</div></td> 130 </tr> 131 </table> 132 <p class="testdesc">Assignable:300px C0: Auto/75/75 C1:Auto/13/25 C2:Auto/0/0 133 Empty cells get nothing if there are non-empty auto cells. 134 Guess3: 100, Guess4: 300; diff 200, fixed priority. 135 C0: 75 + 75/100*200 = 225 C1: 25 + 25/100*200 = 75; C2: 0 136 </p> 137 <table style="width:calc(300px + 32px)" data-expected-width=332> 138 <tr> 139 <td data-expected-width=225> 140 <div style="width:75px">75</div></td> 141 <td data-expected-width=75> 142 <div style="width:13px">13</div><div style="width:12px">12</div></td> 143 <td data-expected-width=0></td> 144 </tr> 145 </table> 146 147 <h2>Guess 0: Auto(min), Fixed(min), Percentage(min) to Guess 1.</h2> 148 149 <p class="testdesc">Assi: 1px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100 150 All columns get minimum width. 151 Guess0: 150 152 C0: 50, C1:50, C2: 50</p> 153 <table style="width:1px" data-expected-width=182> 154 <tr> 155 <td data-expected-width=50> 156 <div style="width:50px">50</div><div style="width:50px">50</div></td> 157 <td data-expected-width=50 style="width:100px"> 158 <div style="width:50px">50</div><div style="width:50px">50</div></td> 159 <td data-expected-width=50 style="width:50%"> 160 <div style="width:50px">50</div><div style="width:50px">50</div></td> 161 </table> 162 163 <p class="testdesc">Assi: 160px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100 164 %ge column grows. 165 Guess0: 150, Guess1: 180; diff 10. 166 C0: 50, C1:50, C2: 50 + 10 * 10/10 = 60</p> 167 <table style="width:calc(160px + 32px)" data-expected-width=192> 168 <tr> 169 <td data-expected-width=50> 170 <div style="width:50px">50</div><div style="width:50px">50</div></td> 171 <td data-expected-width=50 style="width:100px"> 172 <div style="width:50px">50</div><div style="width:50px">50</div></td> 173 <td data-expected-width=60 style="width:50%"> 174 <div style="width:50px">50</div><div style="width:50px">50</div></td> 175 </table> 176 177 <p class="testdesc">Assi: 210px; C0:Auto/50/100 C1:100/50/100 C2:30%/50/100 C3:30%/50/100 178 2 %ge columns grow evenly. 179 Guess 0: 200, Guess 1: 240, diff 10 180 C2: 50 + 10 * 70/140 C3: 50 + 10 * 70/140 181 <table style="width:calc(40px + 210px)" data-expected-width=250> 182 <tr> 183 <td data-expected-width=50> 184 <div style="width:50px">50</div><div style="width:50px">50</div></td> 185 <td data-expected-width=50 style="width:100px"> 186 <div style="width:50px">50</div><div style="width:50px">50</div></td> 187 <td data-expected-width=55 style="width:30%"> 188 <div style="width:50px">50</div><div style="width:50px">50</div></td> 189 <td data-expected-width=55 style="width:30%"> 190 <div style="width:50px">50</div><div style="width:50px">50</div></td> 191 </table> 192 193 <p class="testdesc">Assi: 220px; C0:Auto/50/100 C1:100/50/100 C2:25%/50/100 C3:40%50/100 194 %ge columns grow in proportion to increase from previous guess. 195 Guess 0: 200. C2[G1] = .25*220 = 55 C3[G1] = .4 * 220 = 88 Guess 1: 100 + 55 + 88 = 243 196 diff = 220 - 200 = 20. C2 grew 5, C3 grew 38, total grew 43. 197 C2: 50 + 20 *5/43 = 52.32; C3: 50 + 20 * 38 / 43 = 67.67 198 <table style="width:calc(40px + 220px)" data-expected-width=260> 199 <tr> 200 <td data-expected-width=50> 201 <div style="width:50px">50</div> <div style="width:50px">50</div></td> 202 <td data-expected-width=50 style="width:100px"> 203 <div style="width:50px">50</div><div style="width:50px">50</div></td> 204 <td data-expected-width=52 style="width:25%"> 205 <div style="width:50px">50</div><div style="width:50px">50</div></td> 206 <td data-expected-width=68 style="width:40%"> 207 <div style="width:50px">50</div><div style="width:50px">50</div></td> 208 </table> 209 210 <h2>Guess 1 to Guess 2: Auto(min), Percentage(%max) to Fixed(min => max)</h2> 211 <p>These tests are non-intuitive to evaluate. When table size increases betwee Guess 1 and 2, 212 although the standard says that fixed columns are growing, %ge columns grow too because their max width depends on table width.</p> 213 214 <p class="testdesc">Assi:166, C0:Auto/50/100 C1:100/50/100 C2:40%/50/100 215 Edge example, Guess 1 %ge cell has grown to the max. 216 C2: grows to .4*165 = 66.4, table is 166.4+32 = 198.4</p> 217 <table style="width:calc(166px + 32px)" data-expected-width=198> 218 <tr> 219 <td data-expected-width="50" > 220 <div style="width:50px">50</div><div style="width:50px">50</div></td> 221 <td data-expected-width="50" style="width:100px"> 222 <div style="width:50px">50</div><div style="width:50px">50</div></td> 223 <td data-expected-width="66" style="width:40%"> 224 <div style="width:50px">50</div><div style="width:50px">50</div></td> 225 </tr> 226 </table> 227 228 <p class="testdesc">Assi:216, C0:Auto/50/100 C1:100/50/100 C2:40%/50 229 %ge cell grows to the max, the rest goes to fixed. 230 Guess 1 size is 50 + 50 + (.4*216=>86.4) = 186.4 231 Guess 2 size is 50 + 100 + 86.4 = 236 232 Assi - Guess1 = 29.6; C2 = 50 + 29.6 * 50/50 = 79.6 233 </p> 234 <table style="width:calc(216px + 32px)" data-expected-width=248> 235 <tr> 236 <td data-expected-width="50" > 237 <div style="width:50px">50</div><div style="width:50px">50</div></td> 238 <td data-expected-width="80" style="width:100px"> 239 <div style="width:50px">50</div><div style="width:50px">50</div></td> 240 <td data-expected-width="86" style="width:40%"> 241 <div style="width:50px">50</div><div style="width:50px">50</div></td> 242 </tr> 243 </table> 244 245 <h2>Guess 2 to Guess 3: Percentage(%max), Fixed(max), Auto(min=>max)</h2> 246 247 <p class="testdesc">Assi:300 248 Guess 2 size is 50 + 100 + .4*300 = 270 249 Guess 3 size is 100 + 100 + 120 = 320 250 Assi - Guess2 = 30, C0 = 50 + 30 = 80 251 <table style="width:calc(300px + 32px)" data-expected-width=332> 252 <tr> 253 <td data-expected-width="80" > 254 <div style="width:50px">50</div><div style="width:50px">50</div></td> 255 <td data-expected-width="100" style="width:100px"> 256 <div style="width:50px">50</div><div style="width:50px">50</div></td> 257 <td data-expected-width="120" style="width:40%"> 258 <div style="width:50px">50</div><div style="width:50px">50</div></td> 259 </tr> 260 </table> 261 262 <h2>Guess3 to Guess4, Auto(max), Percentage(%max), Fixed(max) grow first available Auto|Fixed|Percent</h2> 263 264 <p class="testdesc">Assi: 500, C0:Auto, C1: Fixed, C2: Percent 265 Guess 3 is 100 + 100 + .4 * 500 = 400 266 C0 gets the 100 267 <table style="width:calc(500px + 32px)" data-expected-width=532> 268 <tr> 269 <td data-expected-width="200" > 270 <div style="width:50px">50</div><div style="width:50px">50</div></td> 271 <td data-expected-width="100" style="width:100px"> 272 <div style="width:50px">50</div><div style="width:50px">50</div></td> 273 <td data-expected-width="200" style="width:40%"> 274 <div style="width:50px">50</div><div style="width:50px">50</div></td> 275 </tr> 276 </table> 277 278 <p class="testdesc">Assi: 500, C0:Fixed, C1: Fixed, C2: Percent 279 Guess 3 is 100 + 100 + .4 * 500 = 400, 100 to be redistributed 280 Fixed cells, C0 and C1 get 50 each. 281 <table style="width:calc(500px + 32px)" data-expected-width=532> 282 <tr> 283 <td data-expected-width="150" style="width:100px"> 284 <div style="width:50px">50</div><div style="width:50px">50</div></td> 285 <td data-expected-width="150" style="width:100px"> 286 <div style="width:50px">50</div><div style="width:50px">50</div></td> 287 <td data-expected-width="200" style="width:40%"> 288 <div style="width:50px">50</div><div style="width:50px">50</div></td> 289 </tr> 290 </table> 291 292 <p class="testdesc">Assi: 700, C0:10%/40, C1: 20%/50, C2: 40%/50 293 Percentage cells only. 294 Compute columns as %ge of total width: 295 C0: 700*10/70, C1: 700*20/70 C2: 700*40/70 296 <table style="width:calc(700px + 32px)" data-expected-width=732> 297 <tr> 298 <td data-expected-width=100 style="width:10%"> 299 <div style="width:40px">40</div></td> 300 <td data-expected-width=200 style="width:20%"> 301 <div style="width:50px">50</div></td> 302 <td data-expected-width=400 style="width:40%"> 303 <div style="width:50px">50</div></td> 304 </tr> 305 </table> 306 <p class="testdesc">Assi: 600, C0:10%/40, C1: 20%/50, C2: 40%/50, C3: 100%/50 307 Percentage cells only. Over 100% columns get their percentage truncated. 308 <table style="width:calc(600px + 40px)" data-expected-width=640> 309 <tr> 310 <td data-expected-width=60 style="width:10%"> 311 <div style="width:40px">40</div></td> 312 <td data-expected-width=120 style="width:20%"> 313 <div style="width:50px">50</div></td> 314 <td data-expected-width=240 style="width:40%"> 315 <div style="width:50px">50</div></td> 316 <td data-expected-width=180 style="width:100%"> 317 <div style="width:50px">50</div></td> 318 </tr> 319 </table> 320 <p class="testdesc">C0:20%/60, C1:Auto/50. 321 Tests table max width from single cell. 322 <table data-expected-width="324"> 323 <tr> 324 <td style="width:20%" data-expected-width="60"><div style="width:60px">60</div></td> 325 <td><div style="width:50px">50</div></td> 326 </tr> 327 </table> 328 329 <p class="testdesc">C0:10%/70, C1:Auto/50. 330 Table limited to 1px. Tests that single cell specifies max width, not min width. 331 <table style="width:1px" data-expected-width="134"> 332 <tr> 333 <td style="width:20%" data-expected-width="60"><div style="width:60px">60</div></td> 334 <td><div style="width:50px" data-expected-width="50">50</div></td> 335 </tr> 336 </table> 337 338 <p class="testdesc">C0:10%/70 border 10px, C1:Auto/50. 339 Cell border padding do not affect max width. 340 <table data-expected-width="524"> 341 <tr> 342 <td style="width:20%;border:10px solid yellow;padding:10px" data-expected-width="100"><div style="width:60px">60</div></td> 343 <td><div style="width:50px">50</div></td> 344 </tr> 345 </table> 346 </main> 347 348 <script> 349 checkLayout("table"); 350 </script>