Bug 267046 – REGRESSION (Safari 17): Named at-rule container skipped when container named in a :host selector

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Egor Kloos]

When a container-name property is added to a `:host` selector, the @container using that name will be skipped. 

A named @container in Safari 17 fails:
`@container hello (width > 400px) {}`

A @container without a name in Safari 17 works:
`@container (width > 400px) {}`

Note that this bug doesn't occur on Safari 16.

Moving the container-name property to an element inside the Shadow DOM does work. 

Example(s) on Codepen:
https://codepen.io/dutchcelt/pen/oNVbXPd

[Radar WebKit Bug Importer]

<rdar://problem/120428386>

[Ahmad Saleem]

It is broken on WebKit ToT (272613@main) where 'Hello World' is different compared to Firefox Nightly 123 and Chrome Canary 122.

Adding 'BrowserCompat' as well.

[Semmel]

It had worked up to (including) Safari 17.1.
It broke on iOS with Safari 17.2-beta+1 (iOS 17.2 Seed 1 (21C5029g)).

I've filed a feedback in November '23 which has been unnoticed up to now. https://feedbackassistant.apple.com/feedback/13348441

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/23738

[EWS]

Committed 273987@main (14e1048a543f): <https://commits.webkit.org/273987@main>

Reviewed commits have been landed. Closing PR #23738 and removing active labels.

[Antti Koivisto]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/44383

[Antti Koivisto]

This fix did not fix the ::slotted case that was also demonstrated by the original test case. Filed https://bugs.webkit.org/show_bug.cgi?id=268683 for that.