Decide how @keyframes and similar rules should be looked up in Shadow DOM
Categories
(Core :: CSS Parsing and Computation, enhancement, P3)
Tracking
()
People
(Reporter: emilio, Unassigned)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
Attachments
(1 file)
|
59 bytes,
text/x-review-board-request
|
Details |
In bug 1018269 I'm landing what Blink does, that for reference is: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/resolver/style_resolver.cc?l=1267&rcl=90f9f8680ebb4a87d177f3b0833372ae4e0c88d8 But we need to watch out for https://github.com/w3c/csswg-drafts/issues/1995.
| Comment hidden (mozreview-request) |
|
||
Comment 2•6 years ago
|
||
Does this need to block bug 1405937 or could this be bug 1438607 thingie? I've moved some bugs which we don't need to implement immediately to block bug 1438607.
|
Reporter | |
Comment 3•6 years ago
|
||
Wrote some tests for this and didn't want them to get lost. So far they matches current WebKit's behavior, but there's a very interesting test missing that WebKit would get "wrong" / get a nonsensical result, which is when you use animation-name: inherit, and the thing it's inheriting belongs to another tree.
|
|
Reporter | |
Comment 4•6 years ago
|
||
(In reply to Olli Pettay [:smaug] from comment #2) > Does this need to block bug 1405937 or could this be bug 1438607 thingie? > I've moved some bugs which we don't need to implement immediately to block > bug 1438607. Oh, yeah, totally bug 1438607.
|
||
Updated•6 years ago
|
|
||
Comment 5•2 years ago
|
||
I am not sure whether this is relevant or maybe needs a separate bug, but...
I tried different scenarios of animation and font-family in conjunction with @keyframes and @font-face. Here are the results. I am using the term "outside" to denote the outer document scope and "inside" for shadow DOM scope.
For font family, it works only when @font-face rule is defined outside, regardless of font-family CSS property being defined inside or outside.
As for animation, there are two cases based on the element to which the styles are applied:
- Styles applied to :host
Animation works in all cases. - Styles applied to ::part
Animation works only when @keyframes are defined inside, regardless of animation CSS property being defined inside or outside. When @keyframes is defined in the outer scope, the animation never works.
Demo: https://jsfiddle.net/tikosar/1eLpavfs/
My particular use case right now is that I am trying to animate a CSS part in a web component from outside, and weirdly it doesn't work, even though I am defining both the animation property and @keyframes in the same outer scope.
This behavior, though not understandable for me, is consistent between Firefox and Chrome.
|
||
Comment 7•2 years ago
|
||
Hm - did the discussion on this stall out?
|
||
Updated•2 years ago
|
This works in Webkit
I opened an issue for Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1398023
Description
•