mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1729892 [wpt PR 30420] - Improve breaking before nested multicols and their rows., a=testonly 

Automatic update from web-platform-tests
Improve breaking before nested multicols and their rows.

1. Avoid breaking inside an inner multicol fragment if there were
suboptimal breaks inside even if the inner multicol container didn't
break in the outer fragmentation context. multicol-nested-018.html,
multicol-nested-022.html and multicol-nested-023.html test this.

2. Properly constrain balanced column block-size to remaining space in
the outer fragmentainer.  We used to let unbreakable content override
the remaining space, but this is wrong. This fixes
forced-break-too-short-column.html and
nested-short-first-row-extra-tall-line.html

Store break appeal in NGLayoutResult, rather than in NGBreakToken. The
reason is that we may have a violating break inside a fragment that
happened inside a nested fragmentation context, even if the fragment
doesn't necessarily break within the outer fragmentation context.

Also create a proper break token inside a nested multicol container if
there is none and we want to break before the first piece of column
content. Calling SetDidBreakSelf() manually, like we used to, confused
FinishFragmentation() into thinking that we were past the end of the
block-end content box of the multicol container. This is tested by
nested-with-padding.html Because of this change, the code in
PreviousInnerFragmentainerIndex() needed an update, to ignore this break
token, since break-before tokens don't have a sequence number.

Remove the has_violating_descendant_break flag, and use the break appeal
in the layout result instead. We had a column-balancing bug where where
we were missing break-inside:avoid violations, because such violations
don't affect the child's stored break appeal (the reason for this is
explained in further detail inside CalculateBreakAppealInside()).
Such violations were already propagated correctly to the builder's break
appeal, so now it just works. This is tested by
multicol-fill-balance-014.html . Also remove
LayoutNGBlockFragmentation-specific baselines for
moz-multicol3-column-balancing-break-inside-avoid-1.html because of
this, as we now render identically to the legacy engine.

This change fixes some existing tests. It also made
outer-column-break-after-inner-spanner-2.html render correctly, but not
according to the expectation, which was written for the legacy engine.
The legacy engine fails to push the block with the BR inside entirely to
the next outer fragmentainer. So replce it with a correct test:
multicol-nested-017.html

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

--

wpt-commits: 3d56f2cc3e241a413c6801597a5895eeb9c1dded
wpt-pr: 30420
This commit is contained in:
Morten Stenshorne 2021-09-14 10:01:04 +00:00 коммит произвёл moz-wptsync-bot
Родитель c8d1e11aeb
Коммит 0fe453514d
9 изменённых файлов: 191 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

14
testing/web-platform/tests/css/css-multicol/multicol-fill-balance-014.html Normal 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-multicol-1/#cf">
<p>Test passes if there is a filled green square below.</p>
<div id="mc" style="columns:4; width:100px; background:green;">
<div style="margin-top:30px; height:70px; break-inside:avoid;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(mc.offsetHeight, 100);
});
</script>

20
testing/web-platform/tests/css/css-multicol/multicol-nested-017.html Normal 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-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="width:100px; height:100px; background:red;">
<div style="columns:2; column-gap:0; column-fill:auto; height:110px; line-height:50px;">
<div style="height:60px; background:green;"></div>
<div style="columns:2; column-gap:0; column-fill:auto;">
<div style="height:40px; background:green;"></div>
<div style="height:100px; background:red;">
<div style="column-span:all; height:20px; background:green;"></div>
<!-- Outer column break should be here. -->
<div style="width:200%; background:green;"><br></div>
<div style="width:200%; height:50px; background:green;"></div>
</div>
</div>
</div>
</div>

29
testing/web-platform/tests/css/css-multicol/multicol-nested-018.html Normal file
Просмотреть файл

@ -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-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">
<style>
.mc {
columns: 2;
column-gap: 0;
column-fill: auto;
}
.ib {
display: inline-block;
vertical-align: top;
width: 200%;
height: 50px;
background: green;
}
</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 class="mc" style="height:190px; line-height:50px; orphans:2; widows:2;">
<div style="height:100px; background:green;"></div>
<div class="mc">
<div class="ib"></div><br>
<div class="ib"></div><br>
</div>
</div>
</div>

31
testing/web-platform/tests/css/css-multicol/multicol-nested-019.html Normal file
Просмотреть файл

@ -0,0 +1,31 @@
<!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">
<meta name="assert" content="Prefer ignoring the orphans request inside the inner multicol over ignoring the break-before:avoid and earlier orphans requests, as specified in https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.mc {
columns: 2;
column-gap: 0;
column-fill: auto;
}
.ib {
display: inline-block;
vertical-align: top;
width: 100%;
height: 25px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="mc" style="width:100px; height:100px; line-height:25px; orphans:3; widows:3; background:red;">
<div class="ib"></div><br>
<div class="ib"></div><br>
<div class="ib"></div><br>
<div class="mc" style="break-before:avoid;">
<div class="ib"></div><br>
<div class="ib"></div><br>
</div>
<div style="height:100px; background:green;"></div>
</div>

31
testing/web-platform/tests/css/css-multicol/multicol-nested-020.html Normal file
Просмотреть файл

@ -0,0 +1,31 @@
<!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">
<meta name="assert" content="Prefer ignoring the orphans request inside the inner multicol over ignoring the break-before:avoid, as specified in https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.mc {
columns: 2;
column-gap: 0;
column-fill: auto;
}
.ib {
display: inline-block;
vertical-align: top;
width: 100%;
height: 50px;
background: green;
}
</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 class="mc" style="height:140px; line-height:50px; orphans:2; widows:2;">
<div style="height:50px; background:green;"></div>
<div class="mc" style="break-before:avoid;">
<div class="ib"></div><br>
<div class="ib"></div><br>
</div>
<div style="height:100px; background:green;"></div>
</div>
</div>

22
testing/web-platform/tests/css/css-multicol/multicol-nested-021.html Normal file
Просмотреть файл

@ -0,0 +1,22 @@
<!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;">
<!-- First outer column -->
<div style="height:50px; background:green;"></div>
<div style="columns:2; column-fill:auto; column-gap:0;">
<!-- First and second inner column in the first row -->
<div style="width:200%; height:100px; background:green;"></div>
<!-- Second outer column, first column in the second row. -->
<div style="height:50px; background:green;"></div>
<!-- Second column in the second row. Pushing this to a third outer column
(and third inner row) wouldn't be ideal, since we'd overflow just as
much in the block direction by doing that. -->
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
</div>
</div>
</div>

14
testing/web-platform/tests/css/css-multicol/multicol-nested-022.html Normal 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-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="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="columns:2; column-gap:0; column-fill:auto;">
<div style="width:200%; height:100px; break-inside:avoid; background:green;"></div>
</div>
</div>
</div>

14
testing/web-platform/tests/css/css-multicol/multicol-nested-023.html Normal 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-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="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="columns:2; column-gap:0;">
<div style="width:200%; height:100px; break-inside:avoid; background:green;"></div>
</div>
</div>
</div>

16
testing/web-platform/tests/css/css-multicol/multicol-nested-024.html Normal 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-multicol-1/#the-multi-column-model">
<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="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="columns:2; column-gap:0;">
<div style="contain:size; height:100px; background:green;"></div>
<div style="contain:size; height:100px; background:green;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>