1746821 - Inline CSS variables can't be re-set for animations

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[will]

Steps to reproduce:

1. Run the following fiddle:
   https://jsfiddle.net/Laf7h5rg/

2. Click the test out button

3. Before the animation ends, change the value in the input to something else

4. Click the test out button

Actual results:

First click on the "test out" button, the progress bar goes from 50% to 100%.

The second time around tho, firefox seems to ignore the fact that we changed the --from-width variable and still generates the same transition.

Expected results:

The second time around, the variable should be set to what's inside the textbox. It works under chrome.

Comment 1

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

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[Boris Chiou [:boris]]

I can reproduce this. This might be related to Bug 1710735, which also use custom variable in @keyframe block.