186837 2018-06-20 01:23:30 -0700 :host::before and :host::after cannot reference a keyframe defined in an outer scope 2026-04-07 10:40:43 -0700 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Mac macOS 10.13 RESOLVED DUPLICATE 296048 https://bugs.webkit.org/show_bug.cgi?id=164608 https://faithful-string.glitch.me/ BrowserCompat, InRadar P2 Normal --- 148695 1 rperezgamo webkit-unassigned ahmad.saleem792 cdumez dino graouts karlcow koivisto rniwa webkit-bug-importer oldest_to_newest 1434718 0 rperezgamo 2018-06-20 01:23:30 -0700 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/ 1435788 1 webkit-bug-importer 2018-06-22 23:16:50 -0700 <rdar://problem/41393429> 1882004 2 rniwa 2022-07-10 20:14:20 -0700 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. 1882005 3 460786 rniwa 2022-07-10 20:14:56 -0700 Created attachment 460786 Test 1882006 4 rniwa 2022-07-10 20:16:03 -0700 keyframe not working in in the shadow DOM has been fixed in the bug 164608. 2002350 5 ahmad.saleem792 2023-12-31 09:29:22 -0800 Chrome Canary 122 and Firefox Nightly 123 are working fine. So adding 'BrowserCompat'. 2195487 6 karlcow 2026-03-31 03:49:45 -0700 The square is green on STP 239. https://bug-186837-attachments.webkit.org/attachment.cgi?id=460786 2195488 7 karlcow 2026-03-31 03:50:42 -0700 If the issue still exists we need a test exhibiting the breakage. 2197680 8 graouts 2026-04-07 10:40:43 -0700 This was fixed by 300706@main, the fix for bug 296048. *** This bug has been marked as a duplicate of bug 296048 *** 460786 2022-07-10 20:14:56 -0700 2022-07-10 20:14:56 -0700 Test animation-shadow.html text/html 1465 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGJvZHk+CjxkaXYgaWQ9Imhvc3QxIj48 L2Rpdj4KPGRpdiBpZD0iaG9zdDIiPjwvZGl2Pgo8c3R5bGU+CkBrZXlmcmFtZXMgcnVuIHsKICAg IGZyb20gewogICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMHB4KTsKICAgIH0KICAgIHRvIHsK ICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC01MHB4KTsKICAgIH0KfQo8L3N0eWxlPgo8c2Ny aXB0PgoKaG9zdDEuYXR0YWNoU2hhZG93KHttb2RlOiAnY2xvc2VkJ30pLmlubmVySFRNTCA9IGAK PHN0eWxlPgogICAgOmhvc3QgewogICAgICAgIG92ZXJmbG93OiBoaWRkZW47CiAgICAgICAgd2lk dGg6IDEwMHB4OwogICAgICAgIGhlaWdodDogNjBweDsKICAgICAgICBkaXNwbGF5OiBibG9jazsK ICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsIGdyZWVuIDAlIDUwJSwg cmVkIDAlIDEwMCUpOwogICAgfQoKICAgIDpob3N0OjpiZWZvcmUsCiAgICA6aG9zdDo6YWZ0ZXIs CiAgICBkaXY6OmJlZm9yZSwKICAgIGRpdjo6YWZ0ZXIgewogICAgICAgIGRpc3BsYXk6IGJsb2Nr OwogICAgICAgIGFuaW1hdGlvbjogcnVuIDBzIGZvcndhcmRzOwogICAgICAgIHdpZHRoOiAxMDBw eDsKICAgICAgICBoZWlnaHQ6IDE1cHg7CiAgICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRp ZW50KDkwZGVnLCBncmVlbiAwJSA1MCUsIHJlZCAwJSAxMDAlKTsKICAgICAgICBjb250ZW50OiAn ICc7CiAgICB9CgogICAgQGtleWZyYW1lcyBydW4gewogICAgICAgIGZyb20gewogICAgICAgICAg ICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMHB4KTsKICAgICAgICB9CiAgICAgICAgdG8gewogICAg ICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoNTBweCk7CiAgICAgICAgfQogICAgfQo8L3N0 eWxlPjxkaXY+PC9kaXY+YDsKCmhvc3QyLmF0dGFjaFNoYWRvdyh7bW9kZTogJ2Nsb3NlZCd9KS5p bm5lckhUTUwgPSBgCjxzdHlsZT4KICAgIDpob3N0IHsKICAgICAgICBvdmVyZmxvdzogaGlkZGVu OwogICAgICAgIHdpZHRoOiAxMDBweDsKICAgICAgICBoZWlnaHQ6IDQwcHg7CiAgICAgICAgZGlz cGxheTogYmxvY2s7CiAgICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDkwZGVnLCBy ZWQgMCUgNTAlLCBncmVlbiAwJSAxMDAlKTsKICAgIH0KCiAgICA6aG9zdDo6YmVmb3JlLAogICAg Omhvc3Q6OmFmdGVyIHsKICAgICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgICBhbmltYXRpb246 IHJ1biAwcyBmb3J3YXJkczsKICAgICAgICB3aWR0aDogMTAwcHg7CiAgICAgICAgaGVpZ2h0OiAy MHB4OwogICAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgcmVkIDAlIDUw JSwgZ3JlZW4gMCUgMTAwJSk7CiAgICAgICAgY29udGVudDogJyAnOwogICAgfQo8L3N0eWxlPjxk aXY+PC9kaXY+YDsKCjwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4KCg==