2060164 - Animating a @property between two color custom properties does not work

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect)

Description

[leah]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:153.0) Gecko/20100101 Firefox/153.0

Steps to reproduce:

Given this CSS:
:root {
--colour-1: red;
--colour-2: green;
}
@property --bg {
syntax: '<color>';
inherits: true;
initial-value: transparent;
}
@keyframes my-cool-animation {
0% {
--bg: var(--colour-1);
}
100% {
--bg: var(--colour-2);
}
}

Actual results:

The value of --bg will switch between the values specified in the @keyframes halfway through the animation, without actually animating. If you remove the variables from the @keyframes, the animation works as it should.

Test case:
https://developer.mozilla.org/en-US/play?id=Ca%2FXT9EaR80pFeUP9nU6CF%2BSx7aXJo0mem0z%2FdJDhlLYP8wJjLl3jcWMQV%2FrEfAKn0NWaDPFX9p1Tr%2BB

Expected results:

The colours should animate smoothly from one to the other.

Comment 1

[BugBot [:suhaib / :marco]]

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.