css/css-tables/tentative/table-width-redistribution.html

<!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>