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

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

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tests/wpt/web-platform-tests/css/css-break/abspos-inside-relpos-inside-monolithic.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://bugs.chromium.org/p/chromium/issues/detail?id=1336634">
<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:1; width:100px; background:red;">
<div style="height:40px; background:green;"></div>
<div style="overflow:hidden;">
<div style="position:relative; height:60px;">
<div style="position:absolute; width:100%; height:60px; background:green;"></div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/area-in-inline-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1308078">
<div style="columns:10; column-fill:auto; line-height:20px; height:20px; orphans:1; widows:1;">
<br>
<br>
<span>
<area></area>
<br>
<br>
<area></area>
<br>
<br>
<area></area>
</span>
<br>
<br>
</div>

17
tests/wpt/web-platform-tests/css/css-break/block-in-inline-000.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/#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="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;">
<span>
<!-- First column: -->
<div style="height:50px; background:green;">
<br>
<!-- Second column: -->
<div style="break-before:column; height:100px; background:green;"></div>
</div>
<!-- First column (the preceding DIV is only 50px tall): -->
<div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div>
</span>
</div>

15
tests/wpt/web-platform-tests/css/css-break/block-in-inline-001.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-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="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;">
<span>
<div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div>
<div style="height:100px; background:green;">
<div style="height:150px;"></div>
<div style="height:200px; background:green;"></div>
</div>
<div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div>
</span>
</div>

15
tests/wpt/web-platform-tests/css/css-break/block-in-inline-002.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-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="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;">
<span>
<div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div>
<div style="height:200px; background:green;">
<div style="height:250px;"></div>
<div style="height:100px; background:green;"></div>
</div>
<div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div>
</span>
</div>

14
tests/wpt/web-platform-tests/css/css-break/block-in-inline-003.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="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;">
<span>
<div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div>
<div style="height:50px; background:green;">
<div style="height:50px;"></div>
<div style="height:300px; background:green;"></div>
</div>
</span>
</div>

14
tests/wpt/web-platform-tests/css/css-break/block-in-inline-004-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1295183">
<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;">
<span id="elm">
<div style="height:3px;">
<div style="height:26px;"></div>
</div>
<br>
</span>
</div>
<script>
elm.getClientRects();
</script>

14
tests/wpt/web-platform-tests/css/css-break/block-in-inline-005-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1295183">
<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;">
<span id="elm">
<div style="height:3px;">
<div style="height:126px;"></div>
</div>
<br>
</span>
</div>
<script>
elm.getClientRects();
</script>

14
tests/wpt/web-platform-tests/css/css-break/block-in-inline-006-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1295183">
<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;">
<span id="elm">
<div style="height:30px;">
<div style="height:126px;"></div>
</div>
<br>
</span>
</div>
<script>
elm.getClientRects();
</script>

14
tests/wpt/web-platform-tests/css/css-break/block-in-inline-007-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1295183">
<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;">
<span id="elm">
<div style="height:30px;">
<div style="height:51px;"></div>
</div>
<br>
</span>
</div>
<script>
elm.getClientRects();
</script>

40
tests/wpt/web-platform-tests/css/css-break/box-decoration-break-clone-001.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
inline-size: 100px;
block-size: 100px;
background: red;
}
.container {
padding: 5px 0;
border-block: 10px solid green;
box-decoration-break: clone;
background: green;
}
.child {
block-size: calc(70px + 70px); /* 1st column + 2nd column */
background: green;
}
</style>
<!-- The container's block-size is auto, so the available column block-size
reserved for the child is 70px in every column. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="container">
<div class="child"></div>
</div>
</div>

40
tests/wpt/web-platform-tests/css/css-break/box-decoration-break-clone-002.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
inline-size: 100px;
block-size: 100px;
background: red;
}
.container {
border-block: 15px solid green;
box-decoration-break: clone;
block-size: calc(70px + 30px); /* 1st column + 2nd column */
}
.child {
block-size: calc(70px + 85px); /* 1st column + 2nd column */
background: green;
}
</style>
<!-- The container's content-box block-size is 100px, occupying part of the
second column. The child overflows the container, and get painted over the
container's block-end border in the second column. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="container">
<div class="child"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-break/box-decoration-break-clone-003.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
inline-size: 100px;
block-size: 100px;
background: red;
}
.container {
border-block-start: 15px solid green;
border-block-end: 15px solid pink;
box-decoration-break: clone;
block-size: 70px;
}
.child {
block-size: calc(85px + 100px); /* 1st column + 2nd column */
background: green;
}
</style>
<!-- The container's content-box block-size is 70px, fitting exactly into the
first column. The child overflows the container, and get painted over the
container's block-end border in the first column. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="container">
<div class="child"></div>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-break/box-decoration-break-clone-004.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-gap: 0;
column-fill: auto;
inline-size: 100px;
block-size: 100px;
background: red;
}
.container {
padding: 5px 0;
border-block: 10px solid green;
box-decoration-break: clone;
block-size: calc(70px + 10px); /* 1st column + 2nd column */
background: green;
}
</style>
<!-- The container's content-box block-size is 80px, making its border-box
block-size in the second column be 40px. The remaining 60px block-size in
the second column should be filled completely by the later sibling green
block. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="container"></div>
<div style="block-size: 60px; background: green"></div>
</div>

0
tests/wpt/web-platform-tests/css/css-break/box-shadow-ref.html → tests/wpt/web-platform-tests/css/css-break/box-shadow-001-ref.html
View file

2
tests/wpt/web-platform-tests/css/css-break/box-shadow.html → tests/wpt/web-platform-tests/css/css-break/box-shadow-001.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=269061">
<link rel="match" href="box-shadow-ref.html">
<link rel="match" href="box-shadow-001-ref.html">
<p>There should be 6 identical cyan rectangles below, all with a box shadow.</p>
<style>
#mc > div {

14
tests/wpt/web-platform-tests/css/css-break/box-shadow-002-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<style>
#mc > div {
position: absolute;
inline-size: 50px;
border: 10px solid;
}
</style>
<p>Box shadows should not be painted at column breaks.</p>
<div id="mc" style="position:relative; margin:50px; inline-size:400px; block-size:100px; background:yellow;">
<div style="inset-inline-start:-10px; inset-block-start:-10px; block-size:100px; border-block-end:none;"></div>
<div style="inset-inline-start: 140px; block-size:100px; border-block-start:none; border-block-end:none;"></div>
<div style="inset-inline-start: 290px; block-size:50px; border-block-start:none;"></div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/box-shadow-002.html Normal file
View file

@ -0,0 +1,9 @@
<!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/#break-decoration">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=682173">
<link rel="match" href="box-shadow-002-ref.html">
<p>Box shadows should not be painted at column breaks.</p>
<div style="columns:3; column-gap:50px; column-fill:auto; margin:50px; inline-size:400px; block-size:100px; background:yellow;">
<div style="box-shadow:0px 0px 0px 10px; inline-size:50px; block-size:250px;"></div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/box-shadow-003-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<style>
#mc > div {
position: absolute;
inline-size: 50px;
border: 10px solid;
}
</style>
<p>Box shadows should not be painted at column breaks.</p>
<div id="mc" style="position:relative; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-rl;">
<div style="inset-inline-start:-10px; inset-block-start:-10px; block-size:100px; border-block-end:none;"></div>
<div style="inset-inline-start: 140px; block-size:100px; border-block-start:none; border-block-end:none;"></div>
<div style="inset-inline-start: 290px; block-size:50px; border-block-start:none;"></div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/box-shadow-003.html Normal file
View file

@ -0,0 +1,9 @@
<!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/#break-decoration">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=682173">
<link rel="match" href="box-shadow-003-ref.html">
<p>Box shadows should not be painted at column breaks.</p>
<div style="columns:3; column-gap:50px; column-fill:auto; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-rl;">
<div style="box-shadow:0px 0px 0px 10px; inline-size:50px; block-size:250px;"></div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/box-shadow-004-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<style>
#mc > div {
position: absolute;
inline-size: 50px;
border: 10px solid;
}
</style>
<p>Box shadows should not be painted at column breaks.</p>
<div id="mc" style="position:relative; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-lr;">
<div style="inset-inline-start:-10px; inset-block-start:-10px; block-size:100px; border-block-end:none;"></div>
<div style="inset-inline-start: 140px; block-size:100px; border-block-start:none; border-block-end:none;"></div>
<div style="inset-inline-start: 290px; block-size:50px; border-block-start:none;"></div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/box-shadow-004.html Normal file
View file

@ -0,0 +1,9 @@
<!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/#break-decoration">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=682173">
<link rel="match" href="box-shadow-004-ref.html">
<p>Box shadows should not be painted at column breaks.</p>
<div style="columns:3; column-gap:50px; column-fill:auto; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-lr;">
<div style="box-shadow:0px 0px 0px 10px; inline-size:50px; block-size:250px;"></div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/break-after-in-parallel-flow-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1305732">
<div style="columns:3; column-fill:auto; height:40px;">
<div style="height:20px;">
<div style="height:50px;"></div>
<div style="break-after:column;"></div>
</div>
<div style="height:40px;"></div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/break-after-oof-before-preceding-pushed-float-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1318455">
<div style="columns:2; column-fill:auto; height:50px;">
<div style="position:relative; height:31px;">
<div style="position:absolute;"></div>
</div>
<span style="contain:size; float:left; width:100%; height:20px;"></span>
<div>
<div style="height:10px;"></div>
<div style="position:relative; float:left; width:100%;">
<div style="height:1px;"></div>
<div style="position:absolute;"></div>
</div>
</div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/break-before-float-after-line-after-floats-crash.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1306811">
<div style="columns:3; column-fill:auto; width:320px; height:100px; orphans:1; widows:1;">
<div style="float:left; width:50px; height:10px;"></div>
<div style="float:left; width:100px; height:10px;"></div>
<div style="display:inline-block; width:20px; height:20px;"></div>
<div style="float:left; width:10px; height:200px; contain:size;"></div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-009.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/#break-propagation">
<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; column-gap:0; height:250px;">
<div style="height:100px; background:green;"></div>
<div style="height:100px; background:green;"></div>
<div style="break-inside:avoid;">
<div>
<div style="break-before:avoid; height:100px;"></div>
</div>
</div>
</div>
</div>

29
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-010.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 4;
column-gap: 0px;
column-fill: auto;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
height: 50px;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="width: 25px; height: 50px; background: green;"></div>
<div style="width: 25px; height: 50px; background: green;"></div>
<div>
<div style="height: 50px; break-before: avoid; background: green;"></div>
<div style="height: 200px; background: green;"></div>
</div>
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-011.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/#break-propagation">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1337586">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div style="height:50px; background:green;"></div>
<div style="height:50px; background:green;"></div>
<div style="height:10px;">
<div style="height:20px; contain:size; background:green;"></div>
<div style="height:20px; contain:size; background:green;"></div>
</div>
<div style="break-before:avoid; break-inside:avoid; height:90px;">
<div style="height:30px;"></div>
<div style="height:60px; background:green;"></div>
</div>
</div>
</div>

19
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-012.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/#break-propagation">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:30px; background:green;"></div>
<div style="float:left; width:50%;">
<div style="height:10px; contain:size; background:green;"></div>
<div style="height:10px; contain:size; background:green;"></div>
</div>
<div style="break-before:avoid; break-inside:avoid;">
<div style="margin-left:auto; width:50%; height:20px; background:green;"></div>
<div style="height:50px; background:green;"></div>
</div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-013.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/#break-propagation">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381118">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div style="height:50px; background:green;"></div>
<div style="height:50px; background:green;"></div>
<div style="height:10px;">
<div style="height:20px; contain:size; background:green;"></div>
<div style="height:40px; contain:size; background:green;"></div>
</div>
<div style="break-before:avoid; break-inside:avoid; height:90px;">
<div style="height:50px;"></div>
<div style="height:40px; background:green;"></div>
</div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/break-between-avoid-014.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/#break-propagation">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381118">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:20px; background:green;"></div>
<div style="break-before:avoid; height:10px;">
<div style="height:20px; contain:size; background:green;"></div>
<div style="height:20px; contain:size; background:green;"></div>
</div>
<div style="break-before:avoid; break-inside:avoid; height:90px;">
<div style="height:30px;"></div>
<div style="height:40px; background:green;"></div>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/break-between-force-000.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation">
<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; column-gap:0; height:250px;">
<div style="height:100px; background:green;"></div>
<div style="break-inside:avoid;">
<div>
<div style="break-before:column; height:100px; background:green;"></div>
</div>
</div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/break-between-force-001.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation">
<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; column-gap:0; height:250px;">
<div style="height:100px; background:green;"></div>
<div>
<div style="break-before:column;"></div>
</div>
<div style="height:100px; background:green;"></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/break-between-force-002.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation">
<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; column-gap:0; height:250px;">
<div style="height:100px; background:green;"></div>
<div>
<div style="break-after:column;"></div>
</div>
<div style="height:100px; background:green;"></div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/change-break-after.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/#break-between">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div id="elm" style="height:100px; background:green;"></div>
<div style="height:100px; background:green;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.breakAfter = "column";
</script>

17
tests/wpt/web-platform-tests/css/css-break/change-break-after2.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/#break-between">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:100px;">
<div id="elm" style="break-after:column; height:50px; background:green;"></div>
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:green;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.breakAfter = "auto";
</script>

16
tests/wpt/web-platform-tests/css/css-break/change-break-before.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/#break-between">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div style="height:100px; background:green;"></div>
<div id="elm" style="height:100px; background:green;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.breakBefore = "column";
</script>

16
tests/wpt/web-platform-tests/css/css-break/change-break-inside.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/#break-within">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; gap:0; column-fill:auto; height:150px;">
<div style="height:100px; background:green;"></div>
<div id="elm" style="height:100px; background:green;"></div>
</div>
</div>
<script>
document.body.offsetTop;
elm.style.breakInside = "avoid";
</script>

14
tests/wpt/web-platform-tests/css/css-break/chrome-bug-1288769-000-crash.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<div id="container">
<div id="child" style="columns:2;">
<div style="display:flex;"></div>
<div style="display:grid;"></div>
<div style="display:table;"></div>
</div>
</div>
<script>
document.body.offsetTop;
container.style.columns = "2";
container.style.display = "inline-table";
child.style.display = "table-footer-group";
</script>

12
tests/wpt/web-platform-tests/css/css-break/chrome-bug-1288769-001-crash.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<div id="container">
<div id="child" style="columns:2;">
<div style="display:flex;"></div>
<div style="display:grid;"></div>
<div style="display:table;"></div>
</div>
</div>
<script>
document.body.offsetTop;
container.style.columns = "2";
</script>

9
tests/wpt/web-platform-tests/css/css-break/chrome-bug-1289999-crash.https.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289999">
<div style="columns:3; column-fill:auto; height:100px;">
<div style="display:flex;"></div>
<div style="display:grid;"></div>
<div style="display:table;"></div>
<div style="position:relative; display:layout(foo); height:150px;"></div>
</div>

30
tests/wpt/web-platform-tests/css/css-break/chrome-bug-1318455-crash.html Normal file
View file

@ -0,0 +1,30 @@
<!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=1318455">
<ul id="multicol" style="columns:34; column-fill:auto; height:50px; line-height:20px;">
<div style="float:left; padding:3px;">
<br><br><br>
</div>
<div style="float:left; position:relative; padding:3px;">
<br><br><br>
<div style="position:absolute;"></div>
</div>
<li style="float:left;">
<div></div>
<a style="float:left;">
<li style="position:relative;">
<br>
<div style="position:absolute;"></div>
</li>
</a>
</li>
<div id="surprise" style="display:none; height:150px;"></div>
</ul>
<script>
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
surprise.style.display = "inline-block";
multicol.style.height = "150px";
});
});
</script>

16
tests/wpt/web-platform-tests/css/css-break/class-c-breakpoint-after-float-000.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/#possible-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="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:50px; background:green;"></div>
<div style="break-inside:avoid; clear:left;">
<div style="float:left; width:100%; height:10px; background:green;"></div>
<div style="height:10px;"></div>
<div style="height:90px; background:green;"></div>
</div>
</div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/class-c-breakpoint-after-float-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/#possible-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="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="height:50px; background:green;"></div>
<div style="float:left; width:100%; height:50px;"></div>
<div style="background:green;">
<div style="clear:both; height:10px;">
<div style="float:left; width:100%; height:100px; background:green;"></div>
</div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/class-c-breakpoint-after-float-002.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/#possible-breaks">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="There should be a class C breakpoint after the float, since the flow-root sibling is cleared past the float (but note that it would otherwise fit beside it), so that there'll be a gap to establish a class C break opportunity">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="width:200%;">
<div style="width:50%; height:50px; background:green;"></div>
<div style="float:left; width:50%; height:40px; background:green;"></div>
<div style="clear:both; width:50%; background:green;">
<div style="float:left; width:10px; height:10px;"></div>
<div style="clear:both; display:flow-root; break-inside:avoid; height:100px;"></div>
</div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/class-c-breakpoint-after-float-003.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/#possible-breaks">
<meta name="assert" content="There should be a class C breakpoint after the float, since the flow-root sibling doesn't fit beside the float, so that there'll be a gap to establish a class C break opportunity">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="width:200%;">
<div style="width:50%; height:50px; background:green;"></div>
<div style="float:left; width:50%; height:40px; background:green;"></div>
<div style="clear:both; width:50%; background:green;">
<div style="float:left; width:100%; height:5px;"></div>
<div style="display:flow-root; break-inside:avoid; width:50px; height:100px;"></div>
</div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/class-c-breakpoint-after-float-004.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/#possible-breaks">
<meta name="assert" content="Note that this test tests that there'll be *no* class C breakpoint after the float, since the flow-root sibling can fit beside the float, so that there'll be no gap to establish a class C break opportunity">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:green;">
<div style="width:200%;">
<div style="width:50%; height:50px;"></div>
<div style="float:left; width:50%; height:40px;"></div>
<div style="clear:both; width:50%; background:red;">
<div style="float:left; width:10px; height:100px; background:green;"></div>
<div style="display:flow-root; break-inside:avoid; width:40px; height:100px; background:green;"></div>
</div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/clear-br-in-size-containment-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1308247">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="height:90px;"></div>
<div style="float:left; width:10px; height:20px;"></div>
<div style="contain:size">
<br clear="left">
</div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/clear-float-in-size-containment-crash.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308247">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="float:left; width:10px; height:150px;"></div>
<div style="contain:size;">
<div style="float:left; clear:left; width:10px; height:10px;"></div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/clear-past-float-with-oof-twice-crash.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://bugs.chromium.org/p/chromium/issues/detail?id=1318455">
<div style="columns:3; column-fill:auto; height:100px;">
<div style="position:relative; float:left; width:100%;">
<div style="height:141px;"></div>
<div style="position:absolute;"></div>
</div>
<p style="clear:left; contain:size; width:100%; height:80px;"></p>
</div>

19
tests/wpt/web-platform-tests/css/css-break/clearance-parallel-flow-001.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://bugs.chromium.org/p/chromium/issues/detail?id=1370969">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="height:70px;">
<div style="height:70px; background:green;"></div>
<div style="float:left; width:100%; height:10px; background:green;"></div>
<div style="height:50px;"></div>
<div style="float:left; width:100%; height:20px; background:green;"></div>
</div>
<div style="clear:left;">
<div style="height:20px; background:green;"></div>
<div style="height:10px; background:green;"></div>
<div style="height:10px; background:green;"></div>
<div style="clear:left; height:60px; background:green;"></div>
</div>
</div>

28
tests/wpt/web-platform-tests/css/css-break/clearance-parallel-flow-002.html Normal file
View file

@ -0,0 +1,28 @@
<!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=1370969">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="height:70px;">
<div style="height:70px; background:green;"></div>
<div style="float:left; width:100%; height:10px; background:green;"></div>
<div style="height:50px;"></div>
<div style="float:left; width:20px; height:20px; background:green;"></div>
</div>
<!-- We start layout of the flex container in the first column. We'll clear
past the first float, but the second float will end up in the second
column, in a parallel flow (due to overflow caused by the restricted
block-size of the container). When we resume the flex container in the
second container, we shouldn't apply any additional clearance, since
that's something that's placed *before* the block-start margin box, and
we're way past that in the second column. Being a well-behaved formatting
context root, though, means that the flex container shouldn't overlap
with the float in the second column. -->
<div style="display:flex; flex-flow:column; clear:left;">
<div style="height:20px; background:green;"></div>
<div style="margin-left:-20px; width:50px; height:20px; background:green;"></div>
<div style="width:30px; height:20px; background:green;"></div>
<div style="margin-left:-20px; width:50px; height:60px; background:green;"></div>
</div>
</div>

12
tests/wpt/web-platform-tests/css/css-break/clearance-self-collapsing-past-fragmented-float.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://bugs.chromium.org/p/chromium/issues/detail?id=1379809">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="height:20px; background:green;"></div>
<div style="background:green;">
<div style="float:left; width:10px; height:180px;"></div>
<div style="clear:both;"></div>
</div>
</div>

31
tests/wpt/web-platform-tests/css/css-break/column-balancing-with-oofs-crash.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1362550">
<style>
.multicol {
column-count: 2;
width: 200px;
}
.relpos {
position: relative;
}
.abspos {
height: 25%;
position: absolute;
}
</style>
<div class="multicol">
<div class="relpos">
<div class="abspos">
<p>
text
</p>
</div>
</div>
<figure class="relpos">
<div class="abspos">
<p>
text
</p>
</div>
</figure>
</div>

6
tests/wpt/web-platform-tests/css/css-break/empty-fieldset-tall-bottom-padding-crash.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1322426">
<div style="columns:2; height:100px; column-fill:auto;">
<fieldset style="margin:0; border:none; padding:0; border-bottom:1px solid; padding-bottom:200px;"></fieldset>
</div>

25
tests/wpt/web-platform-tests/css/css-break/firefox-bug1693616-001-crash.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1693616">
<meta name="assert" content="This test verifies that a block element with box-decoration-break:clone, whose block-start border and padding exceed the multicol's height, can make progress when fragmenting without hanging the browser.">
<style>
#a {
column-count: 2;
}
#b {
box-decoration-break: clone;
padding: 4px 0px;
border: 1px dotted black;
}
* {
height: 19%;
}
</style>
Hopefully this doesn't hang.
<div id="a">
<div id="b">

24
tests/wpt/web-platform-tests/css/css-break/firefox-bug1693616-002-crash.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1693616">
<meta name="assert" content="This test verifies that a block element with box-decoration-break:clone, whose block-start border and padding exceed the multicol's height, can make progress when fragmenting without hanging the browser.">
<style>
#a {
column-count: 2;
height: 5px;
}
#b {
box-decoration-break: clone;
padding: 4px 0px;
border: 1px dotted black;
height: 10px;
}
</style>
Hopefully this doesn't hang.
<div id="a">
<div id="b">

10
tests/wpt/web-platform-tests/css/css-break/fixedpos-with-link-with-inline-child-print-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<style>
body { margin: 0; }
</style>
<div>
<a href="/">Link <span>should be seen</span> on both pages.</a>
</div>
<div style="break-before:page;">
<a href="/">Link <span>should be seen</span> on both pages.</a>
</div>

12
tests/wpt/web-platform-tests/css/css-break/fixedpos-with-link-with-inline-child-print.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://bugs.chromium.org/p/chromium/issues/detail?id=1373172">
<link rel="match" href="fixedpos-with-link-with-inline-child-print-ref.html">
<style>
body { margin: 0; }
</style>
<div style="position:fixed;">
<a href="/">Link <span>should be seen</span> on both pages.</a>
</div>
<div style="break-before:page; height:10px;"></div>
<div style="break-before:page; height:10px;"></div>

7
tests/wpt/web-platform-tests/css/css-break/flexbox/button-in-multicol-crash.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1277724">
<p>PASS if no crash or DCHECK failure.</p>
<div style="columns:2;">
x
<button style="display:block;"></button>
</div>

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

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>
OOF static pos in fragmented flex container with multicol CB.
</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: 2;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
}
.flex {
display: flex;
height: 200px;
width: 50px;
}
.abs {
background: green;
position: absolute;
height: 100px;
width: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex">
<div class="abs"></div>
</div>
</div>

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

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
OOF static pos in fragmented flex container with multicol CB, with align end.
</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;
position: relative;
}
.flex {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 400px;
width: 50px;
}
.flex > div {
background: green;
height: 100px;
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">
<div style="position:absolute;"></div>
<div></div>
<div></div>
<div></div>
<div style="background:red;"></div>
</div>
</div>

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

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
OOF static pos in fragmented flex container with multicol CB, with align center.
</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;
position: relative;
}
.flex {
display: flex;
flex-direction: column;
justify-content: center;
height: 400px;
width: 50px;
}
.flex > div {
background: green;
height: 100px;
width: 25px;
}
.flex > div > div {
height: 50px;
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">
<div style="position:absolute; height:100px;">
<div></div>
<div style="background:white;"></div>
</div>
<div></div>
<div>
<div></div>
<div style="background:red;"></div>
</div>
<div></div>
<div></div>
</div>
</div>

7
tests/wpt/web-platform-tests/css/css-break/flexbox/float-in-webkit-box-in-multicol-crash.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318035">
<div style="column-count:2;">
<div style="display:-webkit-box;">
<div style="float:left;"></div>
</div>
</div>

7
tests/wpt/web-platform-tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-001.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1315004">
<div style="height: 10px; column-count: 2;">
<div style="display: flex; height: 8px;">
<img src="somelink" height="20" width="156">
</div>
</div>

8
tests/wpt/web-platform-tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-002.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1370404">
<div style="column-width:50px;">
<div style="display:flex; flex-wrap:wrap-reverse;">
text text
<image src="" width="2" height="2"></image>
</div>
</div>

7
tests/wpt/web-platform-tests/css/css-break/flexbox/monolithic-item-in-fragmented-flexbox-crash.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1315004">
<div style="height: 10px; column-count: 2; column-fill: auto;">
<div style="display: flex;">
<div style="height: 20px; contain: size;"></div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-001.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>
Simple multi-line column flex fragmentation.
</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: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 50px;
}
.flex > div {
background: green;
height: 200px;
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">
<div></div>
<div></div>
</div>
</div>

51
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-002.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation with item overflow.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 50px;
}
.flex > div {
height: 100px;
width: 25px;
}
.flex > div > div {
height: 50px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex">
<div>
<div style="height: 100px;"></div>
<div style="background: red;"></div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div style="height: 100px;"></div>
<div style="background: red;"></div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>

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

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation intrinsic block size.
</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: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 20px;
background: green;
}
.flex > div {
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex">
<div style="height: 50px;"></div>
<div style="height: 150px;"></div>
<div style="height: 300px;"></div>
</div>
</div>

36
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-004.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation.
</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: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 50px;
}
.flex > div {
background: green;
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">
<div style="height: 150px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 150px;"></div>
</div>
</div>

46
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-005.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation with nested OOFs.
</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: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: relative;
height: 500px;
width: 20px;
}
.flex > div {
height: 500px;
width: 10px;
}
.abs {
background: green;
position: absolute;
width: 10px;
top: 0;
bottom: 0;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex">
<div>
<div class="abs"></div>
</div>
<div style="position: relative;">
<div class="abs"></div>
</div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-006.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation with items that stretch.
</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: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: relative;
height: 500px;
width: 20px;
}
.flex > div {
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex">
<div style="height: 250px;"></div>
<div style="height: 250px;"></div>
<div style="height: 500px;"></div>
</div>
</div>

38
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-007.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation with items that stretch.
</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: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: relative;
height: 500px;
width: 20px;
}
.flex > div {
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="flex">
<div style="height: 250px;;"></div>
<div style="height: 250px;"></div>
<div style="height: 100px;"></div>
<div style="height: 50px;"></div>
<div style="height: 350px;"></div>
<div style="height: 500px;"></div>
</div>
</div>

38
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-008.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation.
</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: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 50px;
position: relative;
}
.flex > div {
background: green;
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">
<div style="position: absolute; top: 50px; left: 25px; height: 150px;"></div>
<div style="height: 150px;"></div>
<div style="height: 25px;"></div>
<div style="height: 25px;"></div>
<div style="height: 50px;"></div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-009.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>
Tests that a flex-item grows due to fragmentation.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 2; column-fill: auto; column-gap: 0; background: red;">
<div style="display: flex; flex-direction: column; flex-wrap: wrap;">
<div style="width: 50px; line-height: 0; background: green;">
<div style="contain: size; height: 20px;"></div>
<div style="contain: size; height: 100px;"></div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-010.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>
Tests that a flex-item with a fixed block-size container grows due to fragmentation.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 2; column-fill: auto; column-gap: 0; background: red;">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 100px;">
<div style="width: 25px; line-height: 0; background: green;">
<div style="contain: size; height: 20px;"></div>
<div style="contain: size; height: 100px;"></div>
</div>
<div style="width: 25px; line-height: 0; background: green;">
<div style="contain: size; height: 20px;"></div>
<div style="contain: size; height: 100px;"></div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-011.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: Percentage height decendant.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 2; column-fill: auto; column-gap: 0; background: red;">
<div style="display: flex; flex-flow: column; flex-wrap: wrap; height: 200px;">
<div style="height: 100%; background: green;"></div>
<div style="min-height: 100px;">
<div style="height: 200%; background: green;"></div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-012.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>
Tests that a flexbox expands its intrinsic block-size, due to a
flex item fragmenting.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 2; column-gap: 0; column-fill: auto; background: red;">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; background: green;">
<div style="display: flex; flex-wrap: wrap; flex-direction: column;">
<div style="line-height: 0;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
</div>

24
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-013.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<title>
Tests that flex-items get pushed down due to a previous flex-item expanding as
a result of fragmentation.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 2; column-gap: 0; column-fill: auto; background: red;">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;">
<div style="line-height: 0; background: green; width: 25px;">
<div style="display: inline-block; width: 25px; height: 80px;"></div>
<div style="display: inline-block; width: 25px; height: 30px;"></div>
</div>
<div style="background: green; width: 25px; height: 50px;"></div>
<div style="background: green; width: 25px; height: 20px;"></div>
<div style="line-height: 0; background: green; width: 25px;">
<div style="display: inline-block; width: 25px; height: 30px;"></div>
<div style="display: inline-block; width: 25px; height: 80px;"></div>
</div>
<div style="background: green; width: 25px; height: 10px;"></div>
<div style="background: green; width: 25px; height: 10px;"></div>
</div>
</div>

21
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-014.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>
Tests that flex-items *don't* get pushed down when there is no expansion.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 2; column-gap: 0; column-fill: auto; background: red;">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;">
<div style="line-height: 0; background: green; height: 110px; width: 25px;">
<div style="display: inline-block; width: 25px; height: 80px;"></div>
<div style="display: inline-block; width: 25px; height: 30px;"></div>
</div>
<div style="background: green; height: 90px; width: 25px;"></div>
<div style="line-height: 0; background: green; height: 110px; width: 25px;">
<div style="display: inline-block; width: 25px; height: 30px;"></div>
<div style="display: inline-block; width: 25px; height: 80px;"></div>
</div>
<div style="background: green; height: 90px; width: 25px;"></div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-015.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Tests that flex-items get pushed down due to a previous flex-item expanding as
a result of fragmentation.
</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
<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; columns: 5; column-gap: 0; column-fill: auto; background: red;">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 500px;">
<div style="background: green; width: 10px;">
<div style="contain: size; width: 10px; height: 60px;"></div>
<div style="contain: size; width: 25px; height: 50px;"></div>
</div>
<div style="background: green; order: -1; width: 10px;">
<div style="contain: size; width: 10px; height: 80px;"></div>
<div style="contain: size; width: 10px; height: 30px;"></div>
</div>
<div style="background: green; width: 10px;">
<div style="contain: size; width: 10px; height: 20px;"></div>
<div style="contain: size; width: 10px; height: 100px; background: white;"></div>
</div>
<div style="background: green; width: 10px;">
<div style="contain: size; width: 25px; height: 50px;"></div>
<div style="contain: size; width: 10px; height: 60px;"></div>
</div>
<div style="background: green; order: -1; width: 10px;">
<div style="contain: size; width: 10px; height: 30px;"></div>
<div style="contain: size; width: 10px; height: 100px;"></div>
</div>
<div style="background: green; width: 10px;">
<div style="contain: size; width: 10px; height: 20px;"></div>
<div style="contain: size; width: 10px; height: 100px;"></div>
</div>
<div style="background: green; width: 10px;">
<div style="contain: size; width: 10px; height: 40px;"></div>
<div style="contain: size; width: 10px; height: 20px;"></div>
</div>
<div style="background: green; width: 10px;">
<div style="contain: size; width: 10px; height: 20px;"></div>
<div style="contain: size; width: 10px; height: 100px;"></div>
</div>
</div>
</div>

55
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-016.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<title>
Tests that flex-items get pushed down due to a previous flex row expanding as
a result of fragmentation with margin-top.
</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>
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;">
<div id="flex">
<div>
<div style="contain: size; width: 10px; height: 80px;"></div>
<div style="contain: size; width: 10px; height: 30px;"></div>
</div>
<div style="position: relative;">
<div style="contain: size; width: 10px; height: 70px;"></div>
<div style="contain: size; width: 10px; height: 40px;"></div>
<div style="position: absolute; width: 10px; height: 60px; background: green;"></div>
</div>
<div style="margin-top: 10px;">
<div style="contain: size; width: 10px; height: 80px;"></div>
<div style="contain: size; width: 10px; height: 40px;"></div>
</div>
<div style="height: 100px;"></div>
<div style="height: 60px;"></div>
<div style="margin-top: 10px; position: relative;">
<div style="position: absolute; top: -10px; width: 10px; height: 10px; background: green;"></div>
<div style="contain: size; width: 10px; height: 30px;"></div>
<div style="contain: size; width: 10px; height: 80px;"></div>
<div style="position: absolute; width: 10px; height: 20px; background: green;"></div>
</div>
<div>
<div style="contain: size; width: 10px; height: 40px;"></div>
<div style="contain: size; width: 10px; height: 70px;"></div>
</div>
<div style="position: relative;">
<div style="contain: size; width: 10px; height: 30px;"></div>
<div style="contain: size; width: 10px; height: 80px;"></div>
<div style="contain: size; width: 10px; height: 40px;"></div>
<div style="position: absolute; bottom: 0px; left: -10px; width: 20px; height: 40px; background: white;"></div>
</div>
</div>
</div>

45
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-017.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<title>
Multi-line column flex 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 10px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div id="flex">
<div style="height: 250px; break-inside: avoid;"></div>
<div style="height: 200px; break-inside: avoid;"></div>
<div style="height: 120px; break-inside: avoid;"></div>
<div style="height: 180px; break-inside: avoid;"></div>
<div style="height: 100px; break-inside: avoid;"></div>
</div>
<div class="abs" style="top: 20px; left: 30px; height: 80px;"></div>
<div class="abs" style="top: 50px; left: 40px; height: 50px;"></div>
<div class="abs" style="top: 80px; left: 70px; height: 20px;"></div>
</div>

49
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-018.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
Multi-line column flex 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 5px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div class="abs" style="top: 50px; left: 25px; height: 50px;"></div>
<div id="flex">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 350px; break-before: avoid;"></div>
<div style="height: 100px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 250px; break-before: avoid;"></div>
<div style="height: 350px; break-before: avoid;"></div>
<div style="height: 150px; break-before: avoid;"></div>
<div style="height: 500px;"></div>
</div>
</div>

49
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-019.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
Multi-line column flex 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 5px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div class="abs" style="top: 50px; left: 25px; height: 50px;"></div>
<div id="flex">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 350px; break-before: avoid;"></div>
<div style="height: 100px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 250px; break-before: avoid;"></div>
<div style="height: 400px;"></div>
<div style="height: 100px; break-before: avoid;"></div>
<div style="height: 500px;"></div>
</div>
</div>

49
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-020.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<title>
Multi-line column flex 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 5px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 5px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div class="abs" style="top: 50px; left: 25px; height: 50px;"></div>
<div id="flex">
<div style="height: 50px;"></div>
<div style="height: 50px; break-after: avoid;"></div>
<div style="height: 350px;"></div>
<div style="height: 100px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px; break-after: avoid;"></div>
<div style="height: 250px;"></div>
<div style="height: 400px; break-after: avoid;"></div>
<div style="height: 100px; break-after: avoid;"></div>
<div style="height: 500px;"></div>
</div>
</div>

46
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-021.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
Multi-line column flex 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 10px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div class="abs" style="top: 50px; left: 30px; height: 50px;"></div>
<div id="flex">
<div style="height: 50px;"></div>
<div style="height: 50px; break-before: column;"></div>
<div style="height: 350px;"></div>
<div style="height: 100px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px; break-before: column;"></div>
<div style="height: 250px;"></div>
</div>
</div>

46
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-022.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation with break-after: 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 10px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div class="abs" style="top: 50px; left: 30px; height: 50px;"></div>
<div id="flex">
<div style="height: 50px; break-after: column;"></div>
<div style="height: 50px;"></div>
<div style="height: 350px;"></div>
<div style="height: 100px;"></div>
<div style="height: 50px; break-after: column;"></div>
<div style="height: 50px;"></div>
<div style="height: 250px;"></div>
</div>
</div>

48
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-023.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: break-before values on the first item
are propagated to the flex container.
</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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 20px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div style="width: 20px; height: 50px; background: green;"></div>
<div style="width: 20px; height: 50px; background: green;"></div>
<div id="flex">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 250px;"></div>
<div style="height: 100px; break-before: avoid;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 150px;"></div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-024.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: break-after values on the first item
are propagated to the flex container.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 50px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50px;
}
#flex > div {
background: green;
width: 25x;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div style="width: 50px; height: 50px; background: green;"></div>
<div id="flex">
<div style="height: 25px;"></div>
<div style="height: 25px; break-after: avoid;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 50px; height: 50px; background: green;"></div>
</div>

48
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-025.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: break-before values on the first item
are propagated to the flex container.
</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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 20px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 350px;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div style="width: 20px; height: 50px; background: green;"></div>
<div id="flex">
<div style="height: 50px; break-before: avoid;"></div>
<div style="height: 50px;"></div>
<div style="height: 250px;"></div>
<div style="height: 100px; break-before: column;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 150px;"></div>
</div>
<div style="width: 20px; height: 50px; background: green;"></div>
</div>

44
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-026.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: break-after values on the first item
are propagated to the flex container.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 50px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50px;
}
#flex > div {
background: green;
width: 25x;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div id="flex">
<div style="height: 25px;"></div>
<div style="height: 25px; break-after: column;"></div>
<div style="height: 50px; break-after: avoid;"></div>
</div>
<div style="width: 50px; height: 50px; background: green;"></div>
<div style="width: 50px; height: 50px; background: green;"></div>
</div>

45
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-027.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: early break inside columns.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 50px;
background: green;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
#flex > div {
background: green;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="top: 50px; height: 50px;"></div>
<div class="abs" style="left: 100px; height: 50px; background: white;"></div>
<div id="flex">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 100px; break-before: avoid;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px; break-after: avoid;"></div>
<div style="height: 100px;"></div>
</div>
</div>

48
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-028.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: early break inside columns.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
.abs {
position: absolute;
width: 50px;
background: white;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
#flex > div {
background: green;
width: 25px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="abs" style="left: 100px; height: 50px;"></div>
<div id="flex">
<div>
<div style="height: 50px; width: 25px;"></div>
<div style="height: 50px; width: 25px;"></div>
</div>
<div style="height: 100px; break-before: avoid;"></div>
<div>
<div style="height: 50px; width: 25px;"></div>
<div style="height: 50px; width: 25px; break-after: avoid;"></div>
</div>
<div style="height: 100px;"></div>
</div>
</div>

27
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-029.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: we shouldn't insert a forced break if
there's no preceding content at the start of a fragmentainer.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 200px;">
<div style="height: 100px; width: 25px; break-before: column; background: green;"></div>
<div style="height: 100px; width: 25px; break-before: column; background: green;"></div>
<div style="height: 50px; width: 25px; break-before: column; background: green;"></div>
<div style="height: 150px; width: 25px; background: green;"></div>
</div>
</div>

27
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-030.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: the flex container consumes the
remaining fragmentainer space if an item breaks before.
</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 {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 200px; background: green;">
<div style="height: 10px; width: 25px;"></div>
<div style="height: 100px; width: 25px; break-before: column;"></div>
<div style="height: 50px; width: 25px;"></div>
<div style="height: 100px; width: 25px; break-before: column;"></div>
</div>
</div>

48
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-031.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
Multi-line column flex 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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
position: relative;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div id="flex">
<div>
<div style="contain: size; width: 10px; height: 90px;"></div>
<div style="contain: size; width: 10px; height: 80px;"></div>
</div>
<div style="height: 30px; break-inside: avoid;"></div>
<div style="height: 170px;"></div>
<div style="height: 100px;"></div>
<div>
<div style="contain: size; width: 10px; height: 90px;"></div>
<div style="contain: size; width: 10px; height: 80px;"></div>
</div>
<div style="height: 30px; break-inside: avoid;"></div>
<div style="height: 170px;"></div>
<div style="height: 100px;"></div>
<div style="position: absolute; height: 20px; width: 20px; top: 180px;"></div>
</div>
</div>

40
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-032.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation with forced break and negative margin.
</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 {
column-count: 5;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
position: relative;
background: red;
z-index: -1;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 500px;
position: relative;
}
#flex > div {
background: green;
width: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div id="flex">
<div style="height: 150px;"></div>
<div style="height: 350px; break-before: column; margin-top: -50px;"></div>
<div style="height: 150px;"></div>
<div style="height: 300px; break-before: column;"></div>
</div>
<div style="position: absolute; top: 50px; left: 20px; width: 20px; height: 50px; background: green;"></div>
<div style="position: absolute; top: -50px; left: 40px; width: 10px; height: 50px; background: white;"></div>
</div>

60
tests/wpt/web-platform-tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-033.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<title>
Multi-line column flex fragmentation: column balancing with forced break.
</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>
#flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background: green;
height: 100px;
}
#flex > div {
width: 10px;
background: green;
flex: none;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="width: 100px; columns: 5; column-gap: 0;">
<div id="flex">
<!-- flex column 1 -->
<div style="height: 5px;"></div>
<div style="height: 10px; break-before: column;"></div>
<div style="height: 5px;">
<div style="height: 90px; width: 10px; background: green;"></div>
</div>
<div style="height: 5px;"></div>
<div style="height: 10px; break-before: column;"></div>
<div style="height: 5px;">
<div style="height: 90px; width: 10px; background: green;"></div>
</div>
<div style="height: 10px; break-before: column;"></div>
<div style="height: 5px;">
<div style="height: 90px; width: 10px; background: green;"></div>
</div>
<div style="height: 5px;break-before: column;">
<div style="height: 100px; width: 20px; background: green;"></div>
</div>
<!-- flex column 2 -->
<div style="height: 50px;"></div>
<div style="height: 10px; break-before: column;"></div>
<div style="height: 5px;">
<div style="height: 90px; width: 10px; background: green;"></div>
</div>
<div style="height: 5px;"></div>
<div style="height: 10px; break-before: column;"></div>
<div style="height: 5px;">
<div style="height: 90px; width: 10px; background: green;"></div>
</div>
<div style="height: 10px; break-before: column;"></div>
<div style="height: 5px;">
<div style="height: 90px; width: 10px; background: green;"></div>
</div>
</div>
</div>
</div>

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