Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions

View file

@ -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=1364402">
<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; gap:0; width:100px; height:100px; column-fill:auto; background:red;">
<div style="position:relative; overflow-y:clip; height:200px;">
<div style="position:absolute; columns:2; width:100%; gap:0; height:200px; column-fill:auto;">
<div style="height:300px; background:green;"></div>
</div>
<div style="height:100px;"></div>
<div style="margin-left:auto; width:50%; height:100px; background:green;"></div>
<div style="margin-left:auto; width:50%; height:1000px; background:red;"></div>
</div>
</div>

View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
On the first page

View file

@ -0,0 +1,6 @@
<!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=1339963">
<link rel="match" href="auto-fill-auto-size-001-print-ref.html">
<div style="columns:2; column-fill:auto; border:10px solid red; border-top:none; border-bottom:none;"></div>
On the first page

View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
body { margin: 0; }
</style>
<div style="height:150vh;"></div>
Middle of second page

View file

@ -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=1339963">
<link rel="match" href="auto-fill-auto-size-002-print-ref.html">
<style>
body { margin: 0; }
</style>
<div style="columns:2; column-fill:auto;">
<div style="height:250vh;"></div>
</div>
Middle of second page

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#filling-columns">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-within">
<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="width:100px; columns:2; column-gap:0; background:green;">
<div style="height:25px;"></div>
<div style="height:50px;"></div>
<div style="height:25px; break-before:avoid;"></div>
<div style="height:50px;"></div>
</div>

View file

@ -2,7 +2,7 @@
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1">
<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export">
<meta name="assert" content="According to the spec, a multicol container has no last baseline, only a first baseline. So, when aligning with an inline-block, the block-end outer edge of the multicol is what's used for alignment.">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
<link rel="match" href="baseline-008-ref.html">
<style>
.part {
@ -10,6 +10,7 @@
width: 50px;
height: 100px;
background: green;
color: transparent;
}
.multicol {
columns: 2;
@ -17,6 +18,8 @@
}
</style>
<p>There should be a green square below.</p>
<div class="part"></div><div class="part multicol">
<br>
<div class="part">
<div>line1<br>line2</div>
</div><div class="part multicol">
<div>line1<br>line2</div>
</div>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795">
<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 id="mc" style="columns:2; column-gap:0; column-fill:auto; width:100px; height:150px; background:red;">
<div style="height:200px; background:green;"></div>
</div>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
mc.style.height = "100px";
document.documentElement.classList.remove("reftest-wait");
});
});
</script>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Writing Modes Test: 'column-fill: balance' of a vertical writing mode block in orthogonal context</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css3-multicol/#cf">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#auto-multicol">
<link rel="match" href="reference/column-fill-balance-orthog-block-001-ref.html">
<!--
Issue 719014: column-fill: balance of a vertical block in orthogonal context incorrectly rendered
https://bugs.chromium.org/p/chromium/issues/detail?id=719014
-->
<meta content="" name="flags">
<meta name="assert" content="This test checks if a multi-column container with 'column-fill' set to 'balance' will not break an unbreakable run of text and will honor min-content inline size of a block that has its writing mode set to 'vertical-rl'. In this test, the word 'TEXT' should not break, even if div#multi-col's 'height' is set to '49px'.">
<style>
div#multi-col
{
background-color: yellow; /* Not part of the test */
columns: 2 auto;
column-fill: balance; /* Balance content equally between columns, if possible. */
height: 250px; /* more than enough to display "TEXT" */
}
div#unbreakable-block
{
background-color: lime; /* Not part of the test */
font-size: 50px;
line-height: 1.2; /* Not part of the test */
writing-mode: vertical-rl;
}
</style>
<p>Test passes if the word "TEXT" is unbroken and rotated 90 degrees clock-wise.
<div id="multi-col">
<div id="unbreakable-block">TEXT</div>
</div>

View file

@ -0,0 +1,6 @@
<!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=1349884">
<div style="display:grid; justify-items:baseline;">
<div style="columns:0px; gap:100%;"></div>
</div>

View file

@ -0,0 +1,13 @@
<!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=1372653">
<div style="columns:2;">
<div>
<div style="display:flow-root;"></div>
<div style="break-before:column; margin-bottom:100px;"></div>
</div>
<div>
<div style="display:flow-root;"></div>
<div style="break-before:column;"></div>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1377673">
<style>
html { columns:2; }
</style>
<div style="height:100px;"></div>
<script>
document.body.offsetTop;
document.body.style.columnSpan = "all";
document.documentElement.style.writingMode = "vertical-rl";
</script>

View file

@ -0,0 +1,12 @@
<!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=1375029">
<div style="columns:5; column-fill:auto; height:10px;">
<div style="display:table;">
<div style="display:table-caption;">
<div style="height:1px;"></div>
<div style="height:11px; contain:size;"></div>
</div>
<div style="display:table-caption; columns:2; column-fill:auto; height:1px;"></div>
</div>
</div>

View file

@ -0,0 +1,19 @@
<!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=1293905">
<div style="columns:1;">
<div style="columns:1; position:absolute;">
<div style="position:absolute;">
<div style="position:fixed;"></div>
<div style="appearance:searchfield; columns:1; background-image:url(not-found); width:100px; height:100px;"></div>
</div>
<div id="boo" style="display:none;"></div>
</div>
</div>
<script>
document.body.offsetTop;
function boom() {
boo.style.display = "block";
}
window.addEventListener("load", boom);
</script>

View file

@ -0,0 +1,12 @@
<!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=1297118">
<div style="columns:2;">
<div style="columns:2;">
<div style="column-span:all;">
<span style="position:relative;">
<div style="display:flex; float:right;"></div>
</span>
</div>
</div>
</div>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1301281">
<div style="columns:2; column-fill:auto; height:30px; line-height:20px; width:fit-content;">
<span><span id="first"></span><input style="float:right; padding:3%;"></span>
</div>
<script>
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
first.innerHTML = "D";
document.body.offsetTop;
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
document.body.style.color = "blue";
document.documentElement.classList.remove("reftest-wait");
});
});
});
});
</script>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1303256">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="break-inside:avoid; width:100px; height:100px;"></div>
<div style="columns:2; column-fill:auto; height:50px;">
<div style="columns:2; margin:8px; column-fill:auto; height:1px;"></div>
<div style="columns:2; column-fill:auto; height:1px;"></div>
</div>
</div>

View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314866">
<div style="columns:2; line-height:1px;">
<div style="columns:2; column-fill:auto; height:20px; padding-top:9px;">x</div>
</div>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<body style="columns: 1;">
<div style="display: inline-block; position: relative;">
<div style="position: absolute;">
<div id="target"></div>
</div>
<div style="break-before: column;"></div>
</div>
</body>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '10px';
</script>

View file

@ -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=1308960">
<div style="columns:2; width:100px;">
<div style="width:min-content;">
<div style="column-span:all;"></div>
<div style="height:50px; overflow:auto;">
<div style="width:100px; height:100px;"></div>
</div>
</div>
</div>

View file

@ -0,0 +1,13 @@
<!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=1373409">
<div style="columns:2;">
<div id="elm" style="margin-bottom:100px; float:left;">
<div style="column-span:all;"></div>
<div style="column-span:all;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.cssFloat = "none";
</script>

View file

@ -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=1317656">
<div style="columns:2;">
<div>
<div id="elm" style="float:left;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.cssFloat = "none";
elm.style.columnSpan = "all";
document.body.offsetTop;
elm.style.display = "none";
</script>

View file

@ -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=1322319">
<div style="columns:2;">
<div style="columns:2; position:relative; column-fill:auto; height:10px;">
<div style="position:absolute;">
<div></div>
<div style="break-before:column;"></div>
</div>
</div>
</div>

View file

@ -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=1322319">
<div style="columns:2;">
<div style="position:relative; height:10px;">
<div style="position:absolute;">
<div style="height:1px;"></div>
<div style="break-before:column;"></div>
</div>
</div>
</div>

View file

@ -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=1309859">
<div style="columns:2;">
<div style="height:10px;"></div>
<span>
<div style="height:20px;">
<div style="display:inline-block; width:10px; height:50px;"></div>
<div>
<div style="column-span:all;"></div>
</div>
</div>
</span>
<div style="columns:2; height:100px; float:left;"></div>
</div>

View file

@ -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=1380371">
<div style="columns:3; column-fill:auto; height:106px;">
<div style="margin-top:10px;">
<div style="float:left; width:10px; padding-bottom:100px;"></div>
<div style="column-span:all;"></div>
</div>
</div>

View file

@ -0,0 +1,16 @@
<!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=1322739">
<div id="container">
<div id="mc" style="height:100px; columns:2; column-fill:auto; line-height:20px; orphans:1; widows:1;">
<br><br><br><br><br><br>
</div>
</div>
<script>
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
mc.style.height = "80px";
container.setAttribute("ontouchstart", "nonValidFunctionName()");
});
});
</script>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<style type="text/css">
body {
column-count: 5
}
</style>
<body>
aaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaa
<time><header><id>a
<p><div style="float: left"></div>aaaaa</p>
a<menu></menu>aaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaa
</body>

View file

@ -0,0 +1,10 @@
<!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=1314492">
<div style="columns:2;">
<div style="position:absolute; contain:size;">
<div style="columns:2;">
<div style="position:absolute;"></div>
</div>
</div>
</div>

View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div style="columns: 2;">
<div style="margin: -100px; column-span: all;"></div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1308080">
<div id="outer" style="columns:3; width:500px; height:200px; column-fill:auto;">
<legend style="columns:1;">
<div style="width:100px; height:100px;"></div>
</legend>
</div>
<script>
document.body.offsetTop;
outer.style.width = "501px";
</script>

View file

@ -0,0 +1,12 @@
<!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=1308024">
<div id="outer" style="columns:3; width:500px;">
<legend style="columns:1;">
<div style="width:100px; height:100px;"></div>
</legend>
</div>
<script>
document.body.offsetTop;
outer.style.width = "501px";
</script>

View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1322125">
<div style="columns:2; column-fill:auto; height:99px;">
<div style="float:left; margin-top:100px; column-fill:auto; height:10px;"></div>
</div>

View file

@ -0,0 +1,7 @@
<!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=1289532">
<div style="columns:4; column-fill:auto; height:40px;">
<div style="float:left; width:100%; height:100px; padding-bottom:3000px;"></div>
<div style="float:left; columns:1; column-fill:auto; width:100%; height:100px;"></div>
</div>

View file

@ -0,0 +1,7 @@
<!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=1289532">
<div style="columns:4; column-fill:auto; height:100px;">
<div style="float:left; height:10px; padding-bottom:100px; width:100%;"></div>
<div style="columns:2; column-fill:auto; height:200px; width:100%;"></div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1323250">
<div style="columns:2; height:100px; column-fill:auto;">
<div style="height:10px;"></div>
<div style="columns:1; height:100px; column-fill:auto;">
<fieldset style="height:100px; border:none; padding:0; margin:0; border:1px solid; padding-bottom:19px;">
<legend style="padding:0; margin:0;"></legend>
<div></div>
</fieldset>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1318137">
<div style="columns:2; height:100px; column-fill:auto;">
<div style="height:10px;"></div>
<div style="columns:1; height:100px; column-fill:auto;">
<fieldset style="height:100px; border:none; padding:0; margin:0; padding-top:1px; padding-bottom:20px;">
<legend></legend>
x
</fieldset>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1339391">
<div style="columns:2;">
<svg>
<foreignObject>
<div style="columns:2;">
<div style="height:100px;"></div>
</div>
</foreignObject>
</svg>
</div>

View file

@ -0,0 +1,13 @@
<!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=1376859">
<div style="columns:3; column-fill:auto; height:20px;">
<div style="height:10px;"></div>
<div style="display:flex;">
<div style="display:flex; margin-top:15px;">
<div>
<div style="columns:2;"></div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,10 @@
<!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=1303662">
<div style="columns:3; column-fill:auto; height:100px;">
<div style="height:70px;"></div>
<div style="float:left; break-inside:avoid; width:100%; height:200px;"></div>
<div style="columns:1; column-fill:auto; width:100%; height:50px;">
<div style="height:40px;"></div>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1306582">
<div style="columns:4; column-fill:auto; height:100px;">
<div style="position:relative;">
<div style="height:90px;"></div>
<div style="position:absolute; columns:1; column-fill:auto; width:10px; height:95px;">
<div style="height:95px; contain:size;"></div>
</div>
<div style="position:absolute; width:1px; height:100px;"></div>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1302323">
<div style="columns:1; column-fill:auto; height:100px;">
<div style="position:relative;">
<div style="position:absolute; columns:1;">
<div style="position:relative; margin-top:101px;">
<div style="position:absolute; margin-top:101px;"></div>
</div>
</div>
</div>
</div>

View file

@ -1,9 +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=1280624">
<p>PASS if no freeze or crash.</p>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1306582">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="margin-top:10px; float:right; columns:2; column-fill:auto; width:100%;">
<div style="height:100px; contain:size;"></div>
<div style="position:relative;">
<div style="height:90px;"></div>
<div style="position:absolute; columns:2; padding-top:40px;"></div>
</div>
</div>

View file

@ -0,0 +1,10 @@
<!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=1321365">
<div style="columns:2; column-fill:auto; height:20px;">
<div style="height:20px;"></div>
<div style="columns:1;">
<div style="column-span:all; margin-bottom:-3px;"></div>
<div style="height:10px;"></div>
</div>
</div>

View file

@ -0,0 +1,13 @@
<!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=1311398">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="height:101px;"></div>
<div style="position:relative;">
<div style="columns:2; column-fill:auto;">
<div style="position:absolute; top:-50px;">
<div style="height:100px;"></div>
</div>
</div>
</div>
</div>

View file

@ -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=1347141">
<div style="columns:3; column-fill:auto; height:100px;">
<div style="height:100px;"></div>
<div style="display:table;">
<div style="display:table-caption; columns:2;">
Blargh, I'm dead!
</div>
</div>
</div>

View file

@ -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=1347322">
<div style="columns:2;">
<div style="columns:2; margin-top:8px;">
text
<div style="display:table-cell; columns:2;"></div>
</div>
</div>

View file

@ -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=1303905">
<div id="outer" style="columns:2; column-fill:auto; height:20px; width:100px;">
<div style="position:relative; columns:2; column-fill:auto;">
<div style="width:10px; position:relative;">
<div style="position:absolute; right:0; bottom:0;"></div>
</div>
<div style="position:absolute;"></div>
</div>
</div>
<script>
document.body.offsetTop;
outer.style.width = "101px";
</script>

View file

@ -0,0 +1,10 @@
<!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=1302592">
<div style="columns:2;">
<div style="columns:2; width:100%;">
<div style="position:relative;">
<div style="position:absolute;"></div>
</div>
</div>
</div>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295998">
<div id="outer" style="columns:2; column-fill:auto; height:50px;">
<div id="inner" style="columns:2; padding-top:51px; column-fill:auto; height:1px;">
<div style="position:absolute;"></div>
</div>
</div>

View file

@ -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=1308937">
<div style="columns:2; height:100px;">
<div style="columns:2; padding-top:101px;">
<div style="column-span:all;"></div>
<div></div>
</div>
</div>

View file

@ -0,0 +1,6 @@
<!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=1308937">
<div style="columns:2; height:100px;">
<div style="columns:2; padding-top:101px;"></div>
</div>

View file

@ -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=1317656">
<div style="columns:2;">
<div>
<div id="elm" style="position:absolute;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.position = "static";
elm.style.columnSpan = "all";
document.body.offsetTop;
elm.style.display = "none";
</script>

View file

@ -0,0 +1,12 @@
<!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=1307990">
<div style="columns:3; column-fill:auto; height:100px; line-height:20px; orphans:1; widows:1;">
<br>
<div style="columns:2; float:left; height:20px; column-fill:auto;">
<div style="position:relative;">
<br>
<div style="position:absolute; width:100%; height:10px;"></div>
</div>
</div>
</div>

View file

@ -0,0 +1,14 @@
<!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=1320787">
<div style="columns:3; height:30px; column-fill:auto; width:500px;">
<div style="position:relative; columns:2; height:20px; column-fill:auto; width:5px;">
<div style="position:absolute; height:200px; width:4px;">
<div style="columns:2; position:absolute; column-fill:auto; height:114px; width:3px;">
<div style="position:relative; width:2px;">
<div style="position:absolute; width:1px; height:50px;"></div>
</div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,14 @@
<!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=1374625">
<div style="columns:2; column-fill:auto; outline-style:auto; height:100px;">
<div style="position:relative;">
<div id="dings" style="position:absolute; height:120px; left:10px;">
<span style="border:solid;">a</span>
</div>
</div>
</div>
<script>
document.body.offsetTop;
dings.style.left = "11px";
</script>

View file

@ -0,0 +1,14 @@
<!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=1296900">
<div id="outer" style="columns:1; column-fill:auto; width:333px; height:100px;">
<div style="columns:1; column-fill:auto; width:100px; height:50px;">
<div style="position:relative;">
<div style="position:absolute; padding-left:1px; padding-bottom:10px;"></div>
</div>
</div>
</div>
<script>
document.body.offsetTop;
outer.style.width = "334px";
</script>

View file

@ -0,0 +1,14 @@
<!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=1308071">
<div style="columns:2;">
<span style="position:relative;">
<div style="position:absolute;"></div>
</span>
<div id="surprise" style="display:none;"></div>
<span></span>
</div>
<script>
document.body.offsetTop;
surprise.style.display = "block";
</script>

View file

@ -0,0 +1,14 @@
<!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=1333166">
<div style="columns:2;">
<div id="trouble" style="column-span:all; position:relative;">
<div style="column-span:all;"></div>
</div>
<div></div>
</div>
<script>
document.body.offsetTop;
trouble.style.columnSpan = "none";
trouble.style.position = "static";
</script>

View file

@ -0,0 +1,16 @@
<!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=1308253">
<style>
#mc { columns: 2; }
#mc div { column-span: all; }
</style>
<div id="mc">
<span><div></div></span><div id="removeme"></div><span id="removemetoo"></span><div></div>
</div>
<script>
document.body.offsetTop;
removeme.style.display = "none";
document.body.offsetTop;
removemetoo.style.display = "none";
</script>

View file

@ -0,0 +1,18 @@
<!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=1379635">
<div style="columns:1;">
<div style="columns:2; display:table-caption;">
<div style="width:10px;">
<div style="height:100px;">
<div style="height:1px;"></div>
<div style="break-before:column;"></div>
</div>
<div id="e52" style="overflow:hidden; column-span:all;"></div>
</div>
</div>
</div>
<script>
document.body.offsetTop;
e52.style.display = "none";
</script>

View file

@ -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=1348774">
<div style="columns:2; column-fill:auto; height:160px; background:yellow;">
<div style="display:table;">
<div style="display:table;">
<div style="contain:size; height:150px;"></div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="columns:2;">
x AAAAAAAAAAAAAAAAAAAA x
</div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1354966">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="display:table;">
<div style="display:table-caption; columns:2; column-fill:auto; height:50px;">
<div style="display:table;">
<div style="display:table-footer-group; break-inside:avoid;"></div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,10 @@
<!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=1334885">
<div style="columns:2;">
<!-- Add a table, as an attempt to trigger legacy layout fallback. -->
<div style="display:table;"></div>
<div style="columns:2;">
<div style="overflow:scroll; column-span:all;"></div>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1348714">
<div id="container" style="width:fit-content; container-type:size;">
<span></span>
<span id="boo" style="display:none;"></span>
</div>
<script>
document.body.offsetTop;
container.style.columnCount = "2";
boo.style.display = "inline";
</script>

View file

@ -0,0 +1,13 @@
<!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=1309859">
<div style="columns:2; column-fill:auto; height:400px;">
<div style="height:10px;"></div>
<div style="height:20px;">
<div style="display:inline-block; width:10px; height:50px;"></div>
<div>
<div style="column-span:all;"></div>
</div>
</div>
<div style="columns:2; height:100px; float:left;"></div>
</div>

View file

@ -0,0 +1,14 @@
<!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=1314998">
<div style="columns:10; height:100px; column-fill:auto; line-height:20px; orphans:1; widows:1;">
<div style="height:0; padding-bottom:100px;">
<div style="height:350px;"></div>
<div style="column-span:all; padding-bottom: 100px;"></div>
</div>
<div style="width:1px;">
<br>
<div style="display:inline-block; columns:2; height:100px; column-fill:auto;"></div>
x
</div>
</div>

View file

@ -0,0 +1,7 @@
<!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=1296897">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="column-span:all;"></div>
<div style="position:absolute;"></div>
</div>

View file

@ -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=1224888">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="position:sticky; left:0;">
<div style="position:absolute;">
<div style="break-after:column;"></div>
<div style="position:sticky; backface-visibility:hidden; left:0; width:100px; height:100px;"></div>
</div>
</div>
</div>

View file

@ -0,0 +1,16 @@
<!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=1347713">
<div style="columns:2;">
<div style="display:table-caption; columns:2;">
<div style="columns:2;">
<div style="position:relative;">
<div id="foo" style="position:absolute;"></div>
</div>
</div>
</div>
</div>
<script>
document.body.offsetTop;
foo.style.display = "flex";
</script>

View file

@ -0,0 +1,19 @@
<!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=1347868">
<div style="columns:2; column-fill:auto; height:500px;">
<table>
<caption>
<div style="display:inline-block;">
<div style="writing-mode:vertical-lr;">
<div id="elm" style="display:inline-block;"></div>
<div style="display:inline-block; overflow:auto;"></div>
</div>
</div>
</caption>
</table>
</div>
<script>
document.body.offsetTop;
elm.style.display = "none";
</script>

View file

@ -0,0 +1,10 @@
<!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=1174687">
<div style="display:table-cell; writing-mode:vertical-lr; columns:2;">
<span id="surprise" style="display:none;">x</span>
</div>
<script>
document.body.offsetTop;
surprise.style.display = "inline";
</script>

View file

@ -0,0 +1,10 @@
<!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=1310489">
<div style="columns:2;">
<div style="padding-bottom:12px;">
<div style="column-span:all;"></div>
</div>
<div style="column-span:all;"></div>
<div></div>
</div>

View file

@ -0,0 +1,6 @@
<!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=1308191">
<div style="columns:1; writing-mode:vertical-rl; column-rule:solid; column-fill:auto; block-size:100px;">
<div style="inline-size:1234567890px; block-size:500px;"></div>
</div>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
<link rel="help" href="https://crbug.com/1308752">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div style="column-count: 2; width: 200px; height: 100px">
<div style="perspective: 100px">
<div id="child1" style="height: 100px; position: relative"></div>
<div id="child2" style="height: 100px; position: relative"></div>
</div>
</div>
<script>
test(()=> {
assert_equals(document.elementFromPoint(50, 50), child1);
assert_equals(document.elementFromPoint(150, 50), child2);
}, "test");
</script>

View file

@ -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-multicol-1/#cf">
<div id="mc" style="columns:2; column-gap:0; width:100px; orphans:1; widows:1; line-height:20px;">
<span>
<div style="height:200px;"></div>
</span>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(mc.offsetHeight, 100);
}, "Breakable block inside inline");
</script>

View file

@ -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=1289800">
<div id="mc" style="overflow-x:scroll; columns:2; width:100px; column-fill:auto; height:20000000px;">
<div style="columns:1;">
<div style="height:100px;"></div>
<div style="height:1234567890px;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
// There should be two columns, i.e. no overflow.
assert_equals(mc.scrollWidth, 100);
}, "Nested balanced multicol with very tall content");
</script>

View file

@ -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-multicol-1/#cf">
<div id="mc" style="columns:4; line-height:0;">
<ruby>
<div style="display:inline-block; width:10px; height:50px;"></div>
<rt>
<div style="display:inline-block; width:10px; height:50px;"></div>
</rt>
</ruby>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(mc.offsetHeight, 100);
}, "Ruby text should affect column height");
</script>

View file

@ -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-multicol-1/#cf">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308024">
<div id="outer" style="columns:2;">
<div id="inner" style="columns:2; border-top:solid 3px;">
<div style="height:97px; contain:size;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(outer.offsetHeight, 100);
}, "Nested balancing outer height");
test(()=> {
assert_equals(inner.offsetHeight, 100);
}, "Nested balancing inner height");
</script>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<div id="multicol" style="columns:4;">
<div style="height:0;">
<div style="height:20px;"></div>
<div style="break-before:column; height:10px;"></div>
<div style="break-before:column; height:10px;"></div>
<div style="column-span:all; height:10px;"></div>
</div>
<div style="height:320px;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(multicol.offsetHeight, 100);
}, "Spanner in overflowed parent with forced breaks");
</script>

View file

@ -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-multicol-1/#cf">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336291">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.hidden { display:none; }
#mc > div { height:25px; contain:size; background:green;}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="mc" style="columns:2; gap:0; width:100px; background:red;">
<div></div>
<div></div>
<div></div>
<div></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
</div>
<script>
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
for (let e of document.getElementsByClassName('hidden'))
e.style.display = "block";
});
});
</script>

View file

@ -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-multicol-1/#cf">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1372653">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1376486">
<div id="multicol" style="columns:3;">
<div style="float:left; width:100px;">
<div style="height:20px;"></div>
<div style="break-before:column; height:50px;"></div>
</div>
<div style="clear:both; height:150px;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(multicol.offsetHeight, 100);
}, "Clearance after float with forced break inside");
</script>

View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963">
<link rel="match" href="../reference/nothing.html">
<p>There should be nothing below.</p>
<div style="columns:2; column-fill:auto; height:100px;">
<div style="columns:2; column-fill:auto; background:red;"></div>
</div>

View file

@ -0,0 +1,14 @@
<!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=1339963">
<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; gap:0; column-fill:auto; width:100px; height:100px;">
<div style="columns:2; gap:0; column-fill:auto; background:red;">
<div style="height:150px;">
<div style="height:150px; background:green;"></div>
<div style="width:200%; height:100px; background:green;"></div>
</div>
</div>
<div style="height:50px; background:green;"></div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1339963">
<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; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; min-height:75px; background:green;">
<div style="height:50px;"></div>
</div>
<div style="height:25px; background:green;"></div>
<div style="break-inside:avoid; height:100px; background:green;"></div>
</div>

View file

@ -0,0 +1,12 @@
<!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=1339963">
<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="columns:2; gap:0; column-fill:auto; min-height:125px; background:green;">
<div style="height:205px;"></div>
</div>
<div style="break-inside:avoid; height:75px; background:green;"></div>
<div style="break-inside:avoid; height:200px; background:green;"></div>
</div>

View file

@ -9,6 +9,7 @@
<meta name="flags" content="ahem" />
<meta name="assert" content="Tests that the dashed value of column-rule-style is correctly rendered when used in the shorthand column-rule property." />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<meta name="fuzzy" content="maxDifference=0-85; totalPixels=0-20" />
<style type="text/css"><![CDATA[
div
{

View file

@ -1,33 +1,53 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the position of the out-of-flow block is relative to the fragment divided by column-span:all</title>
<title>CSS Multi-column Layout Test Reference: column-span:all does not create a spanner, inside an element establishing a containing block for fixed-position descendants</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
body {
column-count: 1;
article {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
width: 500px;
border: 1px solid black;
margin-bottom: 3px;
}
h3 {
/* "column-count: 1" makes this behave like a real spanner. */
outline: 1px solid blue;
}
.out-of-flow {
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<article id="column">
<h3>spanner</h3>
<article>
<div style="transform: scale(1)">
<div class="out-of-flow">out-of-flow</div>
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="filter: contrast(100%)">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: paint">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: layout">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: content">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: strict; width: 50px; height: 50px;">
<h3>n</h3>
</div>
</article>
</body>

View file

@ -1,39 +1,58 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the position of the out-of-flow block is relative to the later fragment divided by the column-span:all</title>
<title>CSS Multi-column Layout Test: column-span:all does not create a spanner, inside an element establishing a containing block for fixed-position descendants</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-010-ref.html">
<meta name="assert" content="This test checks the position of the out-of-flow block is relative to the latre fragment divided by the column-span:all.">
<meta name="assert" content="This test checks that column-span:all does not create a spanner, inside an element establishing a containing block for fixed-position descendants.">
<style>
article {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
width: 500px;
border: 1px solid black;
margin-bottom: 3px;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
.out-of-flow {
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<article id="column">
<!-- "transform" doesn't create a new block formatting context, so
column-span:all still works. -->
<article>
<div style="transform: scale(1)">
<h3>spanner</h3>
<div class="out-of-flow">out-of-flow</div>
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="filter: contrast(100%)">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: paint">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: layout">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: content">
<h3>non-spanner</h3>
</div>
</article>
<article>
<div style="contain: strict; width: 50px; height: 50px;">
<h3>n</h3>
</div>
</article>
</body>

View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6805">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Test that column-span all inside a transform doesn't create a spanner">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;">

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.ib {
display: inline-block;
vertical-align: top;
width: 100%;
height: 50px;
background: green;
}
</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:10; width:100px; gap:0; orphans:1; widows:1;">
<div style="height:250px;">
<div style="height:1000px;"></div>
<div style="column-span:all; margin-top:-100px; height:50px; background:green;"></div>
</div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
</div>
</div>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.ib {
display: inline-block;
vertical-align: top;
width: 100%;
height: 50px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:10; width:100px; gap:0; orphans:1; widows:1; background:red;">
<span>
<div style="height:150px;">
<div style="height:1000px;"></div>
<div style="column-span:all; margin-top:-100px; height:50px; background:green;"></div>
</div>
</span>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
<div class="ib"></div>
</div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<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; width:100px; background:red;">
<div style="height:40px; background:green;">
<div style="height:140px;"></div>
<div style="height:60px; background:green;"></div>
</div>
<div style="height:100px; background:green;"></div>
<div style="height:60px;"></div>
<div style="column-span:all; height:50px; background:green;"></div>
</div>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<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:2; gap:0;">
<div style="height:0;">
<div style="height:60px; background:green;"></div>
<div style="column-span:all; height:50px; background:green;"></div>
</div>
<div style="position:relative; height:40px;">
<div style="position:absolute; left:0; top:0; width:100%; height:40px; background:green;"></div>
</div>
</div>
</div>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<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;">
<div style="height:20px; background:green;">
<div style="height:40px;"></div>
<div style="height:160px; background:green;"></div>
</div>
<div style="height:20px; background:green;"></div>
<div style="column-span:all; height:50px; background:green;"></div>
</div>
</div>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Reference: Test an unbreakble block element in a zero height multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.child {
font: 100px/1 Ahem;
color: green;
inline-size: 100px;
outline: 3px solid green;
}
</style>
<p>There shouldn't be a green strip in the second column.</p>
<div class="child">X</div>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Test: Test an unbreakble block element in a zero height multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1754598">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="match" href="multicol-zero-height-002-ref.html">
<meta name="assert" content="This test verifies that the unbreakable block element with definite block-size doesn't ask for an extra continuation in the second column.">
<style>
.multicol {
column-width: 100px;
inline-size: 300px;
block-size: 0;
}
.child {
font: 100px/1 Ahem;
color: green;
inline-size: 100px;
block-size: 100px; /* The define block-size is required to reproduce the bug.*/
outline: 3px solid green;
}
</style>
<p>There shouldn't be a green strip in the second column.</p>
<div class="multicol">
<div class="child">X</div>
</div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Reference: Test a block element with box-decoration-break:clone in a zero height multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
.multicol {
column-width: 100px;
inline-size: 300px;
block-size: 30px;
}
.child {
color: green;
inline-size: 100px;
block-size: 1px;
border: 5px solid green;
}
</style>
<p>There shouldn't be a green strip in the third column.</p>
<div class="multicol">
<div class="child"></div><div class="child"></div>
</div>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Test: Test a block element with box-decoration-break:clone in a zero height multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#breaking-rules">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1693616">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1754598">
<link rel="match" href="multicol-zero-height-003-ref.html">
<meta name="assert" content="This test verifies that a block element with box-decoration-break:clone can make progress when fragmenting in a zero height multi-column container. Also, it should expend 1px of its content-box per fragment, and therefore should only need to create 2 fragments.">
<style>
.multicol {
column-width: 100px;
inline-size: 300px;
block-size: 0;
}
.child {
color: green;
inline-size: 100px;
block-size: 2px;
border: 5px solid green;
box-decoration-break: clone;
}
</style>
<!-- WARNING: This test hangs Firefox version < 99 without the fix in bug 1754598. -->
<p>There shouldn't be a green strip in the third column.</p>
<div class="multicol">
<div class="child"></div>
</div>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-clear">
<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-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="float:left; width:100%; height:200px; background:green;"></div>
<div style="clear:left; columns:2; column-fill:auto; height:200px; background:green;"></div>
</div>

Some files were not shown because too many files have changed in this diff Show more