mirror of
https://github.com/servo/servo.git
synced 2025-08-14 09:55:35 +01:00
Update web-platform-tests to revision 1d8a9889466f2ec219a879323c63cae86ef50bc1
This commit is contained in:
WPT Sync Bot
parent
49d0055959
commit
8bfe9992ce
63 changed files with 998 additions and 92 deletions
|
|
@ -0,0 +1,131 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
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.
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue