column-widths.html | Explore in Territory

<!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></td>
</table>

<p class="testdesc">col fixed td fixed inside table-layout:fixed
constrained columns take precedence in fixed layout.
<table style="width:324px;table-layout:fixed" data-expected-width=324>
  <col style="width:100px">
  <td style="width:200px" data-expected-width=100>100</td>
  <td data-expected-width=200><div style="width:400px" >200</div></td>
</table>

<p class="testdesc">col percent td fixed inside table-layout:fixed
constrained columns take precedence in fixed layout.
<table style="width:324px;table-layout:fixed" data-expected-width=324>
  <col style="width:50%">
  <td style="width:200px" data-expected-width=150>150</td>
  <td><div style="width:400px">150</div></td>
</table>
</main>
<script>
  checkLayout("table");
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-tables/tentative/column-widths.html
