-
Notifications
You must be signed in to change notification settings - Fork 719
[css-contain] :root/body viewport propagation and containment #5913
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
The CSS Working Group just discussed The full IRC log of that discussion |
A new proposal: What if we propagate properties from body to viewport as if no container queries match, but the computed style on body will be evaluated as for any other element. So in the case below the computed overflow on body will be 'visible', but the value propagated to the viewport will be 'scroll': <style>
html {
width: 500px;
contain: layout size;
}
body {
overflow: scroll;
}
@container (min-width: 400px) {
body {
overflow: visible;
}
}
@container (max-width: 400px) {
body {
overflow: hidden;
}
}
style> That means we need to store the propagated properties separately. Implementation-wise for Blink, it would probably be done by computing a separate set of computed values for body if the the body computed style depends on container queries for any of the propagated properties. If the author refrains from adding overflow, writing-mode, etc inside @container rules for body, there should be no extra cost. |
I've done a Blink implementation of the alternative proposal to see if it could work. What I did was to cascade these properties in a separate step for
where the three first are the ones propagated to the viewport which may affect layout, hence affects container queries, and |
I have tried to outline the alternatives I have found in this document. Note that one of the alternatives is relying on the resolution for issue #6178. |
Since we agreed to deprecate propagation from the Even if #6178 doesn't require root containment by default, that does seem like a very popular/desirable option for authors to add explicitly - and it would be unfortunate if we had to disallow that entirely. |
The CSS Working Group just discussed
The full IRC log of that discussion |
Note that propagation from root to viewport is not affected by containment. |
Just a couple of clarifying questions/statements:
|
Re-opening for getting the questions above clarified. |
Agenda+ to clarify resolution. See: #5913 (comment) |
IIRC containment on the body also stops propagation. |
The CSS Working Group just discussed
The full IRC log of that discussion |
@lilles, I've landed the spec changes and an bunch of tests. Let me know if anything seems off. |
Sorry, didn't see this before. We only need this for containment on the root html element. If you have containment on body, that should not be a problem. I thought we discussed that, but I don't see that from the meeting notes. |
… with containement, a=testonly Automatic update from web-platform-tests Tests for outwards propagation from body with containement (#29057) See w3c/csswg-drafts#5913 -- wpt-commits: 314ebc0b6b2212a5626eb692d4d6daf3a9dd6052 wpt-pr: 29057
… with containement, a=testonly Automatic update from web-platform-tests Tests for outwards propagation from body with containement (#29057) See w3c/csswg-drafts#5913 -- wpt-commits: 314ebc0b6b2212a5626eb692d4d6daf3a9dd6052 wpt-pr: 29057
… with containement, a=testonly Automatic update from web-platform-tests Tests for outwards propagation from body with containement (#29057) See w3c/csswg-drafts#5913 -- wpt-commits: 314ebc0b6b2212a5626eb692d4d6daf3a9dd6052 wpt-pr: 29057
@lilles So I think it's fine. If you think it's a problem we went this way, maybe reopen a more narrowly scoped issue? |
Per resolution in [1]. [1] w3c/csswg-drafts#5913 Bug: 1200846 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Per resolution in [1]. [1] w3c/csswg-drafts#5913 Bug: 1200846 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Per resolution in [1]. [1] w3c/csswg-drafts#5913 Bug: 1200846 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Per resolution in [1]. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Per resolution in [1]. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Per resolution in [1]. Added behind a flag since this is a web facing change which needs an intent to ship. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Per resolution in [1]. Added behind a flag since this is a web facing change which needs an intent to ship. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2897247 Reviewed-by: Anders Hartvoll RuudCommit-Queue: Rune Lillesveen Cr-Commit-Position: refs/heads/master@{#890175}
Per resolution in [1]. Added behind a flag since this is a web facing change which needs an intent to ship. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2897247 Reviewed-by: Anders Hartvoll RuudCommit-Queue: Rune Lillesveen Cr-Commit-Position: refs/heads/master@{#890175}
Per resolution in [1]. Added behind a flag since this is a web facing change which needs an intent to ship. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2897247 Reviewed-by: Anders Hartvoll RuudCommit-Queue: Rune Lillesveen Cr-Commit-Position: refs/heads/master@{#890175}
…oot or body is contained, a=testonly Automatic update from web-platform-tests Do not propagate body styles when html root or body is contained Per resolution in [1]. Added behind a flag since this is a web facing change which needs an intent to ship. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2897247 Reviewed-by: Anders Hartvoll RuudCommit-Queue: Rune Lillesveen Cr-Commit-Position: refs/heads/master@{#890175} -- wpt-commits: cf84beafec2055bc7a7ba01fcaecd4f528f2f1dc wpt-pr: 29165
…oot or body is contained, a=testonly Automatic update from web-platform-tests Do not propagate body styles when html root or body is contained Per resolution in [1]. Added behind a flag since this is a web facing change which needs an intent to ship. [1] w3c/csswg-drafts#5913 Bug: 1215265 Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2897247 Reviewed-by: Anders Hartvoll RuudCommit-Queue: Rune Lillesveen Cr-Commit-Position: refs/heads/master@{#890175} -- wpt-commits: cf84beafec2055bc7a7ba01fcaecd4f528f2f1dc wpt-pr: 29165
https://bugs.webkit.org/show_bug.cgi?id=233535 Patch by Rob Buison 2021-12-08 Reviewed by Alan Bujtas. Source/WebCore: Prevent direction/background/writing-mode propagation to RenderView in cases where contain is used. The reason is in the github issue and latest draft specification has been updated [1, 2]. [1] w3c/csswg-drafts#5913 [2] https://drafts.csswg.org/css-contain-2/ * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): (WebCore::RenderBox::updateFromStyle): * rendering/RenderObject.cpp: (WebCore::shouldApplyAnyContainment): * rendering/RenderObject.h: * rendering/RenderView.cpp: (WebCore::RenderView::rendererForRootBackground const): LayoutTests: * TestExpectations: Canonical link: https://commits.webkit.org/244980@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@286672 268f45cc-cd09-0410-ab3c-d52691b4dbfc
https://bugs.webkit.org/show_bug.cgi?id=233535 Patch by Rob Buison 2021-12-08 Reviewed by Alan Bujtas. Source/WebCore: Prevent direction/background/writing-mode propagation to RenderView in cases where contain is used. The reason is in the github issue and latest draft specification has been updated [1, 2]. [1] w3c/csswg-drafts#5913 [2] https://drafts.csswg.org/css-contain-2/ * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): (WebCore::RenderBox::updateFromStyle): * rendering/RenderObject.cpp: (WebCore::shouldApplyAnyContainment): * rendering/RenderObject.h: * rendering/RenderView.cpp: (WebCore::RenderView::rendererForRootBackground const): LayoutTests: * TestExpectations: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@286672 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Uh oh!
There was an error while loading. Please reload this page.
While investigating containment for container queries I've encountered the issue of propagating html/body properties to the viewport. The simple case for container queries is that if you set containment on the html element, expecting the size of the html element being determined without looking at descendants. But if the body element changes the writing-mode, that writing-mode is propagated to the viewport, but also affects the used value for the html element.
This is a circularity problem for container queries because you can have:
and the width of html element may change because of the writing-mode which would then flip to a different writing-mode which gives a circularity.
Disregarding container queries, there is a question if there is an issue with propagation and containment for root/body propagation. Consider this case:
All of Blink, WebKit, Gecko propagate the overflow:scroll to the viewport affecting the layout of the html root element.
Should containment somehow stop propagation to html/viewport?
The text was updated successfully, but these errors were encountered: