1878481 - Parsing a CSS animation shorthand containing a variable results in the loss of the animation name.

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[ThomazPom]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Steps to reproduce:

Wrote two javascript codes:

I have written two JavaScript codes to illustrate the problem:

Code 1:

a = new CSSStyleSheet()
str = (.test { animation: test; animation-delay: 5s; })
a.replaceSync(str)
console.log(a.cssRules[0].cssText)

Code 2:

a = new CSSStyleSheet()
str = (.test { animation: var(--test); animation-delay: 5s; })
a.replaceSync(str)
console.log(a.cssRules[0].cssText)

Actual results:

Code 1; Correct behaviour
".test { animation: 0s ease 5s 1 normal none running test; }"

Code 2; Animation name is lost
".test { animation-name: ; animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-delay: 5s; }"

Expected results:

In Code 2, I expect the animation name to be preserved in the CSS output. Ideally, the result should be:

".test { animation: 0s ease 5s 1 normal none running var(--test); }"
OR

".test { animation-name: ; animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-delay: 5s; }"

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]]

That wouldn't be correct because we don't know what var(--test) contains. In fact, it could contain all of the tokens (also a duration etc).

See also https://github.com/w3c/csswg-drafts/issues/6253