Bug 186837

Summary:

:host::before and :host::after cannot reference a keyframe defined in an outer scope

Product:

WebKit

Reporter:

RPG <rperezgamo>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, cdumez, dino, graouts, koivisto, rniwa, webkit-bug-importer

Priority:

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'.

Note You need to log in before you can comment on or make changes to this bug.