Bug 271040

Summary: Styled container query does not work on body tag
Product: WebKit Reporter: Rogier de Ruijter <imbashenk>
Component: CSSAssignee: Antti Koivisto <koivisto>
Status: RESOLVED FIXED    
Severity: Normal CC: bramus, dev, karlcow, koivisto, webkit-bug-importer, westbrook.johnson
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://github.com/web-platform-tests/wpt/pull/48099
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Rogier de Ruijter
Reported 2024-03-15 00:51:53 PDT
When using a style container query on a body tag the styles don't get applied. This does work in Chrome. Reproduction: ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Webkit bugs: styled container queries</title> </head> <body> <style> html { height: 100vh; --dark-mode: true; } @container style(--dark-mode: true) { body { background-color: black; } } </style> </body> </html> ``` Another reproduction is here: https://tegenlicht-frontend.vpro-prod.apps.vpro.cluster.chp4.io/programmas/tegenlicht/site/link-in-bio
Attachments
rendering in safari, firefox, chrome (151.92 KB, image/png)
2024-03-17 20:23 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-03-17 20:23:10 PDT
Created attachment 470412 [details] rendering in safari, firefox, chrome This is showing black only in chrome at the moment.
Radar WebKit Bug Importer
Comment 2 2024-03-17 20:23:35 PDT
<rdar://problem/124875999>
Rogier de Ruijter
Comment 3 2024-03-20 10:26:21 PDT
(In reply to Karl Dubost from comment #1) > Created attachment 470412 [details] > rendering in safari, firefox, chrome > > This is showing black only in chrome at the moment. Yes that is right. I believe Firefox doesn't support styled container queries yet, so it is expected that it shows a white screen there.
Bramus
Comment 4 2024-09-09 14:21:15 PDT
Someone asked if you could feature detect style queries support and while building https://codepen.io/bramus/pen/LYKqzob to do so, I was bit by this bug.
Antti Koivisto
Comment 5 2024-09-10 09:56:39 PDT
*** Bug 279252 has been marked as a duplicate of this bug. ***
Antti Koivisto
Comment 6 2024-09-10 09:57:32 PDT
I think the issue is that the document element can't currently be a container.
Antti Koivisto
Comment 7 2024-09-11 05:50:54 PDT
Pull request: https://github.com/WebKit/WebKit/pull/33464
Antti Koivisto
Comment 8 2024-09-11 06:03:54 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/48099
EWS
Comment 9 2024-09-11 06:26:20 PDT
Committed 283480@main (8388b64db456): <https://commits.webkit.org/283480@main> Reviewed commits have been landed. Closing PR #33464 and removing active labels.
Antti Koivisto
Comment 10 2024-09-11 06:33:27 PDT
*** Bug 279252 has been marked as a duplicate of this bug. ***
EWS
Comment 11 2024-09-18 14:41:44 PDT
Committed 280938.356@safari-7619-branch (f632e3bb527c): <https://commits.webkit.org/280938.356@safari-7619-branch> Reviewed commits have been landed. Closing PR #1814 and removing active labels.
EWS
Comment 12 2024-09-19 07:30:25 PDT
Committed 283286.90@safari-7620-branch (497395e86d58): <https://commits.webkit.org/283286.90@safari-7620-branch> Reviewed commits have been landed. Closing PR #1805 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.