Closed Bug 1128204 Opened 10 years ago Closed 2 years ago

Implement color() function from CSS colors level 4

Categories

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

Product:
Core
Component:
CSS Parsing and Computation
Type:
enhancement

Tracking

()

Status:
RESOLVED FIXED
Milestone:
111 Branch
Tracking Flags:
Tracking Status
firefox111 --- fixed

People

(Reporter: ntim, Assigned: tlouw)

References

(Blocks 7 open bugs,
URL
)

Details

(Keywords: dev-doc-complete, parity-safari)

Attachments

(1 file)

Bug 1128204 - Implement color() function from CSS specification r=emilio,#layout-reviewers
(deleted), text/x-phabricator-request
Details
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/
Scoping this bug down to just the color() function, as we'll want to make individual decisions about different parts of the spec.
Summary: Implement CSS colors level 4 → Implement color() function from CSS colors level 4
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
I can take a look at this color() functions. (I think Bug 1352754 is the same as this one.)
(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.
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.

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?

(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).

Priority: -- → P3
Assignee: nobody → boris.chiou
Type: defect → enhancement
Keywords: parity-safari

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

Assignee: boris.chiou → nobody

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.

Blocks: 1745935
Blocks: 1745397
Blocks: 1746079
Blocks: 1746282
Blocks: 1748184
Assignee: nobody → tlouw
Severity: normal → S3

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

Attachment #9308610 - Attachment description: WIP: Bug 1128204 - Implement color() function from CSS specifiction r=#layout-reviewers → WIP: Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers
Attachment #9308610 - Attachment description: WIP: Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers → Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers
Attachment #9308610 - Attachment description: Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers → WIP: Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers
Attachment #9308610 - Attachment description: WIP: Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers → Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers
Attachment #9308610 - Attachment description: Bug 1128204 - Implement color() function from CSS specifiction r=emilio,#layout-reviewers → Bug 1128204 - Implement color() function from CSS specification r=emilio,#layout-reviewers
Pushed by tlouw@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f9da93df13f8 Implement color() function from CSS specification r=emilio,supply-chain-reviewers

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

Status: NEW → RESOLVED
Closed: 2 years ago
status-firefox111: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 111 Branch

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

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: