summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html')
-rw-r--r--testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html351
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>
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 18:50:34 +0000