[css-break] Clarify the expections of monolithic boxes that fits but has descendants which overflow #6056

MatsPalmgren · 2021-03-01T16:42:12Z

In https://chromium-review.googlesource.com/c/chromium/src/+/2696632 Morten Stenshorne says:

Avoid fragmentainer overflow from children of monolithic content.

I can't find any support for this interpretation of "monolithic" in the css-break spec. On the contrary, it only says that an element's own box should not be fragmented[1]. Technically, the box itself isn't fragmented when only its descendants overflow. To be clear, I'm not objecting to their interpretation, but the expected behavior of this case should probably be explicitly specified if we want interoperability for it.

[1] https://drafts.csswg.org/css-break/#monolithic

mstensho · 2021-10-26T09:46:05Z

Would be great to have this clarified. We should revert that change in Blink if it's the wrong interpretation, or even just for the sake of interop.

Here's some more input to the discussion, which is somewhat related, although in this case it's about a non-monolithic box that has monolithic overflow. We have this test in Chromium:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/fast/multicol/tall-line-in-short-block.html;l=1;drc=77578ccb4082ae20a9326d9e673225f1189ebb63

It passes in Gecko, EdgeHTML, and legacy Blink, but not with LayoutNGBlockFragmentation (that feature is tracked by http://crbug.com/829028).

This test passes for various reasons in various browsers, but Gecko seems to have the most reasonable reason. It goes something like this: If the containing block has a specified block-size (or max-block-size or whatever) that would fit in the current fragmentainer, fit the first piece of monolithic content (such as a line box) in the current fragmentainer as well, even if it overflows the fragmentainer.

<!DOCTYPE html>
<style>
  .multicol {
    columns: 2;
    column-fill: auto;
    height: 150px;
    line-height: 20px;
    column-rule: solid;
    orphans: 1;
    widows: 1;
    background:yellow;
  }
  .filler {
    height: 100px;
  }
  .linecontainer {
    height: 20px;
  }
  .tall {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<p>There should be a blue square in the first column, and the word "second" in
  the second column.</p>
<div class="multicol">
  <div class="filler"></div>
  <div class="linecontainer">
    <div class="tall"></div><br>
    second
  </div>
</div>

fast/multicol/tall-line-in-short-block.html was added because Google Docs depended on that behavior, and I believe that's still the case. But is this valid? And why? Why shouldn't we push .linecontainer to the next column, where everything would fit?

cc @fantasai @atanassov

This is a revert of the fix for bug 1178742, and it will make us compatible with Firefox. The exact behavior isn't defined in the spec. See w3c/csswg-drafts#6056 This change will also make it more sensible to fix crbug.com/1242348 and also easier to make the initial column balancing pass more in sync with actual fragmentation (in a follow-up CL). Bug: 1178742, 829028 Change-Id: I1bea2fce39b20723d14398ae54cc7f06fa54eb4b

This is a revert of the fix for bug 1178742, and it will make us compatible with Firefox. The exact behavior isn't defined in the spec. See w3c/csswg-drafts#6056 This change will also make it more sensible to fix crbug.com/1242348 and also easier to make the initial column balancing pass more in sync with actual fragmentation (in a follow-up CL). Bug: 1178742, 829028 Change-Id: I1bea2fce39b20723d14398ae54cc7f06fa54eb4b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3270687 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#940591}

…t for fragmentation., a=testonly Automatic update from web-platform-tests Ignore overflow inside monolithic content for fragmentation. This is a revert of the fix for bug 1178742, and it will make us compatible with Firefox. The exact behavior isn't defined in the spec. See w3c/csswg-drafts#6056 This change will also make it more sensible to fix crbug.com/1242348 and also easier to make the initial column balancing pass more in sync with actual fragmentation (in a follow-up CL). Bug: 1178742, 829028 Change-Id: I1bea2fce39b20723d14398ae54cc7f06fa54eb4b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3270687 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#940591} -- wpt-commits: 8010b3d2e76d0f365f087abe4972775b352dad6e wpt-pr: 31580

This is a revert of the fix for bug 1178742, and it will make us compatible with Firefox. The exact behavior isn't defined in the spec. See w3c/csswg-drafts#6056 This change will also make it more sensible to fix crbug.com/1242348 and also easier to make the initial column balancing pass more in sync with actual fragmentation (in a follow-up CL). Bug: 1178742, 829028 Change-Id: I1bea2fce39b20723d14398ae54cc7f06fa54eb4b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3270687 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#940591}

Add the following github link to the relevant flex tests: w3c/csswg-drafts#6056 (comment) Bug: 660611 Change-Id: I43548a9caa2784e8badb2c0d357b00c745136c25

Add the following github link to the relevant flex tests: w3c/csswg-drafts#6056 (comment) Bug: 660611 Change-Id: I43548a9caa2784e8badb2c0d357b00c745136c25 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3541545 Auto-Submit: Alison Maher <almaher@microsoft.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#983883}

…stonly Automatic update from web-platform-tests [FlexNG] Add github links to tests Add the following github link to the relevant flex tests: w3c/csswg-drafts#6056 (comment) Bug: 660611 Change-Id: I43548a9caa2784e8badb2c0d357b00c745136c25 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3541545 Auto-Submit: Alison Maher <almaher@microsoft.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#983883} -- wpt-commits: fa2a2e69a1881a94580d4b0422f1a411e26bfe8c wpt-pr: 33301

This is a revert of the fix for bug 1178742, and it will make us compatible with Firefox. The exact behavior isn't defined in the spec. See w3c/csswg-drafts#6056 This change will also make it more sensible to fix crbug.com/1242348 and also easier to make the initial column balancing pass more in sync with actual fragmentation (in a follow-up CL). Bug: 1178742, 829028 Change-Id: I1bea2fce39b20723d14398ae54cc7f06fa54eb4b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3270687 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#940591} NOKEYCHECK=True GitOrigin-RevId: 49b1129df925fae49ecc630e84e81b7daa34ee88

Add the following github link to the relevant flex tests: w3c/csswg-drafts#6056 (comment) Bug: 660611 Change-Id: I43548a9caa2784e8badb2c0d357b00c745136c25 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3541545 Auto-Submit: Alison Maher <almaher@microsoft.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#983883} NOKEYCHECK=True GitOrigin-RevId: 892b8212169374e3a031f29084138fd9ded54b2d

fantasai added the css-break-3 Current Work label Mar 23, 2021

chromium-wpt-export-bot mentioned this issue Nov 10, 2021

Ignore overflow inside monolithic content for fragmentation. web-platform-tests/wpt#31580

Merged

chromium-wpt-export-bot mentioned this issue Mar 22, 2022

[FlexNG] Add github links to tests web-platform-tests/wpt#33301

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-break] Clarify the expections of monolithic boxes that fits but has descendants which overflow #6056

[css-break] Clarify the expections of monolithic boxes that fits but has descendants which overflow #6056

MatsPalmgren commented Mar 1, 2021

mstensho commented Oct 26, 2021

[css-break] Clarify the expections of monolithic boxes that fits but has descendants which overflow #6056

[css-break] Clarify the expections of monolithic boxes that fits but has descendants which overflow #6056

Comments

MatsPalmgren commented Mar 1, 2021

mstensho commented Oct 26, 2021