[csswg-drafts] [css-color-4] Rendering gradients with missing color components (#9295)

mysteryDate has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-4] Rendering gradients with missing color components ==
There is disagreement over interpretations of the css-color-4 spec here: [crbug.com/1462612](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, so the value for the red channel of that color stop would be a simple 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)`

<img width="842" alt="Screenshot 2023-09-02 at 11 33 08 AM" src="https://github.com/w3c/csswg-drafts/assets/2529989/ec61f3fa-40fb-4e09-b813-5ff1cac63fa5">

@brianosman Pointed out several things that are problematic with this approach at [here](https://bugs.chromium.org/p/chromium/issues/detail?id=1462612#c22):

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

> If a color with a carried forward [missing component](https://csswg.sesse.net/css-color-4/#missing-color-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 implied 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)`

<img width="842" alt="Screenshot 2023-09-02 at 11 39 57 AM" src="https://github.com/w3c/csswg-drafts/assets/2529989/1a3a33f7-42b5-4b2e-b870-ae64c20437c1">

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


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9295 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 2 September 2023 15:43:33 UTC