LGTM1 On Friday, August 16, 2024 at 6:31:10 AM UTC-7 Rune Lillesveen wrote:
> 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/b9934804-5883-4c55-b38b-b26e48f79753n%40chromium.org.
