Steps to reproduce:

• visit https://codepen.io/romainmenke/pen/wBWBogm
• or set background-color: color-mix(in srgb, red, blue, lime);

Actual results:

white background

Expected results:

grey background

See: https://drafts.csswg.org/css-color-5/#color-mix-result

Should be easy-ish to implement by changing this to stop hard-coding two colors. Romain do you know if there are any existing WPTs for this?

There are no existing WPT's.
I started writing some but wasn't sure about serialization.

Some tests from my JavaScript implementation:
https://github.com/csstools/postcss-plugins/blob/1d4ef08e454c3399ffc67b1b06faeada813393c4/plugins/postcss-color-mix-variadic-function-arguments/test/basic.preserve-true.expect.css#L1-L26

There is also a new algorithm to mix the colors. Fairly straight forward.

The serialization issue I'm guessing is what to do with the last item if there are more than 2, which is where the old serialization rules break down a bit.

Mixing is not done by the exhanced mixing algorithm specified in:

https://drafts.csswg.org/css-color-5/#color-mix

This patch only implements the algorithm and forwards the original 2
color function to it, yielding the exact results as before.

To allow parsing multiple items in the color-mix function, change the
items to be single units.

The color-mix() function can now take multiple color/percentage pairs
and mix them all together using the new algorithm.

Added some tests here: https://github.com/web-platform-tests/wpt/pull/57234

Tests might not be 100%, but follows the implementation added here and can be updated as the spec gets updated.

https://hg.mozilla.org/mozilla-central/rev/5e48425b0ea8
https://hg.mozilla.org/mozilla-central/rev/adbf9eccc41b
https://hg.mozilla.org/mozilla-central/rev/5a3e2895b47d

Thanks for adding this, Tiaan! Are there already WPTs covering this? If not, they should be added.

Sebastian

Related issues and pull requests

• BCD PR
• Firefox Release PR

Thank you for working on this Tiaan!

I noticed that a single color argument is not supported in Firefox 150.

https://drafts.csswg.org/css-color-5/#color-mix

To meet this need, the color-mix() function takes a list of one or more <color> specifications and returns the result of mixing them, in a given <color-space>, in the specified amounts.

color-mix() = color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]#)

Let's file a separate bug for that please.

Well, it is the same thing.
It would be surprising for authors if it doesn't land together.

I don't mind filing another issue, but feels a bit weird given that this just seems like an oversight when implementing this?

It's easier to track when something lands, specially if it's been a month. I'll file.

Got it, thank you Emilio

Added bug 2026914 for creating a WPT testing this.

Sebastian

As mentioned in the bug, there were tests added for 1+ components to color-mix() in bug 2023579