mirror of
https://github.com/servo/servo.git
synced 2025-08-11 08:25:32 +01:00
Update web-platform-tests to revision b'7af9d6ec48ab04043a2bea85a3599904a1a19efa'
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
8050c95e31
commit
87be1008de
2742 changed files with 142451 additions and 40667 deletions
|
|
@ -0,0 +1,131 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:40px">
|
||||
<col style="width:40px">
|
||||
<col style="width:40px">
|
||||
<col style="width:40px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#total-horizontal-border-spacing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#outer-max-content">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692607">
|
||||
<link rel="match" href="col-definite-max-size-001-ref.html">
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:0; width:100px">
|
||||
<col style="max-width:0; width:100px">
|
||||
<col style="max-width:0; width:100px">
|
||||
<col style="max-width:0; width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:0; min-width:100px">
|
||||
<col style="max-width:0; min-width:100px">
|
||||
<col style="max-width:0; min-width:100px">
|
||||
<col style="max-width:0; min-width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:10%; width:100px">
|
||||
<col style="max-width:10%; width:100px">
|
||||
<col style="max-width:10%; width:100px">
|
||||
<col style="max-width:10%; width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:calc(100px + 1%); width:100px">
|
||||
<col style="max-width:calc(100px + 1%); width:100px">
|
||||
<col style="max-width:calc(100px + 1%); width:100px">
|
||||
<col style="max-width:calc(100px + 1%); width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:0; width:calc(100px + 1%)">
|
||||
<col style="max-width:0; width:calc(100px + 1%)">
|
||||
<col style="max-width:0; width:calc(100px + 1%)">
|
||||
<col style="max-width:0; width:calc(100px + 1%)">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:0; width:50%">
|
||||
<col style="max-width:0; width:50%">
|
||||
<col style="max-width:0; width:50%">
|
||||
<col style="max-width:0; width:50%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col style="max-width:0">
|
||||
<col style="max-width:0">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:40px; width:100px">
|
||||
<col style="max-width:40px; width:100px">
|
||||
<col style="max-width:40px; width:100px">
|
||||
<col style="max-width:40px; width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:40px; width:calc(100px + 1%)">
|
||||
<col style="max-width:40px; width:calc(100px + 1%)">
|
||||
<col style="max-width:40px; width:calc(100px + 1%)">
|
||||
<col style="max-width:40px; width:calc(100px + 1%)">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="max-width:40px; width:50%">
|
||||
<col style="max-width:40px; width:50%">
|
||||
<col style="max-width:40px; width:50%">
|
||||
<col style="max-width:40px; width:50%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col style="max-width:40px">
|
||||
<col style="max-width:40px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#total-horizontal-border-spacing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#outer-max-content">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692607">
|
||||
<link rel="match" href="col-definite-size-001-ref.html">
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="min-width:100px">
|
||||
<col style="min-width:100px">
|
||||
<col style="min-width:100px">
|
||||
<col style="min-width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="min-width:calc(100px + 1%)">
|
||||
<col style="min-width:calc(100px + 1%)">
|
||||
<col style="min-width:calc(100px + 1%)">
|
||||
<col style="min-width:calc(100px + 1%)">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="min-width:50%">
|
||||
<col style="min-width:50%">
|
||||
<col style="min-width:50%">
|
||||
<col style="min-width:50%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col style="min-width:0">
|
||||
<col style="min-width:0">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
<td style="border-color:white; border-style:solid"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#missing-cells-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#total-horizontal-border-spacing">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#outer-max-content">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1692607">
|
||||
<link rel="match" href="col-definite-size-001-ref.html">
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
<col style="width:100px">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:calc(100px + 1%)">
|
||||
<col style="width:calc(100px + 1%)">
|
||||
<col style="width:calc(100px + 1%)">
|
||||
<col style="width:calc(100px + 1%)">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col style="width:50%">
|
||||
<col style="width:50%">
|
||||
<col style="width:50%">
|
||||
<col style="width:50%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<table border="1" cellspacing="10">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col style="width:0">
|
||||
<col style="width:0">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<!doctype html>
|
||||
<title>Column track merging</title>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2" />
|
||||
<style>
|
||||
|
||||
main table {
|
||||
border: 10px solid gray;
|
||||
border-spacing: 20px;
|
||||
}
|
||||
|
||||
main td {
|
||||
width: 50px;
|
||||
height:50px;
|
||||
padding: 0;
|
||||
background:linear-gradient(to right, yellow, orange);
|
||||
}
|
||||
main caption {
|
||||
background: #EEE;
|
||||
}
|
||||
main .desc {
|
||||
margin-top: 20px;
|
||||
color: rgb(50,0,0);
|
||||
}
|
||||
main pre {
|
||||
white-space: pre-wrap;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h3>Column merging investigation</h3>
|
||||
<o>Empty columns is a column that has no originating cells</o>
|
||||
<p><a href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2">Table standard</a> discusses this under "track merging".</p>
|
||||
<ul>
|
||||
<li>Do empty columns get coalesced?</li>
|
||||
<li>How does this interact with table-layout:fixed, table width</li>
|
||||
<li>Is there a difference between columns defined by COL, vs TD.colspan? Yes!</li>
|
||||
<li>Do COLs with specified width get merged?</li>
|
||||
</ul>
|
||||
<p>Compatibility</p>
|
||||
<li>Edge17 has a bug where width of a colspanned cell always includes cell width + width of border spacing. It should be max(cell width, border spacing)</li>
|
||||
<li>Safari matches Chrome Legacy. TD-originated columns are always merged.</li>
|
||||
<li>Firefox follows the standard, but has a few bugs.</li>
|
||||
<main>
|
||||
|
||||
<h3>TD merging</h3>
|
||||
|
||||
<pre class="desc">Auto table, and TD.colspan=10
|
||||
FF/Chrome Legacy/Safari: Standard. Tracks merge.
|
||||
Edge17: Tracks do not merge. Wide cell is 180px (9 * border spacing)
|
||||
</pre>
|
||||
<table id="td_auto" data-expected-width=180>
|
||||
<caption>auto</caption>
|
||||
<tr>
|
||||
<td colspan=10 data-expected-width=50></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=10></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Auto table(400px), and TD.colspan=10
|
||||
FF/Chrome Legacy/Safari/Edge17: Standard. Tracks merge. Colspan cell grows because it is unconstrained.
|
||||
</pre>
|
||||
<table id="td_auto_width" style="width:400px" data-expected-width=400>
|
||||
<caption>auto 400px</caption>
|
||||
<tr>
|
||||
<td colspan=10 data-expected-width=270></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=10></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Auto table(130px), and TD.colspan=10
|
||||
FF/Chrome Legacy/Safari: Standard. Tracks merge. Colspan cell shrinks to min width becuase it is unconstrained.
|
||||
Edge17: Non-compliant, buggy. Wide cell too wide, narrow cell disappears.
|
||||
</pre>
|
||||
<table id="td_auto_width_130" style="width:130px" data-expected-width=130>
|
||||
<caption>auto 130px</caption>
|
||||
<tr>
|
||||
<td colspan=10 data-expected-width=10><div style="width:10px"></div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=10></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="td_fixed">Fixed(400px) table, and TD.colspan=10
|
||||
Chrome/Safari: Non-compliant. Tracks merge. Cells are the same size, fixed algo distributes extra width evenly.
|
||||
Firefox: Standard.
|
||||
Edge17: Standard, buggy. Wide cell too wide. Edge's bug is that it computes max width as (width + border_spacing) instead of max(width, border_spacing).
|
||||
</pre>
|
||||
<table id="td_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400>
|
||||
<caption>fixed 400px</caption>
|
||||
<tr>
|
||||
<td colspan=10 data-expected-width=180></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=10></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="td_fixed">Fixed(130px) table, and TD.colspan=10
|
||||
Chrome/Safari: Non-compliant.Tracks merge, cells same size.
|
||||
Firefox: Standard + buggy. Table does not grow.
|
||||
Edge17: Standard + buggy. Wide cell too wide.
|
||||
</pre>
|
||||
<table id="td_fixed" style="table-layout:fixed; width: 130px" data-expected-width=310>
|
||||
<caption>fixed 130px</caption>
|
||||
<tr>
|
||||
<td colspan=10 data-expected-width=180></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=10></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>COL merging. Same tests with COL span=10 replacing TD</h3>
|
||||
|
||||
<pre class="desc">Auto table
|
||||
FF/Chrome Legacy/Safari, Edge17: Standard. wide cell is 50px, tracks do merge.
|
||||
</pre>
|
||||
<table id="col_auto" data-expected-width=180>
|
||||
<caption>auto</caption>
|
||||
<col span=10>
|
||||
<tr>
|
||||
<td data-expected-width=50></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Auto table(400px)
|
||||
FF/Chrome Legacy/Safari, Edge17: Standard. Both cells grow the same because unconstrained.
|
||||
</pre>
|
||||
<table id="col_auto_width" style="width:400px" data-expected-width=400>
|
||||
<caption>auto 400px</caption>
|
||||
<col span=10>
|
||||
<tr>
|
||||
<td data-expected-width=160></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td ></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Auto table(130px)
|
||||
FF/Chrome Legacy/Safari, Edge17: Standard. Both cells shrink.
|
||||
</pre>
|
||||
<table id="col_auto_width_130" style="width:130px" data-expected-width=130>
|
||||
<caption>auto 130px</caption>
|
||||
<col span=10>
|
||||
<tr>
|
||||
<td data-expected-width=28><div style="width:10px"></div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Fixed(400px) table
|
||||
Chrome/Safari,Firefox: Standard.
|
||||
Edge17: Buggy. Fixed cells grow to fill table.
|
||||
</pre>
|
||||
<table id="col_fixed" style="table-layout:fixed; width: 400px" data-expected-width=400>
|
||||
<caption>fixed 400px</caption>
|
||||
<col span=10>
|
||||
<tr>
|
||||
<td data-expected-width=50></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="td_fixed">Fixed(130px) table
|
||||
Chrome/Safari: Standard, very buggy. Non-collapsed columns shrink to single border spacing.
|
||||
Firefox: Standard.
|
||||
Edge17: Non-compliant, collapses columns.
|
||||
</pre>
|
||||
<table id="col_fixed_130" style="table-layout:fixed; width: 130px" data-expected-width=340>
|
||||
<col span=10>
|
||||
<caption>fixed 130px</caption>
|
||||
<tr>
|
||||
<td data-expected-width=50></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>COL merging when COL has specified width.</h3>
|
||||
|
||||
<ul><li>Chrome Legacy/Edge17/Safari: non-compliant, merge COLs with specified widths.
|
||||
<li>Firefox: Standard, unless COL width is 0px. Buggy, does not include border-spacing around columns.</ul>
|
||||
<pre class="desc">Auto table, COL width 30px.
|
||||
Chrome Legacy/Edge17/Safari: non-compliant, merge.
|
||||
Firefox: Standard, buggy. does not include border-spacing around columns.
|
||||
</pre>
|
||||
<table id="col_auto" data-expected-width=580>
|
||||
<caption>auto col 30px</caption>
|
||||
<col span=10 style="width:30px">
|
||||
<tr>
|
||||
<td data-expected-width=50></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Auto table, COL width 5%.
|
||||
Chrome Legacy/Edge17/Safari: non-compliant, merge.
|
||||
Firefox: Standard, buggy. does not include border-spacing around columns.
|
||||
</pre>
|
||||
<table id="col_auto" data-expected-width=640>
|
||||
<caption>auto col 10%</caption>
|
||||
<col span=5 style="width:10%">
|
||||
<tr>
|
||||
<td data-expected-width=100></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre class="desc">Auto table, COL width 0px.
|
||||
Everyone: merges COL
|
||||
</pre>
|
||||
<table id="col_auto" data-expected-width=180>
|
||||
<caption>auto col 0px</caption>
|
||||
<col span=10 style="width:0px">
|
||||
<tr>
|
||||
<td data-expected-width=50></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("main table");
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1177684">
|
||||
<table>
|
||||
<caption>
|
||||
<div style="columns:1; display:table-cell;"></div>
|
||||
</caption>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1175425">
|
||||
|
||||
<div id="container" style="border-collapse:collapse;">
|
||||
<div id="insertBefore"></div>
|
||||
<div style="display:table-row-group;"></div>
|
||||
<div id="victim" style="border:solid; display:table-row-group;">
|
||||
<div style="display:table-cell;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
container.insertBefore(insertBefore, victim)
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
table {
|
||||
empty-cells: hide;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table>
|
||||
<td></td>
|
||||
<td colspan=2></td>
|
||||
<td></td>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!doctype html>
|
||||
<table >
|
||||
<col style="width:min(100px,30%)">
|
||||
<td style="width:min(100px,30%)"></td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1175425">
|
||||
|
||||
<div id="container" style="border-collapse:collapse;">
|
||||
<div id="insertBefore"></div>
|
||||
<div style="display:table-row-group;"></div>
|
||||
<div id="victim" style="border:solid; display:table-row-group;">
|
||||
<div style="display:table-cell;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
container.insertBefore(insertBefore, victim)
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1178044">
|
||||
<table border="2026722966"><td>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<p>PASS if no crash or DCHECK failure.</p>
|
||||
<table id="elm" style="columns:2;">
|
||||
<colgroup style="column-count:2;">
|
||||
</table>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
elm.style.columns = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1178130">
|
||||
<table>
|
||||
<td style="height: 100%; writing-mode: vertical-rl;"></td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1172819">
|
||||
|
||||
<table style="height:69080px;width:100px;background: blue;border-spacing:2px;">
|
||||
|
||||
<thead style="height:400%">
|
||||
<tr style="height:18px"></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="height: 2712px"></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr style="height: 1694px"></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr style="height: 6436px"></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,332 @@
|
|||
<!doctype html>
|
||||
<title>Fixed 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;
|
||||
table-layout: fixed;
|
||||
}
|
||||
main table:hover { table-layout: auto; } /* useful for comparisons */
|
||||
main td {
|
||||
background: #BFB;
|
||||
font-size: 10px;
|
||||
}
|
||||
main td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
height:10px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>Fixed tables: Compute column computed widths from assignable table width</h1>
|
||||
<ul>
|
||||
<li>auto columns have a min width of 0. Max width still gets computed.</li>
|
||||
<li>percent columns have a min width of 0.</li>
|
||||
<li>fixed column.min_width is css width. It never changes.</li>
|
||||
<li>fixed column.max_width is max(cells.max_width, css width).</li>
|
||||
<li>colspan header cells distribute
|
||||
<ul>
|
||||
<li>max_width evenly between columns.</li>
|
||||
<li>do not distribute min width</li>
|
||||
<li>percentage evenly between columns</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Is table treated as fixed?</h2>
|
||||
<p class="testdesc">table width:auto is not treated as fixed.</p>
|
||||
<table style="table-layout:fixed; width:auto" data-expected-width=324>
|
||||
<tr>
|
||||
<td style="width:200px">200</td>
|
||||
<td><div style="width:100px">min</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="testdesc">table width:px is treated as fixed.</p>
|
||||
<table style="table-layout:fixed; width:224px" data-expected-width=224>
|
||||
<tr>
|
||||
<td style="width:200px">200</td>
|
||||
<td><div style="width:100px">min</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="testdesc">table width:min-content is treated as fixed.</p>
|
||||
<table style="table-layout:fixed; width:min-content" data-expected-width=224>
|
||||
<tr>
|
||||
<td style="width:200px">200</td>
|
||||
<td><div style="width:100px">min</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Fixed only</h2>
|
||||
|
||||
<p class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/75
|
||||
When table.css_width is < columns.css_width, how is the conflict resolved?
|
||||
columns.css_width wins</p>
|
||||
<table style="width:50px" data-expected-width=224>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=100>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<p class="testdesc">Table: 300px; C0:100/50/50 C1:100/100/100
|
||||
Fixed cells must grow, but their min widths differ.
|
||||
Fixed cells grow in proportion to their css width.
|
||||
<table style="width:calc(300px + 24px)" data-expected-width=324>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=150>
|
||||
<div style="width:50px">50</div></td>
|
||||
<td style="width:100px" data-expected-width=150>
|
||||
<div style="width:100px">100</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Table: 50px; C0:100/50/50 C1:100/100/100
|
||||
What happens when column.min_width > column.css_width
|
||||
column.css_width wins over column.min_width.
|
||||
<table style="width:100px" data-expected-width=224>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=100>
|
||||
<div style="width:200px"></div></td>
|
||||
<td style="width:100px" data-expected-width=100>
|
||||
<div style="width:200px"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Table: 1px.
|
||||
What happens to min_width when multiple cells specify css_width of the same column?
|
||||
1st cell wins.
|
||||
<table style="width:1px" data-expected-width=116>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=100>
|
||||
<div style="width:200px">200</div></td>
|
||||
</tr>
|
||||
<td style="width:150px" data-expected-width=100>
|
||||
<div style="width:150px">150</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Auto only</h2>
|
||||
|
||||
<p class="testdesc">Width is distributed evenly
|
||||
</p>
|
||||
<table style="width:548px">
|
||||
<tr>
|
||||
<td data-expected-width=100><div style="width:10px;height:30px"></div></td>
|
||||
<td data-expected-width=100><div style="width:20px;height:30px"></div></td>
|
||||
<td data-expected-width=100><div style="width:30px;height:30px"></div></td>
|
||||
<td data-expected-width=100><div style="width:40px;height:30px"></div></td>
|
||||
<td data-expected-width=100><div style="width:120px;height:30px"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Colspan distribution</h2>
|
||||
|
||||
<p class="testdesc">Table: 1px
|
||||
Does column.min_width change with colspan distribution from later rows to first row?
|
||||
No
|
||||
<table style="width:1px" data-expected-width=74>
|
||||
<tr>
|
||||
<td data-expected-width=0>
|
||||
<div style="width:50px"></div></td>
|
||||
<td style="width:50px" data-expected-width=50>
|
||||
<div style="width:50px"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 style="width:200px" data-expected-width=58>
|
||||
<div style="width:200px"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Table: 632px
|
||||
Does column.percent change with colspan distribution?
|
||||
No.
|
||||
<table style="width:632px" data-expected-width=632>
|
||||
<tr>
|
||||
<td data-expected-width=360>
|
||||
<div style="width:50px"></div></td>
|
||||
<td style="width:20%" data-expected-width=120>
|
||||
<div style="width:50px"></div></td>
|
||||
<td style="width:20%" data-expected-width=120></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="width:90%">
|
||||
<div style="width:100px"></div></td>
|
||||
<td>auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Colspan header cells</h2>
|
||||
<section>
|
||||
<ol>
|
||||
<li>Fixed/percentage colspan cells get distributed evenly.</li>
|
||||
<li>Auto cells</li>
|
||||
</ol>
|
||||
|
||||
<p class="testdesc">Assignable: 400px
|
||||
Fixed header cells with colspan.
|
||||
Columns divded evenly</p>
|
||||
<p class="error">Legacy Chrome is slightly off, something about spacing and wide cells.</p>
|
||||
<table style="width:calc(600px + 40px)" data-expected-width=640>
|
||||
<tr>
|
||||
<td colspan=2 style="width:108px" data-expected-width=208>108</td>
|
||||
<td colspan=2 style="width:208px" data-expected-width=408>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width=100>1</td>
|
||||
<td>1</td>
|
||||
<td data-expected-width=200>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40%
|
||||
Percentage header cells with colspan
|
||||
C0 splits into C0.0 and C0.1, 16px each with 20%
|
||||
C1 splits into C1.0 and C1.1, 6px each with 10%
|
||||
Assignable width is 400, everyone gets according to percent.
|
||||
80/80/40/40/160.</p>
|
||||
<p class="error">Firefox is slightly off, with C2 taking 6px more. Unknown what math is used to get this answer.</p>
|
||||
<table style="width:448px" data-expected-width=448>
|
||||
<tr>
|
||||
<td colspan=2 style="width:40%" data-expected-width=168><div style="width:40px"></div></td>
|
||||
<td colspan=2 style="width:20%" data-expected-width=88><div style="width:160px"></div></td>
|
||||
<td style="width:40%" data-expected-width=160><div style="width:40px"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width=80>Auto</td>
|
||||
<td data-expected-width=80>Auto</td>
|
||||
<td data-expected-width=40>Auto</td>
|
||||
<td data-expected-width=40>Auto</td>
|
||||
<td data-expected-width=160>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto
|
||||
Auto header cells with colspan, table is min width
|
||||
min_width does not get redistributed.
|
||||
</p>
|
||||
<table style="width:1px" data-expected-width=132>
|
||||
<tr>
|
||||
<td colspan=2 data-expected-width=8>
|
||||
<div style="width:100px">100</div></td>
|
||||
<td style="width:100px" data-expected-width=100>100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width=0>x</td>
|
||||
<td data-expected-width=0>x</td>
|
||||
<td data-expected-width=100>x</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto
|
||||
Auto colspan cells, and nothing else. Tricky because this means that internally
|
||||
table has to represent 8 cells, and wide cells that span beyond table width
|
||||
are usually truncated.
|
||||
C0: 20*2+8=48, C1: 20*8 + 7*8=216</p>
|
||||
<table style="width:calc(200px + 88px)" data-expected-width=288>
|
||||
<tr>
|
||||
<td colspan=2 style="height:20px" data-expected-width=48></td>
|
||||
<td colspan=8 style="height:20px" data-expected-width=216></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Percentage only</h2>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;columns add to 100%, auto width
|
||||
Columns are exact percentage size.
|
||||
<table style="width:calc(100px + 32px)" data-expected-width=132>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=50>50%</td>
|
||||
<td style="width:30%" data-expected-width=30>30%</td>
|
||||
<td style="width:20%" data-expected-width=20>20%</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;columns add to 50%, auto width
|
||||
Columns grow proportional to percent.
|
||||
<table style="width:calc(100px + 32px)" data-expected-width=132>
|
||||
<tr>
|
||||
<td style="width:25%" data-expected-width=50>25%</td>
|
||||
<td style="width:15%" data-expected-width=30>15%</td>
|
||||
<td style="width:10%" data-expected-width=20>10%</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="testdesc">Assignable: 100px;columns add to 50%, with min width
|
||||
Min width is ignored.
|
||||
<table style="width:calc(100px + 32px)" data-expected-width=132>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=50><div style="width:50px">50</div></td>
|
||||
<td style="width:30%" data-expected-width=30><div style="width:50px">50</div></td>
|
||||
<td style="width:20%" data-expected-width=20><div style="width:50px">50</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;columns add to 1000%
|
||||
Columns are scaled so they add up to 100%
|
||||
<table style="width:calc(100px + 32px)" data-expected-width=132>
|
||||
<tr>
|
||||
<td style="width:200%" data-expected-width=20><div style="width:50px">50</div></td>
|
||||
<td style="width:300%" data-expected-width=30><div style="width:50px">50</div></td>
|
||||
<td style="width:500%" data-expected-width=50><div style="width:50px">50</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<h2>Percentage/auto/fixed mix</h2>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;C0:50% C1:100px C2: Auto
|
||||
C0: 50% becomes
|
||||
<table style="width:calc(100px + 32px)" data-expected-width=132>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=50>50%</td>
|
||||
<td style="width:30px" data-expected-width=30>30px</td>
|
||||
<td data-expected-width=20></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;C0:50% C1:50px
|
||||
Clean split
|
||||
<table style="width:calc(100px + 24px)" data-expected-width=124>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=50>50%</td>
|
||||
<td style="width:50px" data-expected-width=50>50px</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;C0:20% C1:60% C2:60px
|
||||
Overconstrained: widths add up to 140.
|
||||
Fixed widths get distributed first, percentage takes the rest.
|
||||
<table style="width:calc(100px + 32px)" data-expected-width=132>
|
||||
<tr>
|
||||
<td style="width:20%" data-expected-width=10>20%</td>
|
||||
<td style="width:60%" data-expected-width=30>60%</td>
|
||||
<td style="width:60px" data-expected-width=60>60px</td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue