| <!doctype html> |
| <title>Column widths</title> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> |
| <link rel="author" title="Aleks Totic" href="[email protected]" /> |
| <link rel="help" href="https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns" /> |
| <style> |
| main table { |
| background: gray; |
| border-spacing: 8px 8px; |
| table-layout: auto; |
| margin-top: 4px; |
| } |
| main td { |
| background: #BFB; |
| font-size: 10px; |
| } |
| main td > div { |
| display: inline-block; |
| background: rgba(56,162,56,0.3); |
| } |
| </style> |
| <main> |
| <h1>Col width</h1> |
| <p>how does col width interact with td widths to produce final column width?</p> |
| <p>Inputs are colgroup/col widths, and td widths. |
| <p>td widths merge, then merge again with col to produce column widths. |
| <p>Output is column min/max/percent w0dths. |
| <p>Colgroup/col has css min_width, css max_width, css percent.</p> |
| <p>TD has intrinsic minmax, css width, css percent width, css max width, css min width</p> |
| |
| <h2>Initial cell assignment</h2> |
| |
| |
| <p class="testdesc">Unconstrained single TD, table-layout:auto |
| td.min = minmax.min |
| td.max = minmax.max</p> |
| <table style="width:1px" data-expected-width=266> |
| <tr> |
| <td><div style="width:50px">min</div><div style="width:250px">min</div></td> |
| </tr> |
| </table> |
| <table data-expected-width=316> |
| <tr> |
| <td><div style="width:50px">max</div><div style="width:250px">max</div></td> |
| </tr> |
| </table> |
| |
| <p class="testdesc">Unconstrained single TD, table-layout:fixed |
| td.min = 0 |
| td.max = minmax.max</p> |
| <table style="width:1px;table-layout:fixed" data-expected-width=16> |
| <tr> |
| <td><div style="width:50px">min</div><div style="width:250px">min</div></td> |
| </tr> |
| </table> |
| <table style="table-layout:fixed;width:300px" data-expected-width=300> |
| <tr> |
| <td><div style="width:50px">max</div><div style="width:250px">max</div></td> |
| </tr> |
| </table> |
| |
| <p class="testdesc">Constrained single TD, table-layout:auto |
| td.min = minmax.min |
| td.max = max(minmax.min, css.width) |
| </p> |
| <table data-expected-width=266> |
| <tr> |
| <td style="width:200px"><div style="width:50px">max</div><div style="width:250px">max</div></td> |
| </tr> |
| </table> |
| <table data-expected-width=416> |
| <tr> |
| <td style="width:400px"><div style="width:50px">max</div><div style="width:250px">max</div></td> |
| </tr> |
| </table> |
| <table style="width:1px" data-expected-width=26> |
| <tr> |
| <td style="width:50px"><div style="width:10px">min</div></td> |
| </tr> |
| </table> |
| <table data-expected-width=266> |
| <tr> |
| <td style="width:100px"><div style="width:50px">min</div><div style="width:250px">min</div></td> |
| </tr> |
| </table> |
| <table data-expected-width=416> |
| <tr> |
| <td style="width:400px"><div style="width:50px">min</div><div style="width:250px">min</div></td> |
| </tr> |
| </table> |
| |
| |
| <h2>TD/TD merging</h2> |
| |
| <p>TD merging only happens in auto, in fixed only 1st row gets measured</p> |
| |
| <p class="testdesc">Two unconstrained TDs, table-layout:auto or fixed |
| td.min = max(C0.min, C1.min). always 0 in fixed layout. |
| td.max = max(C0.max, C1.max) |
| </p> |
| <table data-expected-width=316> |
| <tr> |
| <td data-expected-width=300><div style="width:50px">auto</div><div style="width:250px">max</div></td> |
| </tr> |
| <tr> |
| <td><div style="width:100px">auto</div><div style="width:150px">auto</div></td> |
| </tr> |
| </table> |
| <table style="width:1px" data-expected-width=266> |
| <tr> |
| <td data-expected-width=250><div style="width:50px">auto</div><div style="width:250px">max</div></td> |
| </tr> |
| <tr> |
| <td><div style="width:100px">auto</div><div style="width:150px">auto</div></td> |
| </tr> |
| </table> |
| |
| <p class="testdesc">Unconstrained (UN) and constrained (CON) TD |
| td.min = max(UN.min, CON.min) |
| td.max = max(UN.min, CON.max) |
| </p> |
| <p class="error">Chrome Legacy and Edge fail this test. They do not limit unconstrained maximum: td.max = max(UN.max, CON.max).</p> |
| <table style="width:1px" data-expected-width=36> |
| <tr> |
| <td style="width:50px" data-expected-width=20><div style="width:20px">min</div></td> |
| </tr> |
| <tr> |
| <td><div style="width:15px">min</div></td> |
| </tr> |
| </table> |
| <table data-expected-width=66> |
| <tr> |
| <td style="width:50px" data-expected-width=50><div style="width:20px">max</div></td> |
| </tr> |
| <tr> |
| <td><div style="width:40px">max</div><div style="width:40px">max</div></td> |
| </tr> |
| </table> |
| |
| <p class="testdesc">Two percent TDs |
| td.percent = max(C1.percent, C2.percent) |
| td.max = max(C1.max, C2.max) |
| td.min = max(C1.min, C2.min) |
| </p> |
| <table data-expected-width=324> |
| <tr> |
| <td style="width:10%"><div style="width:60px">60</div></td> |
| <td>auto</td> |
| </tr> |
| <tr> |
| <td style="width:20%" data-expected-width=60><div style="width:50px">50</div></td> |
| <td data-expected-width=240>auto</td> |
| </tr> |
| </table> |
| |
| <h2>COL/TD merging</h2> |
| |
| <p class="testdesc">col auto td auto |
| column.min = td.min |
| column.max = td.max</p> |
| <table data-expected-width=66> |
| <col> |
| <td><div style="width:50px">auto</div></td> |
| </table> |
| |
| <p class="testdesc">col fixed td auto |
| column.min = td.min |
| column.max = max(col[px], td.min) |
| </p> |
| <table data-expected-width=116> |
| <col style="width:100px"> |
| <td><div style="width:50px">auto</div></td> |
| </table> |
| <table data-expected-width=126> |
| <col style="width:100px"> |
| <td><div style="width:110px">110</div><div style="width:110px">110</div></td> |
| </table> |
| <table style="width:1px" data-expected-width=66> |
| <col style="width:100px"> |
| <td><div style="width:50px">min</div></td> |
| </table> |
| |
| <p class="testdesc">col % td auto |
| column.min = td.min |
| column.max = max(td.max, col.max) |
| column.percent = col[%] |
| <table data-expected-width=224> |
| <col style="width:80%"> |
| <td><div style="width:50px">auto</div></td> |
| <td style="width:40px">40</td> |
| </table> |
| <table style="width:1px" data-expected-width=94> |
| <col style="width:80%"> |
| <td style="width:50px"><div style="width:30px">auto</div></td> |
| <td><div style="width:40px"></div></td> |
| </table> |
| <table data-expected-width=274> |
| <col style="width:80%"> |
| <td><div style="width:200px" data-expected-width=200>auto</div></td> |
| <td style="width:30px"><div style="width:30px">30</div></td> |
| </table> |
| |
| <p class="testdesc">col auto td percent |
| column.min = td.min |
| column.max = td.max |
| column.percent = td.percent |
| <table data-expected-width=174> |
| <col> |
| <td style="width:80%" data-expected-width=120><div style="width:100px">auto</div></td> |
| <td ><div style="width:30px">10</div></td> |
| </table> |
| |
| <p class="testdesc">col fixed td percent |
| column.min = td.min |
| column.max = max(td.max, col.max) |
| column.percent = td.percent |
| <table data-expected-width=424> |
| <col style="width:200px"> |
| <td style="width:50%" data-expected-width=200><div style="width:50px">50</div></td> |
| <td><div style="width:50px">50</div> |
| </table> |
| <table style="width:1px" data-expected-width=124> |
| <col style="width:200px"> |
| <td style="width:60%" data-expected-width=50><div style="width:50px">50</div></td> |
| <td><div style="width:50px">50</div> |
| </table> |
| |
| <p class="testdesc">col percent td percent |
| column.min = td.min |
| column.max = max(td.max, col.max) |
| column.percent = max(td.percent, col.percent)</p> |
| <table data-expected-width=524> |
| <col style="width:60%"> |
| <td style="width:50%" data-expected-width=300><div style="width:100px">100</div></td> |
| <td><div style="width:200px">200</div></td> |
| </table> |
| <table data-expected-width=524> |
| <col style="width:50%"> |
| <td style="width:60%" data-expected-width=300><div style="width:100px">100</div></td> |
| <td><div style="width:200px">200</div></td> |
| </table> |
| |
| <p class="testdesc">col auto td fixed |
| column.min = td.min |
| column.max = td.max</p> |
| <table data-expected-width=116> |
| <col> |
| <td style="width:100px">100</td> |
| </table> |
| |
| <p class="testdesc">col fixed td fixed |
| column.min = td.min |
| column.max = max(td.max, col.max)</p> |
| <table data-expected-width=216> |
| <col style="width:200px"> |
| <td style="width:100px">100</td> |
| </table> |
| <table data-expected-width=216> |
| <col style="width:100px"> |
| <td style="width:200px">100</td> |
| </table> |
| |
| <p class="testdesc">col percent td fixed |
| column.min = td.min |
| column.percent = col.percent |
| column.max = max(td.max, col.max)</p> |
| <table data-expected-width=424> |
| <col style="width:50%"> |
| <td style="width:100px" data-expected-width=200>100</td> |
| <td><div style="width:200px">200</div> |
| </table> |
| |
| <table style="width:1px" data-expected-width=234> |
| <col style="width:50%"> |
| <td style="width:100px" data-expected-width=10><div style="width:10px">10</div></td> |
| <td><div style="width:200px">200</div> |
| </table> |
| </main> |
| <script> |
| checkLayout("table"); |
| </script> |
