Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 08:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

Browse source
This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 • committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
Download patch file Download diff file Expand all files Collapse all files

8
tests/wpt/web-platform-tests/css/css-break/abspos-in-opacity-000-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be a purple square below.</p>
<div style="width:100px; height:100px; background:blue;">
<div style="opacity:0.5;">
<div style="width:100px; height:100px; background:red;"></div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/abspos-in-opacity-000.html Normal file
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-break-3/">
<link rel="match" href="abspos-in-opacity-000-ref.html">
<p>There should be a purple square below.</p>
<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:blue;">
<div style="opacity:0.5;">
<div style="position:absolute; width:100px; height:100px; background:red;"></div>
</div>
</div>

8
tests/wpt/web-platform-tests/css/css-break/abspos-in-opacity-001-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be a purple square below.</p>
<div style="width:100px; height:100px; background:blue;">
<div style="opacity:0.5;">
<div style="width:100px; height:100px; background:red;"></div>
</div>
</div>

12
tests/wpt/web-platform-tests/css/css-break/abspos-in-opacity-001.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/">
<link rel="match" href="abspos-in-opacity-001-ref.html">
<p>There should be a purple square below.</p>
<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:blue;">
<div style="position:relative;">
<div style="opacity:0.5; height:200px;">
<div style="position:absolute; width:50px; height:200px; background:red;"></div>
</div>
</div>
</div>

70
tests/wpt/web-platform-tests/css/css-break/background-image-000-ref.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
.container {
writing-mode: horizontal-tb;
inline-size: 472px;
}
.mc {
display: flow-root;
block-size: 120px;
border: 1px solid;
margin-block-end: 20px;
background: yellow;
}
.column {
float: left;
inline-size: 150px;
block-size: 100%;
margin-inline-start: 10px;
}
.column:first-child {
margin-inline-start: 0;
}
</style>
<div class="container">
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) left top;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) left -120px;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) left -240px;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) right top;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) right -120px;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) right -240px;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) left 350px;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) left 230px;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) left bottom;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) right 350px;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) right 230px;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) right bottom;"></div>
</div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/background-image-000.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice">
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242">
<link rel="match" href="background-image-000-ref.html">
<style>
.container {
writing-mode: horizontal-tb;
inline-size: 472px;
}
.mc {
columns: 3;
column-gap: 10px;
column-fill: auto;
block-size: 120px;
border: 1px solid;
margin-block-end: 20px;
background: yellow;
}
</style>
<div class="container">
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) left top;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) right top;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div>
</div>
</div>

70
tests/wpt/web-platform-tests/css/css-break/background-image-001-ref.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
.container {
writing-mode: vertical-rl;
inline-size: 472px;
}
.mc {
display: flow-root;
block-size: 120px;
border: 1px solid;
margin-block-end: 20px;
background: yellow;
}
.column {
float: left;
inline-size: 150px;
block-size: 100%;
margin-inline-start: 10px;
}
.column:first-child {
margin-inline-start: 0;
}
</style>
<div class="container">
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) -230px top;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) -110px top;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) left top;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) right top;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) 240px top;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) 350px top;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) -230px bottom;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) -110px bottom;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) left bottom;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) right bottom;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) 240px bottom;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) 350px bottom;"></div>
</div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/background-image-001.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice">
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242">
<link rel="match" href="background-image-001-ref.html">
<style>
.container {
writing-mode: vertical-rl;
inline-size: 472px;
}
.mc {
columns: 3;
column-gap: 10px;
column-fill: auto;
block-size: 120px;
border: 1px solid;
margin-block-end: 20px;
background: yellow;
}
</style>
<div class="container">
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) left top;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) right top;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div>
</div>
</div>

70
tests/wpt/web-platform-tests/css/css-break/background-image-002-ref.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
.container {
writing-mode: vertical-lr;
inline-size: 472px;
}
.mc {
display: flow-root;
block-size: 120px;
border: 1px solid;
margin-block-end: 20px;
background: yellow;
}
.column {
float: left;
inline-size: 150px;
block-size: 100%;
margin-inline-start: 10px;
}
.column:first-child {
margin-inline-start: 0;
}
</style>
<div class="container">
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) left top;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) -120px top;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) -240px top;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) 350px top;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) 230px top;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) right top;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) left bottom;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) -120px bottom;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) -240px bottom;"></div>
</div>
</div>
<div class="mc">
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) 350px bottom;"></div>
</div>
<div class="column">
<div style="block-size:100%; background:url(../support/cat.png) 230px bottom;"></div>
</div>
<div class="column">
<div style="block-size:110px; background:url(../support/cat.png) right bottom;"></div>
</div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/background-image-002.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice">
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242">
<link rel="match" href="background-image-002-ref.html">
<style>
.container {
writing-mode: vertical-lr;
inline-size: 472px;
}
.mc {
columns: 3;
column-gap: 10px;
column-fill: auto;
block-size: 120px;
border: 1px solid;
margin-block-end: 20px;
background: yellow;
}
</style>
<div class="container">
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) left top;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) right top;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div>
</div>
<div class="mc">
<div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div>
</div>
</div>

19
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-007.html Normal file
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-break-3/#unforced-breaks">
<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; column-fill:auto; width:250px; column-gap:50px; margin-left:-150px; height:110px;">
<div style="height:2px; background:red;"></div>
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<div id="a" style="contain:size; height:50px; background:red;"></div>
<div id="b" style="contain:size; height:50px; background:green;"></div>
</div>
</div>
<div id="c" style="break-before:avoid; contain:size; height:50px; background:green;"></div>
</div>
</div>
</div>

74
tests/wpt/web-platform-tests/css/css-break/break-inside-avoid-min-block-size-1-ref.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: break-inside:avoid min-block-size block</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
.columns {
columns: 3;
background: grey;
margin-block-end: 1px;
inline-size: 500px;
}
.fill {
column-fill: auto;
}
.short {
block-size: 30px;
}
.tall {
block-size: 60px;
}
.columns > div {
block-size: 40px;
background: blue;
}
.columns > div:nth-child(2n) { background: lightblue; }
</style>
</head>
<body>
<div class="columns fill" style="block-size:40px">
<div></div>
<div></div>
</div>
<div class="columns fill" style="block-size:40px">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns short">
<div style="margin-block-end:20px"></div>
<div></div>
</div>
<div class="columns short">
<div style="margin-block-end:20px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns tall">
<div style="margin-block-end:40px"></div>
<div></div>
</div>
<div class="columns tall">
<div style="margin-block-end:40px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill short">
<div style="margin-block-end:20px"></div>
<div></div>
</div>
<div class="columns fill short">
<div style="margin-block-end:20px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill tall">
<div style="margin-block-end:40px"></div>
<div></div>
</div>
<div class="columns fill tall">
<div style="margin-block-end:40px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
</body>
</html>

78
tests/wpt/web-platform-tests/css/css-break/break-inside-avoid-min-block-size-1.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: break-inside:avoid min-block-size block</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1711630">
<link rel="help" href="https://drafts.csswg.org/css-break">
<link rel="match" href="break-inside-avoid-min-block-size-1-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
.columns {
columns: 3;
background: grey;
margin-block-end: 1px;
inline-size: 500px;
}
.fill {
column-fill: auto;
}
.short {
block-size: 30px;
}
.tall {
block-size: 60px;
}
.columns > div {
break-inside: avoid;
min-block-size: 40px;
background: blue;
}
.columns > div:nth-child(2n) { background: lightblue; }
</style>
</head>
<body>
<div class="columns">
<div></div>
<div></div>
</div>
<div class="columns">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns short">
<div></div>
<div></div>
</div>
<div class="columns short">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns tall">
<div></div>
<div></div>
</div>
<div class="columns tall">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill short">
<div></div>
<div></div>
</div>
<div class="columns fill short">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill tall">
<div></div>
<div></div>
</div>
<div class="columns fill tall">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
</body>
</html>

75
tests/wpt/web-platform-tests/css/css-break/break-inside-avoid-min-block-size-2-ref.html Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: break-inside:avoid min-block-size block</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
writing-mode: vertical-rl;
}
.columns {
columns: 3;
background: grey;
margin-block-end: 1px;
inline-size: 500px;
}
.fill {
column-fill: auto;
}
.short {
block-size: 30px;
}
.tall {
block-size: 60px;
}
.columns > div {
block-size: 40px;
background: blue;
}
.columns > div:nth-child(2n) { background: lightblue; }
</style>
</head>
<body>
<div class="columns fill" style="block-size:40px">
<div></div>
<div></div>
</div>
<div class="columns fill" style="block-size:40px">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns short">
<div style="margin-block-end:20px"></div>
<div></div>
</div>
<div class="columns short">
<div style="margin-block-end:20px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns tall">
<div style="margin-block-end:40px"></div>
<div></div>
</div>
<div class="columns tall">
<div style="margin-block-end:40px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill short">
<div style="margin-block-end:20px"></div>
<div></div>
</div>
<div class="columns fill short">
<div style="margin-block-end:20px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill tall">
<div style="margin-block-end:40px"></div>
<div></div>
</div>
<div class="columns fill tall">
<div style="margin-block-end:40px">&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
</body>
</html>

79
tests/wpt/web-platform-tests/css/css-break/break-inside-avoid-min-block-size-2.html Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: break-inside:avoid min-block-size block</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1711630">
<link rel="help" href="https://drafts.csswg.org/css-break">
<link rel="match" href="break-inside-avoid-min-block-size-2-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
writing-mode: vertical-rl;
}
.columns {
columns: 3;
background: grey;
margin-block-end: 1px;
inline-size: 500px;
}
.fill {
column-fill: auto;
}
.short {
block-size: 30px;
}
.tall {
block-size: 60px;
}
.columns > div {
break-inside: avoid;
min-block-size: 40px;
background: blue;
}
.columns > div:nth-child(2n) { background: lightblue; }
</style>
</head>
<body>
<div class="columns">
<div></div>
<div></div>
</div>
<div class="columns">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns short">
<div></div>
<div></div>
</div>
<div class="columns short">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns tall">
<div></div>
<div></div>
</div>
<div class="columns tall">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill short">
<div></div>
<div></div>
</div>
<div class="columns fill short">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
<div class="columns fill tall">
<div></div>
<div></div>
</div>
<div class="columns fill tall">
<div>&nbsp;<br>&nbsp;</div>
<div>&nbsp;<br>&nbsp;</div>
</div>
</body>
</html>

16
tests/wpt/web-platform-tests/css/css-break/change-inline-color-ref.html Normal file
View file

@ -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-break-3/">
<style>
.fakecolumn {
width: 1em;
text-align: center;
}
</style>
<p>The word PASS should be seen below.</p>
<div style="display:flex; color:green;">
<div class="fakecolumn">P</div>
<div class="fakecolumn">A</div>
<div class="fakecolumn">S</div>
<div class="fakecolumn">S</div>
</div>

17
tests/wpt/web-platform-tests/css/css-break/change-inline-color.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/">
<link rel="match" href="change-inline-color-ref.html">
<p>The word PASS should be seen below.</p>
<div style="columns:4; width:4em; text-align:center; column-gap:0; orphans:1; widows:1; color:white;">
<span id="span">
P A S S
</span>
</div>
<script>
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
span.style.color = "green";
});
});
</script>

8
tests/wpt/web-platform-tests/css/css-break/contain-strict-with-opacity-and-oof-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be a (pale) green square below, and no (pale) red.</p>
<div style="will-change:transform; contain:strict; width:100px; height:100px;">
<div style="opacity:0.2; width:100px; height:100px;">
<div style="width:100px; height:100px; background:green;"></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/contain-strict-with-opacity-and-oof.html Normal file
View file

@ -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-break-3/">
<link rel="match" href="contain-strict-with-opacity-and-oof-ref.html">
<p>There should be a (pale) green square below, and no (pale) red.</p>
<div style="columns:3; margin-top:-50px; column-fill:auto; height:200px;">
<div style="height:50px;"></div>
<div style="will-change:transform; contain:strict; width:100px; height:100px;">
<div style="opacity:0.2; width:100px; height:100px; background:red;">
<div style="position:absolute; width:100px; height:100px; background:green;"></div>
</div>
</div>
</div>

27
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-container-fragmentation-001.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>
Flex container fragmentation (with no items).
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
background: red;
column-count: 4;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
background: green;
border: 3px solid green;
display: flex;
padding: 5px;
width: 9px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex" style="height: 134px;"></div>
<div class="flex" style="height: 234px;"></div>
</div>

36
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-container-fragmentation-002.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Flex container fragmentation with break-inside: avoid.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
background: red;
column-count: 4;
column-gap: 0px;
height: 100px;
position: relative;
width: 100px;
}
.flex {
background: green;
break-inside: avoid;
display: flex;
width: 25px;
}
.abs {
background: green;
height: 50px;
position: absolute;
width: 25px;
top: 50px;
left: 50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex" style="height: 250px;"></div>
<div class="flex" style="height: 100px;"></div>
<div class="abs"></div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-container-fragmentation-003.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Flex container fragmentation with break-before: avoid.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
background: red;
column-count: 4;
column-gap: 0px;
height: 100px;
position: relative;
width: 100px;
}
.flex {
background: green;
display: flex;
width: 25px;
}
.abs {
height: 50px;
position: absolute;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex" style="height: 50px;"></div>
<div class="flex" style="height: 50px;"></div>
<div class="flex" style="height: 300px; break-before: avoid;"></div>
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
<div class="abs" style="background: white; top: 0px;"></div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-container-fragmentation-004.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Flex container fragmentation with break-after: avoid.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
background: red;
column-count: 4;
column-gap: 0px;
height: 100px;
position: relative;
width: 100px;
}
.flex {
background: green;
display: flex;
width: 25px;
}
.abs {
height: 50px;
position: absolute;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex" style="height: 50px;"></div>
<div class="flex" style="height: 50px; break-after: avoid;"></div>
<div class="flex" style="height: 300px;"></div>
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
<div class="abs" style="background: white; top: 0px;"></div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-container-fragmentation-005.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Flex container fragmentation with break-before: column.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
background: red;
column-count: 4;
column-gap: 0px;
height: 100px;
position: relative;
width: 100px;
}
.flex {
background: green;
display: flex;
width: 25px;
}
.abs {
height: 50px;
position: absolute;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex" style="height: 50px;"></div>
<div class="flex" style="height: 50px; break-before: column;"></div>
<div class="flex" style="height: 300px;"></div>
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
<div class="abs" style="background: white; top: 0px;"></div>
</div>

26
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-container-fragmentation-006.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>
Flex container fragmentation with tall margin.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<style>
.multicol {
column-count: 4;
column-gap: 0px;
height: 100px;
margin-left: -25px;
width: 100px;
}
.flex {
background: green;
display: flex;
height: 400px;
margin-top: 200px;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div class="multicol">
<div class="flex"></div>
</div>

55
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001-ref.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reference Case</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<style>
.multicol {
width: 300px;
columns: 100px auto;
max-height: 160px;
border: 3px solid pink;
}
.container {
display: flex;
}
.weird-flex-item {
border: 4px solid teal;
outline: 4px solid blue;
}
.tallFloat {
float: left;
border: 3px solid black;
height: 500px;
width: 100px;
background: yellow;
}
.float {
/* In this reference case, this is not actually a float. */
background: cyan;
width: 100px;
}
.inside-float {
height: 30px;
width: 30px;
background: purple;
display: inline-block;
}
</style>
</head>
<body>
<div class="multicol">
<div class="container">
<div class="weird-flex-item">
<div class="tallFloat"></div>
<br>
<div class="float">
<div class="inside-float">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

62
tests/wpt/web-platform-tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Floats in fragmented flex container shouldn't improperly inflate overflow areas</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695509">
<link rel="match" href="flex-fragmented-with-float-descendant-001-ref.html">
<!-- This is a regression test for a Firefox bug where Firefox was improperly
contributing a float's stale position (at an intermediate point in
layout where it's pushed off the bottom of one column) to the overflow
areas. This test checks for this by using "outline" to visualize the
overflow areas, to ensure they're not unexpectedly large. -->
<style>
.multicol {
width: 300px;
columns: 100px auto;
max-height: 160px;
border: 3px solid pink;
}
.container {
display: flex;
}
.weird-flex-item {
border: 4px solid teal;
outline: 4px solid blue;
}
.tallFloat {
float: left;
border: 3px solid black;
height: 500px;
width: 100px;
background: yellow;
}
.float {
float: left;
background: cyan;
width: 100px;
}
.inside-float {
height: 30px;
width: 30px;
background: purple;
display: inline-block;
}
</style>
</head>
<body>
<div class="multicol">
<div class="container">
<div class="weird-flex-item">
<div class="tallFloat"></div>
<br>
<div class="float">
<div class="inside-float">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

31
tests/wpt/web-platform-tests/css/css-break/flexbox/flexbox-fragmentation-layout-001-crash.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexbox: flexbox fragmentation</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708007">
<style>
* {
display: inline-flex;
border-left-style: ridge;
border-top: green ridge 3289332275.907055mm;
box-sizing: border-box;
white-space: pre;
max-block-size: 2307181333.664816mm;
float: inline-end;
columns: 2800509010 1630715400.2851658ex;
</style>
<script>
window.addEventListener('load', () => {
const details = document.createElement('details')
details.setAttribute('open', true)
const span = document.createElement('span')
const small = document.createElement('small')
small.innerText = '𧄚۹󠙥󠶒㏬1q/\n\rI퐆‭҆𯔩󠸗徢۹𠹅𝅧󠚏۹٠󠑛𖩡󠤵zc𯌈\r\naB-=^𯽉<>辴𯂼x?>>>=𝅯🨸-𯁡𯌌銒𖯩㿎‪٩𢂷+=\b﷞ᣰ⁡&󠕨\b\r0A۹'
span.appendChild(small)
details.appendChild(span)
document.documentElement.appendChild(details)
})
</script>
</head>
</html>

13
tests/wpt/web-platform-tests/css/css-break/float-in-self-collapsing-block-000.html Normal file
View file

@ -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-break-3/#parallel-flows">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1238508">
<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; column-gap:0; width:100px; height:100px; background:red;">
<div style="height:50px; background:green;"></div>
<div>
<div style="float:left; width:100%; height:100px; background:green;"></div>
</div>
<div style="clear:both; height:50px; background:green;"></div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/float-in-self-collapsing-block-001.html Normal file
View file

@ -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-break-3/#parallel-flows">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1238508">
<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; column-gap:0; width:100px; height:100px; background:red;">
<div style="height:50px; background:green;"></div>
<div>
<div style="float:left; margin-top:-10px; width:100%; height:100px; background:green;"></div>
<div style="margin-top:10px;"></div>
</div>
<div style="clear:both; height:50px; background:green;"></div>
</div>

8
tests/wpt/web-platform-tests/css/css-break/fragmented-float-in-inline-crash.html Normal file
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=1225967">
<div style="columns:2; column-fill:auto; height:100px;">
<span>
<div style="float:left; height:150px; background:cyan;"></div>
</span>
</div>

11
tests/wpt/web-platform-tests/css/css-break/monolithic-with-overflow-lr.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic">
<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="writing-mode:vertical-lr; columns:2; column-gap:0; column-fill:auto; inline-size:100px; block-size:100px; background:red;">
<div style="block-size:100px; background:green;"></div>
<div style="contain:size; block-size:0;">
<div style="block-size:100px; background:green;"></div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/monolithic-with-overflow-rl.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic">
<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="writing-mode:vertical-rl; columns:2; column-gap:0; column-fill:auto; inline-size:100px; block-size:100px; background:red;">
<div style="block-size:100px; background:green;"></div>
<div style="contain:size; block-size:0;">
<div style="block-size:100px; background:green;"></div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/orphans-in-parallel-flow.html Normal file
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-break-3/#widows-orphans">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
<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; orphans:2; widows:2; background:red;">
<div style="columns:2; column-fill:auto; column-gap:0; height:130px;">
<div style="height:100px; background:green;"></div>
<div style="height:100px; background:green;">
<div style="line-height:20px; height:10px;">
<br>
<br>
</div>
<div style="height:10px;"></div>
</div>
</div>
</div>

2
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-015.html
View file

@ -24,8 +24,6 @@
<div id="multicol">
<div class="rel">
<div class="abs" style="top: 0px; height: 160px;"></div>
<div class="abs" style="top: 100px; height: 20px;"></div>
</div>
<div style="column-span:all; height: 20px; background: green;"></div>
<div style="height: 60px;"></div>
</div>

1
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-020.html
View file

@ -21,7 +21,6 @@
.rel {
position: relative;
height: 200px;
}
.abs {
position: absolute;

32
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-022.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>
Nested abpos fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
background: red;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel">
<div class="abs">
<div class="abs" style="height: 200px;"></div>
</div>
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-023.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
Nested abpos in a nested fragmentation context.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
background: red;
width: 50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 25px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="rel">
<div class="abs">
<div class="abs" style="height: 400px;"></div>
</div>
</div>
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-024.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
Nested abpos in a nested fragmentation context.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
background: red;
width: 50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 25px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="rel">
<div class="abs" style="top: 400px;">
<div class="abs" style="top: -400px; height: 400px;"></div>
</div>
</div>
</div>
</div>

32
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-025.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>
Nested abpos fragmentation in a new column.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
background: red;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel">
<div class="abs" style="top: 200px;">
<div class="abs" style="top: -200px; height: 200px;"></div>
</div>
</div>
</div>

36
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-026.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a multicol.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
background: red;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
height: 100px;
width: 100px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel">
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-027.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
Nested abpos in a nested fragmentation context.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
background: red;
}
#inner {
width: 50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="rel">
<div class="abs">
<div class="multicol" id="inner">
<div class="rel" style="height: 400px;">
<div class="abs" style="height: 400px; width: 25px; background-color: green;"></div>
</div>
</div>
</div>
</div>
</div>

38
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-028.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Nested abpos in a nested fragmentation context.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
background: red;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" style="width: 50px;">
<div class="rel">
<div class="abs">
<div class="multicol" style="width: 25px;">
<div class="rel" style="height: 800px;">
<div class="abs" style="height: 800px; width: 12.5px; background-color: green;"></div>
</div>
</div>
</div>
</div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-029.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
top: 0px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 200px;"></div>
<div style="transform: translateX(0); height: 200px; background: red;">
<div style="height: 200px;"></div>
<div class="rel">
<div style="height: 200px;"></div>
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

43
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-030.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -200px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background: red;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="transform: translateX(0);">
<div style="height: 200px;"></div>
<div class="rel">
<div style="height: 200px;"></div>
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-031.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
top: 0px;
background: red;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="transform: translateX(0);">
<div style=" height: 200px;"></div>
<div class="rel">
<div style="height: 200px;"></div>
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-032.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -300px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="transform: translateX(0);">
<div style="height: 200px;"></div>
<div class="rel">
<div style="height: 200px;"></div>
<div class="abs">
<div style="height: 200px;"></div>
<div class="abs" style="top: 200px; background: red;"></div>
<div class="fixed"></div>
</div>
</div>
</div>
</div>

42
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-033.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a multicol with an abspos transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background: red;
transform: translateX(0);
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
top: 0px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel">
<div style="height: 200px;"></div>
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-034.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Nested fixedpos with fixedpos child in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
top: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="transform: translateX(0);">
<div style="height: 200px;"></div>
<div class="rel">
<div style="height: 200px;"></div>
<div class="abs">
<div style="height: 200px;"></div>
<div class="fixed" style="background: red;">
<div class="fixed" style="background: green;"></div>
</div>
</div>
</div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-035.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<title>
Fixedpos in an abspos in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -250px;
margin-top: -50px;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
top: 0px;
background: red;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
top: 0px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 400px;"></div>
<div style="transform: translate(50px,50px); ">
<div style="height: 200px;"></div>
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>

40
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-036.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>
Fixedpos in a nested abspos in a multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -300px;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 400px;"></div>
<div style="transform: translateX(0);">
<div style="height: 200px;"></div>
<div class="abs">
<div style="height: 200px;"></div>
<div class="abs" style="top: 0px; background: red;">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

47
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-037.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a nested multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
width: 50px;
margin-left: -100px;
}
.abs {
position: absolute;
width: 25px;
height: 400px;
top: 0px;
}
.fixed {
position: fixed;
width: 25px;
height: 400px;
background: green;
top: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div style="height: 400px;"></div>
<div style="transform: translateX(0);">
<div style="height: 400px;"></div>
<div class="abs">
<div style="height: 400px; background-color: red;"></div>
<div class="fixed"></div>
</div>
</div>
</div>
</div>

48
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-038.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
Fixedpos in a nested multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
width: 50px;
margin-left: -100px;
}
.abs {
position: absolute;
width: 25px;
height: 400px;
}
.fixed {
position: fixed;
width: 25px;
height: 400px;
background: green;
top: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div style="height: 400px;"></div>
<div style="transform: translateX(0);">
<div style="height: 400px; background: red;"></div>
<div class="abs">
<div style="height: 400px;"></div>
<div class="abs" style="top: 0px;">
<div class="fixed"></div>
</div>
</div>
</div>
</div>
</div>

47
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-039.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<title>
Fixedpos static position in a nested multicol with transform container.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
width: 50px;
margin-left: -200px;
}
.abs {
position: absolute;
width: 25px;
height: 400px;
}
.fixed {
position: fixed;
width: 25px;
height: 400px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div style="height: 400px;"></div>
<div style="transform: translateX(0);">
<div style="height: 400px;"></div>
<div class="abs">
<div style="height: 400px; background: red;"></div>
<div class="abs" style="top: 0px;">
<div class="fixed"></div>
</div>
</div>
</div>
</div>
</div>

52
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-040.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a nested multicol with transform container
in outer multicol.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
margin-left: -100px;
}
#inner {
width: 50px;
height: 700px;
margin-left: -425px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div style="height: 200px;"></div>
<div style="transform: translateX(0);">
<div style="height: 200px; background-color: red;"></div>
<div class="multicol" id="inner">
<div class="rel">
<div style="height: 800px;"></div>
<div class="abs">
<div style="height: 400px;"></div>
<div class="fixed"></div>
</div>
</div>
</div>
</div>
</div>

52
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-041.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a nested multicol with transform container in outer multicol.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
margin-left: -100px;
}
#inner {
width: 50px;
height: 700px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
width: 50px;
height: 200px;
background: green;
top: 0px;
left: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div style="height: 200px;"></div>
<div style="transform: translateX(0);">
<div style="height: 200px; background-color: red;"></div>
<div class="multicol" id="inner">
<div class="rel">
<div style="height: 800px;"></div>
<div class="abs">
<div style="height: 400px;"></div>
<div class="fixed"></div>
</div>
</div>
</div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-042.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>
Relative insets apply to abspos in a multicol after fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -150px;
margin-top: -150px;
}
.rel {
position: relative;
height: 200px;
}
.abs {
position: absolute;
width: 100%;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel" style="top: 50px; left: 50px;">
<div class="rel" style="top: 100px; left: 100px; background: red;">
<div class="abs"></div>
</div>
</div>
</div>

36
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-043.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Relative insets apply to nested abspos in a multicol after fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -150px;
margin-top: -150px;
}
.rel {
position: relative;
height: 200px;
}
.abs {
position: absolute;
width: 100%;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel" style="top: 50px; left: 50px;">
<div class="rel" style="top: 100px; left: 100px; background: red;">
<div class="abs">
<div class="abs" style="background: green;"></div>
</div>
</div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-044.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Relative insets apply to nested fixedpos in a multicol after fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -200px;
margin-top: -50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
width: 100%;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel" style="top: 50px; left: 50px;">
<div style="transform: translateX(0); height: 200px;">
<div class="abs" style="width: 50px; height: 200px; top: 100px; left: 100px; background: red;"></div>
<div class="rel" style="top: 100px; left: 100px;">
<div class="abs">
<div class="abs">
<div class="fixed" style="background: green;"></div>
</div>
</div>
</div>
</div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-045.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>
Ancestor inline offsets apply to abspos in a multicol.
</title>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -110px;
margin-top: -100px;
}
.rel {
position: relative;
height: 200px;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="margin-left: 10px;">
<div class="rel" style="top: 100px; left: 100px; background: red;">
<div class="abs"></div>
</div>
</div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-046.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element with inner multicol containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
background-color: red;
width: 50px;
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="abs"></div>
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-047.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element with inner multicol containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
background-color: red;
width: 50px;
position: relative;
}
.rel {
position: relative;
height: 200px;
}
.abs {
position: absolute;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="abs" style="width: 50px; height: 100px; top: 100px;"></div>
<div class="rel">
<div class="abs" style="width: 25px; height: 200px;"></div>
</div>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-048.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 4;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: white;
}
.abs {
position: absolute;
background-color: green;
width: 25px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 400px; width: 25px; background-color: red;">
<div style="height: 100px;"></div>
<span style="position: relative;">
AA AA AA AA A
<div class="abs" style="bottom: 0px;"></div>
AA AA A AA A
AA A AA AA A
<div class="abs" style="top: -100px;"></div>
</span>
</div>
</div>

36
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-049.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 4;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: white;
}
.abs {
position: absolute;
background-color: green;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 400px; width: 25px; background-color: red;">
<span style="position: relative;">
<div class="abs" style="height: 300px;"></div>
AA AA AA AA A
AA AA A AA A
AA A AA AA A
AA A AA AA A
<div class="abs" style="right: 20px; height: 100px;"></div>
</span>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-050.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: red;
text-align: right;
}
.abs {
position: absolute;
background-color: green;
height: 200px;
top: -80px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 200px; width: 50px; background-color: red;">
<div style="height: 60px;"></div>
B
<span style="position: relative;">
AA A AA A
<div class="abs" style="width: 10px;"></div>
<div class="abs" style="right: 0px; left: 0px;"></div>
</span>
</div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-051.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Nested out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: red;
}
.abs {
position: absolute;
width: 50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 200px; width: 50px; background-color: red;">
<span style="position: relative;">
<span class="abs">
AA AA AA AA A
AA AA A AA A
<div class="abs" style="top: 0px; bottom: 0px; background-color: green;"></div>
</span>
</span>
</div>
</div>

36
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-052.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Nested out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: red;
}
.fixed {
position: fixed;
background-color: green;
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 200px; width: 50px; background-color: red;">
<span style="position: relative;">
<span style="position: absolute;">
<div class="fixed"></div>
AA AA AA AA A
AA AA A AA A
</span>
</span>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-053.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in nested multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
font: 20px/1 Ahem;
color: white;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
width: 50px;
position: relative;
}
.abs {
position: absolute;
background-color: green;
height: 400px;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div style="height: 400px; width: 25px; background-color: red;">
<span style="position: relative;">
<div class="abs"></div>
AA AA AA AA A
AA AA A AA A
AA AA AA AA A
AA AA A AA A
</span>
</div>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-054.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block and
column spanner.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: red;
}
.abs {
position: absolute;
background-color: green;
height: 200px;
width: 50px;
top: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 200px; width: 50px; background-color: red;">
<span style="position: relative;">
AA AA AA AA
<div style="column-span: all;"></div>
A AA AA A AA A
<div class="abs"></div>
</span>
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-055.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 4;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: white;
}
.abs {
position: absolute;
background-color: green;
width: 25px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 400px; width: 25px; background-color: red;">
<div style="height: 100px;"></div>
<span style="position: relative;">
A AA AA AA A
<div class="abs" style="top: -100px;"></div>
</span>
<span style="position: relative;">
A A A A A
AA A AA AA A
<div class="abs" style="bottom: 0px;"></div>
</span>
</div>
</div>

30
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-056.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.abs {
position: absolute;
background-color: green;
height: 200px;
width: 50px;
top: -200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="background: red; height: 200px; width: 50px;"></div>
<span style="position: relative;">
<div class="abs"></div>
</span>
</div>

37
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-057.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
font: 20px/1 Ahem;
color: white;
}
.abs {
position: absolute;
background-color: green;
height: 200px;
width: 25px;
top: -60px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 200px; width: 50px; background-color: red;">
<div style="height: 60px;"></div>
B
<span style="position: relative;">
<div class="abs" style="left: 5px;"></div>
AA A AA AA
<div class="abs" style="left: -20px;"></div>
</span>
</div>
</div>

40
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-058.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing block - the
relative offset should apply to the OOF descendant after fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -400px;
margin-top: -400px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
background-color: green;
width: 50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel" style="top: 200px; left: 200px;">
<div class="rel" style="top: 50px; left: 50px;">
<span class="rel" style="top: 50px; left: 100px;">
<span class="rel" style="top: 100px; left: 50px;">
<div style="height: 200px; width: 50px; background: red;"></div>
<div class="abs" style="top: 0px; height: 50px;"></div>
<div class="abs" style="top: 50px; height: 150px;"></div>
</span>
</span>
</div>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-059.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol - the relative offset should
apply to the OOF descendant after fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -150px;
margin-top: -150px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
background-color: green;
height: 200px;
width: 50px;
top: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<span class="rel" style="top: 50px; left: 100px;">
<div class="rel" style="top: 100px; left: 50px;">
<div style="height: 200px; width: 50px; background: red;"></div>
<span class="abs"></span>
</div>
</span>
</div>

38
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-060.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Nested out-of-flow positioned element in multicol with inline containing
block - the relative offset should apply to the OOF descendant after
fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -100px;
margin-top: -50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
background-color: green;
height: 200px;
width: 50px;
top: 0px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel" style="top: 50px; left: 100px;">
<span class="abs">
<div style="height: 200px; width: 50px; background: red;"></div>
<div class="abs"></div>
</span>
</div>
</div>

45
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-061.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<title>
Nested out-of-flow positioned element in multicol - the relative offset
should apply to the OOF descendant after fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -100px;
}
.rel {
position: relative;
}
.oof {
background-color: green;
height: 100px;
width: 50px;
}
#abs {
position: absolute;
top: 100px;
}
#fixed {
position: fixed;
top: 0px;
left: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="transform: translateX(0);">
<div class="rel" style="left: 100px;">
<div style="height: 200px; width: 50px; background: red;"></div>
<span class="oof" id="abs">
<div class="oof" id="fixed"></div>
</span>
</div>
</div>
</div>

45
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-062.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in nested multicol with inline containing
block - the relative offset should apply to the OOF descendant after
fragmentation.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
margin-left: -150px;
margin-top: -150px;
}
#inner {
width: 50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
background-color: green;
width: 25px;
height: 400px;
left: -100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="rel" style="top: 50px; left: 100px;">
<span class="rel" style="top: 100px; left: 50px;">
<div style="height: 400px; width: 25px; background: red;"></div>
<div class="abs"></div>
</span>
</div>
</div>
</div>

42
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-063.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing
block and vertical-rl writing mode.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
writing-mode: vertical-lr;
direction: rtl;
columns: 2;
column-fill: auto;
height: 100px;
width: 100px;
column-gap: 0px;
margin-top: 66px;
margin-left: -50px;
}
.rel {
position: relative;
inset-block-start: 50px;
inset-inline-start: 50px;
}
.abs {
position: absolute;
inline-size: 50px;
block-size: 200px;
inset-block-start: 0;
inset-inline-start: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div>
<span class="rel">
<div style="block-size: 200px; inline-size: 50px; background: red;"></div>
<div class="abs"></div>
</span>
</div>
</div>

33
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-064.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with vertical-rl writing mode.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
writing-mode: vertical-rl;
columns: 2;
column-fill: auto;
column-gap: 0;
height: 100px;
width: 100px;
background: red;
color: red;
}
.abs {
position: absolute;
inline-size: 50px;
block-size: 200px;
inset-block-start: 0;
inset-inline-start: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="position: relative;">
FAIL
<div class="abs"></div>
</div>
</div>

38
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-065.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Nested out-of-flow positioned element in multicol with vertical-rl writing
mode.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
writing-mode: vertical-rl;
columns: 2;
column-fill: auto;
column-gap: 0;
height: 100px;
width: 100px;
background: red;
color: red;
}
.fixed {
position: fixed;
inline-size: 50px;
block-size: 200px;
inset-block-start: 0;
inset-inline-start: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="transform: translateX(0);">
FAIL
<div style="position: relative;">
<div style="position: absolute;">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-066.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing
block and vertical-rl writing mode.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
writing-mode: vertical-rl;
columns: 2;
column-fill: auto;
height: 100px;
width: 100px;
column-gap: 0px;
}
.abs {
position: absolute;
inline-size: 50px;
block-size: 200px;
inset-block-start: 0;
inset-inline-start: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div>
<span style="position: relative;">
<div style="block-size: 200px; inline-size: 50px; background: red;"></div>
<div class="abs"></div>
</span>
</div>
</div>

38
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-067.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing
block and vertical-rl writing mode.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
writing-mode: vertical-rl;
columns: 2;
column-fill: auto;
height: 100px;
width: 100px;
column-gap: 0px;
color: red;
font: 20px/1 Ahem;
}
.abs {
position: absolute;
inline-size: 50px;
inset-block-end: 0;
inset-block-start: 0;
inset-inline-start: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div>
<span style="position: relative;">
AA AA AA AA AA
AA AA AA AA AA
<div class="abs"></div>
</span>
</div>
</div>

38
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-068.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element in multicol with inline containing
block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
columns: 2;
column-fill: auto;
height: 100px;
width: 100px;
column-gap: 0px;
color: red;
font: 20px/1 Ahem;
margin-left: -5px;
}
.abs {
position: absolute;
width: 50px;
top: 0px;
left: 0px;
bottom: 0px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="margin-left: 5px;">
<span style="position: relative;">
AA AA AA AA AA
AA AA AA AA AA
<div class="abs"></div>
</span>
</div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-069.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element affects column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0px;
width: 100px;
}
.abs {
position: absolute;
background-color: green;
height: 400px;
width: 25px;
}
#target {
background-color: red;
position: relative;
height: 100px;
width: 100px;
top: -100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="position: relative;">
<div class="abs"></div>
</div>
</div>
<div id="target"></div>

36
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-070.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element with inline CB affects column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0px;
width: 100px;
}
.abs {
position: absolute;
background-color: green;
height: 400px;
width: 25px;
}
#target {
background-color: red;
position: relative;
height: 100px;
width: 100px;
top: -100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div>
<span style="position: relative;">
<div class="abs"></div>
</span>
</div>
</div>
<div id="target"></div>

42
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-071.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned element affects nested column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
width: 100px;
}
#inner {
width: 50px;
}
.abs {
position: absolute;
background-color: green;
height: 400px;
width: 25px;
}
#target {
background-color: red;
position: relative;
height: 100px;
width: 100px;
top: -100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div style="position: relative;">
<div class="abs"></div>
</div>
</div>
</div>
<div id="target"></div>

34
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-072.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Nested out-of-flow positioned element affects column balancing.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0px;
width: 100px;
}
.abs {
position: absolute;
background-color: green;
}
#target {
background-color: red;
position: relative;
height: 100px;
width: 100px;
top: -100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="position: relative;">
<div class="abs">
<div class="abs" style="height: 400px; width: 25px;"></div>
</div>
</div>
</div>
<div id="target"></div>

44
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-073.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Nested fixedpos should be affected by relative positioned offset.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
columns: 2;
column-fill: auto;
height: 100px;
width: 100px;
column-gap: 0px;
margin-top: -100px;
margin-left: -150px;
}
.box {
width: 50px;
height: 200px;
}
.fixed {
position: fixed;
background: green;
}
.abs {
position: absolute;
}
.rel {
position: relative;
top: 100px;
left: 50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel" style="transform: translateX(0);">
<div class="abs box" style="background: red; top: 100px; left: 50px;"></div>
<div class="rel">
<div class="abs">
<div class="fixed box"></div>
</div>
</div>
</div>
</div>

30
tests/wpt/web-platform-tests/css/css-break/out-of-flow-in-multicolumn-074.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>
Out-of-flow positioned with bottom:0 with spanner sibling.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0px;
width: 100px;
margin-top: -105px;
}
.abs {
position: absolute;
background-color: green;
height: 400px;
width: 25px;
bottom: 0;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="position: relative;">
<div style="height: 400px;"></div>
<div class="abs"></div>
<div style="column-span: all; height:5px;"></div>
<div style="height: 400px; width: 25px; background-color: red;"></div>
</div>
</div>

55
tests/wpt/web-platform-tests/css/css-break/overflow-clip-000.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
#multicol {
writing-mode: horizontal-tb;
columns: 4;
column-fill: auto;
column-gap: 0;
inline-size: 100px;
block-size: 200px;
}
#clipper {
/* Take up all of the first three columns and the half of the last one. */
block-size: 700px;
overflow: clip;
}
.filler {
/* Take us from one fragmentainer and 50px into the next. */
block-size: 150px;
}
.visible {
block-size: 100px;
background: green;
}
.before-fragmentainer-start {
/* This is before the block-start of a fragmentainer, and should therefore
be clipped by #clipper. */
margin-block-start: -100px;
block-size: 50px;
background: red;
}
.after-container-end {
block-size: 100px;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="multicol">
<div id="clipper">
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="after-container-end"></div>
</div>
</div>

55
tests/wpt/web-platform-tests/css/css-break/overflow-clip-001.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
#multicol {
writing-mode: vertical-lr;
columns: 4;
column-fill: auto;
column-gap: 0;
inline-size: 100px;
block-size: 200px;
}
#clipper {
/* Take up all of the first three columns and the half of the last one. */
block-size: 700px;
overflow: clip;
}
.filler {
/* Take us from one fragmentainer and 50px into the next. */
block-size: 150px;
}
.visible {
block-size: 100px;
background: green;
}
.before-fragmentainer-start {
/* This is before the block-start of a fragmentainer, and should therefore
be clipped by #clipper. */
margin-block-start: -100px;
block-size: 50px;
background: red;
}
.after-container-end {
block-size: 100px;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="multicol">
<div id="clipper">
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="after-container-end"></div>
</div>
</div>

56
tests/wpt/web-platform-tests/css/css-break/overflow-clip-002.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
#multicol {
writing-mode: vertical-rl;
margin-left: -100px;
columns: 4;
column-fill: auto;
column-gap: 0;
inline-size: 100px;
block-size: 200px;
}
#clipper {
/* Take up all of the first three columns and the half of the last one. */
block-size: 700px;
overflow: clip;
}
.filler {
/* Take us from one fragmentainer and 50px into the next. */
block-size: 150px;
}
.visible {
block-size: 100px;
background: green;
}
.before-fragmentainer-start {
/* This is before the block-start of a fragmentainer, and should therefore
be clipped by #clipper. */
margin-block-start: -100px;
block-size: 50px;
background: red;
}
.after-container-end {
block-size: 100px;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="multicol">
<div id="clipper">
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="filler"></div>
<div class="before-fragmentainer-start"></div>
<div class="visible"></div>
<div class="after-container-end"></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/overflow-clip-003.html Normal file
View file

@ -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-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<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; width:100px; column-fill:auto; height:100px; column-gap:0; background:red;">
<div style="overflow-x:clip; height:150px;">
<div style="width:100px; background:red;">
<div style="width:50px; height:200px; background:green;"></div>
</div>
</div>
</div>

12
tests/wpt/web-platform-tests/css/css-break/overflow-clip-004.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<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; width:100px; column-fill:auto; height:100px; column-gap:0; background:red;">
<div style="overflow-y:clip; height:100px;">
<div style="width:100px; height:100px; background:green;"></div>
<div style="width:100px; height:100px; background:red;"></div>
</div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/overflow-clip-005.html Normal file
View file

@ -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-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated.">
<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:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;">
<div style="overflow:clip; height:300px;">
<div style="height:300px; background:green;"></div>
<div style="height:200px; background:red;"></div>
<div style="break-before:column; height:10px; background:red;"></div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/overflow-clip-006.html Normal file
View file

@ -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-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated.">
<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:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;">
<div style="overflow:clip;">
<div style="height:300px;">
<div style="height:300px; background:green;"></div>
<div style="height:200px; background:red;"></div>
<div style="break-before:column; height:10px; background:red;"></div>
</div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/overflow-clip-007.html Normal file
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-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated.">
<div style="position:relative; columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;">
<div style="overflow:clip; height:300px;">
<div style="height:300px; background:green;"></div>
<div style="height:200px; background:red;"></div>
<div id="target" style="break-before:column; height:10px; background:red;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(target.offsetLeft, 80);
assert_equals(target.offsetTop, 300);
}, "Overflowing and clipped content doesn't fragment");
</script>

14
tests/wpt/web-platform-tests/css/css-break/overflow-clip-008.html Normal file
View file

@ -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-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<meta name="assert" content="Clipping only in the inline direction shouldn't affect fragmentation">
<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; width:100px; column-gap:0; column-fill:auto; height:100px; background:red;">
<div style="overflow-x:clip; height:200px;">
<div style="width:100px; background:red;">
<div style="width:25px; height:400px; background:green;"></div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/overflow-clip-009.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated.">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
fieldset { margin:0; border:none; padding:0; height:300px; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;">
<div style="overflow:clip;">
<fieldset>
<div style="height:300px; background:green;"></div>
<div style="height:200px; background:red;"></div>
<div style="break-before:column; height:10px; background:red;"></div>
</fieldset>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/overflow-clip-010.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated.">
<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:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;">
<div style="overflow:clip; background:red;">
<div style="columns:1; column-gap:0px; column-fill:auto; max-height:300px;">
<div style="height:300px; background:green;"></div>
<div style="height:200px; background:red;"></div>
<div style="break-before:column; height:10px; background:red;"></div>
</div>
</div>
</div>

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