[css-color-5] Omitted adjuster logic for color-mix()

[LeaVerou]

Based on various examples in the spec and in issues, it appears that if any adjusters are present, the remaining adjusters default to 0%, i.e. the whole component of the other color. However, this was not actually part of the prose, so I've done some work to add this logic alongside other editing to flesh out how this is supposed to work. However, since per #5258 we can have percentages and adjusters on each color, this becomes trickier.

I've written a list of steps to normalize the arguments to a list of adjusters, to make it more predictable how they combine (especially when combining percentages and adjusters), so it can pave the way to multiple colors. It currently says:

Adjusters that are not present on a color default to 0% (i.e. the corresponding components are taken from the other color).

However, this would mean that e.g. color-mix(color1 hue 20%, color2 chroma 20%) becomes color-mix(color1 hue 20% chroma 80% lightness 0%, color2 hue 80% chroma 20% lightness 0%) when normalized, which I suppose we could define the scaling algorithm so that equal percentages end up being normalized to lightness 50%, but still.

And while we're at it, what would missing percentages default to? I.e. what is color-mix(color1 hue, color2)?

cc @svgeesus @una @argyleink

[argyleink]

What do y'all think about a missing percentage meaning auto, which gives the algorithym the opportunity to distribute percentage equally.

50% feels like my default preference when I mix 2 colors. like, unless i otherwise specify a specific amount to mix, please equally mix. That'd be 33.3% for 3 colors, 25% for 4, etc. Maybe it's not a scaling algorithm but a distribution solution instead? Something like:

missing percentages default to auto, which equally distributes remaining percentage. If all are auto, and there are 4 colors passed, auto is assigned 25%. If 3 are auto and 1 is 40%, auto is assigned 20%. Furthermore, if 2 channels are competing for percentage ownership, like in this example mix color-mix(color1 hue 100%, color2 hue 100%, color3), color1 and color2 would distribute 100% amongst themselves as 50%, leaving color3 as 0% since auto had no remaining space to claim.

^ thoughts on that? would mean one of the colors could own/steal a whole channel, since 100% on only 1 color would leave nothing to distribute to the other colors (might be exactly what you wanted tho too). Also color-mix(color1 hue 100%, color2 hue 100%) and color-mix(color1 hue auto, color2 hue auto) and color-mix(color1 hue 50%, color2 hue 50%) result in the same color mix.

Another potential issue:
Makes me think we should figure out how to solve an overflow. color-mix(color1 hue 120%, color 2), there's probably distribution logic in there that could be articulated as well. Or maybe that's solved somewhere and I can ramp up?

[argyleink]

upon review, my above comment looks like an extension on #4711 (comment)

[argyleink]

the logic for color stop resolution feels similar https://www.w3.org/TR/css-images-3/#color-stop-fixup

[svgeesus]

Maybe it's not a scaling algorithm but a distribution solution instead?

I agree that the first stage is a distribution solution, for any missing values.

The second stage though is a scaling one, because the explicit and implicit percentages need to sum to 100% and if they don't, they are scaled.

[argyleink]

The second stage though is a scaling one, because the explicit and implicit percentages need to sum to 100% and if they don't, they are scaled

scale up or down, depending on a shortage or overflow. sounds good to me!

[svgeesus]

I see this old issue is still open, but is now completely specified in Percentage Normalization