WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
296048
[css-animations] resolve `animation-name` as tree-scoped references
https://bugs.webkit.org/show_bug.cgi?id=296048
Summary
[css-animations] resolve `animation-name` as tree-scoped references
Haoyang Wang
Reported
2025-07-16 03:40:38 PDT
Created
attachment 476040
[details]
chromium behavior ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lynx for web</title> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="default" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="portrait" name="screen-orientation"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" > <meta content="portrait" name="x5-orientation" /> </head> <body> <style> #shadow::part(target) { height: 300px; width: 300px; animation: ani 1s infinite; } </style> <div style="height:600px; width:300px;" id="shadow"> <template shadowrootmode="open" > <style> @keyframes ani { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } } </style> <div part="target"></div> </template> </div> </body> </html> ```
Attachments
chromium behavior
(187.77 KB, image/png)
2025-07-16 03:40 PDT
,
Haoyang Wang
no flags
Details
firefox behavior
(22.46 KB, image/png)
2025-07-16 03:41 PDT
,
Haoyang Wang
no flags
Details
wpe (safari 26) behavior
(59.46 KB, image/png)
2025-07-16 03:43 PDT
,
Haoyang Wang
no flags
Details
Test
(476 bytes, text/html)
2025-09-04 04:23 PDT
,
Antoine Quint
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Haoyang Wang
Comment 1
2025-07-16 03:41:59 PDT
Created
attachment 476041
[details]
firefox behavior
Haoyang Wang
Comment 2
2025-07-16 03:43:37 PDT
Created
attachment 476042
[details]
wpe (safari 26) behavior
Radar WebKit Bug Importer
Comment 3
2025-07-23 03:41:12 PDT
<
rdar://problem/156484228
>
Antoine Quint
Comment 4
2025-09-04 04:23:46 PDT
Created
attachment 476633
[details]
Test Adding a reduced test which should show a green rectangle if the animation applies as expected, and red otherwise. This works in Chrome and Firefox but fails in Safari :(
Antoine Quint
Comment 5
2025-09-04 05:13:06 PDT
When we get to `Styleable::updateCSSAnimations()` we have a `ScopeOrdinal::ContainingHost` for the animation in question under `keyframesRuleExistsForAnimation()`. I'm not sure whether that is right or whether that should have been `ScopeOrdinal::Shadow`.
Antoine Quint
Comment 6
2025-09-04 05:48:33 PDT
So forcing the scope to be `ScopeOrdinal::Shadow` does fix the issue (provided `Style::Scope::forOrdinal()` is also hacked to return the parent node in case it's a `ShadowRoot` event though `Element::shadowRoot()` returns `nullptr`). But digging into this, I notice none of Chrome Canary, Firefox Nightly and STP agree on where it is acceptable to pick up the animation @keyframes rule: - Chrome: will only match a @keyframe rule within the shadow root - Firefox: will match a @keyframe rule both within the shadow root and outside (within taking precedence) - Safari: will match a @keyframe rule only outside the shadow root
Antoine Quint
Comment 7
2025-09-04 07:10:18 PDT
Pull request:
https://github.com/WebKit/WebKit/pull/50302
Antoine Quint
Comment 8
2025-09-04 07:15:00 PDT
Submitted web-platform-tests pull request:
https://github.com/web-platform-tests/wpt/pull/54688
Antti Koivisto
Comment 9
2025-09-23 01:36:24 PDT
I believe the Chrome behavior demonstrated by this test is wrong. The animation name is a "tree-scoped reference" (
https://drafts.csswg.org/css-scoping/#shadow-names
), and those are resolves by searching the scope where it reference is (the document scope in this case) and its ancestor scopes (none in this case): "Whenever a tree-scoped reference is dereferenced to find the CSS construct it is referencing, first search only the tree-scoped names associated with the same root as the tree-scoped reference must be searched. If no relevant tree-scoped name is found, and the root is a shadow root, then repeat this search in the root’s host’s node tree."
Antoine Quint
Comment 10
2025-09-29 07:46:07 PDT
To wrap things up, the original report expected a behavior that is actually expected not to work per the spec linked above. I'll rename the bug prior to landing a patch that correctly resolves `animation-name` as tree-scoped references.
EWS
Comment 11
2025-09-29 11:44:00 PDT
Committed
300706@main
(5e9cf5c17d34): <
https://commits.webkit.org/300706@main
> Reviewed commits have been landed. Closing PR #50302 and removing active labels.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug