Bug 1732044 [wpt PR 30877] - Add clearance correctly past fragmented floats., a=testonly

Automatic update from web-platform-tests
Add clearance correctly past fragmented floats.

It used to be possible to squeeze in a zero-height child (in-flow or
floated) at the bottom of a fragmentainer with fragmented floats, even
if the child should have clearance applied.

So, just adding an exclusion that goes all the way to the bottom of the
fragmentainer won't do. That part ensures that containers are stretched
correctly, but we actually need some additional logic to make sure that
we don't attempt to insert content that should be cleared past the
current fragmentainer.

Bug: 829028
Change-Id: Ib9363936d1602bff7dc5ecb0e36eecdf62c91270
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3170395
Reviewed-by: Alison Maher <almaher@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#923287}

--

wpt-commits: fed9a1c33add1474b2d34463ff1621a18f8cd071
wpt-pr: 30877
This commit is contained in:
Morten Stenshorne 2021-10-02 11:05:24 +00:00 коммит произвёл moz-wptsync-bot
Родитель ffec542f4f
Коммит 8783eca040
5 изменённых файлов: 94 добавлений и 0 удалений

Просмотреть файл

@ -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/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<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:150px;">
<div style="height:100px; background:green;"></div>
<div style="float:left; break-inside:avoid; width:100%; height:100px;">
<div style="height:60px; background:green;"></div>
</div>
<div style="float:left; width:100%; height:0;">
<div style="height:40px; margin-top:-40px; background:green;"></div>
</div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control">
<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="float:left; width:100%; height:200px;">
<div style="height:160px; background:green;"></div>
</div>
<div style="float:left; clear:left; width:100%; height:0;">
<div style="height:40px; margin-top:-40px; background:green;"></div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control">
<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="float:left; width:100%; height:200px;">
<div style="height:160px; background:green;"></div>
</div>
<div style="display:flow-root; clear:left; height:0;">
<div style="height:40px; margin-top:-40px; background:green;"></div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control">
<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:150px;">
<div style="height:100px; background:green;"></div>
<div style="float:left; break-inside:avoid; width:100%; height:100px;">
<div style="height:60px; background:green;"></div>
</div>
<div style="clear:both; display:flow-root; height:0;">
<div style="height:40px; margin-top:-40px; background:green;"></div>
</div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:4; column-fill:auto; column-gap:0; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="float:right; break-inside:avoid; width:60%; height:400px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px;"></div>
<div style="height:100px; background:green;"></div>
<div style="height:50px;"></div>
<div style="height:60px; background:green;"></div>
</div>
<div style="clear:left; float:left; width:40%; height:0;">
<div style="height:100px; background:green;"></div>
<div style="height:50px;"></div>
<div style="height:100px; background:green;"></div>
<div style="height:50px;"></div>
<div style="height:60px; background:green;"></div>
</div>
<div style="clear:both; display:flow-root; height:0;">
<div style="height:40px; margin-top:-40px; background:green;"></div>
</div>
</div>
</div>