1853524 - The light-dark function does not work in userChrome.css if it is in a variable

Status: RESOLVED WORKSFORME

(Core :: CSS Parsing and Computation, defect)

Description

[Valentine]

Attachment: LightDark.png

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

Steps to reproduce:

Create userChrome.css and try to use any css variable containing the light-dark function, for example, change the background of the active tab.

Actual results:

The value of the css variable is not applied correctly.
If the light-dark function is used immediately, the value is applied correctly.

Expected results:

The value of the css variable must be applied correctly.

Comment 1

[Ardelean Oana, Desktop QA [:oardelean]]

Hello, thank you for the bug report! I tried to reproduce your issue but I was unsuccessful.
Would it be possible to attach a functioning testcase/file that reproduces this issue?

Comment 2

[Valentine]

Attachment: LightDarkNoIssue.PNG

Comment 3

[Valentine]

Attachment: LightDarkIssue.PNG

Comment 4

[Valentine]

The screenshots show that the variable does not give the expected effect.

Comment 5

[Daniel Holbert [:dholbert]]

Hmm, it looks like we have all sorts of CSS Variables that use light-dark in Firefox frontend code, e.g. these ones:
https://searchfox.org/mozilla-central/rev/077fc34d03b85b09add26b5f99f1a3a3a72c8720/browser/themes/shared/browser-custom-colors.css#9-16

So it seems like in principle this could/should work. Anyway: I'm adding a connection to the bug that implemented light-dark, bug 1845679.

Comment 6

[Daniel Holbert [:dholbert]]

I can confirm this is behaving as-described.
I created chrome/userChrome.css in my profile and set toolkit.legacyUserProfileCustomizations.stylesheets to true.

With this userChrome.css file...

* {
    color: light-dark(red,lime);
}

...my UI text is mostly red (in e.g. tab titles), as expected; and it changes to lime if I activate the dark Firefox theme.

But with this userChrome.css file...

* {
    --my-color: light-dark(red, lime);
    color: var(--my-color);
}

...I get default coloring, which is unexpected given comment 5. (And if I change --my-color:orange instead, then I get orange text as-expected; so variable expansion does generally work there.)

emilio, do you know what might be going on? Maybe the code that makes this feature chrome-only is getting confused during variable-expansion for userChrome.css for some reason?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Variable expansion uses author origin so it doesn't get enabled: https://searchfox.org/mozilla-central/source/servo/components/style/properties/properties.mako.rs#1757

We could plumb the right origin there I guess, though we should really just ship light-dark().

Comment 8

[Valentine]

I can confirm the fix for this bug on Firefox 120+. My thanks to the Firefox team.