Bug 296048

Summary:

[css-animations] resolve `animation-name` as tree-scoped references

Product:

WebKit

Reporter:

Haoyang Wang <haoyang512>

Component:

Animations

Assignee:

Antoine Quint <graouts>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

graouts, koivisto, rniwa, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 26

Hardware:

OS:

Linux

See Also:

https://github.com/web-platform-tests/wpt/pull/54688
https://bugs.webkit.org/show_bug.cgi?id=255114
https://bugs.webkit.org/show_bug.cgi?id=173154

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
chromium behavior	none
firefox behavior	none
wpe (safari 26) behavior	none
Test	none

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.