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

Bug 1824810 [wpt PR 39224] - Consistently encompass fragmentainer overflow in the container., a=testonly 

Automatic update from web-platform-tests
Consistently encompass fragmentainer overflow in the container.

Monolithic content may cause a fragmentainer to be overflowed, and the
container(s) of the monolithic node should then grow to hold the
monolithic content (and thereby also overflow the fragmentainer), if
allowed.

Some of the tests included here were already passing, but not all.

For block containers we were doing it wrong if the container of the
overflowing (monolithic) fragment had more children after the monolithic
node, whereas we got it right if it ended in the current fragmentainer.
See monolithic-overflow-002.tentative.html vs.
monolithic-overflow-003.tentative.html .

For flex containers we were already doing it right.

For grid containers and tables we were doing it wrong, because we didn't
provide a correct intrinsic block-size (which is used by the
fragmentation machinery to handle unbreakable content correctly).

One additional complication for grid and tables was that we didn't
handle the fact that cells or grid items might (now) be stretched by
monolithic content, whereas sibling cells / items aren't. So we had to
add support for that. Flex layout also already handles this part
correctly, in GiveItemsFinalPositionAndSizeForFragmentation(), by
compensating for the difference between space consumed by the flex line
and the space consumed by the flex item. Do the same for grid and
tables.

Although this behavior isn't specified, we're now more compatible with
Gecko. This behavior also makes more sense. With the previous behavior a
child might overflow its container for no reason (the monolithic child
would overflow one fragmentainer, whereas the container would fragment
at the fragmentation line).

This change also makes it much easier to fix crbug.com/1402540 , so that
we can just very easily walk past monolithic content that bleeds into
subsequent pages.

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

--

wpt-commits: a2c3d90657a9d510fc80ded0b4c0317e86c3dfa8
wpt-pr: 39224
This commit is contained in:
Morten Stenshorne 2023-03-30 11:12:29 +00:00 коммит произвёл moz-wptsync-bot
Родитель 13f0827fc9
Коммит f8e3a9c78d
24 изменённых файлов: 369 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

12
testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-001.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="display:flex; flex-flow:column; height:100px; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-002.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="display:flex; flex-flow:column; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-003.tentative.html Normal 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=1425077">
<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:60px;">
<div style="display:flex; flex-flow:column; height:200px; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-004.tentative.html Normal 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=1425077">
<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:60px;">
<div style="display:flex; flex-flow:column; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="display:grid; height:100px; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="display:grid; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html Normal 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=1425077">
<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:60px;">
<div style="display:grid; height:200px; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html Normal 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=1425077">
<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:60px;">
<div style="display:grid; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

22
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.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://bugs.chromium.org/p/chromium/issues/detail?id=1425077">
<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>
<!-- Check that monolithic overflow in one grid item doesn't mess up the other item. -->
<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;">
<div style="display:grid; grid-template-columns:1fr 1fr; grid-template-rows:200px auto;">
<div style="background:red;">
<div style="height:200px; background:green;"></div>
</div>
<div style="background:red;">
<div style="height:200px; background:green;"></div>
</div>
<div>
<div style="contain:size; height:150px;"></div>
</div>
<div style="background:red;">
<div style="height:200px; background:green;"></div>
</div>
</div>
</div>

18
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html Normal 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=1425077">
<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>
<!-- Check that monolithic overflow in one grid item doesn't mess up the other item. -->
<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;">
<div style="display:grid; grid-template-columns:auto auto;">
<div>
<div style="contain:size; height:150px;"></div>
<div style="contain:size; height:150px;"></div>
<div style="contain:size; height:150px;"></div>
</div>
<div style="background:red;">
<div style="height:400px; background:green;"></div>
</div>
</div>
</div>

27
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html Normal file
Просмотреть файл

@ -0,0 +1,27 @@
<!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=1425077">
<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; gap:0; column-fill:auto; width:100px; height:100px;">
<div style="display:grid; background:red;">
<div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
</div>
</div>
</div>

25
testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html Normal file
Просмотреть файл

@ -0,0 +1,25 @@
<!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=1425077">
<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; gap:0; column-fill:auto; width:100px; height:100px;">
<div style="display:grid; background:red;">
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
<div style="contain:size; height:150px;">
<div style="height:100px; background:green;"></div>
<div style="height:50px; background:white;"></div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/monolithic-overflow-001.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="height:100px; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/monolithic-overflow-002.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/monolithic-overflow-003.tentative.html Normal 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=1425077">
<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:60px;">
<div style="height:200px; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/monolithic-overflow-004.tentative.html Normal 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=1425077">
<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:60px;">
<div style="background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/monolithic-overflow-005.tentative.html Normal 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=1425077">
<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:60px;">
<div style="height:100px; background:green;">
<div style="contain:size; height:300px;"></div>
<div style="contain:size; height:100px; background:green;"></div>
</div>
</div>
</div>

19
testing/web-platform/tests/css/css-break/monolithic-overflow-006.tentative.html Normal 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=1425077">
<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:60px;">
<div style="height:150px; background:green;">
<div style="contain:size; height:100px;">
<div style="height:60px;"></div>
<div style="height:40px; margin-left:100%; width:100%; background:green;"></div>
</div>
<div style="height:60px;">
<div style="height:50px;"></div>
<div style="height:10px; background:green;"></div>
</div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/table/monolithic-overflow-001.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="display:table; width:100%; height:100px; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

12
testing/web-platform/tests/css/css-break/table/monolithic-overflow-002.tentative.html Normal 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=1425077">
<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:1; column-fill:auto; height:60px;">
<div style="display:table; width:100%; background:green;">
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/table/monolithic-overflow-003.tentative.html Normal 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=1425077">
<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:60px;">
<div style="display:table; width:100%; height:200px; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

13
testing/web-platform/tests/css/css-break/table/monolithic-overflow-004.tentative.html Normal 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=1425077">
<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:60px;">
<div style="display:table; width:100%; background:green;">
<div style="contain:size; height:100px;"></div>
<div style="contain:size; height:100px;"></div>
</div>
</div>
</div>

26
testing/web-platform/tests/css/css-break/table/monolithic-overflow-005.html Normal file
Просмотреть файл

@ -0,0 +1,26 @@
<!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=1425077">
<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>
<!-- Check that monolithic overflow in one cell doesn't mess up the other cell. -->
<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;">
<div style="display:table; width:100%;">
<div style="display:table-row;">
<div style="display:table-cell; background:red;">
<div style="height:200px; background:green;"></div>
</div>
<div style="display:table-cell; background:red;">
<div style="height:200px; background:green;"></div>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell; width:50%;">
<div style="contain:size; height:150px;"></div>
</div>
<div style="display:table-cell; width:50%; background:red;">
<div style="height:200px; background:green;"></div>
</div>
</div>
</div>
</div>

19
testing/web-platform/tests/css/css-break/table/monolithic-overflow-006.html Normal 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=1425077">
<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>
<!-- Check that monolithic overflow in one table cell doesn't mess up percentage resolution in the other cell. -->
<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table; width:100%; height:200px;">
<div style="display:table-cell; width:50%;">
<div style="height:100%; background:green;"></div>
</div>
<div style="display:table-cell; width:50%;">
<div style="contain:size; height:130px;">
<div style="height:100px; background:green;"></div>
</div>
<div style="height:100px; background:green;"></div>
</div>
</div>
</div>