Intent to Ship: CSS Container Queries flat tree lookup

386 views
Skip to first unread message

Rune Lillesveen

unread,
Aug 16, 2024, 9:31:10 AMAug 16
to blink-dev

Contact emails

fut...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-conditional-5/#container-queries


Summary

Look up query containers in the flat tree ancestor order instead of shadow-including order. The specification for container queries changed to look up flat tree ancestors. This change is only relevant for shadow DOM where an element will now be able to see non-named containers inside shadow trees into which the element or one of its ancestors are slotted, even if the CSS rule does not use ::part() or ::slotted().


The existing implementation for container units was somewhat broken in the sense that container unit lengths would find a container based on the styled element's tree scope instead of the rule's tree scope. That meant you can end up with container units inside container queries that did not use the same container as a basis for such sizes.


Example: padding-left and padding-right would be based on the same container here (the #host), even if their @container queries would match different containers:


<!DOCTYPE html>
<style>
#host {
container-type: inline-size;
width: 200px;
}
@container (width = 200px) {
#slotted {
padding-left: 10cqw;
color: lime;
}
}
</style>
<div id="host">
<template shadowrootmode="open">
<style>
#container {
container-type: inline-size;
width: 100px;
}
@container (width = 100px) {
::slotted(#slotted) {
padding-right: 10cqw;
background-color: green;
}
}
</style>
<div id="container">
<slot></slot>
</div>
</template>
<div id="slotted">Slotted</div>
</div>


With the flat tree order container lookup, these rules for the slotted element will try to match the same container, and the units relative to that same container as well.

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

Interoperability: Firefox shipped with an implementation matching the current spec for ancestor lookup from the start. This is aligning with their implementation. The signal from Safari is positive. Compatibility risks: Mainly that lookup of non-named containers for slotted element subtrees can now start matching containers in the shadow tree they are slotted into. For named containers, matching tree scoped references will make sure it is kept close to the current behavior. Attempting to create a use counter for this change has failed to be done in a performant manner without slightly changing the existing behavior. According to Firefox they have not seen issues with their implementation, which indicates a lower risk.



Gecko: Shipped/Shipping

WebKit: Support (https://github.com/WebKit/standards-positions/issues/382)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None



Debuggability

The container lookup in devtools uses the same functionality as the engine. Confirmed that the container lookup in the styles pane matches the new behavior with the flag enabled.



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-conditional/container-queries/container-for-shadow-dom.html https://wpt.fyi/results/css/css-conditional/container-queries/container-units-shadow.html https://wpt.fyi/results/css/css-conditional/container-queries/style-container-for-shadow-dom.html



Flag name on chrome://flags

CSSFlatTreeContainer

Finch feature name

Generated from CSSFlatTreeContainer in runtime_enabled_features.json5

Requires code in //chrome?

False

Tracking bug

https://crbug.com/340876720

Estimated milestones

Shipping on desktop130
DevTrial on desktop128
Shipping on Android130
DevTrial on Android128
Shipping on WebView130


Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5242724333387776?gate=6649713206755328

This intent message was generated by Chrome Platform Status.

Alex Russell

unread,
Aug 21, 2024, 1:48:11 PMAug 21
to blink-dev, Rune Lillesveen
LGTM1

Domenic Denicola

unread,
Aug 23, 2024, 1:09:28 AMAug 23
to Rune Lillesveen, blink-dev
LGTM1, with nit about Chrome Platform Status info accuracy below.

I navigated to chrome://flags and did not see any flag for this behavior. I think you likely have no flag in chrome://flags, and instead you should enter CSSFlatTreeContainer as the Finch feature name.
 



Finch feature name

Generated from CSSFlatTreeContainer in runtime_enabled_features.json5

Requires code in //chrome?

False

Tracking bug

https://crbug.com/340876720

Estimated milestones

Shipping on desktop130
DevTrial on desktop128
Shipping on Android130
DevTrial on Android128
Shipping on WebView130


Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5242724333387776?gate=6649713206755328

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSd1%2BJTn6EZtFKxTBzEvp3eG8o-vw1z48sZgBD6PhyaLw%40mail.gmail.com.

Domenic Denicola

unread,
Aug 23, 2024, 1:09:51 AMAug 23
to Domenic Denicola, Rune Lillesveen, blink-dev
Oops, I meant, LGTM2.

Rune Lillesveen

unread,
Aug 23, 2024, 3:34:09 AMAug 23
to Domenic Denicola, blink-dev
On Fri, Aug 23, 2024 at 7:09 AM Domenic Denicola <dom...@chromium.org> wrote:
LGTM1, with nit about Chrome Platform Status info accuracy below.

On Fri, Aug 16, 2024 at 10:31 PM Rune Lillesveen <fut...@chromium.org> wrote:


Flag name on chrome://flags

CSSFlatTreeContainer


I navigated to chrome://flags and did not see any flag for this behavior. I think you likely have no flag in chrome://flags, and instead you should enter CSSFlatTreeContainer as the Finch feature name.

Fixed.

--
Rune Lillesveen

Daniel Bratell

unread,
Aug 23, 2024, 9:22:40 AMAug 23
to Rune Lillesveen, Domenic Denicola, blink-dev

LGTM3

/Daniel

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
Reply all
Reply to author
Forward
0 new messages