1682436 - Implement CSS color-mix function

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[709922234]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:85.0) Gecko/20100101 Firefox/85.0

Comment 1

[chris]

I'm puzzled about whether color-mix() is implemented in Gecko or not :)

On the one hand, this bug is still open, and

@supports(color-mix(in lch, teal 65%, olive 35%))

is false. On the other hand,

background: color-mix(in lch, teal 65%, olive 35%);

works and seems to give close to the correct result. Live example at:

https://codepen.io/svgeesus/pen/OJQgzVB?editors=1100

Tested in Nightly 102.0a1 with these flags set to true
layout.css.color-mix.enabled
layout.css.color-mix.color-spaces.enabled

Comment 2

[Emilio Cobos Álvarez (:emilio)]

(In reply to chris from comment #1)

@supports(color-mix(in lch, teal 65%, olive 35%))

is false.

The explanation is that this is an invalid supports condition. You want @supports (color: color-mix(...))

Comment 3

[chris]

D'oh!

Is this bug waiting for more parts to be implemented, like the non-legacy color formats, or oklab/oklch?

Comment 4

[Emilio Cobos Álvarez (:emilio)]

(In reply to chris from comment #3)

Is this bug waiting for more parts to be implemented, like the non-legacy color formats, or oklab/oklch?

Yeah, so... there are various things that aren't implemented. One is the new hue adjustment syntax. Other are new color-spaces. Then there's https://github.com/web-platform-tests/wpt/issues/34158 which means that all the tests fail even though our implementation is correct.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Bug 1770616 should get us to a pretty good state where I'd be ok shipping what we have.

Comment 6

[Tiaan Louw]

color-mix() is on by default now on stable, can this be closed now?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Sure