1352757 - Implement lab() and lch() from CSS Color Module Level 4

Status: RESOLVED FIXED

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

Description

[Sebastian Zartner [:sebo]]

CSS Color Module Level 4 defines lab() and lch() functions allowing to specify colors in Lab and LCH.

This bug is meant to implement these two functions.

Sebastian

Comment 1

[Boris Chiou [:boris]]

webkit bug: https://bugs.webkit.org/show_bug.cgi?id=205675

Comment 2

[chris]

See also
https://bugs.webkit.org/show_bug.cgi?id=205675
and
https://bugs.webkit.org/show_bug.cgi?id=220684

Comment 4

[Tiaan Louw]

Some initial comments after first investigation:

• In the rust-cssparser library (that does the parsing only) assumes that all color spaces will be converted back to rgb. According to some comments from webkit bug and also looking at the styles and animation code it looks like we should rather just pass the values back to the consumer of the lib in the formats that is being parsed. So in stead of RGB we return {r, g, b}, {l, a, b}, {l, c, h}, {h, s, l}, etc.
• The second problem is that the conversion functions used in css-color-5 is mostly implemented in gecko already and we don't have access to those from rust-cssparser. Having to convert to RGB would require a duplication of the code or extracting the conversion functions to separate lib. (Which is not a bad idea in general I think. Really handy functions)

Comment 5

[chris]

Choosing whether to convert to sRGB or to store the parsed values is an implementation detail provided that extended-range sRGB is being converted to/from (ie values <0 and >1.0 are preserved). Modulo some round-trip error of course.

Since the original bug was filed, CSS Color 4 has added oklab() and oklch() which are significantly better than Lab/LCH in terms of perceptual uniformity, are used for gradient interpolation and gamut mapping, and also don't require chromatic adaptation between D65 and D50 white points which is another source of cumulative round-off error.

Comment 6

[Tiaan Louw]

Attachment: WIP: Bug 1352757 - Add lab(), lch(), oklab(), oklch() to specified colors. Part 1 r=#layout-reviewers

Comment 7

[Tiaan Louw]

Attachment: WIP: Bug 1352757 - Part 2 - Replace AnimatedRGBA with RGBA from cssparser crate. r=#layout-reviewers

Depends on D163450

Comment 8

[Tiaan Louw]

Attachment: Bug 1352757 - Add lab(), lch(), oklab(), oklch() to specified colors. r=#layout-reviewers

Depends on D163450

Comment 9

[Alexandre Dieulot]

Similar to guidance on :has in https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c62, may we know roughly when Firefox intends to ship this?

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/218b12b92ccb
Add lab(), lch(), oklab(), oklch() to specified colors. r=supply-chain-reviewers,emilio

Comment 11

[Tiaan Louw]

(In reply to Alexandre Dieulot from comment #9)

Similar to guidance on :has in https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c62, may we know roughly when Firefox intends to ship this?

We are actively working on some color-4 improvements and you can expect a release in the coming months.

Comment 12

[Cosmin Sabou [:CosminS]]

Backed out for causing failures on test_transitions_per_property.html.

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=218b12b92ccb33d6740281fc1dc08331d325e9cd&selectedTaskRun=fKse-1rGT4Gok-SpbPXiRA.0

Failure log: https://treeherder.mozilla.org/logviewer?job_id=402896632&repo=autoland

Backout link: https://hg.mozilla.org/integration/autoland/rev/2324abe2eb7c71666c6adc98d377bfa4fe71a731

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3fa8d29c7c44
Add lab(), lch(), oklab(), oklch() to specified colors. r=supply-chain-reviewers,emilio

Comment 14

[Tiaan Louw]

Fixed issue and landed again.

Comment 15

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/3fa8d29c7c44

Comment 16

[Tiaan Louw]

These changes are currently under the layout.css.more_color_4.enabled preference.

Comment 17

[Brian Thomas Smith [bsmth]]

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