1 files changed, 300 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/tentative/column-widths.html b/testing/web-platform/tests/css/css-tables/tentative/column-widths.html
new file mode 100644
index 0000000000..b151c2263b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/tentative/column-widths.html
@@ -0,0 +1,300 @@
+<!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="atotic@chromium.org" />
+<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>