1128204 - Implement color() function from CSS colors level 4

Status: RESOLVED FIXED

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

Description

[Tim Nguyen :ntim]

The spec is probably too young, but this is really useful to have, especially the color adjustment functions that are really useful with CSS variables.

Spec : http://dev.w3.org/csswg/css-color-4/

Comment 1

[Cameron McCormack (:heycam)]

Scoping this bug down to just the color() function, as we'll want to make individual decisions about different parts of the spec.

Comment 2

[Merih Akar]

Apparently WebKit recently added support for color() syntax, and it will probably available in STP 18, around the end of November.

https://twitter.com/grorgwork/status/796809159119253505

Comment 3

[Boris Chiou [:boris]]

I can take a look at this color() functions. (I think Bug 1352754 is the same as this one.)

Comment 4

[Boris Chiou [:boris]]

(In reply to Boris Chiou [:boris] from comment #3)
> I can take a look at this color() functions. (I think Bug 1352754 is the
> same as this one.)

But I need to finish stylo CSS transition first, so please feel free to take this before I start to work.

Comment 6

[Cameron McCormack (:heycam)]

Looks like the color-adjustment functionality of color() has been removed from the spec.  color() is now just for specifying colors in a particular color space.

Comment 7

[Nomis101]

Webkit has added support for Display-P3 color back in 2016 for the CSS Color Module Level 4.
https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
Does Mozilla also support this?

Comment 8

[Boris Chiou [:boris]]

(In reply to Nomis101 from comment #7)

Webkit has added support for Display-P3 color back in 2016 for the CSS Color Module Level 4.
https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
Does Mozilla also support this?

No. I think Mozilla doesn't support this yet (wpt.fyi, parser).

Comment 9

[Boris Chiou [:boris]]

Unassign myself now because I'm not planning to do this in this half year.

Comment 10

[chris]

The @color-profile part of the color() function was recently moved by CSSWG decision from CSS Color 4 to CSS Color 5.

So color() in CSS Color 4 is now just the predefined rgb spaces like display-p3, rec2020 and so on. It has been implemented in WebKit (and shipped in Safari 15, updating their previous minimal implementation which was display-p3 only).

Hopefully that change scopes it into a more achievable goal for Gecko?

Color modification (relative color syntax, color-mix()) is also in Color 5.

Comment 11

[chris]

Noting that this is now implemented in Chrome 108 under the experimental flag, in addition to having shipped in Safari.

https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&view=subtest

Comment 12

[Tiaan Louw]

Attachment: Bug 1128204 - Implement color() function from CSS specification r=emilio,#layout-reviewers

https://w3c.github.io/csswg-drafts/css-color-4/#predefined

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f9da93df13f8
Implement color() function from CSS specification r=emilio,supply-chain-reviewers

Comment 14

[Sandor Molnar[:smolnar]]

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

Comment 15

[Brian Thomas Smith [bsmth]]

Documentation changes for this are being tracked in the following issue on GitHub: https://github.com/mdn/content/issues/24395