table-width-redistribution-fixed-padding.html (9643B)
1 <!doctype html> 2 <title>Columns widths fixed + padding</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 body { 11 background: #EEE; 12 } 13 main table { 14 background: gray; 15 border-spacing: 8px 8px; 16 table-layout: fixed; 17 } 18 main td { 19 padding: 6px; 20 background: #BFB; 21 font-size: 10px; 22 box-sizing:content-box; 23 } 24 main td > div { 25 display: inline-block; 26 background: rgba(56,162,56,0.3); 27 } 28 </style> 29 <main> 30 <h1>Fixed tables with padding: Compute column computed widths from assignable table width</h1> 31 32 <p>This test is the similar to table-width-redistribution-fixed.html, 33 except that all cells have 6px padding. The comments in this test refer to padding incompatibilities only.</p> 34 35 <p class="error">Percentage sizes and box-sizing are handled differently in FF/Chrome. In Chrome, %ge size is always treated as border-box size: column width = % * table width. In FF, box-sizing:content-box, %ge size is % * table width + border_padding, box-sizing:border-box same as Chrome. </p> 36 37 <h2>Fixed only</h2> 38 39 <p 3 class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100 40 When table.css_width is < columns.css_width, how is the conflict resolved? 41 columns.css_width wins 42 <p class="error"> 43 <table style="width:50px" data-expected-width=248> 44 <tr> 45 <td style="width:100px" data-expected-width=112> 46 <div style="width:50px">50</div><div style="width:50px">50</div></td> 47 <td style="width:100px" data-expected-width=112> 48 <div style="width:50px">50</div><div style="width:25px">25</div></td> 49 </tr> 50 </table> 51 52 <p 4 class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115 53 When table.css_width is > columns.css_width , how is the conflict resolved? 54 table.css_width wins</p> 55 <table style="width:300px" data-expected-width=300> 56 <tr> 57 <td style="width:100px" data-expected-width=138> 58 <div style="width:100px">100</div><div style="width:100px">100</div></td> 59 <td style="width:100px" data-expected-width=138> 60 <div style="width:90px">90</div><div style="width:25px">25</div></td> 61 </tr> 62 </table> 63 64 <p 5 class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100 65 Fixed cells must grow, but their min widths differ. 66 Fixed cells grow in proportion to their css width. 67 <table style="width:calc(300px + 24px)" data-expected-width=324> 68 <tr> 69 <td style="width:100px" data-expected-width=150> 70 <div style="width:50px">50</div></td> 71 <td style="width:100px" data-expected-width=150> 72 <div style="width:100px">100</div></td> 73 </tr> 74 </table> 75 76 <p 6 class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100 77 What happens when column.min_width > column.css_width 78 column.css_width wins over column.min_width. 79 <table style="width:100px" data-expected-width=248> 80 <tr> 81 <td style="width:100px" data-expected-width=112> 82 <div style="width:200px"></div></td> 83 <td style="width:100px" data-expected-width=112> 84 <div style="width:200px"></div></td> 85 </tr> 86 </table> 87 88 <p 7 class="testdesc">Table: 1px. 89 What happens to min_width when multiple cells specify css_width of the same column? 90 1st cell wins. 91 <table style="width:1px" data-expected-width=128> 92 <tr> 93 <td style="width:100px" data-expected-width=112> 94 <div style="width:200px">200</div></td> 95 </tr> 96 <td style="width:150px" data-expected-width=112> 97 <div style="width:150px">150</div></td> 98 </tr> 99 </table> 100 101 102 <h2>Colspan distribution</h2> 103 104 <p 9 class="testdesc">Table: 1px 105 Does column.min_width change with colspan distribution from later rows to first row? 106 No 107 <table style="width:1px" data-expected-width=86> 108 <tr> 109 <td data-expected-width=0> 110 <div style="width:50px"></div></td> 111 <td style="width:50px" data-expected-width=62> 112 <div style="width:50px"></div></td> 113 </tr> 114 <tr> 115 <td colspan=2 style="width:200px" data-expected-width=70> 116 <div style="width:200px"></div></td> 117 </tr> 118 </table> 119 120 121 <h2>Colspan header cells</h2> 122 <section> 123 <ol> 124 <li>Fixed/percentage colspan cells get distributed evenly.</li> 125 <li>Auto cells. Is the table even fixed?</li> 126 </ol> 127 128 <p 12 class="testdesc">Assi: 300px 129 To make CO distributable width 100, declare it as 100px+8px spacing - 12px padding. 130 To make C1 distributable width 200, declare it as 220px+8px spacing - 12px padding. 131 Fixed header cells with colspan get divided evenly. 132 </p> 133 <p class="error">Legacy chrome does not substract border spacing before distribution</p> 134 <table style="width:calc(300px + 40px)" data-expected-width=340> 135 <tr> 136 <td colspan=2 style="width:96px" data-expected-width=108>108</td> 137 <td colspan=2 style="width:196px" data-expected-width=208>208</td> 138 </tr> 139 <tr> 140 <td data-expected-width=50>1</td> 141 <td>1</td> 142 <td data-expected-width=100>1</td> 143 <td>1</td> 144 </tr> 145 </table> 146 147 <p 13 class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40% 148 Percentage header cells with colspan. 149 Colspan cells do not distribute border_padding, they just distribute widths. 150 C0/1/2/3 will not have border-padding becaouse of colspan, C4 because border-box 151 TD0 splits 152 C0/1 get 20% max (40 + padding)/ 2 = 22px, 153 C2/3 10% and (20 + padding) / 2 = 12px max, 154 C4 40%, 12px percent border padding, and 52 max 155 156 Assignable width is 440 - 48, everyone gets according to percent. 157 C0/C1 get 80, C2/C3 get 40, and C4 gets 160. 158 </p> 159 <p class="error">Firefox seems to have a rounding error.</p> 160 <table style="width: calc(400px + 6 * 8px)" data-expected-width=448> 161 <tr> 162 <td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td> 163 <td colspan=2 style="width:20%" data-expected-width=88><div style="width:20px"></div></td> 164 <td style="width:40%;box-sizing:border-box" data-expected-width=160><div style="width:40px"></div></td> 165 </tr> 166 <tr> 167 <td data-expected-width=80>Auto</td> 168 <td data-expected-width=80>Auto</td> 169 <td data-expected-width=40>Auto</td> 170 <td data-expected-width=40>Auto</td> 171 <td data-expected-width=160>Auto</td> 172 </tr> 173 </table> 174 175 <p 14 class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto 176 Auto header cells with colspan, table is min width 177 min_width does not get redistributed. 178 </p> 179 <table style="width:1px" data-expected-width=144> 180 <tr> 181 <td colspan=2 data-expected-width=8> 182 <div style="width:100px">100</div></td> 183 <td style="width:100px" data-expected-width=112>100</td> 184 </tr> 185 <tr> 186 <td data-expected-width=0>x</td> 187 <td data-expected-width=0>x</td> 188 <td data-expected-width=112>x</td> 189 </tr> 190 </table> 191 192 <p 16 class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto 193 Auto colspan cells, and nothing else. Tricky because this means that internally 194 table has to represent 10 cells, and wide cells that span beyond table width 195 are usually truncated. 196 C0: 20*2+8=48, C1: 20*8 + 7*8=216</p> 197 <table style="width:calc(200px + 88px)" data-expected-width=288> 198 <tr> 199 <td colspan=2 style="height:20px" data-expected-width=48></td> 200 <td colspan=8 style="height:20px" data-expected-width=216></td> 201 </tr> 202 </table> 203 204 <h2>Percentage only</h2> 205 206 <p 17 class="testdesc">Assignable: 100px;columns add to 100%, auto width 207 Column percent adds to a 100, but because box-sizing is content box, 208 Column content size adds up to table width. 209 Column border size adds up to table width + padding (36px). 210 Columns get scaled down. 211 Scaling down is not defined by standard. FF and NG differ by a px (rounding?). 212 </p> 213 <table style="width:calc(100px + 68px)" data-expected-width=168> 214 <tr> 215 <td style="width:50%" data-expected-width=63>50%</td> 216 <td style="width:30%" data-expected-width=42>30%</td> 217 <td style="width:20%" data-expected-width=31>20%</td> 218 </tr> 219 </table> 220 221 <p 18 class="testdesc">Assignable: 100px;columns add to 50%, auto width 222 Columns grow proportional to percent. 223 Slight rounding differences between NG and FF. 224 <table style="width:calc(100px + 68px)" data-expected-width=168> 225 <tr> 226 <td style="width:25%" data-expected-width=60>25%</td> 227 <td style="width:15%" data-expected-width=42.5>15%</td> 228 <td style="width:10%" data-expected-width=33>10%</td> 229 </tr> 230 </table> 231 232 233 <p 19 class="testdesc">Assignable: 100px;columns add to 50%, with min width 234 Min width is ignored. 235 <table style="width:calc(100px + 68px)" data-expected-width=168> 236 <tr> 237 <td style="width:50%" data-expected-width=63><div style="width:50px">50</div></td> 238 <td style="width:30%" data-expected-width=42><div style="width:50px">50</div></td> 239 <td style="width:20%" data-expected-width=31><div style="width:50px">50</div></td> 240 </tr> 241 </table> 242 243 <h2>Percentage/auto/fixed mix</h2> 244 245 <p class="testdesc">Assignable: 100px;C0:50% C1:100px 246 Clean split 247 <table style="width:calc(100px + 24px)" data-expected-width=124> 248 <tr> 249 <td style="width:50%" data-expected-width=38>50%</td> 250 <td style="width:50px" data-expected-width=62>50px</td> 251 </tr> 252 </table> 253 254 <p class="testdesc">Assignable: 100px;C0:60% C1:60px 255 Overconstrained: widths add up to 132. 256 Fixed widths get distributed first, percentage takes the rest. 257 <table style="width:calc(100px + 32px)" data-expected-width=132> 258 <tr> 259 <td style="width:20%" data-expected-width=9>20%</td> 260 <td style="width:60%" data-expected-width=19>60%</td> 261 <td style="width:60px" data-expected-width=72>60px</td> 262 </tr> 263 </table> 264 </main> 265 <script> 266 checkLayout("table"); 267 </script>