1626624 - Support Wide Gamut Color in CSS with Display-P3

Status: NEW

(Core :: Graphics, enhancement)

Description

[Alexandre Folle de Menezes]

CSS Color Module Level 4 introduced syntax to use Display-P3 color space on the web:
color: color(display-p3 1 0.5 0)

This is already implemented in WebKit:
https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/

I have already linked a bug for media-query support, but a separate bug for the Inspector is probably needed to.

Comment 1

[Tiaan Louw]

Do we have support for wide-gamut color ranges on the gfx side even, or do we just convert to sRGB for rendering anyway?

Comment 2

[Jeff Muizelaar [:jrmuizel]]

Currently we convert images to the display profile and CSS colors remain uncorrected. On macOS we always use sRGB as the display profile and the OS will convert our combined sRGB content to the display profile for us.

It seems like it would be a reasonable start to convert wide gamut colors to sRGB.

Comment 3

[Tiaan Louw]

If we end up converting colors into sRGB for rendering to screen and they are outside of sRGB gamut, we need to map them according to the spec here: https://drafts.csswg.org/css-color-4/#css-gamut-mapping

Comment 5

[Patrick Martin]

1830268 is now resolved, shouldn't this issue be closed too?

Comment 6

[Masatoshi Kimura [:emk]]

Why? Bug 1830268 has been closed as a duplicate of this bug.

Comment 7

[Isaac Marovitz]

Here to advocate for native P3 support on supporting displays like Macs. Figma just rolled out P3 editing support, and it would be nice to have this feature available in Firefox.

Comment 8

[Thomas Wisniewski [:twisniewski]]

It may be worth revisiting the priority and severity here now that Figma supports this, as it is also an interop2022/2023 item.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

My understanding is that the CSS part of this seems basically done. The remaining bits seem actually layout/rendering, where for non-sRGB colors:

• For sRGB displays we need to map to the sRGB gamut.
• For non-sRGB displays we ideally carry the colors all the way across the pipeline.

Tiaan is my understanding correct? If so, should this move to either layout / graphics? I think this is worth doing sooner rather than later tho.

Comment 10

[Tiaan Louw]

Yes we have the colors now in different color spaces and can convert to a device color space for rendering, but right now the rendering back ends (webrender, cairo at least) doesn't seem to support anything other than sRGB, so this work should move there.

Comment 11

[Thomas Wisniewski [:twisniewski]]

See also https://wpt.fyi/results/css/css-color/parsing/color-mix-out-of-gamut.html

Comment 12

[TheWonderAlmighty]

I tried enabling the following in about:config but its not working for me:

gfx.color_management.display_profile = /System/Library/ColorSync/Profiles/Display P3.icc
gfx.color_management.mode = 1
gfx.color_management.native_srgb = false

Comment 13

[TheWonderAlmighty]

I should be more specific, when I go to this page I don't see a different in the P3 and non-P3 colors but do on Chrome and Safari: https://codepen.io/hashtag_dino/pen/gEvJQa

Comment 14

[Jeff Muizelaar [:jrmuizel]]

(In reply to GolDonMomotaro from comment #13)

I should be more specific, when I go to this page I don't see a different in the P3 and non-P3 colors but do on Chrome and Safari: https://codepen.io/hashtag_dino/pen/gEvJQa

Yeah, more things need to be hooked up for that to work

Comment 15

[TheWonderAlmighty]

Like what?

Comment 16

[Jeff Muizelaar [:jrmuizel]]

ToDeviceColor needs support for displayP3 colors:
https://searchfox.org/mozilla-central/rev/8461ad1fc943ac560414322b66de5929ef10f706/gfx/thebes/gfxUtils.cpp#1783 and then the style system needs to be hooked up to use the displayP3 ToDeviceColor variant