1811897 - Web Animation API does not update or commit CSS Variables

Status: RESOLVED FIXED

(Core :: DOM: Animation, defect, P3)

Description

[clshortfuse]

Steps to reproduce:

box3
.animate([{
'--background-color': 'gray',
'--color': 'blue',
}], {
duration: 0,
fill: 'forwards',
})
.commitStyles();

Example: https://codepen.io/shortfuse/pen/JjBpeQX

Actual results:

Nothing is changed, even with commitStyles(). [style] attribute is untouched.

Expected results:

Root element variables should change and be reflected.
Child element variables should change and be reflected.

Style attribute should change.

For comparison:

Chrome passes with all cases.
Safari fails with root CSS Variables if not calling commitStyles().

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

This code doesn't deal with custom properties. It seems web animations don't deal too well with them more generally tho?

Comment 3

[Brian Birtles (:birtles)]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

This code doesn't deal with custom properties. It seems web animations don't deal too well with them more generally tho?

In what sense? With regards to commitStyles?

In Gecko we generally haven't paid too much attention to custom properties because we have always been expecting that code to be reworked when we implement Properties and Values API (bug 1273706).

Comment 4

[Zach Hoffman [:zrhoffman]]

The testcase and <https://wpt.fyi/results/web-animations/interfaces/Animation/commitStyles.html> pass after <https://hg.mozilla.org/mozilla-central/rev/1c44d9efbe3a> from bug 1846516.