fune/testing/web-platform/tests/css/css-break/float-006.html
Morten Stenshorne 00cf5a6dd5 Bug 1755924 [wpt PR 32876] - Handle resumed blocks that get sliced by floats correctly., a=testonly
Automatic update from web-platform-tests
Handle resumed blocks that get sliced by floats correctly.

Floats may be pushed from one fragmentainer to the next, and thus get in
the way for blocks that started in the former fragmentainer, which means
two things:

1. The resumed block may not start at the fragmentainer block-start
(this was already working correctly)

2. The resumed block may not be able to fit anything at all in the next
fragmentainer (if the float is tall enough). This was failing. We'd end
up inserting a break before a node that we had already started, causing
a lot of trouble.

We'll now allow fragments of resumed blocks even if we're out of space
(their block-size will typically be 0, i.e. no visual effect). We cannot
just break before them, as that would restart layout from scratch once
we get to a fragmentainer that has room (and a lot of other weirdness,
e.g. confusing anyone trying to use the break token sequence numbers).

As for the crash test included in this CL, we'll actually fit a portion
of the nested multicol container below the content edge of the float in
the first fragmentainer, and then resume the rest after the tall bottom
padding of the float (which gets pushed to the second outer
fragmentainer, since it's unbreakable). This is a bit weird, but
probably acceptable.

Bug: 1289532
Change-Id: I6f564652aca170b3cba80a3e01209984be206f95
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3469462
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#972587}

--

wpt-commits: c4685f7e4b654d5ee7a1b37466286e782747d2b9
wpt-pr: 32876
2022-03-21 06:50:10 +00:00

10 lines
674 B
HTML

<!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/#varying-size-boxes">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="height:70px; background:green;"></div>
<div style="float:left; break-inside:avoid; width:100%; height:50px; background:green;"></div>
<div style="display:flow-root; width:100%; height:280px; background:green;"></div>
</div>