[css-contain] forced breaks within layout containment must not propagate to the parent
Reported by
goo...@gtalbot.org,
Jul 29
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0 Example URL: http://www.gtalbot.org/BrowserBugsSection/CSS3Contain/contain-layout-breaks-003-GT.html Steps to reproduce the problem: Self-explanatory and reduced test http://www.gtalbot.org/BrowserBugsSection/CSS3Contain/contain-layout-breaks-003-GT.html What is the expected behavior? a) a blue square below a yellow square and b) an orange square on the righthand side of the yellow square Reference file: http://www.gtalbot.org/BrowserBugsSection/CSS3Contain/contain-layout-breaks-003-GT-ref.html What went wrong? a) a blue square on the righthand-side of yellow square and b) an orange square is below the blue square The break-before declaration propagated to div#blue-parent Does it occur on multiple sites: No Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? No Firefox 63 buildID=20180728220145 but that is because Firefox does not support 'break-before: column' to begin with Chrome version: Chrome 69.0.3486.0 Channel: dev OS Version: Flash Version: irrelevant - Relevant section of spec (3.2. Layout Containment) is: https://www.w3.org/TR/css-contain-1/#containment-layout states " 5. Forced breaks are allowed within elements with layout containment, but do not propagate to the parent " - Suggested Component: Blink>Layout - Florian Rivoal should be added to CC list - other test: http://test.csswg.org/suites/css-contain-1_dev/nightly-unstable/html/contain-layout-breaks-002.htm http://test.csswg.org/suites/css-contain-1_dev/nightly-unstable/html/reference/contain-layout-breaks-002-ref.htm
,
Jul 30
Able to reproduce the issue on chrome reported version# 69.0.3486.0, latest stable# 68.0.3440.75 and on latest chrome# 70.0.3507.0 using Ubuntu 14.04, Mac 10.12.6 and Windows-10 with URL provide in comment# 0. As this issue is seen from M-60(60.0.3112.0), hence considering this issue as Non-Regression and marking it as Untriaged. Note: Tentatively adding Blink>CSS, Blink>Layout components to the issue. Thanks!
,
Aug 1
,
Aug 6
The tests seem to be 404, and Blink passes contain-layout-breaks-002.htm in CSS test suites. Can you put the tests back to somewhere?
,
Aug 6
I am sorry about that. I filename-renamed the test twice. It is now http://www.gtalbot.org/BrowserBugsSection/CSS3Contain/contain-layout-breaks-002.html and reference is http://www.gtalbot.org/BrowserBugsSection/CSS3Contain/reference/contain-layout-breaks-002-ref.html
,
Aug 6
Chrome 69.0.3493.3 does NOT pass http://test.csswg.org/suites/css-contain-1_dev/nightly-unstable/html/contain-layout-breaks-002.htm I will check with latest Canary build in a few min.
,
Aug 6
Chrome (Canary) 70.0.3509.0 does not pass http://test.csswg.org/suites/css-contain-1_dev/nightly-unstable/html/contain-layout-breaks-002.htm
,
Aug 6
Thank you for the feedback > Blink passes contain-layout-breaks-002.htm in CSS test suites This part I was wrong, sorry for confusion.
,
Aug 6
,
Sep 13
It looks like the test fails because of multi-col; by removing 'contain: layout' from the test: * Edge and WebKit renders as the test description says. * Gecko renders all boxes vertically, without column breaks. * Blink breaks column before the blue box. and I can't explain why Edge/WebKit is correct. It looks Gecko is correct to me, but that's probably I know little about multicol. Morten, do you have any idea?
,
Sep 13
Firefox 64 does *not* support 'break-before: column'. Blink supports 'break-before: column'. WebKit (Epiphany; AppleWebKit 605.1.15; WebKitGTK+ 2.22.0) supports 'break-before: column'. I do not know Edge's support for 'break-before: column'.
,
Sep 13
Regarding comment #10, if you remove contain:layout from the test, regular fragmentation rules apply, and the forced break before the child will be propagated to before the parent with the border, where there's a valid class A break point opportunity. We don't yet support the special non-propagable break points introduced by the containment spec. Then there'd be a break opportunity between the border of div#blue-parent and div#orange-child. Right?
,
Sep 13
Chromium 69.0.3497.81 and Chromium 71.0.3552.0 fail to handle correctly this test: http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/break-column-before-cf-auto-002.html
,
Sep 14
Thank you, I think I understood better now, didn't notice about 'break-before: column' and didn't know the propagation rules. Memo of the my current understanding: This test relies on "3.1.1. Child→Parent Break Propagation" https://drafts.csswg.org/css-break-3/#break-propagation is implemented. If this is not implemented, this test passes regardless of CSS contain. * Blink implements the "Child→Parent Break Propagation" but does not implement CSS contain to prohibit applying it, hence this bug. * Edge and WebKit don't support the "Child→Parent Break Propagation" so they seem to pass, but actually failure. * Gecko doesn't support 'break-before: column' and thus not testable.
,
Sep 14
@kojii: Correct! @gtalbot: That test referred to in #c13 doesn't use containment, so it's not relevant to this bug report. It's column balancing that fails. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by swarnasree.mukkala@chromium.org
, Jul 29