mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -56,18 +56,18 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<table class="table vertical" data-expected-width=50 data-offset-x="150">
|
||||
<table class="table vertical" data-expected-width=108 data-offset-x="92">
|
||||
<tr>
|
||||
<td class="cell" data-expected-width=46>
|
||||
<td class="cell" data-expected-width=104>
|
||||
<div></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="cb vertical">
|
||||
<table class="table vertical" data-expected-width=50 data-offset-x="150">
|
||||
<table class="table vertical" data-expected-width=108 data-offset-x="92">
|
||||
<tr>
|
||||
<td class="cell" data-expected-width=46>
|
||||
<td class="cell" data-expected-width=104>
|
||||
<div></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<table class="table vertical" data-expected-width=8 data-expected-height=108 data-offset-x="192">
|
||||
<table class="table vertical" data-expected-width=8 data-expected-height=50 data-offset-x="192">
|
||||
<tr>
|
||||
<td class="cell">
|
||||
<div></div>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="cb vertical">
|
||||
<table class="table vertical" data-expected-width=8 data-expected-height=108 data-offset-x="192">
|
||||
<table class="table vertical" data-expected-width=8 data-expected-height=50 data-offset-x="192">
|
||||
<tr>
|
||||
<td class="cell">
|
||||
<div></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype HTML>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
width:50px;
|
||||
height:50px;
|
||||
border: 10px solid gray;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype HTML>
|
||||
<title>Collapsed borders of empty cells are painted</title>
|
||||
<link rel="author" href="atotic@chromium.org">
|
||||
<link rel="match" href="border-collapse-empty-cell-ref.html">
|
||||
<link rel="help" href="https://stackoverflow.com/questions/18758373/why-do-the-css-property-border-collapse-and-empty-cells-conflict">
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
empty-cells: hide;
|
||||
}
|
||||
td {
|
||||
width:50px;
|
||||
height:50px;
|
||||
border: 10px solid gray;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>Collapsed borders track writing mode changes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
<style>
|
||||
.bordermix {
|
||||
border-top: 10px solid red;
|
||||
border-bottom: 20px solid green;
|
||||
border-left: 30px solid yellow;
|
||||
border-right: 40px solid orange;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
main td {
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
main table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
|
||||
<table class="bordermix targettable">
|
||||
<td>TABLE</td>
|
||||
</table>
|
||||
|
||||
<table class="targettable">
|
||||
<tbody class="bordermix">
|
||||
<td>TBODY</td>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="targettable">
|
||||
<tr class="bordermix">
|
||||
<td>TR</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="targettable">
|
||||
<td class="bordermix">TD</td>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
var test = async_test("Table borders track writing mode changes");
|
||||
let targets = Array.from(document.querySelectorAll(".targettable"));
|
||||
|
||||
function assertTargetSize() {
|
||||
for (let target of targets) {
|
||||
assert_equals(target.offsetWidth, 172);
|
||||
assert_equals(target.offsetHeight, 132);
|
||||
}
|
||||
}
|
||||
test.step(assertTargetSize);
|
||||
|
||||
waitForAtLeastOneFrame().then( _ => {
|
||||
for (let target of targets)
|
||||
target.classList.toggle("vertical");
|
||||
document.body.offsetTop;
|
||||
test.step(assertTargetSize);
|
||||
test.done();
|
||||
});
|
||||
|
||||
</script>
|
||||
31
tests/wpt/web-platform-tests/css/css-tables/col_removal.html
Normal file
31
tests/wpt/web-platform-tests/css/css-tables/col_removal.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>Table grid syncs after COL removal</title>
|
||||
<link rel="author" href="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://crbug.com/1191940">
|
||||
|
||||
<style>
|
||||
main td {
|
||||
width:30px;
|
||||
height:30px;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<table style="border-collapse: collapse;">
|
||||
<col style="border: 2px solid green;"></col>
|
||||
<col id="target" style="border: 50px solid red;"></col>
|
||||
<td>x</td>
|
||||
<td>x</td>
|
||||
</table>
|
||||
</main>
|
||||
<script>
|
||||
test(() => {
|
||||
let table = document.querySelector("main table");
|
||||
document.body.offsetTop;
|
||||
assert_equals(table.offsetWidth, 162);
|
||||
document.getElementById('target').remove();
|
||||
assert_equals(table.offsetWidth, 64, "table shrinks after column is removed");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="A tables collapsed borders paint in the background paint phase.">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table style="border-collapse: collapse; border-spacing: 0;">
|
||||
<td style="border-right: 50px solid red; padding: 0;">
|
||||
<div style="width: 50px; line-height: 0;">
|
||||
<!-- Paints in the foreground phase above the collapsed borders. -->
|
||||
<div style="display: inline-block; width: 100px; height: 100px; background: green;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="A tables collapsed borders paint in the background paint phase, after children.">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<!DOCTYPE html>
|
||||
<table style="border-collapse: collapse; border-spacing: 0;">
|
||||
<td style="border-right: solid 100px green; height: 100px; padding: 0;">
|
||||
<div style="width: 0;">
|
||||
<div style="width: 100px; height: 100px; background: red;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
td#target {
|
||||
border-style: none;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr><td></td><td></td></tr>
|
||||
<tr><td></td><td id="target"></tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Collapsed borders track changes caused by removal of cells</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
|
||||
<link rel="match" href="collapsed-border-remove-cell-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr><td></td><td></td></tr>
|
||||
<tr><td></td><td id="target"></tr>
|
||||
</table>
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(() => {
|
||||
target.remove();
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
|
||||
<link rel="help" href="https://crbug.com/711360">
|
||||
<style>
|
||||
main table {
|
||||
display: inline-table;
|
||||
border-collapse: collapse;
|
||||
background:gray;
|
||||
font-size: 40px;
|
||||
}
|
||||
main thead {
|
||||
background: yellow;
|
||||
}
|
||||
main tbody {
|
||||
background: green;
|
||||
border: 80px dotted blue;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<div id="container" style="overflow-x:auto;max-width:500px">
|
||||
<table>
|
||||
<thead>
|
||||
<td>header</td>
|
||||
</thead>
|
||||
<tbody>
|
||||
<td>body body body body body body body body body body body</td>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
test(_ => {
|
||||
let container = document.querySelector("#container");
|
||||
let table = container.querySelector("table")
|
||||
assert_equals(container.offsetWidth, 500,
|
||||
"container grows to max width");
|
||||
assert_equals(table.offsetWidth, 500,
|
||||
"table fills the container");
|
||||
assert_equals(container.scrollWidth, 540,
|
||||
"container scroll area includes collapsed border");
|
||||
}, "visual overflow is included in scroll area");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
col {
|
||||
border:2px solid green;
|
||||
}
|
||||
</style>
|
||||
<table style="border-collapse:collapse">
|
||||
<colgroup>
|
||||
<col span=3 id="target">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>a</td>
|
||||
<td>b</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.querySelector("#target").setAttribute("span", 0);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<table rules="cols">
|
||||
<caption>caption</caption>
|
||||
<col id="target" style="width:50%"/>
|
||||
<tbody>
|
||||
<tr></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.width = 'auto';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<table id="target" style="border: solid; border-collapse: collapse; table-layout: fixed; width: 50px;">
|
||||
<tr><td style="background: lime;">hi</td></tr>
|
||||
<td colspan=3>there</td>
|
||||
</table>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.tableLayout = 'auto';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<table style="border:1px solid black;border-collapse: collapse">
|
||||
<colgroup >
|
||||
<tr></tr>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1195685">
|
||||
<div style="display: -webkit-box;">
|
||||
<div style="display: table-cell;">
|
||||
<textarea style="padding-left: 556658635%;">
|
||||
x
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://crbug.com/1203387">
|
||||
|
||||
<table style="writing-mode: vertical-lr">
|
||||
<caption style="background:yellow" >
|
||||
<textarea style="height:10%">abc</textarea>
|
||||
</caption>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<table>
|
||||
<td>
|
||||
<div style="width: 100px; height: 100px; overflow-y: scroll;">
|
||||
<div style="height: 200px; background: green;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1227868">
|
||||
<link rel="match" href="percentage-sizing-of-table-cell-007-ref.html">
|
||||
<table style="height: 100%;">
|
||||
<td>
|
||||
<div style="width: 100px; min-height: 100px; height: 100%; overflow-y: scroll;">
|
||||
<div style="height: 200px; background: green;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
html {
|
||||
width: 280px;
|
||||
border: 10px solid green;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div style="width:280px;height:300px;background:yellow;display:inline-block;"></div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title><html display:table></title>
|
||||
<link rel="author" href="mailto:atotic@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
|
||||
<meta name="assert" content="<html display:table> does not fill the viewport">
|
||||
<link rel="match" href="html-display-table-ref.html">
|
||||
<style>
|
||||
html {
|
||||
display: table;
|
||||
border: 10px solid green;
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div style="width:200px;height:300px;background:yellow;display:inline-block;"></div><div style="width:80px;height:300px;background:yellow;display:inline-block;"></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1215254">
|
||||
<style>
|
||||
html, body, span {
|
||||
column-count: 2;
|
||||
}
|
||||
span {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid black;
|
||||
}
|
||||
a {
|
||||
vertical-align: 10000000000000000em;
|
||||
}
|
||||
</style>
|
||||
<span>
|
||||
<a>foo</a>
|
||||
</span>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1025253">
|
||||
<style>
|
||||
html, body, span {
|
||||
column-count: 2;
|
||||
}
|
||||
span {
|
||||
display: table;
|
||||
}
|
||||
a {
|
||||
vertical-align: 10000000000000000em;
|
||||
}
|
||||
</style>
|
||||
<span>
|
||||
<a>foo</a>
|
||||
</span>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="http://crbug.com/1234300">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: table-cell; height: 100px; line-height: 0;">
|
||||
<canvas width=200 height=200 style="background: green; max-height: 100%;"></canvas>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1218345">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="display: table; height: 100%; width: 100px; background: red;">
|
||||
<div style="height: 50%; background: green;">
|
||||
<div style="height: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1206654" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" />
|
||||
<style>
|
||||
table {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
td {
|
||||
vertical-align: baseline;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<table>
|
||||
<td>
|
||||
<div style="display: inline-block;"></div> <!-- Creates a baseline at 100px. -->
|
||||
</td>
|
||||
<td>
|
||||
<div style="position: absolute;"></div> <!-- Static-position shouldn't shift to the baseline. -->
|
||||
</td>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; background: green;">
|
||||
<div style="overflow: auto; height: 100%;">
|
||||
<div style="height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1210436">
|
||||
<link rel="match" href="table-cell-child-overflow-measure-ref.html">
|
||||
<div style="width: 100px; height: 100px; display: table-cell; background: green;">
|
||||
<div style="overflow: auto; height: 100%;">
|
||||
<div style="height: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; border: solid;">
|
||||
<div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: scroll; vertical-align: top;">
|
||||
<div style="max-width: 100px; height: 100px; background: green; overflow-x: scroll;">
|
||||
<div style="width: 120px; height: 50px; background: hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; border: solid; box-sizing: border-box">
|
||||
<div id="cell" style="width: 100%; height: 100%; background: green; overflow: auto">
|
||||
<div style="width: 200px; height: 50px; background: hotpink; border: 2px solid yellow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
onload = () => {
|
||||
cell.scrollLeft = 120;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#bounding-box-assignment">
|
||||
<link rel="match" href="table-cell-overflow-auto-scrolled-ref.html">
|
||||
<meta name="assert" content="Table cell with overflow:auto and overflowing contents is scrollable">
|
||||
<table style="table-layout: fixed; width: 100px; height: 100px; border: solid; border-spacing: 0">
|
||||
<tr>
|
||||
<td id="cell" style="background: green; overflow: auto; vertical-align: top; padding: 0">
|
||||
<div style="width: 200px; height: 50px; background: hotpink; border: 2px solid yellow"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
onload = () => {
|
||||
cell.scrollLeft = 120;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout:fixed;
|
||||
}
|
||||
td {
|
||||
height:50px;
|
||||
background: yellow;
|
||||
border: 10px solid green;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<td style="width:40px"></td>
|
||||
</table>
|
||||
<table>
|
||||
<td style="width:90px"></td>
|
||||
</table>
|
||||
<table>
|
||||
<td style="width:140px"></td>
|
||||
</table>
|
||||
<table>
|
||||
<td style="width:40px"></td>
|
||||
</table>
|
||||
<table>
|
||||
<td style="width:40px"></td>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid">
|
||||
<link rel="match" href="table_grid_size_col_colspan-ref.html">
|
||||
<meta name="assert" content="colspanned cell fits inside grid defined by COL" />
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout:fixed;
|
||||
}
|
||||
td {
|
||||
height:50px;
|
||||
background: yellow;
|
||||
border: 10px solid green;
|
||||
padding:0;
|
||||
}
|
||||
col {
|
||||
width:50px;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
<p>Colspanned cell should not grow bigger than table grid.</p>
|
||||
<p>Test sizes of colspanned cell when grid width is defined by COL elements</p>
|
||||
-->
|
||||
<table>
|
||||
<col></col>
|
||||
<col></col>
|
||||
<col></col>
|
||||
<td colspan=1></td>
|
||||
</table>
|
||||
<table>
|
||||
<col></col>
|
||||
<col></col>
|
||||
<col></col>
|
||||
<td colspan=2></td>
|
||||
</table>
|
||||
<table>
|
||||
<col></col>
|
||||
<col></col>
|
||||
<col></col>
|
||||
<td colspan=4></td>
|
||||
</table>
|
||||
<table>
|
||||
<col></col>
|
||||
<td colspan=1></td>
|
||||
</table>
|
||||
<table>
|
||||
<col></col>
|
||||
<td colspan=2></td>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<!doctype html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<meta name="flags" content="ahem">
|
||||
<title>TABLE baseline</title>
|
||||
<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://drafts.csswg.org/css-tables-3/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" />
|
||||
<style>
|
||||
main table {
|
||||
display: inline-table;
|
||||
border: 15px solid green;
|
||||
background: gray;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
vertical-align:baseline;
|
||||
border-spacing: 0;
|
||||
}
|
||||
main td {
|
||||
background: #BFB;
|
||||
padding: 4px;
|
||||
}
|
||||
main td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
outline: black dotted 1px;
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
font: 50px/1 Ahem; /* baseline is 40px */
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h2><TABLE> baseline tests</h2>
|
||||
|
||||
<p>Empty table's baseline is bottom of table's border box.</p>
|
||||
<div class="container">
|
||||
Xp<table data-offset-y="10">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Empty body's baseline is bottom of table's border box.</p>
|
||||
<div class="container">
|
||||
Xp<table data-offset-y="10">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Empty row's baseline is center of the row.</p>
|
||||
<div class="container">
|
||||
Xp<table data-offset-y="25">
|
||||
<tbody>
|
||||
<tr></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>First row defines baseline even if empty.</p>
|
||||
<div class="container">
|
||||
Xp<table style="font: 12px fixed" data-offset-y="25">
|
||||
<tbody>
|
||||
<tr></tr>
|
||||
<tr><td>1,0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Cell's baseline defined row's baseline only if cell is vertical-align:baseline.</p>
|
||||
<div class="container">
|
||||
Xp<table style="font-size: 24px" data-offset-y="2">
|
||||
<tbody>
|
||||
<tr><td style="vertical-align:baseline">Xp</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
Xp<table style="font-size:24px" data-offset-y="0">
|
||||
<tbody>
|
||||
<tr><td style="vertical-align:middle">Xp</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Table's vertical-align: top.</p>
|
||||
<div class="container">
|
||||
Xp<table style="vertical-align:top" data-offset-y="0"></table>
|
||||
</div>
|
||||
|
||||
<p>Table's vertical-align: middle. </p>
|
||||
<div class="container">
|
||||
Xp<table style="vertical-align:middle" data-offset-y="5"></table>
|
||||
</div>
|
||||
|
||||
<p>Table's vertical-align: bottom. </p>
|
||||
<div class="container">
|
||||
Xp<table style="vertical-align:bottom" data-offset-y="20"></table>
|
||||
</div>
|
||||
|
||||
<p>Table's top/middle/bottom combined. </p>
|
||||
<div class="container">
|
||||
Xp<table style="vertical-align:top" data-offset-y="0"></table>
|
||||
<table style="vertical-align:middle" data-offset-y="5"></table>
|
||||
<table style="vertical-align:bottom" data-offset-y="20"></table>
|
||||
</div>
|
||||
|
||||
<p>Two rows empty, 1st row has css height.</p>
|
||||
<div class="container">
|
||||
Xp<table data-offset-y=25 data-expected-height=50>
|
||||
<tr style="height:20px"></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>First row empty with css height, 2 row has content, </p>
|
||||
<div class="container">
|
||||
Xp<table data-offset-y=25 data-expected-height=68>
|
||||
<tr style="height:20px"></tr>
|
||||
<tr><td style="font-size:10px">X</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Empty rowspanned cells should not set baseline. This test might not be per-spec, distribution of empty cells over empty rows differs between browsers.</p>
|
||||
<div class="container">
|
||||
Xp<table>
|
||||
<tr>
|
||||
<td rowspan=2 style="height:80px"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table><div style="display:inline-block" data-offset-y=15>pX</div>
|
||||
</div>
|
||||
|
||||
<p>Block level table inside inline block does not produce a baseline.</p>
|
||||
<div class="container" style="font: 10px/1 Ahem;width:500px">
|
||||
Xp<br>Xp<table
|
||||
title="inline table produces a baseline"
|
||||
data-offset-y=33><td style="vertical-align:baseline">Xp</td></table>
|
||||
<div style="display:inline-block;height:50px;background:yellow;width:50px;"
|
||||
title="empty inline block baseline is bottom of the block"
|
||||
data-offset-y=10
|
||||
></div>
|
||||
<div style="display:inline-block;height:50px;background:yellow;width:50px;"
|
||||
title="inline block's content defines its baseline"
|
||||
data-offset-y=52
|
||||
>X</div>
|
||||
<div style="display:inline-block;height:50px;background:yellow"
|
||||
title="table inside inline block does not produce a baseline"
|
||||
data-offset-y=10
|
||||
><table style="display:table"><td style="vertical-align:baseline">X</td></table></div>
|
||||
<div style="display:inline-block;height:50px;background:yellow"
|
||||
title="but inline table inside inline block does produce a baseline"
|
||||
data-offset-y=33
|
||||
><table style="display:inline-table"><td style="vertical-align:baseline">X</td></table></div>
|
||||
</div>
|
||||
|
||||
<!-- anonymous-table-no-baseline-align replica -->
|
||||
<p>Anonymous tables should not generate baselines</p>
|
||||
<div class="container">Xp
|
||||
<div style="height:60px;width:100px;display:inline-block;background:green"
|
||||
data-offset-y=0>
|
||||
<div style="display:table-cell;vertical-align:middle;color:yellow"> </div>
|
||||
</div>
|
||||
<div style="height:60px;width:100px;display:inline-block;background:green"
|
||||
data-offset-y=0>
|
||||
<div style="display:table-cell;vertical-align:middle;color:yellow">> <br> <br></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout(".container");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!doctype html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<meta name="flags" content="ahem">
|
||||
<title>TD baseline</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<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://drafts.csswg.org/css-tables-3/" />
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" />
|
||||
<style>
|
||||
table {
|
||||
background: #AAA;
|
||||
border-spacing: 8px 0px;
|
||||
}
|
||||
td {
|
||||
padding: 0;
|
||||
background: #BFB;
|
||||
}
|
||||
.ahem {
|
||||
font: 25px/2 Ahem;
|
||||
}
|
||||
.ahem td, .ahem .display-cell {
|
||||
font: 25px/2 Ahem;
|
||||
color: rgba(0,120,0, 0.5);
|
||||
}
|
||||
.vgrad {
|
||||
background: linear-gradient(180deg, #DDD 0%, #DDD 60%, #999 60%, #999 100%) !important;
|
||||
}
|
||||
.m {
|
||||
display:inline-block;
|
||||
}
|
||||
.display-table {
|
||||
display:table;
|
||||
background: #AAA;
|
||||
border-spacing: 8px 0px;
|
||||
}
|
||||
.display-cell {
|
||||
display:table-cell;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h2><TD> baseline tests</h2>
|
||||
|
||||
<p class="testdesc">All the baseline values.
|
||||
Many text values map to plain baseline. </p>
|
||||
<table style="height:100px" class="ahem vgrad">
|
||||
<td style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></td>
|
||||
<td style="" title="default"><div class="m" data-offset-y=25>Xp</div></td>
|
||||
<td style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></td>
|
||||
<td style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></td>
|
||||
<td style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></td>
|
||||
<td style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
<td style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
<td style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
<td style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
<td style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
<td style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
<td style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">All the baseline values.
|
||||
Same as test before, but use display:table/table-cell. Default td alignment is baseline, not middle.</p>
|
||||
<div style="height:100px;position:relative" class="ahem vgrad display-table">
|
||||
<div class="display-cell" style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></div>
|
||||
<div class="display-cell" style="" title="default"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
<div class="display-cell" style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="testdesc">Baselines with %ge children</p>
|
||||
<p class="error">FF/Edge fails here</p>
|
||||
<div>
|
||||
inline table
|
||||
<table style="height:100px;position:relative;display:inline-table">
|
||||
<td style="vertical-align:baseline">
|
||||
<div style="width:100px;height:50%;background:rgba(0,120,0, 0.5)" data-offset-y=30></div>
|
||||
</td>
|
||||
<td style="vertical-align:baseline">
|
||||
<div style="width:100px;height:80%;background:rgba(0,120,0, 0.5)" data-offset-y=0></div>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
<p class="testdesc">Baseline and td height
|
||||
If td is baseline aligned, and has a height, how tall should the td be?
|
||||
</p>
|
||||
<p class="error">Legacy/FF apply height to below baseline?. With baseline alignment, this makes the cell taller.</p>
|
||||
<table style="border: 1px solid black" data-expected-height=202>
|
||||
<tr>
|
||||
<td style="vertical-align:baseline;height:200px">base</td>
|
||||
<td style="vertical-align:baseline">
|
||||
<div style="background:yellow;width:50px;height:100px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Baseline of rowspanned cell
|
||||
rowspanned td's should contribute to baseline, but not to the row height.</p>
|
||||
<table class="ahem">
|
||||
<tr data-expected-height=100>
|
||||
<td style="vertical-align:baseline;height:100px;background-color:#DFD;">Xp</td>
|
||||
<td style="vertical-align:baseline;font-size:40px;line-height:1.5" rowspan=2><div class="m">Xp</div><br>Xp<br>Xp</td>
|
||||
</tr>
|
||||
<tr data-expected-height=100>
|
||||
<td style="vertical-align:baseline;height:100px">Xp</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table, .display-table");
|
||||
</script>
|
||||
|
||||
|
|
@ -72,6 +72,12 @@ Percent width is resolved wrt to table width.</p>
|
|||
<td data-expected-width=200>auto</td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Caption and size of empty table
|
||||
Larger of table borders, and caption min size.</p>
|
||||
<table style="border:50px solid green;border-spacing:10px" data-expected-width=100>
|
||||
<caption><div style="width:50px">c</div><div style="width:50px">c</div></caption>
|
||||
</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.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<!doctype html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<title>COLGROUP/COL</title>
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<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://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element" />
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/tables.html#the-col-element" />
|
||||
<link rel="help" href="https://stackoverflow.com/questions/29411447/what-does-the-width-attribute-of-colgroup-actually-specify" />
|
||||
<style>
|
||||
main table {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
main td {
|
||||
background: #BFB;
|
||||
}
|
||||
|
||||
main td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>Colgroup col widths</h1>
|
||||
<ol>
|
||||
<li>colgroup's purpose is to "group" cols</li>
|
||||
<li>one can think of colgroup as always generating max(colgroup.span,1) cols, unless it has <col> children.</li>
|
||||
<li>colgroup css_width specifies width of generated cols.</li>
|
||||
<li>col.css_width can override colgroup width</li>
|
||||
</ol>
|
||||
<p class="testdesc">colgroups with spans</p>
|
||||
<table>
|
||||
<colgroup width="100px"></colgroup>
|
||||
<colgroup width="100px" span=3></colgroup>
|
||||
<td data-expected-width=100>cg1</td>
|
||||
<td data-expected-width=100>cg2</td>
|
||||
<td data-expected-width=100>cg2</td>
|
||||
<td data-expected-width=100>cg2</td>
|
||||
<td data-expected-width=50><div style="width:50px">50px</div></td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">cols with spans</p>
|
||||
<table>
|
||||
<col width="100px">
|
||||
<col width="100px" span=3>
|
||||
<td data-expected-width=100>col1</td>
|
||||
<td data-expected-width=100>col2</td>
|
||||
<td data-expected-width=100>col2</td>
|
||||
<td data-expected-width=100>col2</td>
|
||||
<td data-expected-width=50><div style="width:50px">50px</div></td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">colgroups with cols</p>
|
||||
<table>
|
||||
<colgroup span=4 style="width:100px">
|
||||
<col>
|
||||
<col style="width:50px">
|
||||
<col style="width:150px">
|
||||
</colgroup>
|
||||
<td data-expected-width=100>cg</td>
|
||||
<td data-expected-width=50>col1</td>
|
||||
<td data-expected-width=150>col2</td>
|
||||
<td data-expected-width=50><div style="width:50px">50px</div></td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">colgroups with cols with spans</p>
|
||||
<p class="error">Legacy fails col with span inside colgroup test.</p>
|
||||
<table>
|
||||
<colgroup span=3 style="width:100px">
|
||||
<col>
|
||||
<col style="width:50px" span=2>
|
||||
</colgroup>
|
||||
<colgroup style="width:66px">
|
||||
<col span=2>
|
||||
</colgroup>
|
||||
<td data-expected-width=100>cg1</td>
|
||||
<td data-expected-width=50>col1</td>
|
||||
<td data-expected-width=50>col1</td>
|
||||
<td data-expected-width=66>cg2</td>
|
||||
<td data-expected-width=66>cg2</td>
|
||||
<td data-expected-width=75><div style="width:75px">50px</div></td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">0% cols are ignored</p>
|
||||
<table data-expected-width=106>
|
||||
<colgroup>
|
||||
<col style="width:0%">
|
||||
<col style="width:0%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td data-expected-width=100>
|
||||
<div><span style=" display: inline-block;word-break: break-word;font: 20px/1 Ahem">01234</span></div>
|
||||
</td>
|
||||
<td>
|
||||
<div></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table data-expected-width=107>
|
||||
<colgroup>
|
||||
<col style="width:0%">
|
||||
<col style="width:1%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td data-expected-width=100>
|
||||
<div><span style=" display: inline-block;word-break: break-word;font: 20px/1 Ahem;">01234</span></div>
|
||||
</td>
|
||||
<td>
|
||||
<div></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<li class="error">Red paragraphs are major browser disagreements</li>
|
||||
</ol>
|
||||
|
||||
<h2>Colspan>1 cell's percentage distribution</h2>
|
||||
<h2>Colspan>1 cell's percentage distribution auto tables</h2>
|
||||
<p>Rules</p>
|
||||
<ul>
|
||||
<li>Percentages can only be redistributed to non-percentage cells.</li>
|
||||
|
|
@ -100,6 +100,87 @@ Percentage is not getting redistributed, because column% > colspan>1%</p>
|
|||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Colspan>1 cell's percentage distribution fixed tables</h2>
|
||||
<p>Colspan cells distribute width over col widths.
|
||||
<p>Rules</p>
|
||||
<ul>
|
||||
<li>Percentages are not distributed to fixed columns.</li>
|
||||
<li>Percentages are not distributed to percentage columns.</li>
|
||||
<li>Percentages are distributed to auto columns, each column gets distributed%/colspan percent.</li>
|
||||
</ul>
|
||||
<p class="testdesc">Auto column distribution
|
||||
auto colums get percentage widths distributed evenly.
|
||||
C0/C1 become 25% columns.
|
||||
Assignable table size is 400-4*8=368. Column size is 25% of 368 = 92px</p>
|
||||
<p class="error">FF disagrees in how border-spacing is handled and ends up with slightly different cell widths. </p>
|
||||
<table style="table-layout:fixed; width: 400px">
|
||||
<col style="width:auto">
|
||||
<col style="width:auto">
|
||||
<tr>
|
||||
<td colspan="2" style="width:50%">50%</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width=92>a</td>
|
||||
<td data-expected-width=92>aa</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Fixed column distribution
|
||||
fixed columns do not get percentage distribution.</p>
|
||||
<table style="table-layout:fixed; width: 400px">
|
||||
<col style="width:50px">
|
||||
<col style="width:50px">
|
||||
<tr>
|
||||
<td colspan="2" style="width:50%">50%</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width="50">a</td>
|
||||
<td data-expected-width="50">a</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Percentage column distribution
|
||||
percentage columns do not get percentage distribution.</p>
|
||||
<table style="table-layout:fixed; width: 400px">
|
||||
<col style="width:12.5%">
|
||||
<col style="width:25%">
|
||||
<tr>
|
||||
<td colspan="2" style="width:50%">50%</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width="46">a</td>
|
||||
<td data-expected-width="92">a</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Distribute over percentage/auto/fixed mix cells
|
||||
Collspanned TD distributes 50%. Auto TD gets 50%/(colspanned span = 4): 12.5%
|
||||
12.5%* 400px is 50.
|
||||
</p>
|
||||
<table style="table-layout:fixed; width: 400px;border-spacing:0">
|
||||
<col style="width:25%">
|
||||
<col style="width:25px">
|
||||
<col style="width:25px">
|
||||
<col style="width:auto">
|
||||
<tr>
|
||||
<td colspan="4" style="width:50%">50%</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>a</td>
|
||||
<td>a</td>
|
||||
<td data-expected-width="50" style="background-color:yellow">a</td>
|
||||
<td>a</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Colspan>1 cell's minimum width distribution</h2>
|
||||
<h3>All unconstrained columns</h3>
|
||||
|
||||
|
|
@ -216,29 +297,31 @@ Cells get 98/294, table by rule#1 98px/0.2 + 32 = 522</p>
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<p 12 class="testdesc">Colspan>1:Auto/400 C0:50%/150 C1:30%/150 C2:20/Auto
|
||||
<p 12 class="testdesc">Colspan>1:Auto/468 C0:50%/150 C1:30%/150 C2:20/Auto
|
||||
This tests conflict resolution where min-width > redistributed min width.
|
||||
400-8px distributed max width tries to redistribute as 245|147, but gets constrained to 245|150 in Chrome.
|
||||
table width from C0 245/0.5 + 4*8 = 522
|
||||
table width from C1 150/0.3 + 4*8 = 532
|
||||
C0 = 50% of 500 = 250, C1 = 30% of 500 = 150 , C2 gets the remaining 100</p>
|
||||
<p class="error">Chrome/FF/Edge end up with tables of different widths: 532/590/685. Chrome's 2nd span cell seems 'most correct' at its original max width of 150. In FF, extra min-width seems to cause more width to be redistributed. If you hover over 30%/150 cell, its min width will change to 100px, and all browsers will agree.</p>
|
||||
<style>
|
||||
.test12:hover {
|
||||
width:100px !important;
|
||||
}
|
||||
</style>
|
||||
<table data-expected-width="532">
|
||||
Colspanned redistribution: distributed 468-8 = 460 over C0/C1
|
||||
Colspanned 468px needs to distribute 460px over C0/C1.
|
||||
C0 percent size is 50% * 460 = 230
|
||||
C1 percent size is 30% * 460 = 138, defaults to min size of 150
|
||||
Column 1 size is 230 + 50%/80% * 80 = 280px
|
||||
Column 2 size is 150 + 30%/80% * 80 = 180px
|
||||
Column 3 remains 20px
|
||||
Assignable table inline size
|
||||
C1 dominates estimate: 180/30% + 4*8 = 632
|
||||
Compute final column widths from assignable table size:
|
||||
C0 = 50% of 600 = 300 C1 = 30% of 600 = 180 , C2 gets the remaining 120</p>
|
||||
<table data-expected-width="632">
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width="250"><div style="width:150px">50%/150px</div></td>
|
||||
<td style="width:30%" data-expected-width="150"><div class="test12" style="width:150px">30%/150px</div></td>
|
||||
<td style="width:20px" data-expected-width="100">x</td>
|
||||
<td style="width:50%" data-expected-width="300"><div style="width:150px">50%/150px</div></td>
|
||||
<td style="width:30%" data-expected-width="180"><div style="width:150px">30%/150px</div></td>
|
||||
<td style="width:20px" data-expected-width="120">x</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 style=""><div style="width:400px">400px min</div></td>
|
||||
<td colspan=2 style=""><div style="width:468px">408px min</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p 13 class="testdesc"> Colspan>1:Auto/400px C0:50%/75px/125px, C1:30%/75px/125px C2:20px/Auto
|
||||
Colspan>1 cell distribution over different percentages.
|
||||
400-8px min width gets redistributed as 245/147 (no min width limits)
|
||||
|
|
@ -375,6 +458,58 @@ this is that 40% cell will end up with 0 if no min width.
|
|||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Colspan>1 cell's maximum width distribution</h2>
|
||||
<li>Only constrained colspans can distribute max-width over fixed columns</li>
|
||||
|
||||
<p class="testdesc">Colspan: constrained. Col: constrained
|
||||
Constrained colspan redistributes widths over constrained cols.
|
||||
</p>
|
||||
<table data-expected-width=216>
|
||||
<col style="width:50px">
|
||||
<col style="width:50px">
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 style="width:200px" data-expected-width=200>200</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="testdesc">Colspan: unconstrained. Col: constrained
|
||||
Colspan max-width does not get redistributed.
|
||||
</p>
|
||||
<table data-expected-width=124>
|
||||
<col style="width:50px">
|
||||
<col style="width:50px">
|
||||
<tr>
|
||||
<td>50</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 data-expected-width=108><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Colspan: unconstrained, Col: constrained/%
|
||||
Colspanned col distributes width over %ge column.
|
||||
max-guess is 50px + 200px*50% = 150px
|
||||
distributable_size is 50px
|
||||
%ge column gets percentage_size + distributable_size = 150px
|
||||
Later, this makes table 300px wide.
|
||||
</p>
|
||||
<p class="error">FF, Legacy, and TablesNG all disagree about the correct widths. FF feels more like the right answer, but I can't figure out the math behind it.</p>
|
||||
<table data-expected-width=308>
|
||||
<col style="width:50px">
|
||||
<col style="width:50%">
|
||||
<tr>
|
||||
<td data-expected-width=142>50</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 data-expected-width=292><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div><div style="width:50px">50</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Merging cell widths into column widths</h2>
|
||||
<p>What happens when different types of cells get merged into a single column?</p>
|
||||
<p class="testdesc">C0:0 25%/50px C0:1 50%/40px
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<title>TABLE fragment sizes</title>
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/" />
|
||||
|
||||
<main>
|
||||
<h1>TBODY/TR Element sizes and border spacing</h1>
|
||||
<p>Legacy Chrome:TR includes start/end, not before/after. 1st TBODY includes before/after, 2nd TBODY includes only after, not before.</p>
|
||||
<p>Firefox: TR/TBODY do not include start/end before/after.</p>
|
||||
<p>Proposal: match firefox</p>
|
||||
|
||||
<table style="width:100px;border-spacing:10px;background:#ddd">
|
||||
<tbody data-expected-width=80>
|
||||
<tr data-expected-width=80>
|
||||
<td data-expected-width=80>0,0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>TR width is used for TD's percentage resolution</p>
|
||||
<table style="width:120px;border-spacing:10px;background:#ddd">
|
||||
<tbody data-expected-width=100>
|
||||
<tr data-expected-width=100>
|
||||
<td style="padding:30%" data-expected-width=100 ><div data-offset-x=30>0,0</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,503 @@
|
|||
<!doctype html>
|
||||
<title>ROWSPAN redistribution</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://drafts.csswg.org/css-tables-3/#row-layout" />
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4418" />
|
||||
<style>
|
||||
main table {
|
||||
margin-top: 8px;
|
||||
border-collapse: collapse;
|
||||
background: rgba(0,0,255,0.1);
|
||||
background-image: linear-gradient(45deg, #DDD 25%, transparent 25%), linear-gradient(-45deg, #DDD 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #DDD 75%), linear-gradient(-45deg, transparent 75%, #DDD 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
}
|
||||
.sizer {
|
||||
width: 30px;
|
||||
height: 100px;
|
||||
}
|
||||
main tbody tr:nth-child(odd) {
|
||||
background: rgba(255,255,0,1.0);
|
||||
}
|
||||
main tbody tr:nth-child(even) {
|
||||
background: rgba(255,165,0,1.0);
|
||||
}
|
||||
main td div {
|
||||
background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%, rgba(0,255,0,0.7) 100%);
|
||||
}
|
||||
main .td-padding td {
|
||||
padding: 2px;
|
||||
}
|
||||
main .td-padding-xl td {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>ROWSPAN > 1 to row distribution</h1>
|
||||
<p>The algorithm has not been standardized. This is my understanding of how it works.</p>
|
||||
<ol>
|
||||
<li>rowspan>1 TDs are sorted:</li>
|
||||
<ol>
|
||||
<li>If TD span the same rows, taller TD is distributed first.</li>
|
||||
<li>If one TD is fully enclosed by another, inner TD is distributed first.</li>
|
||||
<li>Otherwise, higher TD is distributed first.</li>
|
||||
</ol>
|
||||
<li>Each rowspan>1 TD's height is distributed as following</li>
|
||||
<ol>
|
||||
<li>rowspan > 1 TDs have height TDh, span N rows. N rows have total height of Rh. TDh - Rh height, Dh, must be distributed as follows.</li>
|
||||
<li>If percentage resolution size is available (this happens when redistributiong table/section height), percentage rows grow to their percentage size, proportional to (percentage size - current size). Dh shrinks by distributed height. Justification: explicit percentage rows should grow to their percentage.</li>
|
||||
<li>Rows that originate rowspan>1 cells get all the Dh height, distributed evenly. Justification: rowspan>1 rows are likely to need to grow later. If there are multiple rowspan>1 cells, there can be multiple originating rows.</li>
|
||||
<li>Unconstrained non-empty rows grow, proportional to their existing height.</li>
|
||||
<li>If all rows are empty, last row gets all the height. Justification: ???</li>
|
||||
<li>Contstrained rows grow in proportion to current height.</li>
|
||||
</ol>
|
||||
</ol>
|
||||
<p class="error">It is unclear what the existing ChromeLegacy/FF algorithms do for distribution over rowspan>1 and empty cells. <a href="https://dxr.mozilla.org/mozilla-central/source/layout/tables/nsTableRowGroupFrame.cpp#509">FF special cases</a> "there is no cell originating in the row with owspan=1 and there are at least 2 cells spanning the row. Chrome Legacy also tries to do something similar, but they disagree on what. TablesNG will try to ship without special cases.</p>
|
||||
<p class="error">Safari fails most of these tests</p>
|
||||
<p>Color scheme</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>odd rows are yellow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>even rows are orange</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="height:50px">inner divs have a green gradient</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<h2>Unconstrained rows</h2>
|
||||
<p>Rows whose height is not fixed or percent are unconstrained.</p>
|
||||
<p class="testdesc">Unconstrained rows
|
||||
Unconstrained rows are redistributed proportionally. Rows are constrained if their height is fixed, or percent.</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-height="50">
|
||||
<td>0,0</td>
|
||||
<td rowspan="2"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height="50">
|
||||
<td>0,1</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Unconstrained rows with zero height do not grow.</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-height="50">
|
||||
<td>0,0</td>
|
||||
<td rowspan="3"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height="0">
|
||||
</tr>
|
||||
<tr data-expected-height="50">
|
||||
<td>0,2</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">rowspan>1 is zero height, spanned rows have height.</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-height="0">
|
||||
<td></td>
|
||||
<td rowspan="3"><div class="sizer"></div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height="50">
|
||||
<td>1,0</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height="50">
|
||||
<td>2,0</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Unconstrained rows are redistributed proportionally to heights</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-height="75">
|
||||
<td><div style="height:45px">0,0</div></td>
|
||||
<td rowspan="2"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height="25">
|
||||
<td><div style="height:15px">0,1</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Fixed rows</h2>
|
||||
|
||||
<p class="testdesc">Constrained fixed rows
|
||||
do not grow if there are unconstrained ones</p>
|
||||
<p class="error">Edge grows constrained rows too</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr style="height: 30px" data-expected-height="30">
|
||||
<td>0,0 30px</td>
|
||||
<td rowspan="2"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height="70">
|
||||
<td>0,1</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc"> Constrained fixed rows
|
||||
grow proportionally to their size if there are no unconstrained rows</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr style="height: 20px" data-expected-height="25">
|
||||
<td>20</div></td>
|
||||
<td rowspan="3"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr style="height: 20px" data-expected-height="25">
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr style="height: 40px" data-expected-height="50">
|
||||
<td>40</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Percent rows</h2>
|
||||
|
||||
<p class="testdesc">Constrained percent rows
|
||||
grow like unconstrained ones when percent resolution size is undefined.</p>
|
||||
<p class="error">FF always treats percent rows as constrained. Chrome legacy does resolve percentage against final height of the table. I do not think that can work. Edge follows NG.</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr style="height: 30%" data-expected-height="50">
|
||||
<td>0,0 30%</td>
|
||||
<td rowspan="2"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height="50">
|
||||
<td>0,1</td>
|
||||
</tr>
|
||||
<tr style="height:100px"><td>100px</td></tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="testdesc">Percent rows with zero height
|
||||
do not grow.</p>
|
||||
<p class="error">Legacy Chrome has a strange gap between rows</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-height="50">
|
||||
<td>0,0</td>
|
||||
<td rowspan="3"><div class="sizer"></div></td>
|
||||
</tr>
|
||||
<tr style="height:10%;background:red" data-expected-height="0">
|
||||
</tr>
|
||||
<tr data-expected-height="50">
|
||||
<td>2,0</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Order of rowspan distribution</h2>
|
||||
|
||||
|
||||
<p class="testdesc">If cells span the same rows, bigger cell is distributed first
|
||||
Not sure how to test this, I think it is just an optimization, there is no observable effect.
|
||||
<p class="error">FF and Legacy Chrome unexpectedly distribute height evenly between rows in the first test case. Edge and TablesNG do not.</p>
|
||||
<table>
|
||||
<tr data-expected-height=0>
|
||||
<td rowspan=3><div style="height:50px"></div></td>
|
||||
<td rowspan=3><div style="height:99px"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height=0>
|
||||
</tr>
|
||||
<tr data-expected-height=99>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bottom</td>
|
||||
<td>bottom</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr data-expected-height=0>
|
||||
<td rowspan=3><div style="height:50px"></div></td>
|
||||
<td rowspan=3><div style="height:99px"></div></td>
|
||||
<td style="width:20px"></td>
|
||||
</tr>
|
||||
<tr data-expected-height=0>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height=99>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bottom</td>
|
||||
<td>bottom</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr data-expected-height=0>
|
||||
<td rowspan=3><div style="height:99px;width:20px"></div></td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
<tr data-expected-height=99></tr>
|
||||
<tr>
|
||||
<td>bottom</td>
|
||||
<td>bottom</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="testdesc">If one cell is fully enclosed by another, inner cell wins.
|
||||
<p class="error">Not in Edge</p>
|
||||
<table>
|
||||
<tr data-expected-height=0>
|
||||
<td rowspan=4><div style="height:50px;width:20px"></div></td>
|
||||
<td></td>
|
||||
<tr data-expected-height=0>
|
||||
<td></td>
|
||||
<td rowspan=2><div style="height:100px;width:20px"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height=100></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">First row wins.
|
||||
rowspan-4 distributes 50 to last empty row, row3. rowspan-3 distributes 100px to only nonempty row, row3.
|
||||
<p class="error">Edge disagrees here.</p>
|
||||
<table>
|
||||
<tr data-expected-height=0>
|
||||
<td rowspan=4><div style="height:50px;width:20px"></div></td>
|
||||
<td></td>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=100>
|
||||
<td></td>
|
||||
<td rowspan=3><div style="height:100px;width:20px"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Rowspan distribution over empty rows.</h2>
|
||||
|
||||
<p class="testdesc">Rowspans that span non-existent rows
|
||||
Span is truncated so only existing rows are spanned.</p>
|
||||
<table>
|
||||
<tbody data-expected-height="100">
|
||||
<tr>
|
||||
<td data-expected-height="50">0,0</td>
|
||||
<td data-expected-height="100" rowspan="5"><div style="height:100px;">rowspan 5</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-height="50">1,0</td>
|
||||
</tr>
|
||||
<tr data-expected-height="0"></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>body 2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Rowspan spans only empty rows
|
||||
Last spanned row gets all the height.
|
||||
<p class="error">Edge distributes height to all empty rows, not just last.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>first row</td>
|
||||
</tr>
|
||||
<tr data-expected-height=0>
|
||||
<td></td>
|
||||
<td rowspan=5><div style="height:100px;width:30px;"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height=0><td></td></tr>
|
||||
<tr data-expected-height=0><td></td></tr>
|
||||
<tr data-expected-height=0><td></td></tr>
|
||||
<tr data-expected-height=100><td></td></tr>
|
||||
<tr>
|
||||
<td>last row</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">TD is not considered empty if it has padding, but no content
|
||||
<table>
|
||||
<tr>
|
||||
<td>first row</td>
|
||||
</tr>
|
||||
<tr data-expected-height=0>
|
||||
<td></td>
|
||||
<td style="height:100px" rowspan=3></td>
|
||||
</tr>
|
||||
<tr data-expected-height=100><td style="padding:2px"></td></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr>
|
||||
<td>last row</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">row with an empty tall cell is not considered empty.
|
||||
<p class="error">
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan=5><div style="height:100px">rowspan</div></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height=100>
|
||||
<td rowspan=5></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Empty rows with border-spacing big enough for rowspan cell
|
||||
rows are 0 height, cell spans the entire table.
|
||||
<table style="border-spacing:20px;border-collapse:separate " data-expected-height=100>
|
||||
<tr data-expected-height=0>
|
||||
<td rowspan=4><div style="height:60px;width:40px"></div></td>
|
||||
</tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">row with a non-empty rowspan>0 cell is empty.
|
||||
Distributes to all rows except start row?
|
||||
<p class="error">
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan=5><div style="height:100px">rowspan</div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height=100>
|
||||
<td rowspan=5><div style="height:100px">rowspan</div></td>
|
||||
</tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan=5><div style="height:100px">rowspan</div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height=100>
|
||||
<td>yo</td>
|
||||
</tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
<tr data-expected-height=0></tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="testdesc">Distribution over rowspan > 1 rows
|
||||
Distribution over rowspan > 1 rows
|
||||
|
||||
<table class="td-padding-xl" data-expected-height=360>
|
||||
<tr>
|
||||
<td rowspan=6><div style="width:50px;height:280px"></div></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height:30%;background:purple">
|
||||
<td data-expected-height=20></td>
|
||||
</tr>
|
||||
<tr data-expected-height=110>
|
||||
<td rowspan=7 ></td>
|
||||
</tr>
|
||||
<tr data-expected-height=110>
|
||||
<td rowspan=17 ><div style="width:50px;height:40px"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Distribution of table height over rowspan > 1 rows
|
||||
If there are any unconstrained non-empty rows, they get it.
|
||||
When all rows are empty, last row takes it</p>
|
||||
<table class="td-padding-xl" style="height:460px">
|
||||
<tr>
|
||||
<td rowspan=6><div style="width:50px;height:280px" data-expected-height=280></div></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height:30%;background:purple" data-expected-height=120>
|
||||
<td ></td>
|
||||
</tr>
|
||||
<tr data-expected-height=110>
|
||||
<td rowspan=7 ></td>
|
||||
</tr>
|
||||
<tr data-expected-height=110>
|
||||
<td rowspan=17><div style="width:50px;height:40px"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Distribution of rowspan over percentage rows
|
||||
Percentage rows are considered empty if they cannot resolve</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr style="height:20%">
|
||||
<td rowspan=3><div style="height:100px;width:100px"></div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height:30%">
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height=100 style="height:50%">
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -3,7 +3,7 @@ Tables-ng test styling.
|
|||
|
||||
Usage:
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./support/tables-ng.css">
|
||||
<link rel="stylesheet" type="text/css" href="./support/table-tentative.css">
|
||||
<p class="testdesc">Short description here
|
||||
Analysis
|
||||
<p class="error">Current disagreements between browsers</p>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@
|
|||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<link rel='stylesheet' href='../support/base.css' />
|
||||
<link rel='stylesheet' href='./support/table-tentative.css' />
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout" />
|
||||
<style>
|
||||
main table {
|
||||
border-collapse: collapse;
|
||||
background: #DDD;
|
||||
border-spacing: 0px;
|
||||
background: rgba(255,0,0,0.3);
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
main td {
|
||||
padding: 0;
|
||||
|
|
@ -30,178 +32,286 @@
|
|||
main table tfoot {
|
||||
background: rgba(255,255,0,0.3);
|
||||
}
|
||||
main .test {
|
||||
margin-top:24px;
|
||||
|
||||
.debug {
|
||||
width:100px;
|
||||
height:1px;
|
||||
position:relative;
|
||||
}
|
||||
.debug pre {
|
||||
position:absolute;
|
||||
font: 30px/30px monospace;
|
||||
left: 120px;
|
||||
top:-30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<main>
|
||||
<h1>Tests for redistribution of table height to row group height.</h1>
|
||||
<p>This algorithm has not been standardized. Browsers implementations disagree</p>
|
||||
<p class="test">Empty sections and rows do grow when table height forces it.</p>
|
||||
<table>
|
||||
<tbody data-expected-height="100">
|
||||
<tr data-expected-height="100">
|
||||
<td style="width:0;height:0" data-expected-height="100"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<p>This algorithm has not been standardized. Browsers implementations disagree a lot.
|
||||
Legacy Chrome used to always distribute all the height to the first tbody.</p>
|
||||
|
||||
<pre class=error>Major incompatibility: Legacy:
|
||||
- ignores any height set on sections.
|
||||
- does not size the table unless section has a TR
|
||||
- does not grow sections without TDs
|
||||
- only distributes height to the 1st tbody
|
||||
FF
|
||||
- does not prioritize thead for height distribution most of the time.
|
||||
- y offset of multiple tbodies can be incorrect.
|
||||
</pre>
|
||||
|
||||
<h2>Empty table</h2>
|
||||
<p>Empty tables always grow to specified height in all browsers.</p>
|
||||
<p class="testdesc">no sections</p>
|
||||
<table data-expected-height=100></table>
|
||||
|
||||
<p class="testdesc">no sections, no border spacing</p>
|
||||
<table style="border-spacing: 0" data-expected-height=100></table>
|
||||
|
||||
<p class="testdesc">collapsed table no sections</p>
|
||||
<table style="border-collapse:collapse" data-expected-height=100></table>
|
||||
|
||||
<p class="testdesc">fixed table no sections</p>
|
||||
<table style="table-layout:fixed" data-expected-height=100></table>
|
||||
|
||||
<h2>One TBODY</h2>
|
||||
<p>The big difference here is between empty TBODY, and a body with an empty TR</p>
|
||||
<li>FF: always sizes the table, only sizes TBODY if it has TR.</li>
|
||||
<li>Legacy: does not size the table unless TBODY has TR</li>
|
||||
<p>FF: sizes the table, but tbody size remains 0 unless tbody is not empty.</p>
|
||||
<p>Legacy table size remains 0, or border-spacing</p>
|
||||
|
||||
<p class="testdesc">single empty tbody</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody data-expected-height=100></tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Unconstrained sections grow proportionally.</p>
|
||||
<p>Chrome only grows first TBODY. This test expects only TBODYs to grow.</p>
|
||||
<table >
|
||||
<thead data-expected-height="15">
|
||||
<tr><td><div style="height:15px">0,0</div></td></tr>
|
||||
<p class="testdesc">single tbody+tr</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">border spacing</p>
|
||||
<p class="error">FF/Legacy do not apply border-spacing</p>
|
||||
<table style="border-spacing: 10px" data-expected-height=100>
|
||||
<tbody data-expected-height=80><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">collapsed table</p>
|
||||
<table style="border-collapse:collapse" data-expected-height=100>
|
||||
<tbody data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">fixed table</p>
|
||||
<table style="table-layout:fixed" data-expected-height=100>
|
||||
<tbody data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">tbody has fixed height</p>
|
||||
<p class="error">FF adds tbody height to table?</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody style="height:50px" data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">tbody has fixed height > table</p>
|
||||
<p class="error">Legacy: table size wins. FF: table size wins, but body grows to 300px?</p>
|
||||
<table data-expected-height=200>
|
||||
<tbody style="height:200px" data-expected-height=200><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">tr has fixed height > table</p>
|
||||
<p class="error">FF: table size wins, but body is 300.</p>
|
||||
<table data-expected-height=200>
|
||||
<tbody data-expected-height=200><tr style="height:200px"></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">tbody has percentage height > table</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody style="height:200%" data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">tr has percentage height > table</p>
|
||||
<p class=error>FF/Legacy: table wins. FF: body is 200px</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody data-expected-height=100><tr style="height:200%"></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">non-empty tbody</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">non-empty thead</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=100><tr></tr></thead>
|
||||
</table>
|
||||
|
||||
<h2>THEAD TBODY</h2>
|
||||
|
||||
<p class="testdesc">empty thead, empty tbody</p>
|
||||
<p class="error">FF thead/tbody both grow</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=0><tr></tr></thead>
|
||||
<tbody data-expected-height=100><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">sized thead, empty tbody</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=20><td style="height:20px">thead</td></thead>
|
||||
<tbody data-expected-height=80><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">table layout fixed, thead with td, tbody</p>
|
||||
<table style="table-layout:fixed" data-expected-height=100>
|
||||
<thead data-expected-height=20>
|
||||
<tr>
|
||||
<td style="height:20px">thead</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-expected-height="35">
|
||||
<tr><td>1,0</td></tr>
|
||||
<tbody data-expected-height=80><tr><td>x</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">table layout fixed, thead+td, tbody+td</p>
|
||||
<table style="table-layout:fixed" data-expected-height=100>
|
||||
<thead data-expected-height=20>
|
||||
<tr>
|
||||
<td style="height:20px">thead</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-expected-height=80><tr><td>x</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">thead with td</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=20>
|
||||
<tr>
|
||||
<td style="height:20px">thead</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-expected-height=80>
|
||||
<tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody data-expected-height="35">
|
||||
<tr><td>2,0</td></tr>
|
||||
</tbody>
|
||||
<tfoot data-expected-height="15">
|
||||
<tr><td><div style="height:15px">3,0</div></td></tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">tfoot with td</p>
|
||||
<table data-expected-height=100>
|
||||
<tfoot data-expected-height=20>
|
||||
<tr>
|
||||
<td style="height:20px">tfoot</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<p class="test">Unconstrained sections grow proportionally to their size</p>
|
||||
<table >
|
||||
<tbody data-expected-height="75">
|
||||
<tr><td>0,0</td></tr>
|
||||
<tr><td>1,0</td></tr>
|
||||
<tr><td>2,0</td></tr>
|
||||
</tbody>
|
||||
<tbody data-expected-height="25">
|
||||
<tr><td>3,0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Fixed sections do not grow if there are unconstrained sections.</p>
|
||||
<p>FF gets the right sizes, but gets locations wrong.</p>
|
||||
<table>
|
||||
<tbody style="height:30px" data-expected-height="30" data-offset-y="0">
|
||||
<tr><td>0,0</td></tr>
|
||||
</tbody>
|
||||
<tbody data-expected-height="35" data-offset-y="30">
|
||||
<tr><td>1,0</td></tr>
|
||||
</tbody>
|
||||
<tbody data-expected-height="35" data-offset-y="65">
|
||||
<tr><td>2,0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Fixed sections grow proportionally to their height.</p>
|
||||
<p>FF grows sections equally, not proportionally to height</p>
|
||||
<table>
|
||||
<tbody style="height:20px" data-expected-height="25">
|
||||
<tr><td>0,0</td></tr>
|
||||
</tbody>
|
||||
<tbody style="height:60px" data-expected-height="75">
|
||||
<tr><td>1,0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Percentage resolution size. Initial percentage resolution size should be undefined.
|
||||
<table >
|
||||
<tbody style="height:30%" data-expected-height="20">
|
||||
<tr><td><div style="height:20px">0,0</div></td></tr>
|
||||
</tbody>
|
||||
<tbody style="height:70%" data-expected-height="20">
|
||||
<tr><td><div style="height:20px">1,0</div></td></tr>
|
||||
</tbody>
|
||||
<tbody style="height:200px" data-expected-height="200">
|
||||
<tr><td>1,0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Percentage resolution size. During table height redistribution, use table height as
|
||||
percentage resolution height..
|
||||
<table>
|
||||
<tbody style="height:30%" data-expected-height="30">
|
||||
<tr><td><div style="height:20px">0,0</div></td></tr>
|
||||
</tbody>
|
||||
<tbody style="height:70%" data-expected-height="70">
|
||||
<tr><td><div style="height:20px">1,0</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Redistribute percentage bodies proportional to their initial height
|
||||
<table>
|
||||
<tbody style="height:20%" data-expected-height="25">
|
||||
<tr><td><div style="height:20px">0,0</div></td></tr>
|
||||
</tbody>
|
||||
<tbody style="height:60%" data-expected-height="75">
|
||||
<tr><td><div style="height:20px">1,0</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Table min-height is not ignored.</p>
|
||||
<table style="min-height:200px;height:auto" data-expected-height="200">
|
||||
<tbody>
|
||||
<tr><td><div style="height:50px">0,0</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Table max-height is ignored.</p>
|
||||
<table style="max-height:90px;height:auto" data-expected-height="100">
|
||||
<tbody>
|
||||
<tr><td><div style="height:100px">0,0</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Table height does not include caption</p>
|
||||
<table style="height:100px;" >
|
||||
<caption>not included</caption>
|
||||
<tbody>
|
||||
<tr data-expected-height="100"><td>0,0</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Excess row percentage height is distributed greedily.</p>
|
||||
<table style="height:160px">
|
||||
<tbody>
|
||||
<tr style="height:50%" data-expected-height="80">
|
||||
<td >
|
||||
<div style="height:20px">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height:30%" data-expected-height="48">
|
||||
<td >
|
||||
<div style="height:20px">1,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height:80%" data-expected-height="32">
|
||||
<td >
|
||||
<div style="height:20px">2,0</div>
|
||||
</td>
|
||||
<tbody data-expected-height=80>
|
||||
<tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Row percentage height is influenced by percentage cells.</p>
|
||||
<table style="height:100px">
|
||||
<tbody>
|
||||
<tr style="height:5%" data-expected-height="50">
|
||||
<td style="height:50%">0,0</td>
|
||||
</tr>
|
||||
<tr style="height:5%" data-expected-height="30">
|
||||
<td style="height:30%">1,0</td>
|
||||
</tr>
|
||||
<tr style="height:5%" data-expected-height="20">
|
||||
<td style="height:20%">2,0</td>
|
||||
</tr>
|
||||
<h2>Multiple TBODY</h2>
|
||||
<p class="error">Legacy does not distribute any heights when tr is empty.</p>
|
||||
<p class="error">Legacy always distributes everything to 1st tbody.</p>
|
||||
|
||||
<p class="testdesc">2 tbody</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody data-expected-height=50><tr></tr></tbody>
|
||||
<tbody data-expected-height=50><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">2 tbody, with non-empty tds</p>
|
||||
<p class="error">Legacy distributes everything to 1st tbody</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody data-expected-height=50><tr><td>x</td></tr></tbody>
|
||||
<tbody data-expected-height=50><tr><td>x</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="testdesc">2 tbody, 40%, auto, no td</p>
|
||||
<p class="error">FF: distributes everything to auto when empty. Legacy does not distribute</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody style="height:40%" data-expected-height=40><tr></tr></tbody>
|
||||
<tbody data-expected-height=60><tr></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">2 tbody, 40%, auto, non-empty td</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody style="height:40%" data-expected-height=40><tr><td>x</td></tr></tbody>
|
||||
<tbody data-expected-height=60><tr><td>x</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">2 tbody, 40px, auto, non-empty td</p>
|
||||
<p class="error">FF gets confused with 2nd body placement</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody style="height:40px" data-expected-height=40><tr><td>x</td></tr></tbody>
|
||||
<tbody data-expected-height=60 data-offset-y=40><tr><td>x</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">2 tbody, 40%, 40px, non-empty td</p>
|
||||
<p class="error">FF splits evenly</p>
|
||||
<table data-expected-height=100>
|
||||
<tbody style="height:40%" data-expected-height=40><tr><td>x</td></tr></tbody>
|
||||
<tbody style="height:40px" data-expected-height=60 data-offset-y=40><tr><td>x</td></tr></tbody>
|
||||
</table>
|
||||
|
||||
<h2>Sized THEAD/TBODY</h2>
|
||||
<p class=error>FF does not prioritize TBODY for distribution</p>
|
||||
<p class="testdesc">20px thead, 30px tbody</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=20 style="height:20px">
|
||||
<tr><td>x</td></tr>
|
||||
</thead>
|
||||
<tbody data-expected-height=80 style="height:30px">
|
||||
<tr><td>x</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="test">Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p>
|
||||
<table style="width:50px;height:50px">
|
||||
<tbody data-expected-height="50">
|
||||
<tr style="height:0" data-expected-height="0"><td></td></tr>
|
||||
<tr data-expected-height="25"><td></td></tr>
|
||||
<tr data-expected-height="25"><td></td></tr>
|
||||
<p class="testdesc">20px thead's tr, 30px tbody's tr</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=20 >
|
||||
<tr style="height:20px"><td>x</td></tr>
|
||||
</thead>
|
||||
<tbody data-expected-height=80 >
|
||||
<tr style="height:30px"><td>x</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">20px thead's td, 30px tbody's td</p>
|
||||
<table data-expected-height=100>
|
||||
<thead data-expected-height=20 >
|
||||
<tr><td style="height:20px">x</td></tr>
|
||||
</thead>
|
||||
<tbody data-expected-height=80 >
|
||||
<tr><td style="height:30px">x</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
checkLayout("table");
|
||||
|
||||
// Display body sizes next to the table.
|
||||
for (let table of Array.from(document.querySelectorAll("table"))) {
|
||||
let d = document.createElement("div");
|
||||
d.classList.add("debug");
|
||||
let log = document.createElement("pre");
|
||||
d.appendChild(log);
|
||||
|
||||
let text = "";
|
||||
let x;
|
||||
x = table.querySelector("thead");
|
||||
if (x)
|
||||
text += `h:${x.offsetHeight}\n`;
|
||||
x = table.querySelectorAll("tbody");
|
||||
if (x.length > 0)
|
||||
for (body of Array.from(x))
|
||||
text += `b:${body.offsetHeight}\n`;
|
||||
x = table.querySelector("tfoot");
|
||||
if (x)
|
||||
text += `f:${x.offsetHeight}\n`;
|
||||
log.innerText = text;
|
||||
|
||||
table.parentNode.insertBefore(d, table);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<!doctype html>
|
||||
<title>Table minmax tricks</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/" />
|
||||
<style>
|
||||
main table {
|
||||
background: gray;
|
||||
border-spacing: 10px 10px;
|
||||
table-layout: auto;
|
||||
}
|
||||
main td {
|
||||
background: #BFB;
|
||||
font-size: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
line-height: 2;
|
||||
}
|
||||
.container {
|
||||
border: 5px solid orange;
|
||||
margin-top: 8px;
|
||||
box-sizing: border-box;
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h2>Table minmax</h2>
|
||||
|
||||
<p>How do different layout algorithms deal with table with an infinite max width?`</p>
|
||||
<xmp>
|
||||
<table>
|
||||
<td style="width:100%"><div style="width:30px">100%</div></td>
|
||||
<td><div style="width:100px">100px</div></td>
|
||||
</table>
|
||||
</xmp>
|
||||
<p>Block layout clamps the max width, but flex/grid/table layouts do not. What happens?</p>
|
||||
|
||||
<p class="testdesc">Block layout</p>
|
||||
<div class="container">
|
||||
<table data-expected-width=590>
|
||||
<td style="width:100%"><div style="width:30px">100%</div></td>
|
||||
<td><div style="width:100px">100px</div></td>
|
||||
</table>
|
||||
<div>sibling</div>
|
||||
</div>
|
||||
|
||||
<p class="testdesc">Block layout with floats</p>
|
||||
<div class="container">
|
||||
What about this?
|
||||
<table style="float:left" data-expected-width=590>
|
||||
<td style="width:100%"><div style="width:30px">100%</div></td>
|
||||
<td><div style="width:100px">100px</div></td>
|
||||
</table>
|
||||
<div style="float:left">sibling</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="testdesc">Table layout</p>
|
||||
|
||||
<table class="container" style="width:auto">
|
||||
<td>
|
||||
<table data-expected-width=160>
|
||||
<td style="width:100%"><div style="width:30px">100%</div></td>
|
||||
<td><div style="width:50px">50px</div><div style="width:50px">50px</div></td>
|
||||
</table>
|
||||
</td>
|
||||
<td><div style="width:100px;">sibling</div></td>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Flex layout 1 1 auto</p>
|
||||
<p class="error">Edge is wider than flexbox</p>
|
||||
<div class="container" style="display:flex;justify-content:center">
|
||||
<table style="flex: 1 1 auto" data-expected-width=355>
|
||||
<td style="width:100%"><div style="width:30px">100%</div></td>
|
||||
<td><div style="width:50px">50px</div><div style="width:50px">50px</div></td>
|
||||
</table>
|
||||
<div style="background:yellow;flex:1 1 40px">40px</div>
|
||||
</div>
|
||||
|
||||
<p class="testdesc">Flex layout 0 0 auto</p>
|
||||
|
||||
<div class="container" style="display:flex;justify-content:center">
|
||||
<table style="flex: 0 0 auto" data-expected-width=160>
|
||||
<td style="width:100%"><div style="width:30px">100%</div></td>
|
||||
<td><div style="width:50px">50px</div><div style="width:50px">50px</div></td>
|
||||
</table>
|
||||
<div style="background:yellow;flex:1 1 auto">auto</div>
|
||||
</div>
|
||||
|
||||
<h2>Empty table sizes</h2>
|
||||
<p class="testdesc">Completely empty table</p>
|
||||
<table style="border-spacing: 0px 0px;" data-expected-height=0 data-expected-width=0></table>
|
||||
|
||||
<p class="testdesc">Completely empty table with min-content width</p>
|
||||
<table style="border-spacing: 0px 0px;width:min-content" data-expected-height=0 data-expected-width=0></table>
|
||||
|
||||
|
||||
<p class="testdesc">Completely empty table with max-content width</p>
|
||||
<table style="border-spacing: 0px 0px;width:max-content" data-expected-height=0 data-expected-width=0></table>
|
||||
|
||||
<p class="testdesc">Completely empty table with width/height</p>
|
||||
<table style="border-spacing: 0px 0px;width:50px;height:50px" data-expected-height=50 data-expected-width=50></table>
|
||||
|
||||
<p class="testdesc">Empty table with border spacing</p>
|
||||
<p class="error">Edge has width</p>
|
||||
<table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0></table>
|
||||
|
||||
<p class="testdesc">Table with just tbody and border spacing</p>
|
||||
<p class="error">Chrome Legacy has width and 1/2 height. Edge has width. Proposal: make table empty.</p>
|
||||
<table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Table with tbody, tr, and border spacing</p>
|
||||
<p class="error">Edge has height, 1/2 width. Chrome Legacy has width/height. Proposal: make table empty.</p>
|
||||
<table style="border-spacing: 10px 10px;" data-expected-height=0 data-expected-width=0>
|
||||
<tbody>
|
||||
<tr></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Empty table with borders</p>
|
||||
<p class="error">Edge has width 30, height 20</p>
|
||||
<table style="border: 10px solid green" data-expected-height=20 data-expected-width=20></table>
|
||||
|
||||
<p class="testdesc">Empty table with padding</p>
|
||||
<p class="error">Edge has width 30, height 20</p>
|
||||
<table style="padding: 10px" data-expected-height=20 data-expected-width=20></table>
|
||||
|
||||
<p class="testdesc">Empty table with caption</p>
|
||||
<table data-expected-height=30 data-expected-width=100><caption><div style="width:100px;height:30px">caption</div></caption></table>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
||||
<title>Table quirks</title>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<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://quirks.spec.whatwg.org/#the-table-cell-width-calculation-quirk" />
|
||||
<style>
|
||||
table {
|
||||
table-layout: auto;
|
||||
border-spacing: 8px 8px;
|
||||
}
|
||||
td {
|
||||
padding: 20px;
|
||||
background: #BFB;
|
||||
font-size: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Tables in quirks mode proposals</h1>
|
||||
|
||||
<p><a href="https://quirks.spec.whatwg.org/#the-table-cell-height-box-sizing-quirk">The table cell height box sizing quirk</a></p>
|
||||
<table data-expected-height=116>
|
||||
<tr>
|
||||
<td style="height:100px;box-sizing:content-box" data-expected-height=100>100 height</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table data-expected-height=116>
|
||||
<tr>
|
||||
<td style="height:100px;box-sizing:border-box" data-expected-height=100>100 height</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p><a href="https://quirks.spec.whatwg.org/#the-table-cell-nowrap-minimum-width-calculation-quirk">The table cell nowrap minimum width calculation quirk</a></p>
|
||||
<p class="error">Chrome Legacy, Edge, Safari fail, only FF gets it correct.<b>Proposal: deprecate the quirk</b></p>
|
||||
<table>
|
||||
<tr>
|
||||
<td nowrap style="width:50px;font: 20px/1 Ahem" data-expected-width=160>nowrap nowrap nowrap nowrap</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p><a href="https://quirks.spec.whatwg.org/#the-text-decoration-doesnt-propagate-into-tables-quirk">The text decoration doesn’t propagate into tables quirk</a></p>
|
||||
<div style="font-style:italic">
|
||||
<table>
|
||||
<td id="notitalic">decoration</td>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p><a href="https://quirks.spec.whatwg.org/#the-collapsing-table-quirk">The collapsing table quirk</a></p>
|
||||
<p class="error">Chrome Legacy/Edge/Safari ignore the quirk, FF does not. <b>Proposal: depreciate the quirk</b></p>
|
||||
<table style="border: 20px solid green" data-expected-height=40 data-expected-width=40></table>
|
||||
|
||||
<p><a href="https://quirks.spec.whatwg.org/#the-table-cell-width-calculation-quirk">The table cell width calculation quirk</a></p>
|
||||
<table style="width:200px">
|
||||
<td data-expected-width=290><img style="width:50px;height:20px"><img style="width:50px;height:20px"><img style="width:50px;height:20px"><img style="width:50px;height:20px"><img style="width:50px;height:20px"></td>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
let pngSrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACWAQMAAAChElVaAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAgAD///8UPy9PAAAAAWJLR0QB/wIt3gAAAAd0SU1FB+MBDwkdA1Cz/EMAAAAbSURBVEjH7cGBAAAAAMOg+VPf4ARVAQAAAM8ADzwAAeM8wQsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDEtMTVUMTc6Mjk6MDMtMDg6MDCYDy9IAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAxLTE1VDE3OjI5OjAzLTA4OjAw6VKX9AAAAABJRU5ErkJggg=="
|
||||
;
|
||||
for (let img of Array.from(document.querySelectorAll("img"))) {
|
||||
img.src = pngSrc;
|
||||
}
|
||||
test(_ => {
|
||||
assert_equals(window.getComputedStyle(document.querySelector("#notitalic")).fontStyle, "normal");
|
||||
}, "decoration does not propagate into table");
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
<!doctype html>
|
||||
<title>Columns widths fixed + padding</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>
|
||||
body {
|
||||
background: #EEE;
|
||||
}
|
||||
main table {
|
||||
background: gray;
|
||||
border-spacing: 8px 8px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
main td {
|
||||
padding: 6px;
|
||||
background: #BFB;
|
||||
font-size: 10px;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
main td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>Fixed tables with padding: Compute column computed widths from assignable table width</h1>
|
||||
|
||||
<p>This test is the similar to table-width-redistribution-fixed.html,
|
||||
except that all cells have 6px padding. The comments in this test refer to padding incompatibilities only.</p>
|
||||
|
||||
<p class="error">Percentage sizes and box-sizing are handled differently in FF/Chrome. In Chrome, %ge size is always treated as border-box size: column width = % * table width. In FF, box-sizing:content-box, %ge size is % * table width + border_padding, box-sizing:border-box same as Chrome. </p>
|
||||
|
||||
<h2>Fixed only</h2>
|
||||
|
||||
<p 3 class="testdesc">Table: 50px; C0:100/50/100 C1:100/50/100
|
||||
When table.css_width is < columns.css_width, how is the conflict resolved?
|
||||
columns.css_width wins
|
||||
<p class="error">
|
||||
<table style="width:50px" data-expected-width=248>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=112>
|
||||
<div style="width:50px">50</div><div style="width:50px">50</div></td>
|
||||
<td style="width:100px" data-expected-width=112>
|
||||
<div style="width:50px">50</div><div style="width:25px">25</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p 4 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 5 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 6 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=248>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=112>
|
||||
<div style="width:200px"></div></td>
|
||||
<td style="width:100px" data-expected-width=112>
|
||||
<div style="width:200px"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p 7 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=128>
|
||||
<tr>
|
||||
<td style="width:100px" data-expected-width=112>
|
||||
<div style="width:200px">200</div></td>
|
||||
</tr>
|
||||
<td style="width:150px" data-expected-width=112>
|
||||
<div style="width:150px">150</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<h2>Colspan distribution</h2>
|
||||
|
||||
<p 9 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=86>
|
||||
<tr>
|
||||
<td data-expected-width=0>
|
||||
<div style="width:50px"></div></td>
|
||||
<td style="width:50px" data-expected-width=62>
|
||||
<div style="width:50px"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2 style="width:200px" data-expected-width=70>
|
||||
<div style="width:200px"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<h2>Colspan header cells</h2>
|
||||
<section>
|
||||
<ol>
|
||||
<li>Fixed/percentage colspan cells get distributed evenly.</li>
|
||||
<li>Auto cells. Is the table even fixed?</li>
|
||||
</ol>
|
||||
|
||||
<p 12 class="testdesc">Assi: 300px
|
||||
To make CO distributable width 100, declare it as 100px+8px spacing - 12px padding.
|
||||
To make C1 distributable width 200, declare it as 220px+8px spacing - 12px padding.
|
||||
Fixed header cells with colspan get divided evenly.
|
||||
</p>
|
||||
<p class="error">Legacy chrome does not substract border spacing before distribution</p>
|
||||
<table style="width:calc(300px + 40px)" data-expected-width=340>
|
||||
<tr>
|
||||
<td colspan=2 style="width:96px" data-expected-width=108>108</td>
|
||||
<td colspan=2 style="width:196px" data-expected-width=208>208</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width=50>1</td>
|
||||
<td>1</td>
|
||||
<td data-expected-width=100>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p 13 class="testdesc">Assignable: 400px, C0:40% C1:20% C2:40%
|
||||
Percentage header cells with colspan.
|
||||
Colspan cells do not distribute border_padding, they just distribute widths.
|
||||
C0/1/2/3 will not have border-padding becaouse of colspan, C4 because border-box
|
||||
TD0 splits
|
||||
C0/1 get 20% max (40 + padding)/ 2 = 22px,
|
||||
C2/3 10% and (20 + padding) / 2 = 12px max,
|
||||
C4 40%, 12px percent border padding, and 52 max
|
||||
|
||||
Assignable width is 440 - 48, everyone gets according to percent.
|
||||
C0/C1 get 80, C2/C3 get 40, and C4 gets 160.
|
||||
</p>
|
||||
<p class="error">Firefox seems to have a rounding error.</p>
|
||||
<table style="width: calc(400px + 6 * 8px)" 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:20px"></div></td>
|
||||
<td style="width:40%;box-sizing:border-box" 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 14 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=144>
|
||||
<tr>
|
||||
<td colspan=2 data-expected-width=8>
|
||||
<div style="width:100px">100</div></td>
|
||||
<td style="width:100px" data-expected-width=112>100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-expected-width=0>x</td>
|
||||
<td data-expected-width=0>x</td>
|
||||
<td data-expected-width=112>x</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p 16 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 10 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 17 class="testdesc">Assignable: 100px;columns add to 100%, auto width
|
||||
Column percent adds to a 100, but because box-sizing is content box,
|
||||
Column content size adds up to table width.
|
||||
Column border size adds up to table width + padding (36px).
|
||||
Columns get scaled down.
|
||||
Scaling down is not defined by standard. FF and NG differ by a px (rounding?).
|
||||
</p>
|
||||
<table style="width:calc(100px + 68px)" data-expected-width=168>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=63>50%</td>
|
||||
<td style="width:30%" data-expected-width=42>30%</td>
|
||||
<td style="width:20%" data-expected-width=31>20%</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p 18 class="testdesc">Assignable: 100px;columns add to 50%, auto width
|
||||
Columns grow proportional to percent.
|
||||
Slight rounding differences between NG and FF.
|
||||
<table style="width:calc(100px + 68px)" data-expected-width=168>
|
||||
<tr>
|
||||
<td style="width:25%" data-expected-width=60>25%</td>
|
||||
<td style="width:15%" data-expected-width=43>15%</td>
|
||||
<td style="width:10%" data-expected-width=33>10%</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p 19 class="testdesc">Assignable: 100px;columns add to 50%, with min width
|
||||
Min width is ignored.
|
||||
<table style="width:calc(100px + 68px)" data-expected-width=168>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=63><div style="width:50px">50</div></td>
|
||||
<td style="width:30%" data-expected-width=42><div style="width:50px">50</div></td>
|
||||
<td style="width:20%" data-expected-width=31><div style="width:50px">50</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Percentage/auto/fixed mix</h2>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;C0:50% C1:100px
|
||||
Clean split
|
||||
<table style="width:calc(100px + 24px)" data-expected-width=124>
|
||||
<tr>
|
||||
<td style="width:50%" data-expected-width=38>50%</td>
|
||||
<td style="width:50px" data-expected-width=62>50px</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">Assignable: 100px;C0:60% C1:60px
|
||||
Overconstrained: widths add up to 132.
|
||||
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=9>20%</td>
|
||||
<td style="width:60%" data-expected-width=19>60%</td>
|
||||
<td style="width:60px" data-expected-width=72>60px</td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!doctype html>
|
||||
<title>TBODY redistribution</title>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<link rel='stylesheet' href='../support/base.css' />
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#height-distribution-algorithm" />
|
||||
<style>
|
||||
main table {
|
||||
border-collapse: collapse;
|
||||
background: #DDD;
|
||||
}
|
||||
main td {
|
||||
padding: 0;
|
||||
}
|
||||
main td .empty {
|
||||
line-height: 0;
|
||||
}
|
||||
main tbody tr:nth-child(1) {
|
||||
background: rgba(255, 156, 0, 0.5);
|
||||
}
|
||||
main tbody tr:nth-child(2) {
|
||||
background: rgba(255, 255, 0, 0.5);
|
||||
}
|
||||
main tbody tr:nth-child(3) {
|
||||
background: rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>TBODY/THEAD/TFOOT height redistribution.</h1>
|
||||
<li>FF passes most of the tests.
|
||||
<li>Legacy Chrome does not distribute TBODY height to rows.
|
||||
<li>At the time this test was written, there was no spec. Currently, spec is in the process of being written.
|
||||
|
||||
<p>1) Empty row group's size is 0 with collapsed borders</p>
|
||||
<table id="one" style="border-collapse: collapse;border-spacing: 10px 10px;border:10px solid green"
|
||||
data-expected-width="0" data-expected-height="0">
|
||||
<tbody>
|
||||
<tr> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>2) Empty row group's size is 0 with separate borders.</p>
|
||||
<table id="two" style="border-collapse: separate;border-spacing: 10px 10px;border:10px solid green"
|
||||
data-expected-width="20" data-expected-height="20">
|
||||
<tbody>
|
||||
<tr> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>3) Row group height is redistributed to unconstrained rows in proportion to their size.</p>
|
||||
<table id="three">
|
||||
<tbody style="height:100px" data-expected-height="100">
|
||||
<tr data-expected-height="25">
|
||||
<td><div style="height:10px" >0,0</div></td>
|
||||
</tr>
|
||||
<tr data-expected-height="75">
|
||||
<td><div style="height:30px" >0,0</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>4) Constrained fixed rows do not grow if there are unconstrained rows</p>
|
||||
<table id="four">
|
||||
<tbody style="height:100px">
|
||||
<tr style="height: 10px" data-expected-height="10">
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr data-expected-height="90">
|
||||
<td>0,1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>5) Constrained percentage are resolved against row group height.</p>
|
||||
<table id="five">
|
||||
<tbody style="height:100px">
|
||||
<tr style="height:25%" data-expected-height="25">
|
||||
<td>0,0</td>
|
||||
</tr>
|
||||
<tr style="height:50%" data-expected-height="50">
|
||||
<td>0,0</td>
|
||||
</tr>
|
||||
<tr data-expected-height="25">
|
||||
<td>0,2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>6) Row group height is treated as min-height.</p>
|
||||
<table id="six">
|
||||
<tbody style="height:100px" data-expected-height="125">
|
||||
<tr style="height:125px">
|
||||
<td>0,0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>7) Constrained/unconstrained mix: row group height is distributed to unconstrained cells.</p>
|
||||
<table id="seven">
|
||||
<tbody style="height:100px">
|
||||
<tr style="height:20px" data-expected-height="20"><td>0,0</td></tr>
|
||||
<tr style="height:30px" data-expected-height="30"><td>0,1</td></tr>
|
||||
<tr data-expected-height="25"><td>0,2</td></tr>
|
||||
<tr data-expected-height="25"><td>0,3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>8) Unconstrained empty rows grow to fill table if all other rows are constrained. Not in FF.</p>
|
||||
<table id="eight">
|
||||
<tbody style="height:100px">
|
||||
<tr style="height:20px" data-expected-height="20"><td>0,0</td></tr>
|
||||
<tr style="height:30px" data-expected-height="30"><td>0,1</td></tr>
|
||||
<tr data-expected-height="50"><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<table id="eightplus">
|
||||
<tbody style="height:100px">
|
||||
<tr data-expected-height="50"><td></td></tr>
|
||||
<tr style="height:20px" data-expected-height="20"><td>0,1</td></tr>
|
||||
<tr style="height:30px" data-expected-height="30"><td>0,2</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>9) Empty section height is not ignored</p>
|
||||
<table id="nine" >
|
||||
<tbody style="height:75px" data-expected-height="75">
|
||||
</tbody>
|
||||
</table>
|
||||
<p>10) Section with empty rows is not considered empty.</p>
|
||||
<p>In FF, empty section height is 100, but table's height is 0?</p>
|
||||
<table id="nine" >
|
||||
<tbody style="height:75px" data-expected-height="75">
|
||||
<tr data-expected-height="25"></tr>
|
||||
<tr data-expected-height="25"></tr>
|
||||
<tr data-expected-height="25"></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>11) Mixed constrained and unconstrained empty rows: only unconstrained rows grow.</p>
|
||||
<table id="ten" style="width:50px">
|
||||
<tbody style="height:50px" data-expected-height="50">
|
||||
<tr style="height:0" data-expected-height="0"><td></td></tr>
|
||||
<tr data-expected-height="25"><td></td></tr>
|
||||
<tr data-expected-height="25"><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<!doctype html>
|
||||
<title>TD box sizing</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/" />
|
||||
<style>
|
||||
main table {
|
||||
background: gray;
|
||||
border-spacing: 10px 10px;
|
||||
table-layout: auto;
|
||||
}
|
||||
main td {
|
||||
padding: 20px;
|
||||
background: #BFB;
|
||||
font-size: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main td > div {
|
||||
display: inline-block;
|
||||
background: rgba(56,162,56,0.3);
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>TD and box sizing</h1>
|
||||
|
||||
<p>TD defaults to box-sizing: content-box. How does box-sizing affect final TD size?</p>
|
||||
<ol>
|
||||
<li>Auto table layout</li>
|
||||
<ol>
|
||||
<li>Percent cells ignore box-sizing, it is always border-box.</li>
|
||||
<li>Fixed cells respect box-sizing.</li>
|
||||
</ol>
|
||||
<li>Fixed table layout</li>
|
||||
<ol>
|
||||
<li>Percent cells respect box sizing when computing cell width from assignable width.</li>
|
||||
<li>Percent cells ignore box sizing when computing grid max from cell width.</li>
|
||||
</ol>
|
||||
</ol>
|
||||
<h2>Table-layout: auto</h2>
|
||||
<h4>TD width:%</h4>
|
||||
<p class="testdesc">content-box, C0:50%/100 C1:Auto
|
||||
Percent gets resolved to compute grid max size.
|
||||
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
|
||||
Table width is 1/50%*140 + 3*padding = 280+30 = 310
|
||||
<table data-expected-width=310>
|
||||
<tr>
|
||||
<td style="width:50%;box-sizing:content-box" data-expected-width=140>
|
||||
<div style="width:100px">50%/100</td>
|
||||
<td data-expected-width=140>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="testdesc">border-box, C0:50%/100 C1:Auto
|
||||
Same test as above, but box-sizing is border-box.
|
||||
<table data-expected-width=310>
|
||||
<tr>
|
||||
<td style="width:50%;box-sizing:border-box" data-expected-width=140>
|
||||
<div style="width:100px">50%/100</td>
|
||||
<td data-expected-width=140>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="testdesc">content-box, C0:80%/100 C1:Auto
|
||||
Percent gets resolved to compute final cell size from assignable width.
|
||||
C0 border box width is 500 * 80%
|
||||
<table style="width:530px" data-expected-width=530>
|
||||
<tr>
|
||||
<td style="width:80%;box-sizing:content-box" data-expected-width=400>
|
||||
<div style="width:100px">80%/100</td>
|
||||
<td data-expected-width=100>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">border-box, C0:80%/100 C1:Auto
|
||||
Same as above, but border-box
|
||||
<table style="width:530px" data-expected-width=530>
|
||||
<tr>
|
||||
<td style="width:80%;box-sizing:border-box" data-expected-width=400>
|
||||
<div style="width:100px">80%/100</td>
|
||||
<td data-expected-width=100>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<h4>TD width:fixed</h4>
|
||||
|
||||
<p class="testdesc">content-box, C0:100/Auto C1:100/Auto
|
||||
Tests whether box-sizing affects how percentages are computed.
|
||||
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
|
||||
Table width is 1/50%*140 + 3*padding = 280+30 = 310
|
||||
<table data-expected-width=310>
|
||||
<tr>
|
||||
<td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td>
|
||||
<td style="width:100px;box-sizing:content-box">100</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">border-box, C0:100/Auto C1:100/Auto
|
||||
Same test as above, but box-sizing is border-box.
|
||||
<table data-expected-width=230>
|
||||
<tr>
|
||||
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
|
||||
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>TD height: fixed</h4>
|
||||
|
||||
<p class="testdesc">content-box, C0 height:100px
|
||||
<table data-expected-height=160>
|
||||
<tr>
|
||||
<td style="height:100px;box-sizing:content-box" data-expected-height=140>100 height</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">border-box, C0 height:100px
|
||||
<table data-expected-height=120>
|
||||
<tr>
|
||||
<td style="height:100px;box-sizing:border-box" data-expected-height=100>100 height</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>Table-layout: fixed</h2>
|
||||
|
||||
<h4>TD width:%</h4>
|
||||
|
||||
<p class="testdesc">content-box, C0:50%/100 C1:Auto
|
||||
Percent gets resolved to compute grid max size.
|
||||
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
|
||||
Table width is 1/50%*140 + 3*padding = 280+30 = 310
|
||||
<table style="table-layout:fixed" data-expected-width=310>
|
||||
<tr>
|
||||
<td style="width:50%;box-sizing:content-box" data-expected-width=140>
|
||||
<div style="width:100px">50%/100</td>
|
||||
<td data-expected-width=140>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">border-box, C0:50%/100 C1:Auto
|
||||
Same test as above, but box-sizing is border-box.
|
||||
<table style="table-layout:fixed" data-expected-width=310>
|
||||
<tr>
|
||||
<td style="width:50%;box-sizing:border-box" data-expected-width=140>
|
||||
<div style="width:100px">50%/100</td>
|
||||
<td data-expected-width=140>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">content-box, C0:60%/100 C1:Auto
|
||||
Percent gets resolved to compute final cell size from assignable width.
|
||||
Assignable width is 530 - 3*10 = 500
|
||||
C0 content box width is 500 * 60% + 40px padding = 340
|
||||
C1 is 500 - 340 = 160
|
||||
<p class="error">Legacy/Edge treat %ge TD as border box, and end up with 300px</p>
|
||||
<table style="table-layout:fixed;width:530px" data-expected-width=530>
|
||||
<tr>
|
||||
<td style="width:60%;box-sizing:content-box" data-expected-width=340>
|
||||
<div style="width:100px">60%/100</td>
|
||||
<td data-expected-width=160>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="testdesc">border-box, C0:60%/100 C1:Auto
|
||||
Same as above, but border-box
|
||||
<table style="table-layout:fixed;width:530px" data-expected-width=530>
|
||||
<tr>
|
||||
<td style="width:60%;box-sizing:border-box" data-expected-width=300>
|
||||
<div style="width:100px">80%/100</td>
|
||||
<td data-expected-width=200>Auto</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<h4>TD width:fixed</h4>
|
||||
<p class="testdesc">content-box, C0:100/Auto C1:100/Auto
|
||||
Tests whether box-sizing affects how percentages are computed.
|
||||
C0 max_width is max_width + 2 padding = 100 + 2*20 = 140
|
||||
Table width is 1/50%*140 + 3*padding = 280+30 = 310
|
||||
<table style="table-layout:fixed" data-expected-width=310>
|
||||
<tr>
|
||||
<td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td>
|
||||
<td style="width:100px;box-sizing:content-box">100</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="testdesc">border-box, C0:100/Auto C1:100/Auto
|
||||
Same test as above, but box-sizing is border-box.
|
||||
<table style="table-layout:fixed" data-expected-width=230>
|
||||
<tr>
|
||||
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
|
||||
<td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!doctype html>
|
||||
<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/#computing-the-table-width" />
|
||||
<style>
|
||||
.t {
|
||||
display: table;
|
||||
border-top-width: 20px;
|
||||
border-bottom-width: 40px;
|
||||
border-left-width: 20px;
|
||||
border-right-width: 40px;
|
||||
border-style: solid;
|
||||
border-color: gray;
|
||||
padding: 10px;
|
||||
border-spacing: 0;
|
||||
width:100px;
|
||||
height: 100px;
|
||||
}
|
||||
.inline {
|
||||
display: inline-table;
|
||||
}
|
||||
.cell {
|
||||
display: table-cell;
|
||||
background: yellow;
|
||||
}
|
||||
main td {
|
||||
padding: 0;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<p>box-sizing: default; border-collapse: separate </p>
|
||||
<table class="t" style="border-collapse: separate" data-expected-width="100" data-expected-height="100">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>box-sizing: border-box; border-collapse: separate</p>
|
||||
<table class="t" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>box-sizing: content-box; border-collapse: separate</p>
|
||||
<table class="t" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>box-sizing: default; border-collapse: collapse </p>
|
||||
<table class="t" style="border-collapse: collapse" data-expected-width="100" data-expected-height="100">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>box-sizing: border-box; border-collapse: collapse</p>
|
||||
<table class="t" style="box-sizing:border-box;border-collapse: collapse" data-expected-width="100" data-expected-height="100">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>box-sizing: content-box; border-collapse: collapse</p>
|
||||
<table class="t" style="box-sizing:content-box;border-collapse: collapse" data-expected-width="130" data-expected-height="130">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>div with display:table; box-sizing: default; border-collapse: separate</p>
|
||||
<div class="t" style="border-collapse: separate" data-expected-width="180" data-expected-height="180">
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<p>div with display:table; box-sizing: border-box; border-collapse: separate</p>
|
||||
<div class="t" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<p>div with display:table;box-sizing: content-box; border-collapse: separate</p>
|
||||
<div class="t" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
|
||||
<h2>Same tests, but tables are inline.</h2>
|
||||
<div>
|
||||
<table class="t inline" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>box-sizing: border-box; border-collapse: separate
|
||||
|
||||
<div>
|
||||
<table class="t inline" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>box-sizing: content-box; border-collapse: separate</div>
|
||||
<div>
|
||||
<table class="t inline" style="box-sizing:border-box;border-collapse: collapse" data-expected-width="100" data-expected-height="100">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>box-sizing: border-box; border-collapse: collapse</div>
|
||||
<div>
|
||||
<table class="t inline" style="box-sizing:content-box;border-collapse: collapse" data-expected-width="130" data-expected-height="130">
|
||||
<tbody>
|
||||
<td></td>
|
||||
</tbody>
|
||||
</table>box-sizing: content-box; border-collapse: collapse</div>
|
||||
<div>
|
||||
<div class="t inline" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
div with display:inline-table; box-sizing: border-box;
|
||||
</div>
|
||||
<div>
|
||||
<div class="t inline" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
div with display:inline-table;box-sizing: content-box</div>
|
||||
</main>
|
||||
<script>
|
||||
checkLayout(".t");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!doctype html>
|
||||
<title>TD box sizing</title>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<link rel='stylesheet' href='../support/base.css' />
|
||||
<link rel='stylesheet' href='/fonts/ahem.css' />
|
||||
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-cell-measures" />
|
||||
<style>
|
||||
main table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
main td {
|
||||
background: gray;
|
||||
width:100px;
|
||||
padding: 0;
|
||||
}
|
||||
.bb {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<p>Tests of intrinsic cell sizing wrt border/padding, and box-sizing.</p>
|
||||
<p>box-sizing: content-box; border px; padding px.
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-expected-width="100">
|
||||
<div style="width:50px;height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-width="120">
|
||||
<td data-expected-width="120" style="border:10px solid black">
|
||||
<div style="height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr data-expected-width="140">
|
||||
<td data-expected-width="140" style="border:10px solid black;padding: 10px">
|
||||
<div style="height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>box-sizing: border-box, border px, padding px.
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-expected-width="100" class="bb">
|
||||
<div style="height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-expected-width="100" class="bb" style="border:10px solid black" >
|
||||
<div style="height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-expected-width="100" class="bb" style="border:10px solid black;padding: 10px">
|
||||
<div style="height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>box-sizing: border-box;padding: px, width px</p>
|
||||
<li>td's intrinsic width must be >= border + padding</li>
|
||||
|
||||
<table style="width:300px;table-layout:fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="box-sizing:border-box;padding-left:50px;padding-right:50px;width:30px" data-expected-width=100></td>
|
||||
<td>auto</td>
|
||||
<td>auto</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>box-sizing: border-box; border px; padding %.</p>
|
||||
<li>intrinsic size of % padding is 0.
|
||||
<li>final size of % padding is computed against table's width.
|
||||
<table data-expected-width="240">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-expected-width="120" style="border:10px solid black;padding: 30%">
|
||||
<div data-offset-x="72" data-offset-y="72" style="width:50px;height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
<td style="border:10px solid black;padding: 30%">
|
||||
<div style="width:50px;height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table data-expected-width="300">
|
||||
<caption><div style="width:300px;background:#ddd">300px caption</div></caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-expected-width="150" style="border:10px solid black;padding: 30%">
|
||||
<div data-offset-x="90" data-offset-y="90" style="width:50px;height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
<td style="border:10px solid black;padding: 30%">
|
||||
<div style="width:50px;height:50px;background:yellow">0,0</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Block percentage resolution of TD children + row fixed height during intrinsic pass</p>
|
||||
<li>Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.</li>
|
||||
<li>FF uses row height as %ge resolution size.</li>
|
||||
<li>Proposal: file an issue on what is the right thing to do.</li>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="height:100px;font: 50px/1 Ahem;" id="cell" data-expected-height="100">
|
||||
y<div style="display:inline-block;height:100%;width:50px;background:yellow"
|
||||
data-expected-height="100"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr style="height:100px">
|
||||
<td style="font: 50px/1 Ahem;" id="cell" data-expected-height="100">
|
||||
y<div style="display:inline-block;height:100%;width:50px;background:yellow" data-expected-height="0"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</main>
|
||||
<script>
|
||||
checkLayout("table");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">
|
||||
<style>
|
||||
main table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
main td {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: gray;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>Visibility collapse and overflow</h1>
|
||||
<p>Collapsed row should not contribute to overflow</p>
|
||||
<div id="row" style="overflow-y: auto; width: 200px; height: 100px;border:1px solid black;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="visibility: collapse">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>Collapsed section should not contribute to overflow</p>
|
||||
<div id="section" style="overflow-y: auto; width: 200px; height: 50px;border:1px solid black;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody style="visibility:collapse">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
test( _ => {
|
||||
assert_equals(document.querySelector("#row").scrollHeight, 100);
|
||||
}, "collapsed row should not contribute to overflow");
|
||||
test( _ => {
|
||||
assert_equals(document.querySelector("#section").scrollHeight, 50);
|
||||
}, "collapsed section should not contribute to overflow");
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1216308">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="If a table has visibility:hidden collapsed borders should not be painted.">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="width: 100px; background: green;">
|
||||
<table style="border: solid red 20px; border-collapse: collapse; width: 100px; height: 100px; box-sizing: border-box; visibility: hidden;">
|
||||
<td></td>
|
||||
</table>
|
||||
</table>
|
||||
Loading…
Add table
Add a link
Reference in a new issue