1899272 - color from registered property set with light-dark() have different values in Firefox and Chrome in dark mode

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: light-dark-property.html

Steps to reproduce

1. Set your OS appearance setting to "dark"
2. Open the attached HTML file in both Chrome and Firefox

Expected results

I'm seeing the same result in both browsers

Actual results

In Firefox, the square is red, in Chrome, it's blue.

---

Here's the CSS:

      @property --x {
        inherits: true;
        initial-value: black;
        syntax: "<color>";
      }

      body {
        color-scheme: light dark;
        --x: light-dark(red, blue);
      }

      .swatch {
        background-color: var(--x);
      }

in Chrome, while in dark mode, the value of --x does seem to get its value from the second argument of light-dark().

Not sure if this is a bug in Firefox or in Chrome, and whether the issue is in @property or in light-dark

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Note that if I'm setting --x in .swatch directly, I do get a blue square in Firefox

      @property --x {
        inherits: true;
        initial-value: black;
        syntax: "<color>";
      }

      body {
        color-scheme: light dark;
      }

      .swatch {
        --x: light-dark(red, blue);
        background-color: var(--x);
      }

So I guess something's might be off with how we deal with inherits ?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

We're not getting the application order right between color-scheme and --x in your first example. We should apply color-scheme first, then --x.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1899272 - Defer computation of registered custom color properties if needed. r=dshin,#style

This is a bit less complicated than lengths because there's no cycle
possible which could turn the color-scheme declaration invalid afaict.

So it's just that we need to defer the colors when color-scheme is
specified, which is slightly annoying, but maybe not too bad.

Better naming for the flags appreciated, if you have any suggestion...

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/acfd5e328aa9
Defer computation of registered custom color properties if needed. r=dshin,firefox-style-system-reviewers,zrhoffman

Comment 5

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46536 for changes under testing/web-platform/tests

Comment 6

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/acfd5e328aa9

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 8

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Issue is reproducible on a 2024-05-28 Nightly build on Windows 10.
Verified as fixed on Firefox 128.0b4 and Firefox Nightly 129.0a1 on Windows 10, Ubuntu 22, macOS 14.