1924562 - @property definitions disrupt light-dark() value application on CSS Custom Variables

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect)

Description

[Westbrook Johnson]

Attachment: Screenshot 2024-10-14 at 1.09.08 PM.png

Steps to reproduce:

1. Switch your OS to prefers-color-scheme: dark
2. Visit https://codepen.io/Westbrook/pen/poMewdb
3. See three squares
4. If some of the squares are red, instead of green, you're encountered the issue.

I am seeing this in Firefox 131 AND Nightly 133.

Note: If you are using the wrong color scheme you will see the following message after the squares; "You are viewing this page with prefers-color-scheme: light which will prevent the issue from surfacing."

Actual results:

When defined using @property {} CSS Custom Properties that leverage the light-dark() method will not be able to switch to the dark value. This will leave the first and second square with a red background and the third (which does not use an @property {} definition) to have a green background.

Expected results:

Regardless of the color scheme you use and the way you define a CSS Custom Property the value of the custom property should follow the light-dark() method that defines it.

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

[David Shin[:dshin]]

Hm, I don't think we reject this as not computationally independent since the JS equivalent registerProperty doesn't throw any syntax error.
Is light-dark computationally independent? If color-scheme isn't set, I imagine it always returns the first argument, as per spec, which make it not computationally independent, since it depends on a CSS property...
Chrome seems to handle this, FWIW.

Comment 3

[David Shin[:dshin]]

Attachment: Minimized Test Case

Wait wait. Let me walk that back - Initial value has no bearing on this for the reporter's case, since the properties are always defined, meaning no initial value will be used.

I see that light-dark is resolved ahead of registered custom properties, so that's not the issue here.
It also works on Firefox if the variable is defined in the element being used.

Comment 4

[David Shin[:dshin]]

Attachment: Minimum Reproducible Case

(Uploaded the wrong version I was tinkering with)

Comment 5

[atjn]

FYI the second test case is failing only because you have set the same color value in initial-value on the property and the light part of the light-dark function. Try to change either one of the colors to something else and everything will work as expected. I opened a bug for it: https://bugzilla.mozilla.org/show_bug.cgi?id=1932544

Comment 6

[Westbrook Johnson]

Oh, wow, that's crazy, @atjn! Thanks for catching that and splitting this out for implementors to have a more direct time at fixing this.