[csswg-drafts] [css-color-5] clipping of component values in RCS (#9259)

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

== [css-color-5] clipping of component values in RCS ==
In https://github.com/w3c/csswg-drafts/issues/8444 it was resolved to allow out of gamut colors for `rgb`, `hsl` and `hwb` and to let them round trip as `color(...)` functions.

This surfaced some things which I now think are just bugs in our implementation.

When parsing any color we clip specific components.

`hsl(50deg -10% 50%)` is clipped to `0%` saturation.

https://www.w3.org/TR/css-color-3/#hsl-color

> If saturation is less than 0%, implementations must clip it to 0%. If the resulting value is outside the device gamut, implementations must clip it to the device gamut. This clipping should preserve the hue when possible, but is otherwise undefined. (In other words, the clipping is different from applying the rules for clipping of RGB colors after applying the algorithm below for converting HSL to RGB.)

But these steps are parsed-value time and we also do these steps for RCS when computing the values for specific channel keywords. I think that is obviously incorrect and we should fix this.

------------

However I was wondering if there are now also other ways users can force `rgb`, `hsl` and `hwb` to produce colors that are outside the rgb gamut?

For example : `color: hsl(from white 311.21deg -5.5486% 1.0906%);`

This can be trivially clipped at parsed-value time, but is it really different from `hsl(from lab(100 104.3 -50.9) h s l)` ?

-------

Some variants :

```css
.foo {
  /* regular HSL, must be clipped for web compat */
  color: hsl(311.21deg -5.5486% 1.0906%);
}

.foo {
  /* calc */
  color: hsl(311.21deg calc(-5.5486%) 1.0906%);
}

.foo {
  /* var */
  --foo: -5.5486%;
  color: hsl(311.21deg var(--foo) 1.0906%);
}

.foo {
  /* RCS : 1 */
  color: hsl(from lab(100 104.3 -50.9) h s l);
}

.foo {
  /* RCS : 2 */
  color: hsl(from lab(100 104.3 -50.9) 311.21deg -5.5486% 1.0906%);
}

.foo {
  /* RCS : 3, same as 2, but more obvious */
  color: hsl(from white 311.21deg -5.5486% 1.0906%);
}

.foo {
  /* RCS : 4 */
  color: hsl(from white 311.21deg calc(-5.5486%) 1.0906%);
}

.foo {
  /* RCS : 5 */
  --foo: -5.5486%;
  color: hsl(from white 311.21deg var(--foo) 1.0906%);
}
```


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


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

Received on Tuesday, 29 August 2023 08:51:22 UTC