forked from mirrors/gecko-dev
821b510d31
Automatic update from web-platform-tests Avoid suboptimal breaks inside a column row when appropriate. Set a minimum appeal for breaks inside a nested multicol container, if the row is past the block-start of the outer fragmentainer. If there's content that breaks suboptimally (with a lower appeal than any previous breaks), push such content ahead of us, so that it ends up in the next outer fragmentainer. There may be more space there, so that the suboptimal break may be avoided. Propagate the lowest appeal among all column breaks to the multicol fragment builder, so that an ancestor can decide to break before the entire multicol container, if that would be better. This currently only works if the multicol container itself breaks, since break appeal is stored in the break tokens. A follow-up CL will fix this (by storing it in NGLayoutResult instead), so that we'll also detect suboptimal breaks inside a nested multicol container that didn't break in the outer fragmentation context. This doesn't fix any existing tests by itself, but will contribute to it. A follow-up CL will fix some remaining problems, so that quite a few existing tests will finally pass. Bug: 829028 Change-Id: I4a09e2163aa194780be986f358283d4e8da9a115 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3149995 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/main@{#919814} -- wpt-commits: 8097f1959cf300cd423192fe36d00c05c58c066c wpt-pr: 30419
23 lines
1.4 KiB
HTML
23 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
|
|
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;">
|
|
<div style="height:50px; background:green;"></div>
|
|
<div style="columns:5; column-fill:auto; column-gap:0;">
|
|
<!-- Fill the first inner column: -->
|
|
<div style="height:50px; background:green;"></div>
|
|
<!-- Take up all the space in the next two columns, but paint a background
|
|
in all four remaining columns, using a large width: -->
|
|
<div style="float:left; width:300%; height:100px; background:green;"></div>
|
|
<!-- Skip the remaining columns in the first row and jump to the next outer
|
|
fragmentainer and start a taller row there, since the content is
|
|
monolithic and too tall to fit in the first one: -->
|
|
<div style="contain:size; height:100px; background:green;"></div>
|
|
<!-- Take up the remaining four columns in the second row in the second
|
|
outer fragmentainer: -->
|
|
<div style="float:left; width:100%; height:400px; background:green;"></div>
|
|
</div>
|
|
</div>
|