1872231 - animate API does not work with custom property

Status: RESOLVED DUPLICATE of bug 1846516

(Core :: DOM: Animation, defect)

Description

[cyfung1031]

Attachment: Screen Shot 2023-12-28 at 14.00.31.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Steps to reproduce:

(note. layout.css.properties-and-values.enabled is enabled)

1. define CSS custom property --num using CSS

@property --num {
  syntax: "<integer>";
  initial-value: 3;
  inherits: false;
}

2. Check using JavaScript
   Now window.getComputedStyle(document.documentElement).getPropertyValue('--num'); is 3

3. Use animate API to modify the CSS value

document.documentElement.animate(
  [
    { '--num': '100' },
    { '--num': '0' }
  ],
  {
    fill: "forwards",
    duration: 1000*30,
    easing: 'linear'
  }
);

4. Check using JavaScript (immediately after animate API is called)
   window.getComputedStyle(document.documentElement).getPropertyValue('--num'); is still 3. The correct value should be 100 (see Chrome)

Demo: https://jsfiddle.net/lunarlogic489/kx8joawb/2/

Actual results:

animate API does not work with custom property

Expected results:

animate API should work with custom property

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

[cyfung1031]

(In reply to BugBot [:suhaib / :marco/ :calixte] from comment #1)

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.

I am not sure

Either
Core :: CSS Transitions and Animations
OR
Core :: CSS Parsing and Computation

Comment 3

[Tom S [:evilpie]]

Actually this seems to work in Nightly.

Comment 4

[cyfung1031]

(In reply to Tom S [:evilpie] from comment #3)

Actually this seems to work in Nightly.

*** This bug has been marked as a duplicate of bug 1846516 ***

Confirm it can work in Firefox Nightly 123.0a1 (2023-12-30) (64-bit)
(I just tested in Firefox Stable and Firefox Developer Edition before)