mirror of
https://github.com/servo/servo.git
synced 2025-06-28 19:13:41 +01:00
351 lines
14 KiB
HTML
351 lines
14 KiB
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>
|
|
|