Contact emailsfuth...@chromium.org ExplainerNone
Specificationhttps://drafts.csswg.org/css-conditional-5/#container-queries Landed PR: https://github.com/w3c/csswg-drafts/pull/10701 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 componentBlink>CSS <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> TAG reviewNone TAG review statusNot 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 <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ?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://flagsCSSFlatTreeContainer Finch feature nameGenerated from CSSFlatTreeContainer in runtime_enabled_features.json5 Requires code in //chrome?False Tracking bughttps://crbug.com/340876720 Estimated milestones Shipping on desktop 130 DevTrial on desktop 128 Shipping on Android 130 DevTrial on Android 128 Shipping on WebView 130 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 <https://chromestatus.com/>. -- 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+unsubscr...@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.
