New issue
Advanced search Search tips

Issue 868704 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Feature



Sign in to add a comment

[css-contain] forced breaks within layout containment must not propagate to the parent

Reported by goo...@gtalbot.org, Jul 29

Issue description

UserAgent: 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
 
Labels: Needs-Triage-M69
Cc: viswa.karala@chromium.org
Components: Blink>CSS Blink>Layout
Labels: -Type-Compat Triaged-ET Target-70 M-70 FoundIn-70 OS-Mac OS-Windows Type-Bug
Status: Untriaged (was: Unconfirmed)
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!
Owner: kojii@chromium.org
Status: Assigned (was: Untriaged)
Labels: Needs-Feedback
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?
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.
Labels: -Needs-Feedback
Thank you for the feedback

> Blink passes contain-layout-breaks-002.htm in CSS test suites

This part I was wrong, sorry for confusion.
Components: -Blink>CSS
Cc: kojii@chromium.org
Owner: mstensho@chromium.org
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?
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'.

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?
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
Cc: mstensho@chromium.org
Labels: -Type-Bug -Pri-2 Pri-3 Type-Feature
Owner: ----
Status: Available (was: Assigned)
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.
@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