mirror of
https://github.com/servo/servo.git
synced 2025-08-09 15:35:34 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table; width:100%;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="position:relative; top:-5px; left:-5px; contain:size; width:50px; height:20px;">
|
||||
<div style="position:absolute; top:5px; left:5px; width:50px; height:20px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:160px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<p>The word PASS should be seen <em>once</em> below.</p>
|
||||
PASS
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="abspos-uncontained-text-ref.html">
|
||||
<p>The word PASS should be seen <em>once</em> below.</p>
|
||||
<div style="columns:4; column-fill:auto; gap:0; width:100px; height:100px;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px;">
|
||||
<div style="position:absolute;">PASS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; overflow:hidden; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="position:absolute; width:10px; height:20px; background:green;"></div>
|
||||
<div style="margin-left:10px; width:25px; height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="position:relative; display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px;">
|
||||
<div style="position:absolute; width:25px; height:20px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<p>There should be 6 small blue squares below.</p>
|
||||
<div style="width:300px;">
|
||||
<div style="float:left; width:50px;">
|
||||
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:50px;">
|
||||
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:50px;">
|
||||
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:50px;">
|
||||
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:50px;">
|
||||
<div style="margin-top:50px; width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:50px;">
|
||||
<div style="margin-top:50px; width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378657">
|
||||
<link rel="match" href="balanced-inner-multicol-ref.html">
|
||||
<p>There should be 6 small blue squares below.</p>
|
||||
<div style="columns:3; gap:0; column-fill:auto; width:300px; height:100px;">
|
||||
<div style="columns:2; gap:0; max-height:260px;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:10px; height:10px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="height:460px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="position:relative; top:5px; left:5px; display:table-header-group; break-inside:avoid;">
|
||||
<span style="position:relative; left:5px; top:5px;">
|
||||
<div style="position:relative; left:-10px; top:-10px; width:100%; height:20px; background:green;"></div>
|
||||
</span>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378661">
|
||||
<div style="columns:4; height:100px; column-fill:auto;">
|
||||
<div style="display:table; border-spacing:120px;">
|
||||
<div style="display:table-header-group; break-inside:avoid;"></div>
|
||||
<div style="height:140px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378661">
|
||||
<div style="columns:4; height:100px; column-fill:auto;">
|
||||
<div style="display:table; border-spacing:120px;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px;"></div>
|
||||
</div>
|
||||
<div style="height:140px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378661">
|
||||
<div style="columns:4; height:100px; column-fill:auto;">
|
||||
<div style="display:table; border-spacing:120px;">
|
||||
<div style="display:table-header-group; break-inside:avoid;"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1356236">
|
||||
<link rel="match" href="../../../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="width:100px; height:100px; background:red;">
|
||||
<div style="columns:4; column-fill:auto; gap:0; height:150px;">
|
||||
<div style="display:table; width:100%;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="height:80px; background:green;"></div>
|
||||
<div style="height:50px;"></div>
|
||||
<div style="height:80px; background:green;"></div>
|
||||
<div style="height:50px;"></div>
|
||||
<div style="height:30px; background:green;"></div>
|
||||
<div style="display:table-caption; caption-side:bottom;">
|
||||
<div style="contain:size; height:50px; background:green;"></div>
|
||||
<div style="contain:size; height:50px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-caption; caption-side:bottom; break-before:avoid;">
|
||||
<div style="contain:size; height:50px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-caption; caption-side:top; height:150px; background:green;"></div>
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:25px; height:20px; background:green;"></div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-caption; caption-side:bottom; height:150px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="width:100px; height:100px; background:red;">
|
||||
<div style="columns:4; gap:0; column-fill:auto; height:130px;">
|
||||
<div style="display:table; width:100%; border-top:20px solid green;">
|
||||
<div style="display:table-caption; height:230px;">
|
||||
<div style="height:100px; background:green;"></div>
|
||||
<div style="height:30px;"></div>
|
||||
<div style="height:100px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="height:200px;">
|
||||
<div style="height:60px; background:green;"></div>
|
||||
<div style="height:30px;"></div>
|
||||
<div style="height:80px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:25px; height:240px; background:green;"></div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
</style>
|
||||
<div style="columns:2; width:200px; gap:0; column-fill:auto; height:100px;">
|
||||
<div style="transform:translateX(30px);">
|
||||
<div id="table" style="display:table; width:100%;">
|
||||
<div id="header" style="display:table-header-group; break-inside:avoid;">
|
||||
<div id="hitme" style="position:relative; left:30px; width:20px; height:20px;"></div>
|
||||
</div>
|
||||
<div style="display:table-row; break-inside:avoid;">
|
||||
<div style="height:60px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-row; break-inside:avoid;">
|
||||
<div style="height:60px; background:blue;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> { assert_equals(document.elementFromPoint(59, 10), header); }, "before first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(70, 10), hitme); }, "first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(91, 10), header); }, "after first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(159, 10), header); }, "before second");
|
||||
test(()=> { assert_equals(document.elementFromPoint(170, 10), hitme); }, "second");
|
||||
test(()=> { assert_equals(document.elementFromPoint(181, 10), header); }, "after second");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
</style>
|
||||
<div style="columns:2; width:200px; gap:0; column-fill:auto; height:100px;">
|
||||
<div id="table" style="display:table; width:100%;">
|
||||
<div id="header" style="display:table-header-group; break-inside:avoid;">
|
||||
<div id="hitme" style="position:relative; left:30px; width:20px; height:20px;"></div>
|
||||
</div>
|
||||
<div style="display:table-row; break-inside:avoid;">
|
||||
<div style="height:60px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-row; break-inside:avoid;">
|
||||
<div style="height:60px; background:blue;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> { assert_equals(document.elementFromPoint(29, 10), header); }, "before first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(40, 10), hitme); }, "first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(61, 10), header); }, "after first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(129, 10), header); }, "before second");
|
||||
test(()=> { assert_equals(document.elementFromPoint(140, 10), hitme); }, "second");
|
||||
test(()=> { assert_equals(document.elementFromPoint(151, 10), header); }, "after second");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
</style>
|
||||
<div style="columns:2; width:200px; gap:0; column-fill:auto; height:100px;">
|
||||
<div id="table" style="display:table; width:100%;">
|
||||
<div id="header" style="display:table-header-group; break-inside:avoid;">
|
||||
<div id="hitme" style="width:20px; height:20px;"></div>
|
||||
</div>
|
||||
<div style="display:table-row; break-inside:avoid;">
|
||||
<div style="height:60px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-row; break-inside:avoid;">
|
||||
<div style="height:60px; background:blue;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> { assert_equals(document.elementFromPoint(10, 10), hitme); }, "first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(21, 10), header); }, "after first");
|
||||
test(()=> { assert_equals(document.elementFromPoint(99, 10), header); }, "before second");
|
||||
test(()=> { assert_equals(document.elementFromPoint(110, 10), hitme); }, "second");
|
||||
test(()=> { assert_equals(document.elementFromPoint(121, 10), header); }, "after second");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
display: table-header-group;
|
||||
break-inside: avoid;
|
||||
}
|
||||
.filler {
|
||||
display: table-row;
|
||||
break-inside: avoid;
|
||||
height: 350px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="width:100px; height:100px; background:red;">
|
||||
<div style="columns:4; gap:0; column-fill:auto; height:500px;">
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<!-- The image src is a 1x1 green pixel. -->
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
<div class="filler"></div>
|
||||
<div class="filler"></div>
|
||||
<div class="filler"></div>
|
||||
<div class="filler"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="display:inline-block; vertical-align:top; width:100%; height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="columns:5; height:20px; gap:0; background:red;">
|
||||
<div style="height:100px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:25px; height:320px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
|
||||
<div style="display:table; width:100%;">
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="height:10px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-row-group;">
|
||||
<div style="height:150px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-row-group;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-row-group;">
|
||||
<div style="height:90px; background:green;"></div>
|
||||
</div>
|
||||
<div style="display:table-row-group;">
|
||||
<div style="height:100px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336683">
|
||||
<style>
|
||||
thead { break-inside: avoid; }
|
||||
td { padding: 0; }
|
||||
table { border-spacing: 0; }
|
||||
</style>
|
||||
<p>PASS if no freeze.</p>
|
||||
<div style="columns:2; column-fill:auto; height:700px;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="columns:2; column-fill:auto; height:120px; background:yellow;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="width:50px; height:20px; background:hotpink;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr><td style="height:100px;"></td></tr>
|
||||
<tr><td style="height:100px;"></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr><td style="height:400px; background:blue;"></td></tr>
|
||||
<tr><td style="height:400px; background:orange;"></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
|
||||
<div style="position:absolute; width:25px; height:10px; background:green;"></div>
|
||||
<div style="display:table; width:100%; border-spacing:0 10px;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="height:10px;">
|
||||
<div style="height:20px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:table-row-group;">
|
||||
<div style="height:310px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
display: table-header-group;
|
||||
break-inside: avoid;
|
||||
}
|
||||
.filler {
|
||||
display: table-row;
|
||||
break-inside: avoid;
|
||||
height: 2600px;
|
||||
}
|
||||
.header > * {
|
||||
/* Don't make stuff too tall. We want everything (in the header) to be
|
||||
within the viewport. */
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
<div style="columns:3; column-fill:auto; width:600px; height:5000px;">
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<input type="text" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
|
||||
<input type="submit" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
|
||||
<input type="radio">
|
||||
<input type="checkbox">
|
||||
<input type="date">
|
||||
<input type="range">
|
||||
<input type="number">
|
||||
<input type="color">
|
||||
<input type="password">
|
||||
<canvas id="canvas" style="width:40px; height:40px;"></canvas>
|
||||
<iframe src="data:text/html,<div style='position:absolute; height:200px;'>x</div>" style="width:100px; height:40px;"></iframe>
|
||||
<div style="overflow:scroll; width:100px; height:30px;">
|
||||
<div style="height:200px;"></div>
|
||||
</div>
|
||||
<select size="0"><option>xxx</option></select>
|
||||
<select size="5"><option>xxx</option></select>
|
||||
<svg style="width:100px; height:30px;">
|
||||
<circle cx="20" cy="15" r="7" fill="hotpink"/>
|
||||
</svg>
|
||||
<textarea style="width:50px; height:30px;">
|
||||
xxxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxx
|
||||
</textarea>
|
||||
<video style="width:100px; height:50px;" controls></video>
|
||||
<video style="width:100px; height:50px;"></video>
|
||||
<meter></meter>
|
||||
<button>xxxxxx</button>
|
||||
<fieldset><legend>epic</legend></fieldset>
|
||||
<!-- The image src is a 1x1 green pixel. -->
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
<div class="filler"></div>
|
||||
<div class="filler"></div>
|
||||
<div class="filler"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = "hotpink";
|
||||
ctx.fillRect(0, 0, 50, 50);
|
||||
|
||||
function paintDone() {
|
||||
return new Promise(function(resolve) {
|
||||
requestAnimationFrame(()=> {
|
||||
requestAnimationFrame(()=> {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
async function toggleStyles(elements) {
|
||||
for (const display of ['block', 'inline-block', 'inline']) {
|
||||
for (const position of ['static', 'relative']) {
|
||||
for (const cssfloat of ['none', 'left']) {
|
||||
for (var elm of elements) {
|
||||
elm.style.display = display;
|
||||
elm.style.position = position;
|
||||
elm.style.cssFloat = cssfloat;
|
||||
}
|
||||
await paintDone();
|
||||
for (var elm of elements) {
|
||||
var rect = elm.getClientRects()[0];
|
||||
var x = rect.left;
|
||||
var y = rect.top;
|
||||
x += 2;
|
||||
y += 2;
|
||||
document.elementFromPoint(x, y);
|
||||
document.elementFromPoint(x + 200, y);
|
||||
document.elementFromPoint(x + 400, y);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toggleStyles(document.querySelectorAll(".header > *"));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378576">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
|
||||
<link rel="match" href="../../../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:flow-root; width:100px; height:100px; background:red;">
|
||||
<div style="columns:2; column-fill:auto; gap:0; margin-top:-20px; height:100px;">
|
||||
<div style="display:table; width:100%;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px;"></div>
|
||||
</div>
|
||||
<div style="contain:size; height:100px; background:green;"></div>
|
||||
<div style="contain:size; height:100px; background:green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<p>There should be three blue squares and three hotpink ones.</p>
|
||||
<div style="width:300px;">
|
||||
<div style="float:left; width:100px;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
<div style="margin-top:60px; width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:100px;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
<div style="margin-top:60px; width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:100px;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
<div style="margin-top:10px; width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294">
|
||||
<link rel="match" href="variable-fragmentainer-size-001-ref.html">
|
||||
<p>There should be three blue squares and three hotpink ones.</p>
|
||||
<!-- The first two inner fragmentainers are tall enough to allow a 20px tall
|
||||
table header / footer, but the last one isn't. -->
|
||||
<div style="columns:3; width:300px; gap:0; column-fill:auto; height:100px;">
|
||||
<div style="columns:1; column-fill:auto; height:250px;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="height:130px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<p>There should be one blue square and one hotpink one.</p>
|
||||
<div style="width:300px;">
|
||||
<div style="float:left; width:100px;">
|
||||
<div style="margin-top:50px; width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="float:left; width:100px; height:100px;"></div>
|
||||
<div style="float:left; width:100px;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294">
|
||||
<link rel="match" href="variable-fragmentainer-size-002-ref.html">
|
||||
<p>There should be one blue square and one hotpink one.</p>
|
||||
<!-- The first inner fragmentainer isn't tall enough to allow a 20px tall table
|
||||
header / footer, but the two other fragmentainers are. -->
|
||||
<div style="columns:3; width:300px; gap:0; column-fill:auto; height:100px;">
|
||||
<div style="height:50px;"></div>
|
||||
<div style="columns:1; column-fill:auto; height:250px;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="height:130px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294">
|
||||
<!-- All fragmentainers but the first just have room for the repeated headers
|
||||
and footers, and no room for regular, unrepeated, stuff. We should still
|
||||
fit 1px of unrepeated content in every fragmentainer, because that should
|
||||
be a sensible way of interpretating
|
||||
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
|
||||
assumed to have a minimum block size of 1px"). -->
|
||||
<div style="margin:100px; columns:4; column-fill:auto; height:40px; background:yellow;">
|
||||
<div style="margin-bottom:-60px;"></div>
|
||||
<div style="columns:1; column-fill:auto; background:lime;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="height:100px; background:black;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294">
|
||||
<!-- Only the first fragmentainer actually has room for repeated headers and
|
||||
footers. We should still fit 1px of unrepeated content in every
|
||||
fragmentainer, because that should be a sensible way of interpretating
|
||||
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
|
||||
assumed to have a minimum block size of 1px"). -->
|
||||
<div style="margin:100px; columns:4; column-fill:auto; height:30px; background:yellow;">
|
||||
<div style="margin-bottom:-60px;"></div>
|
||||
<div style="columns:1; column-fill:auto; background:lime;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="height:100px; background:black;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294">
|
||||
<!-- Only the first fragmentainer actually has room for repeated headers and
|
||||
footers. We should still fit 1px of unrepeated content in every
|
||||
fragmentainer, because that should be a sensible way of interpretating
|
||||
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
|
||||
assumed to have a minimum block size of 1px"). -->
|
||||
<div style="margin:100px; columns:4; column-fill:auto; height:20px; background:yellow;">
|
||||
<div style="margin-bottom:-60px;"></div>
|
||||
<div style="columns:1; column-fill:auto; background:lime;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="height:100px; background:black;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294">
|
||||
<!-- Only the first fragmentainer actually has room for repeated headers and
|
||||
footers. We should still fit 1px of unrepeated content in every
|
||||
fragmentainer, because that should be a sensible way of interpretating
|
||||
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
|
||||
assumed to have a minimum block size of 1px"). -->
|
||||
<div style="margin:100px; columns:4; column-fill:auto; height:10px; background:yellow;">
|
||||
<div style="margin-bottom:-60px;"></div>
|
||||
<div style="columns:1; column-fill:auto; background:lime;">
|
||||
<div style="display:table;">
|
||||
<div style="display:table-header-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:blue;"></div>
|
||||
</div>
|
||||
<div style="display:table-footer-group; break-inside:avoid;">
|
||||
<div style="width:20px; height:20px; background:hotpink;"></div>
|
||||
</div>
|
||||
<div style="height:100px; background:black;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue