1763376 - Custom properties introduced by @keyframes have no effect

Status: RESOLVED DUPLICATE of bug 1846516

(Core :: CSS Transitions and Animations, defect)

Description

[Peter Kröner]

Steps to reproduce:

Open https://codepen.io/SirPepe/pen/eYyVbPR?editors=0100

Actual results:

The background colors stays at its default value.

Expected results:

The background changes color (in discrete steps) as the animation updates the value of the custom property --color, like it does in Chrome.

Comment 1

[Boris Chiou [:boris]]

I suspect this is the same as Bug 1710735.

Comment 2

[Boris Chiou [:boris]]

We don't handle custom properties and css var well in @keyframe rules.

Perhaps we could fix this together with bug 1710735.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

The issue seems to be that when we're building the keyframes, we build the custom properties block correctly, but we don't store custom properties into the AnimatedValueMap (which is a map from LonghandId to AnimationValue).

This is problematic, because if the properties referencing the custom properties aren't in the @keyframes block, then we just lose them. We should probably put them somewhere in the AnimationValueMap instead and cascade them. Maybe that allows us to remove that hacky code-path I've always complained about (PropertyDeclarationBlock::cascade_custom_properties_with_context).

Comment 5

[Oliver Medhurst [:canadahonk]]

This blocks/breaks a few interop 2023 container subtests which exclusively fail in Firefox:
https://wpt.fyi/results/css/css-contain/container-queries/container-inner-at-rules.html
https://wpt.fyi/results/css/css-contain/container-queries/container-longhand-animation-type.html

Comment 6

[Roman Komarov]

This is a bug that I stumble upon very often. Having registered custom properties will be great, and if we could prioritize this one, we could fix some of the interop issues. For example, my recent CodePen that has this issue: https://codepen.io/kizu/pen/zYQdamG — working in Chrome and Safari, but not working in Firefox.

Comment 7

[Boris Chiou [:boris]]

The testcase in https://codepen.io/SirPepe/pen/eYyVbPR?editors=0100 works now, but looks like we still have issue in https://codepen.io/kizu/pen/zYQdamG

Comment 8

[Zach Hoffman [:zrhoffman]]

Looking at tescase <https://codepen.io/kizu/pen/zYQdamG>, Firefox produces expected behavior if --is-on: initial is replaced with --is-on: lightgreen and --is-off: initial is replaced with --is-off: pink.

initial (as well as inherit, revert, and revert-layer behaves incorrectly for CSS variables in keyframes, which is tracked in bug 1533327.

The testcase in comment 0 passes as of bug 1846516 (specifically, <https://hg.mozilla.org/mozilla-central/rev/1c44d9efbe3a>