column-widths.html (9329B)
1 <!doctype html> 2 <title>Column widths</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: auto; 14 margin-top: 4px; 15 } 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 } 24 </style> 25 <main> 26 <h1>Col width</h1> 27 <p>how does col width interact with td widths to produce final column width?</p> 28 <p>Inputs are colgroup/col widths, and td widths. 29 <p>td widths merge, then merge again with col to produce column widths. 30 <p>Output is column min/max/percent w0dths. 31 <p>Colgroup/col has css min_width, css max_width, css percent.</p> 32 <p>TD has intrinsic minmax, css width, css percent width, css max width, css min width</p> 33 34 <h2>Initial cell assignment</h2> 35 36 37 <p class="testdesc">Unconstrained single TD, table-layout:auto 38 td.min = minmax.min 39 td.max = minmax.max</p> 40 <table style="width:1px" data-expected-width=266> 41 <tr> 42 <td><div style="width:50px">min</div><div style="width:250px">min</div></td> 43 </tr> 44 </table> 45 <table data-expected-width=316> 46 <tr> 47 <td><div style="width:50px">max</div><div style="width:250px">max</div></td> 48 </tr> 49 </table> 50 51 <p class="testdesc">Unconstrained single TD, table-layout:fixed 52 td.min = 0 53 td.max = minmax.max</p> 54 <table style="width:1px;table-layout:fixed" data-expected-width=16> 55 <tr> 56 <td><div style="width:50px">min</div><div style="width:250px">min</div></td> 57 </tr> 58 </table> 59 <table style="table-layout:fixed;width:300px" data-expected-width=300> 60 <tr> 61 <td><div style="width:50px">max</div><div style="width:250px">max</div></td> 62 </tr> 63 </table> 64 65 <p class="testdesc">Constrained single TD, table-layout:auto 66 td.min = minmax.min 67 td.max = max(minmax.min, css.width) 68 </p> 69 <table data-expected-width=266> 70 <tr> 71 <td style="width:200px"><div style="width:50px">max</div><div style="width:250px">max</div></td> 72 </tr> 73 </table> 74 <table data-expected-width=416> 75 <tr> 76 <td style="width:400px"><div style="width:50px">max</div><div style="width:250px">max</div></td> 77 </tr> 78 </table> 79 <table style="width:1px" data-expected-width=26> 80 <tr> 81 <td style="width:50px"><div style="width:10px">min</div></td> 82 </tr> 83 </table> 84 <table data-expected-width=266> 85 <tr> 86 <td style="width:100px"><div style="width:50px">min</div><div style="width:250px">min</div></td> 87 </tr> 88 </table> 89 <table data-expected-width=416> 90 <tr> 91 <td style="width:400px"><div style="width:50px">min</div><div style="width:250px">min</div></td> 92 </tr> 93 </table> 94 95 96 <h2>TD/TD merging</h2> 97 98 <p>TD merging only happens in auto, in fixed only 1st row gets measured</p> 99 100 <p class="testdesc">Two unconstrained TDs, table-layout:auto or fixed 101 td.min = max(C0.min, C1.min). always 0 in fixed layout. 102 td.max = max(C0.max, C1.max) 103 </p> 104 <table data-expected-width=316> 105 <tr> 106 <td data-expected-width=300><div style="width:50px">auto</div><div style="width:250px">max</div></td> 107 </tr> 108 <tr> 109 <td><div style="width:100px">auto</div><div style="width:150px">auto</div></td> 110 </tr> 111 </table> 112 <table style="width:1px" data-expected-width=266> 113 <tr> 114 <td data-expected-width=250><div style="width:50px">auto</div><div style="width:250px">max</div></td> 115 </tr> 116 <tr> 117 <td><div style="width:100px">auto</div><div style="width:150px">auto</div></td> 118 </tr> 119 </table> 120 121 <p class="testdesc">Unconstrained (UN) and constrained (CON) TD 122 td.min = max(UN.min, CON.min) 123 td.max = max(UN.min, CON.max) 124 </p> 125 <p class="error">Chrome Legacy and Edge fail this test. They do not limit unconstrained maximum: td.max = max(UN.max, CON.max).</p> 126 <table style="width:1px" data-expected-width=36> 127 <tr> 128 <td style="width:50px" data-expected-width=20><div style="width:20px">min</div></td> 129 </tr> 130 <tr> 131 <td><div style="width:15px">min</div></td> 132 </tr> 133 </table> 134 <table data-expected-width=66> 135 <tr> 136 <td style="width:50px" data-expected-width=50><div style="width:20px">max</div></td> 137 </tr> 138 <tr> 139 <td><div style="width:40px">max</div><div style="width:40px">max</div></td> 140 </tr> 141 </table> 142 143 <p class="testdesc">Two percent TDs 144 td.percent = max(C1.percent, C2.percent) 145 td.max = max(C1.max, C2.max) 146 td.min = max(C1.min, C2.min) 147 </p> 148 <table data-expected-width=324> 149 <tr> 150 <td style="width:10%"><div style="width:60px">60</div></td> 151 <td>auto</td> 152 </tr> 153 <tr> 154 <td style="width:20%" data-expected-width=60><div style="width:50px">50</div></td> 155 <td data-expected-width=240>auto</td> 156 </tr> 157 </table> 158 159 <h2>COL/TD merging</h2> 160 161 <p class="testdesc">col auto td auto 162 column.min = td.min 163 column.max = td.max</p> 164 <table data-expected-width=66> 165 <col> 166 <td><div style="width:50px">auto</div></td> 167 </table> 168 169 <p class="testdesc">col fixed td auto 170 column.min = td.min 171 column.max = max(col[px], td.min) 172 </p> 173 <table data-expected-width=116> 174 <col style="width:100px"> 175 <td><div style="width:50px">auto</div></td> 176 </table> 177 <table data-expected-width=126> 178 <col style="width:100px"> 179 <td><div style="width:110px">110</div><div style="width:110px">110</div></td> 180 </table> 181 <table style="width:1px" data-expected-width=66> 182 <col style="width:100px"> 183 <td><div style="width:50px">min</div></td> 184 </table> 185 186 <p class="testdesc">col % td auto 187 column.min = td.min 188 column.max = max(td.max, col.max) 189 column.percent = col[%] 190 <table data-expected-width=224> 191 <col style="width:80%"> 192 <td><div style="width:50px">auto</div></td> 193 <td style="width:40px">40</td> 194 </table> 195 <table style="width:1px" data-expected-width=94> 196 <col style="width:80%"> 197 <td style="width:50px"><div style="width:30px">auto</div></td> 198 <td><div style="width:40px"></div></td> 199 </table> 200 <table data-expected-width=274> 201 <col style="width:80%"> 202 <td><div style="width:200px" data-expected-width=200>auto</div></td> 203 <td style="width:30px"><div style="width:30px">30</div></td> 204 </table> 205 206 <p class="testdesc">col auto td percent 207 column.min = td.min 208 column.max = td.max 209 column.percent = td.percent 210 <table data-expected-width=174> 211 <col> 212 <td style="width:80%" data-expected-width=120><div style="width:100px">auto</div></td> 213 <td ><div style="width:30px">10</div></td> 214 </table> 215 216 <p class="testdesc">col fixed td percent 217 column.min = td.min 218 column.max = max(td.max, col.max) 219 column.percent = td.percent 220 <table data-expected-width=424> 221 <col style="width:200px"> 222 <td style="width:50%" data-expected-width=200><div style="width:50px">50</div></td> 223 <td><div style="width:50px">50</div> 224 </table> 225 <table style="width:1px" data-expected-width=124> 226 <col style="width:200px"> 227 <td style="width:60%" data-expected-width=50><div style="width:50px">50</div></td> 228 <td><div style="width:50px">50</div> 229 </table> 230 231 <p class="testdesc">col percent td percent 232 column.min = td.min 233 column.max = max(td.max, col.max) 234 column.percent = max(td.percent, col.percent)</p> 235 <table data-expected-width=524> 236 <col style="width:60%"> 237 <td style="width:50%" data-expected-width=300><div style="width:100px">100</div></td> 238 <td><div style="width:200px">200</div></td> 239 </table> 240 <table data-expected-width=524> 241 <col style="width:50%"> 242 <td style="width:60%" data-expected-width=300><div style="width:100px">100</div></td> 243 <td><div style="width:200px">200</div></td> 244 </table> 245 246 <p class="testdesc">col auto td fixed 247 column.min = td.min 248 column.max = td.max</p> 249 <table data-expected-width=116> 250 <col> 251 <td style="width:100px">100</td> 252 </table> 253 254 <p class="testdesc">col fixed td fixed 255 column.min = td.min 256 column.max = max(td.max, col.max)</p> 257 <table data-expected-width=216> 258 <col style="width:200px"> 259 <td style="width:100px">100</td> 260 </table> 261 <table data-expected-width=216> 262 <col style="width:100px"> 263 <td style="width:200px">100</td> 264 </table> 265 266 <p class="testdesc">col percent td fixed 267 column.min = td.min 268 column.percent = col.percent 269 column.max = max(td.max, col.max)</p> 270 <table data-expected-width=424> 271 <col style="width:50%"> 272 <td style="width:100px" data-expected-width=200>100</td> 273 <td><div style="width:200px">200</div> 274 </table> 275 276 <table style="width:1px" data-expected-width=234> 277 <col style="width:50%"> 278 <td style="width:100px" data-expected-width=10><div style="width:10px">10</div></td> 279 <td><div style="width:200px">200</div></td> 280 </table> 281 282 <p class="testdesc">col fixed td fixed inside table-layout:fixed 283 constrained columns take precedence in fixed layout. 284 <table style="width:324px;table-layout:fixed" data-expected-width=324> 285 <col style="width:100px"> 286 <td style="width:200px" data-expected-width=100>100</td> 287 <td data-expected-width=200><div style="width:400px" >200</div></td> 288 </table> 289 290 <p class="testdesc">col percent td fixed inside table-layout:fixed 291 constrained columns take precedence in fixed layout. 292 <table style="width:324px;table-layout:fixed" data-expected-width=324> 293 <col style="width:50%"> 294 <td style="width:200px" data-expected-width=150>150</td> 295 <td><div style="width:400px">150</div></td> 296 </table> 297 </main> 298 <script> 299 checkLayout("table"); 300 </script>