NEW 296048
[css-animations] animation-name assigned by ::part() cannot find animation defined in shadow tree 
https://bugs.webkit.org/show_bug.cgi?id=296048
Summary [css-animations] animation-name assigned by ::part() cannot find animation de...
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
Note You need to log in before you can comment on or make changes to this bug.