1985452 - CSS transition does not work when using relative color of system color

Status: ASSIGNED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Alex Eng]

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

Steps to reproduce:

If the CSS transition effect is applied on a property that defines a relative color using the hsl() color function, the transition isn't actually applied.

Steps to reproduce:

1. Navigate to this Codepen: https://codepen.io/aecreations/pen/XJmBPzM
2. Click on textbox1 and button1 to see the CSS transition in action. The box shadow color is hardcoded (see the accompanying CSS source)
3. Click on textbox2 and button2, where the box shadow color is defined using the hsl() color function

Actual results:

The CSS transition (fade-in color) on the box shadow is not applied to textbox2 and button2 in the Codepen sample. Instead, the box shadow color appears immediately when clicked.

Expected results:

The CSS transition on the box shadow should be applied to textbox2 and button2, identically to textbox1 and button1.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Hmm, so the trick here doesn't seem so much due to the relative color but due to the fact that the source color is accentcolor. That said, accentcolor should be totally computable at computed-value time...

Oh, I see. Tiaan, I think this code is wrong: https://searchfox.org/firefox-main/rev/6b8eac08a185ecaa5ca23cc2f74b017743a89c26/servo/components/style/values/specified/color.rs#747-753

We're trying resolve_to_absolute, before trying to resolve accentcolor to an absolute color. That means we incorrectly keep the color() function around when we should've resolved it, and then fail to interpolate.

Can you double-check it? I think if so the fix shouldn't be too bad...

Comment 2

[Tiaan Louw [:tlouw]]

Attachment: Bug 1985452 - Do not eagerly resolve color functions. r=#layout

Eagerly resolving the color function to an absolute color will not
resolve system colors. Trying to resolve the origin color would also
resolve currentcolor, which it should not.