[css-images-4] Rendering gradients with missing color components

[mysteryDate]

There is disagreement over interactions between the css-color-4 and css-images-4 specifications here: crbug.com/1462612. Specifically, what is the desired behavior color stops with missing components in gradients. For example:

linear-gradient(to right in srgb, color(srgb 1 0 0), color(srgb none 0 0), color(srgb 0 0 1)

Intuitively, I assumed that the red channel of the above gradient should interpolate as if the 2nd color stop were not there and thus would be a linear interpolation of the surrounding color stops:

linear-gradient(to right in srgb, color(srgb 1 0 0), color(srgb 0.5 0 0), color(srgb 0 0 1)

@brianosman Pointed out several things that are problematic with this approach at here:

From https://csswg.sesse.net/css-color-4/#interpolation-missing:

If a color with a carried forward missing component is interpolated with another color which is not missing that component, the missing component is treated as having the other color’s component value.

And from https://csswg.sesse.net/css-images-4/#coloring-gradient-line:

Between two color stops, the gradient line’s color is interpolated between the colors of the two color stops

From these two things @brianosman concluded that the color of any point on a gradient should be fully determined neighboring color stops and that "none"s should be resolved by splitting into two color stops and interpolating with the neighbors, resulting in:

linear-gradient(to right in srgb, color(srgb 1 0 0), color(srgb 1 0 0) 50%, color(srgb 0 0 1) 50%, color(srgb 0 0 1)

This, to me, seems intuitively like the incorrect result. What is the correct behavior? Can we clarify the spec?

[svgeesus]

Intuitively, I assumed that the red channel of the above gradient should interpolate as if the 2nd color stop were not there

I don't see how that conclusion follows from any specification text.

If a color with a carried forward missing component is interpolated with another color which is not missing that component, the missing component is treated as having the other color’s component value.

Exactly.

"none"s should be resolved by splitting into two color stops and interpolating with the neighbor

Not two stops exactly, but yes the color at that stop has different values on one side and the other (because none is filled in with different values on each side) so it does behave like two co-incident stops, with a hard transition.

[svgeesus]

So

linear-gradient(in oklch, red, transparent, blue);

Would first transform all three color stops to oklch (rounding here):
linear-gradient(in oklch, oklch(0.628 0.26 29.23), oklch(0 0 none / 0), oklch(0.45 0.31 264.05));

Right. And then the first segment interpolates oklch(0.628 0.26 29.23) to ,oklch(0 0 29.23/ 0) while the second interpolates oklch(0 0 264.05/ 0) with oklch(0.45 0.31 264.05) which is as expected - the hue does not change along either of the two segments, they just fade to transparent black.

Doing some hue interpolation between two adjacent stops would cause the hue to gradually change on both segments.

[mysteryDate]

Great, thanks! That clears everything up for me. Should we add an example to css-images-4 or just close this issue?

[svgeesus]

Given that you initially came to a different interpretation, I think it makes sense to add a clarifying example to Images 4.

[argyleink]

clarification definitely needed, as I expected @mysteryDate's first example and will be surprised when it ends up being the 2nd one. I'll adjust my mental model

[svgeesus]

@argyleink was there specific text wording that led you to that conclusion?

[argyleink]

@argyleink was there specific text wording that led you to that conclusion?

Nah, just intent vs result. I can adapt to fit