Skip to content

GitLab

T
tangled
Commit c1c4c262 authored by Aleks Totic's avatar Aleks Totic Committed by Commit Bot
Browse files
Options

[TablesNG] New test suite: caption + column width 

Caption.html
- Legacy fails the caption block %ge sizing test.
Legacy computed caption block %ge from grid size.
I've discussed with tab, and will try to make
block %ge caption size be auto instead.

- Browsers mostly agree on column-width.html test, 1 difference.

It exausively tests how td and col sizes are combined
to generate column width.

Bug: 958381
Change-Id: I61d0e5a0e67d7fbb122ee5818917ee14d9801da0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2161571
Commit-Queue: Aleks Totic <atotic@chromium.org>
Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#771341}
parent be54aa46
Hide whitespace changes
Inline Side-by-side
Showing with 532 additions and 0 deletions
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/caption-expected.txt 0 → 100644
View file @ c1c4c262
This is a testharness.js-based test.
PASS table 1
PASS table 2
PASS table 3
PASS table 4
PASS table 5
FAIL table 6 assert_equals:
<table style="width:200px;height:100px">
<caption style="height:80%" data-expected-height="30"><div style="height:30px"></div></caption>
<tbody><tr><td data-expected-width="200">auto</td>
</tr></tbody></table>
height expected 30 but got 80
PASS table 7
PASS table 8
PASS table 9
PASS table 10
PASS table 11
FAIL table 12 assert_equals:
<table>
<caption style="writing-mode:vertical-rl;height:min-content;font:10px Ahem;color:rgba(0,0,0,0.3)" data-expected-height="100"><div style="height:100px;">vertical</div> caption bigger than table</caption>
<tbody data-offset-y="100">
<tr><td>vertical!</td>
</tr></tbody>
</table>
offsetTop expected 100 but got 40
Harness: the test ran to completion.
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/caption.html 0 → 100644
View file @ c1c4c262
<!doctype html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<title>caption</title>
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="./support/table-tentative.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-caption-element"/>
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#bounding-box-assignment" />
<style>
main table {
border-spacing: 0 0;
position:relative;
background: gray;
}
main td {
background: #BFB;
}
main caption {
background: yellow;
}
main caption > div {
display: inline-block;
background: rgba(0,0,0,0.1);
}
main caption > div:after {
content: "c";
}
.lh {
line-height:30px;
}
</style>
<h1>Caption sizing and positioning</h1>
<p class="error">There is a fundamental disagreement between Chrome Legacy and Firefox on caption size influence on table width. Chrome uses caption min width as lower limit of table's grid box, FF does not. Firefox also does not support multiple captions.</p>
<main>
<h2>Caption width limits</h2>
<p class="testdesc">Caption minmax and grid width
caption.min is lower limit of grid min.</p>
<table>
<caption data-expected-width=50><div style="width:50px"></div><div style="width:30px"></caption>
<td data-expected-width=50>auto</td>
</table>
<p class="testdesc">Caption.min vs caption.css_width
Caption.css_width is upper limit of caption.min
Caption.css_width is lower limit of caption.min
</p>
<table>
<caption style="width:100px" data-expected-width=100><div style="width:200px"></div></caption>
<td data-expected-width=100>auto</td>
</table>
<table>
<caption style="width:300px" data-expected-width=300><div style="width:200px"></div></caption>
<td data-expected-width=300>auto</td>
</table>
<p class="testdesc">Caption width:50%
Percent width is resolved wrt to table width.</p>
<table style="width:200px">
<caption style="width:50%" data-expected-width=100><div></div></caption>
<td data-expected-width=200>auto</td>
</table>
<table style="width:200px">
<caption style="width:50%" data-expected-width=100><div style="width:200px"></div></caption>
<td data-expected-width=200>auto</td>
</table>
<p class="testdesc">Caption height:80%
github spec <a href="https://github.com/w3c/csswg-drafts/issues/4676">issue</a>.
TablesNG will not resolve percentage heights per spec. FF agrees.
</p>
<table style="width:200px;height:100px">
<caption style="height:80%" data-expected-height=30><div style="height:30px"></div></caption>
<td data-expected-width=200>auto</td>
</table>
<p class="testdesc">Multiple captions
Do we allow multiple captions? There are 4 in this test.</p>
<table>
<caption class="lh" data-offset-y=0>over1</caption>
<caption class="lh" data-offset-y=30>over2</caption>
<caption class="lh" style="caption-side:bottom" data-offset-y=90>under1</caption>
<caption class="lh" style="caption-side:bottom" data-offset-y=120>under2</caption>
<td class="lh" data-offset-y=60>2 above me, 2 below me?</td>
</table>
<p class="testdesc">Caption margins
Margins between captions do not collapse</p>
<table style="width:200px">
<caption class="lh" style="margin:20px;" data-offset-y=20 data-offset-x=20>20px margins</caption>
<td data-expected-width=200 data-offset-y=70>1 caption</td>
</table>
<table style="width:200px">
<caption class="lh" style="margin:20px;" data-offset-y=20 data-offset-x=20>20px margins</caption>
<caption class="lh" style="margin:20px;" data-offset-y=90 data-offset-x=20>20px margins</caption>
<td data-expected-width=200 data-offset-y=140>2 captions</td>
</table>
<p class="testdesc">Caption margins auto
auto margins center captions that are less wide than the table.
</p>
<table style="width:200px">
<caption class="lh" style="margin:auto" data-offset-x=0><div style="width:100px">auto margins</div></caption>
<td data-expected-width=200>1 caption</td>
</table>
<table style="width:200px">
<caption class="lh" style="margin:auto;width:50%" data-offset-x=50><div style="width:100px">auto margins</div></caption>
<td data-expected-width=200>1 caption</td>
</table>
<p class="testdesc">Vertical writing mode caption
</p>
<table>
<caption style="writing-mode:vertical-rl;height:min-content;font:10px Ahem;color:rgba(0,0,0,0.3)" data-expected-height=100 ><div style="height:100px;">vertical</div> caption bigger than table</caption>
<tbody data-offset-y=100>
<td>vertical!</td>
</tbody>
</table>
</main>
<script>
checkLayout("table");
</script>
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/column-widths-expected.txt 0 → 100644
View file @ c1c4c262
This is a testharness.js-based test.
PASS table 1
PASS table 2
PASS table 3
PASS table 4
PASS table 5
PASS table 6
PASS table 7
PASS table 8
PASS table 9
PASS table 10
PASS table 11
PASS table 12
FAIL table 13 assert_equals:
<table data-expected-width="66">
<tbody><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>
</tbody></table>
width expected 66 but got 96
PASS table 14
PASS table 15
PASS table 16
PASS table 17
PASS table 18
PASS table 19
PASS table 20
PASS table 21
PASS table 22
PASS table 23
PASS table 24
PASS table 25
PASS table 26
PASS table 27
PASS table 28
PASS table 29
PASS table 30
PASS table 31
Harness: the test ran to completion.
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/column-widths.html 0 → 100644
View file @ c1c4c262
<!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>
</table>
</main>
<script>
checkLayout("table");
</script>
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/support/README 0 → 100644
View file @ c1c4c262
This test suite is created as part of Chrome's NG table rewrite in 2020.
TablesNG: https://crbug.com/958381
Many parts of table layout algorithm have been left unspecified by the
existing specification:
https://www.w3.org/TR/css-tables-3/
These tests are an attempt to exaustively test all parts of the
algorithm. When specification did not specify the algorithm,
the proposed algorithm is described in the tests.
Our goal is that these tests will guide creation of a more complete
table standard.
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/support/table-tentative.css 0 → 100644
View file @ c1c4c262
/*
Tables-ng test styling.
Usage:
<link rel="stylesheet" type="text/css" href="./support/tables-ng.css">
<p class="testdesc">Short description here
Analysis
<p class="error">Current disagreements between browsers</p>
*/
main td {
padding: 0;
}
.error {
color: #b70000;
}
p {
margin-top:4px;
margin-bottom:4px;
}
body {
counter-reset: testid;
}
.testdesc {
white-space: pre-line;
margin-top: 16px;
}
.testdesc:before {
content: counter(testid) ". ";
counter-increment: testid;
}
.testdesc:first-line {
font-family: monospace;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment