1 files changed, 351 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html
new file mode 100644
index 0000000000..90a89e81a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html
@@ -0,0 +1,351 @@
+<!doctype html>
+<title>Auto table final assignable  distribution</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;
+  }
+  main td {
+    background: #BFB;
+    font-size: 10px;
+  }
+  main td > div {
+    display: inline-block;
+    background: rgba(56,162,56,0.3);
+  }
+</style>
+ <main>
+<h1>Compute column computed widths from assignable table width</h1>
+<h2>Test design</h2>
+<p>All examples have border-spacing:8, td.padding:0</p>
+
+<h2>Table css sizing</h2>
+
+<p class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100
+When table.css_width is < columns.css_width, column.min_width is lower limit.
+<p class="error">
+<table style="width:50px" data-expected-width=124>
+  <tr>
+    <td style="width:100px" data-expected-width=50>
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td style="width:100px" data-expected-width=50>
+      <div style="width:50px">50</div><div style="width:25px">25</div></td>
+  </tr>
+</table>
+
+
+<p class="testdesc">Table: 300px; C0:100/100/200 C1:100/90/115
+When table.css_width is > columns.css_width , how is the conflict resolved?
+table.css_width wins</p>
+<table style="width:300px" data-expected-width=300>
+  <tr>
+    <td style="width:100px" data-expected-width=138>
+      <div style="width:100px">100</div><div style="width:100px">100</div></td>
+    <td style="width:100px" data-expected-width=138>
+      <div style="width:90px">90</div><div style="width:25px">25</div></td>
+  </tr>
+</table>
+
+<h2>Content sizings: min|max|fit|fill-available</h2>
+
+<p class="testdesc">table width:min-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75
+</p>
+<p class="error">Edge treats as max-content.</p>
+<table style="width:min-content" data-expected-width=182>
+  <tr>
+    <td data-expected-width=50>
+      <div style="width:50px" >au</div><div style="width:50px">to</div></td>
+    <td style="width:100px" data-expected-width=50>
+      <div style="width:50px" >fix</div><div style="width:25px">ed</div></td>
+    <td style="width:20%" data-expected-width=50>
+      <div style="width:50px">per</div><div style="width:25px">cent</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">table width:max-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75
+Each column gets maximum width.
+C0: 100 C1:100 C2: 75
+max-content does not allow for assignable size to be influenced by inverse percent.
+Table size is 275 + 32 = 307
+If percent influenced table size, table size would have been 407
+</p>
+<table style="width:max-content" data-expected-width=307>
+  <tr>
+    <td data-expected-width=120>
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td style="width:100px" data-expected-width=100>
+      <div style="width:50px">50</div><div style="width:25px">25</div></td>
+    <td style="width:20%" data-expected-width=55>
+      <div style="width:50px">50</div><div style="width:25px">25</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">table width:fit-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75
+Percent column determines assignable table width, which gets distributed to all columns.
+Assignable width from %: 20%=75, 100%=375</p>
+</p>
+<table style="width:fit-content" data-expected-width=407>
+  <tr>
+    <td data-expected-width=200>
+      <div style="width:50px" >au</div><div style="width:50px">to</div></td>
+    <td style="width:100px" data-expected-width=100>
+      <div style="width:50px" >fix</div><div style="width:25px">ed</div></td>
+    <td style="width:20%" data-expected-width=75>
+      <div style="width:50px">per</div><div style="width:25px">cent</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">table width:-webkit-fill-available; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75
+</p>
+<p class="error">Edge treats as fit-content</p>
+<div style="width:632px">
+<table style="width:-webkit-fill-available;width:-moz-available;" data-expected-width=632>
+  <tr>
+    <td data-expected-width=380>
+      <div style="width:50px" >au</div><div style="width:50px">to</div></td>
+    <td style="width:100px" data-expected-width=100>
+      <div style="width:50px" >fix</div><div style="width:25px">ed</div></td>
+    <td style="width:20%" data-expected-width=120>
+      <div style="width:50px">per</div><div style="width:25px">cent</div></td>
+  </tr>
+</table>
+</div>
+
+<h2>Auto columns distribution</h2>
+
+<p class="testdesc">Assi:300px C0: Auto/75/75 C1:Auto/25/25
+Non-empty auto cells get surplus width proportionally to their max width.
+Guess3: 100. Guess4: 300, diff 200, fixed priority.
+C0: 75 + 75/100*200 = 225  C1: 25 + 25/100*200 = 75</p>
+<table style="width:calc(300px + 24px)" data-expected-width=324>
+  <tr>
+    <td data-expected-width=225><div style="width:75px">75</div></td>
+    <td data-expected-width=75><div style="width:25px">25</div></td>
+  </tr>
+</table>
+<p class="testdesc">Assignable:300px C0: Auto/75/75 C1:Auto/13/25 C2:Auto/0/0
+Empty cells get nothing if there are non-empty auto cells.
+Guess3: 100, Guess4: 300; diff 200, fixed priority.
+C0: 75 + 75/100*200 = 225  C1: 25 + 25/100*200 = 75; C2: 0
+</p>
+<table style="width:calc(300px + 32px)" data-expected-width=332>
+  <tr>
+    <td data-expected-width=225>
+      <div style="width:75px">75</div></td>
+    <td data-expected-width=75>
+      <div style="width:13px">13</div><div style="width:12px">12</div></td>
+    <td data-expected-width=0></td>
+  </tr>
+</table>
+
+<h2>Guess 0: Auto(min), Fixed(min), Percentage(min) to Guess 1.</h2>
+
+<p class="testdesc">Assi: 1px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100
+All columns get minimum width.
+Guess0: 150
+C0: 50, C1:50, C2: 50</p>
+<table style="width:1px" data-expected-width=182>
+  <tr>
+    <td data-expected-width=50>
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=50 style="width:100px">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=50 style="width:50%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+</table>
+
+<p class="testdesc">Assi: 160px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100
+%ge column grows.
+Guess0: 150, Guess1: 180; diff 10.
+C0: 50, C1:50, C2: 50 + 10 * 10/10 = 60</p>
+<table style="width:calc(160px + 32px)" data-expected-width=192>
+  <tr>
+    <td data-expected-width=50>
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=50 style="width:100px">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=60 style="width:50%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+</table>
+
+<p class="testdesc">Assi: 210px; C0:Auto/50/100 C1:100/50/100 C2:30%/50/100 C3:30%/50/100
+2 %ge columns grow evenly.
+Guess 0: 200, Guess 1: 240, diff 10
+C2: 50 + 10 * 70/140 C3: 50 + 10 * 70/140
+<table style="width:calc(40px + 210px)" data-expected-width=250>
+  <tr>
+    <td data-expected-width=50>
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=50 style="width:100px">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=55 style="width:30%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=55 style="width:30%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+</table>
+
+<p class="testdesc">Assi: 220px; C0:Auto/50/100 C1:100/50/100 C2:25%/50/100 C3:40%50/100
+%ge columns grow in proportion to increase from previous guess.
+Guess 0: 200. C2[G1] = .25*220 = 55 C3[G1] = .4 * 220 = 88 Guess 1: 100 + 55 + 88 = 243
+diff = 220 - 200 = 20. C2 grew 5, C3 grew 38, total grew 43.
+C2: 50 + 20 *5/43 = 52.32; C3: 50 + 20 * 38 / 43 = 67.67
+<table style="width:calc(40px + 220px)" data-expected-width=260>
+  <tr>
+    <td data-expected-width=50>
+      <div style="width:50px">50</div> <div style="width:50px">50</div></td>
+    <td data-expected-width=50 style="width:100px">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width=52 style="width:25%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td  data-expected-width=68 style="width:40%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+</table>
+
+<h2>Guess 1 to Guess 2: Auto(min), Percentage(%max) to Fixed(min => max)</h2>
+<p>These tests are non-intuitive to evaluate. When table size increases betwee Guess 1 and 2,
+  although the standard says that fixed columns are growing, %ge columns grow too because their max width depends on table width.</p>
+
+<p class="testdesc">Assi:166, C0:Auto/50/100 C1:100/50/100 C2:40%/50/100
+Edge example, Guess 1 %ge cell has grown to the max.
+C2: grows to .4*165 = 66.4, table is 166.4+32 = 198.4</p>
+<table style="width:calc(166px + 32px)" data-expected-width=198>
+  <tr>
+    <td data-expected-width="50" >
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="50" style="width:100px">
+       <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="66" style="width:40%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">Assi:216, C0:Auto/50/100 C1:100/50/100 C2:40%/50
+  %ge cell grows to the max, the rest goes to fixed.
+Guess 1 size is 50 + 50 + (.4*216=>86.4) = 186.4
+Guess 2 size is 50 + 100 + 86.4 = 236
+Assi - Guess1 = 29.6; C2 = 50 + 29.6 * 50/50 = 79.6
+</p>
+<table style="width:calc(216px + 32px)" data-expected-width=248>
+  <tr>
+    <td data-expected-width="50" >
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="80" style="width:100px">
+       <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="86" style="width:40%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+  </tr>
+</table>
+
+<h2>Guess 2 to Guess 3: Percentage(%max), Fixed(max), Auto(min=>max)</h2>
+
+<p class="testdesc">Assi:300
+Guess 2 size is 50 + 100 + .4*300 = 270
+Guess 3 size is 100 + 100 + 120 = 320
+Assi - Guess2 = 30, C0 = 50 + 30 = 80
+<table style="width:calc(300px + 32px)" data-expected-width=332>
+  <tr>
+    <td data-expected-width="80" >
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="100" style="width:100px">
+       <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="120" style="width:40%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+  </tr>
+</table>
+
+<h2>Guess3 to Guess4, Auto(max), Percentage(%max), Fixed(max) grow first available Auto|Fixed|Percent</h2>
+
+<p class="testdesc">Assi: 500, C0:Auto, C1: Fixed, C2: Percent
+Guess 3 is 100 + 100 + .4 * 500 = 400
+C0 gets the 100
+<table style="width:calc(500px + 32px)" data-expected-width=532>
+  <tr>
+    <td data-expected-width="200" >
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="100" style="width:100px">
+       <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="200" style="width:40%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">Assi: 500, C0:Fixed, C1: Fixed, C2: Percent
+Guess 3 is 100 + 100 + .4 * 500 = 400, 100 to be redistributed
+Fixed cells, C0 and C1 get 50 each.
+<table style="width:calc(500px + 32px)" data-expected-width=532>
+  <tr>
+    <td data-expected-width="150" style="width:100px">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="150" style="width:100px">
+       <div style="width:50px">50</div><div style="width:50px">50</div></td>
+    <td data-expected-width="200" style="width:40%">
+      <div style="width:50px">50</div><div style="width:50px">50</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">Assi: 700, C0:10%/40, C1: 20%/50, C2: 40%/50
+Percentage cells only.
+Compute columns as %ge of total width:
+C0: 700*10/70, C1: 700*20/70 C2: 700*40/70
+<table style="width:calc(700px + 32px)" data-expected-width=732>
+  <tr>
+    <td data-expected-width=100 style="width:10%">
+      <div style="width:40px">40</div></td>
+    <td data-expected-width=200 style="width:20%">
+       <div style="width:50px">50</div></td>
+    <td data-expected-width=400 style="width:40%">
+      <div style="width:50px">50</div></td>
+  </tr>
+</table>
+<p class="testdesc">Assi: 600, C0:10%/40, C1: 20%/50, C2: 40%/50, C3: 100%/50
+Percentage cells only. Over 100% columns get their percentage truncated.
+<table style="width:calc(600px + 40px)" data-expected-width=640>
+  <tr>
+    <td data-expected-width=60 style="width:10%">
+      <div style="width:40px">40</div></td>
+    <td data-expected-width=120 style="width:20%">
+       <div style="width:50px">50</div></td>
+    <td data-expected-width=240 style="width:40%">
+      <div style="width:50px">50</div></td>
+    <td data-expected-width=180 style="width:100%">
+      <div style="width:50px">50</div></td>
+  </tr>
+</table>
+<p class="testdesc">C0:20%/60, C1:Auto/50.
+Tests table max width from single cell.
+<table data-expected-width="324">
+  <tr>
+    <td style="width:20%"  data-expected-width="60"><div style="width:60px">60</div></td>
+    <td><div style="width:50px">50</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">C0:10%/70, C1:Auto/50.
+Table limited to 1px. Tests that single cell specifies max width, not min width.
+<table style="width:1px" data-expected-width="134">
+  <tr>
+    <td style="width:20%"  data-expected-width="60"><div style="width:60px">60</div></td>
+    <td><div style="width:50px" data-expected-width="50">50</div></td>
+  </tr>
+</table>
+
+<p class="testdesc">C0:10%/70 border 10px, C1:Auto/50.
+Cell border padding do not affect max width.
+<table data-expected-width="524">
+  <tr>
+    <td style="width:20%;border:10px solid yellow;padding:10px"  data-expected-width="100"><div style="width:60px">60</div></td>
+    <td><div style="width:50px">50</div></td>
+  </tr>
+</table>
+</main>
+
+<script>
+  checkLayout("table");
+</script>
+