1899531 - Animated registered property in @keyframes doesn't interpolate property when using another custom property

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[[:bali balo]]

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

Steps to reproduce:

Using a var() value as one of the steps in @keyframes for a registered property doesn't animate properly.
For example: to { --t: var(--max); } will cause --t to animate in a discrete way (jump to --max at the midpoint), even if it is a registered property.

Here is a short reproduction of the bug: https://jsfiddle.net/Le9hup4y/

Actual results:

The green line animates smoothly from left to right. The red line jumps from the left to the right halfway.

This seems similar to the issue described in https://bugzilla.mozilla.org/show_bug.cgi?id=1877383 - except the end keyframe uses a custom property instead of being omitted.

Expected results:

Both lines animate smoothly at the same time, which seems to be what happens for other browsers supporting @property (Chrome, Edge, Safari).

Comment 1

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

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

For more information, please visit BugBot documentation.

Comment 2

[Zach Hoffman [:zrhoffman]]

Thanks for reporting! It looks like the "var(--max)" specified value is substituted and computed in the custom properties map, but when animating, the other value <https://searchfox.org/mozilla-central/rev/e74b86533c24/servo/components/style/properties_and_values/value.rs#214> is the "var(--max)" specified value again. So the computed to value for --t in the custom properties map does not seem to be getting used.

Because the other animation value is unsubstituted, not just uncomputed (unsubstituted meaning "var(--max)" and uncomputed meaning "1" in this case, instead of the expected computed value of 1), this does not seem related to the computed type preservation in bug 1877383 and instead seems like functionality that is not implemented yet, interpolating between registered custom property values with references.