column-track-merging.html (7220B)
1 <!doctype html> 2 <title>Column track merging</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="author" title="Aleks Totic" href="atotic@chromium.org" /> 7 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2" /> 8 <style> 9 10 main table { 11 border: 10px solid gray; 12 border-spacing: 20px; 13 } 14 15 main td { 16 width: 50px; 17 height:50px; 18 padding: 0; 19 background:linear-gradient(to right, yellow, orange); 20 } 21 main caption { 22 background: #EEE; 23 } 24 main .desc { 25 margin-top: 20px; 26 color: rgb(50,0,0); 27 } 28 main pre { 29 white-space: pre-wrap; 30 31 } 32 </style> 33 <h3>Column merging investigation</h3> 34 <o>Empty columns is a column that has no originating cells</o> 35 <p><a href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2">Table standard</a> discusses this under "track merging".</p> 36 <ul> 37 <li>Do empty columns get coalesced?</li> 38 <li>How does this interact with table-layout:fixed, table width</li> 39 <li>Is there a difference between columns defined by COL, vs TD.colspan? Yes!</li> 40 <li>Do COLs with specified width get merged?</li> 41 </ul> 42 <p>Compatibility</p> 43 <li>Edge17 has a bug where width of a colspanned cell always includes cell width + width of border spacing. It should be max(cell width, border spacing)</li> 44 <li>Safari matches Chrome Legacy. TD-originated columns are always merged.</li> 45 <li>Firefox follows the standard, but has a few bugs.</li> 46 <main> 47 48 <h3>TD merging</h3> 49 50 <pre class="desc">Auto table, and TD.colspan=10 51 FF/Chrome Legacy/Safari: Standard. Tracks merge. 52 Edge17: Tracks do not merge. Wide cell is 180px (9 * border spacing) 53 </pre> 54 <table id="td_auto" data-expected-width=180> 55 <caption>auto</caption> 56 <tr> 57 <td colspan=10 data-expected-width=50></td> 58 <td></td> 59 </tr> 60 <tr> 61 <td colspan=10></td> 62 <td></td> 63 </tr> 64 </table> 65 66 <pre class="desc">Auto table(400px), and TD.colspan=10 67 FF/Chrome Legacy/Safari/Edge17: Standard. Tracks merge. Colspan cell grows because it is unconstrained. 68 </pre> 69 <table id="td_auto_width" style="width:400px" data-expected-width=400> 70 <caption>auto 400px</caption> 71 <tr> 72 <td colspan=10 data-expected-width=270></td> 73 <td></td> 74 </tr> 75 <tr> 76 <td colspan=10></td> 77 <td></td> 78 </tr> 79 </table> 80 81 <pre class="desc">Auto table(130px), and TD.colspan=10 82 FF/Chrome Legacy/Safari: Standard. Tracks merge. Colspan cell shrinks to min width becuase it is unconstrained. 83 Edge17: Non-compliant, buggy. Wide cell too wide, narrow cell disappears. 84 </pre> 85 <table id="td_auto_width_130" style="width:130px" data-expected-width=130> 86 <caption>auto 130px</caption> 87 <tr> 88 <td colspan=10 data-expected-width=10><div style="width:10px"></div></td> 89 <td></td> 90 </tr> 91 <tr> 92 <td colspan=10></td> 93 <td></td> 94 </tr> 95 </table> 96 97 <pre class="td_fixed">Fixed(400px) table, and TD.colspan=10 98 Chrome/Safari: Non-compliant. Tracks merge. Cells are the same size, fixed algo distributes extra width evenly. 99 Firefox: Standard. 100 Edge17: Standard, buggy. Wide cell too wide. Edge's bug is that it computes max width as (width + border_spacing) instead of max(width, border_spacing). 101 </pre> 102 <table id="td_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400> 103 <caption>fixed 400px</caption> 104 <tr> 105 <td colspan=10 data-expected-width=180></td> 106 <td></td> 107 </tr> 108 <tr> 109 <td colspan=10></td> 110 <td></td> 111 </tr> 112 </table> 113 114 <pre class="td_fixed">Fixed(130px) table, and TD.colspan=10 115 Chrome/Safari: Non-compliant.Tracks merge, cells same size. 116 Firefox: Standard + buggy. Table does not grow. 117 Edge17: Standard + buggy. Wide cell too wide. 118 </pre> 119 <table id="td_fixed" style="table-layout:fixed; width: 130px" data-expected-width=310> 120 <caption>fixed 130px</caption> 121 <tr> 122 <td colspan=10 data-expected-width=180></td> 123 <td></td> 124 </tr> 125 <tr> 126 <td colspan=10></td> 127 <td></td> 128 </tr> 129 </table> 130 131 <h3>COL merging. Same tests with COL span=10 replacing TD</h3> 132 133 <pre class="desc">Auto table 134 FF/Chrome Legacy/Safari, Edge17: Standard. wide cell is 50px, tracks do merge. 135 </pre> 136 <table id="col_auto" data-expected-width=180> 137 <caption>auto</caption> 138 <col span=10> 139 <tr> 140 <td data-expected-width=50></td> 141 <td></td> 142 </tr> 143 <tr> 144 <td></td> 145 <td></td> 146 </tr> 147 </table> 148 149 <pre class="desc">Auto table(400px) 150 FF/Chrome Legacy/Safari, Edge17: Standard. Both cells grow the same because unconstrained. 151 </pre> 152 <table id="col_auto_width" style="width:400px" data-expected-width=400> 153 <caption>auto 400px</caption> 154 <col span=10> 155 <tr> 156 <td data-expected-width=160></td> 157 <td></td> 158 </tr> 159 <tr> 160 <td ></td> 161 <td></td> 162 </tr> 163 </table> 164 165 <pre class="desc">Auto table(130px) 166 FF/Chrome Legacy/Safari, Edge17: Standard. Both cells shrink. 167 </pre> 168 <table id="col_auto_width_130" style="width:130px" data-expected-width=130> 169 <caption>auto 130px</caption> 170 <col span=10> 171 <tr> 172 <td data-expected-width=28><div style="width:10px"></div></td> 173 <td></td> 174 </tr> 175 <tr> 176 <td></td> 177 <td></td> 178 </tr> 179 </table> 180 181 <pre class="desc">Fixed(400px) table 182 Chrome/Safari,Firefox: Standard. 183 Edge17: Buggy. Fixed cells grow to fill table. 184 </pre> 185 <table id="col_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400> 186 <caption>fixed 400px</caption> 187 <col span=10> 188 <tr> 189 <td data-expected-width=50></td> 190 <td></td> 191 </tr> 192 <tr> 193 <td></td> 194 <td></td> 195 </tr> 196 </table> 197 198 <pre class="td_fixed">Fixed(130px) table 199 Chrome/Safari: Standard, very buggy. Non-collapsed columns shrink to single border spacing. 200 Firefox: Standard. 201 Edge17: Non-compliant, collapses columns. 202 </pre> 203 <table id="col_fixed_130" style="table-layout:fixed; width: 130px" data-expected-width=340> 204 <col span=10> 205 <caption>fixed 130px</caption> 206 <tr> 207 <td data-expected-width=50></td> 208 <td></td> 209 </tr> 210 <tr> 211 <td></td> 212 <td></td> 213 </tr> 214 </table> 215 216 <h3>COL merging when COL has specified width.</h3> 217 218 <ul><li>Chrome Legacy/Edge17/Safari: non-compliant, merge COLs with specified widths. 219 <li>Firefox: Standard, unless COL width is 0px. Buggy, does not include border-spacing around columns.</ul> 220 <pre class="desc">Auto table, COL width 30px. 221 Chrome Legacy/Edge17/Safari: non-compliant, merge. 222 Firefox: Standard, buggy. does not include border-spacing around columns. 223 </pre> 224 <table id="col_auto" data-expected-width=580> 225 <caption>auto col 30px</caption> 226 <col span=10 style="width:30px"> 227 <tr> 228 <td data-expected-width=50></td> 229 <td></td> 230 </tr> 231 <tr> 232 <td></td> 233 <td></td> 234 </tr> 235 </table> 236 237 <pre class="desc">Auto table, COL width 5%. 238 Chrome Legacy/Edge17/Safari: non-compliant, merge. 239 Firefox: Standard, buggy. does not include border-spacing around columns. 240 </pre> 241 <table id="col_auto" data-expected-width=640> 242 <caption>auto col 10%</caption> 243 <col span=5 style="width:10%"> 244 <tr> 245 <td data-expected-width=100></td> 246 <td></td> 247 </tr> 248 <tr> 249 <td></td> 250 <td></td> 251 </tr> 252 </table> 253 254 <pre class="desc">Auto table, COL width 0px. 255 Everyone: merges COL 256 </pre> 257 <table id="col_auto" data-expected-width=180> 258 <caption>auto col 0px</caption> 259 <col span=10 style="width:0px"> 260 <tr> 261 <td data-expected-width=50></td> 262 <td></td> 263 </tr> 264 <tr> 265 <td></td> 266 <td></td> 267 </tr> 268 </table> 269 270 271 </main> 272 <script> 273 checkLayout("main table"); 274 </script> 275 276 277 </body> 278 </html>