Bug 186837

Summary: :host::before and :host::after cannot reference a keyframe defined in an outer scope
Product: WebKit Reporter: RPG <rperezgamo>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: ahmad.saleem792, cdumez, dino, graouts, karlcow, koivisto, rniwa, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Mac   
OS: macOS 10.13   
URL: https://faithful-string.glitch.me/
See Also: https://bugs.webkit.org/show_bug.cgi?id=164608
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Test none

RPG
Reported 2018-06-20 01:23:30 PDT
Pseudoelements (::before, ::after) generated inside a Shadow Root are not able to use CSS animation keyframes defined inside the same Shadow Root. Instead, they are able to use keyframes defined in the main document outside the Shadow Root. Normal elements (a div, for example) inside the shadow root can use animation keyframes as expected. This behavior is very clear in the provided URL when comparing it to Chrome or Firefox Nightly. https://faithful-string.glitch.me/
Attachments
Test (1.43 KB, text/html)
2022-07-10 20:14 PDT, Ryosuke Niwa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2018-06-22 23:16:50 PDT
<rdar://problem/41393429>
Ryosuke Niwa
Comment 2 2022-07-10 20:14:20 PDT
Hm... I'm not reproducing the issue reported by this bug. :host::before and :host::after work using the keyframe animation defined within a shadow tree. What doesn't work is ::before/::after referencing keyframe defined in the outer scope.
Ryosuke Niwa
Comment 3 2022-07-10 20:14:56 PDT
Created attachment 460786 [details] Test
Ryosuke Niwa
Comment 4 2022-07-10 20:16:03 PDT
keyframe not working in in the shadow DOM has been fixed in the bug 164608.
Ahmad Saleem
Comment 5 2023-12-31 09:29:22 PST
Chrome Canary 122 and Firefox Nightly 123 are working fine. So adding 'BrowserCompat'.
Karl Dubost
Comment 6 2026-03-31 03:49:45 PDT
The square is green on STP 239. https://bug-186837-attachments.webkit.org/attachment.cgi?id=460786
Karl Dubost
Comment 7 2026-03-31 03:50:42 PDT
If the issue still exists we need a test exhibiting the breakage.
Antoine Quint
Comment 8 2026-04-07 10:40:43 PDT
This was fixed by 300706@main, the fix for bug 296048. *** This bug has been marked as a duplicate of bug 296048 ***
Note You need to log in before you can comment on or make changes to this bug.