1458189 - Decide how @keyframes and similar rules should be looked up in Shadow DOM

Status: NEW

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Emilio Cobos Álvarez (:emilio)]

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 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1458189: More tests for :host, ::slotted, and leaking the animation name.

Review commit: https://reviewboard.mozilla.org/r/240924/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/240924/

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

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.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

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

Comment 5

[Tigran Sargsyan]

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:

1. Styles applied to :host
   Animation works in all cases.
2. 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

[David Shin[:dshin]]

Hm - did the discussion on this stall out?

Comment 8

[ada]

This works in Webkit
I opened an issue for Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1398023