Intent to Ship: Non-Tree-Scoped container-name Matching

[Rune Lillesveen]

Contact emails

fut...@chromium.org

Specification

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

Summary

Ignore tree-scope when matching container-name for @container queries.

Previously, container-name matching for container queries used tree-scoped names/references for matching, which meant the same name would not match if the @container rule and the container-type property were originating from different trees such that that container-type declaration came from an inner shadow tree.

With this change container names match regardless of @container rule or container-type declaration origins.

Blink component

Blink>CSS

Web Feature ID

Missing feature

Motivation

Aligning with the spec change and Firefox implementation.

Initial public proposal

No information provided

TAG review

No information provided

TAG review status

Not applicable

Risks

Interoperability and Compatibility

The risk is that container-names set in shadow trees may now match as flat tree ancestor container for outer tree elements which are slotted into the shadow tree, or for ::part rules targeting elements inside the shadow tree which additionally rely on @container queries in outer tree rules.

M142 introduced a use counter along with the implementation for detecting such cases in the wild: https://chromestatus.com/metrics/feature/timeline/popularity/5659

Three sites reported back:

https://redhatofficial.github.io/: Sets padding which is overridden by another declaration not affected by container queries. No change.

https://www.redhat.com/: Sets padding to 0, which is also the initial value. No change.

https://www.kansascityfed.org/: Not able to trigger loading or navigating around this site.

Firefox has always shipped this behavior without noticing any interop issues according to the discussion in https://github.com/w3c/csswg-drafts/issues/12090#issuecomment-3204775586

Gecko: Shipped/Shipping Firefox shipped this behavior in their initial release of container queries.

WebKit: Shipped/Shipping In Safari TP

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?

No information provided

Debuggability

No information provided

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

Flag name on about://flags

#experimental-web-platform-features

Finch feature name

CSSContainerNameNotTreeScoped

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/440049800

Estimated milestones

Shipping on desktop	144
DevTrial on desktop	142
Shipping on Android	144
DevTrial on Android	142
Shipping on WebView	144

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).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5194034339512320?gate=4770497078362112

This intent message was generated by Chrome Platform Status.

--

Rune Lillesveen

[Chris Harrelson]

LGTM1

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSPHANJS4nmVo_LyvoA_XYJNnHqjp9tCE3A9UjhoNhJRQ%40mail.gmail.com.

[Mike Taylor]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_GWkHctpOG9rpTKOQ0cDvTtaTtJJiJ2k2F-i35oqQPhw%40mail.gmail.com.