[csswg-drafts] [css-color-4] Expected behavior around lightness 0 or 100% in Oklab/Oklch/Lab/LCH? (#10109)

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

== [css-color-4] Expected behavior around lightness 0 or 100% in Oklab/Oklch/Lab/LCH? ==
When adjusting lightness in Oklab/Oklch/Lab/LCH, what is expected behavior?

This is related to handling out-of-gamut colors, because:
- As lightness decreases we reach imaginary colors with no physical meaning.
- As lightness increases we reach real colors that cannot be shown on most displays.

I'm filing a new issue, because [since Chrome 120](https://chromiumdash.appspot.com/commit/71a936c76e12c63c3a4bee4034b5054151fdc55c), lightness exactly equalling 0 or 100% are mapped to black and white respectively. This led to a [discontinuity](https://issues.chromium.org/issues/329106317) and browsers now handle these cases differently:

https://wpt.live/css/css-color/oklab-l-almost-0.html (subtle difference)
https://wpt.live/css/css-color/oklab-l-almost-1.html (very apparent difference)

See also [results on wpt.fyi](https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&q=almost)

In https://github.com/web-platform-tests/wpt/pull/45073#issuecomment-2002106428, @svgeesus explained that the spec previously "effectively mandated a discontinuity", but that's no longer the case, so Chrome appropriate fails these tests now.

Oklab gradients with endpoints close to 0/100%  are also affected. Demo at https://codepen.io/foolip/pen/zYXZPYr, with Chrome rendering inlined here:

Lightness 0-100%:
<img width="763" alt="zero-to-hundred" src="https://github.com/w3c/csswg-drafts/assets/498917/c4998b9c-170a-4776-95cb-69f6fe4318ef">

Lightness 0-99.9%:
<img width="763" alt="zero-to-almost" src="https://github.com/w3c/csswg-drafts/assets/498917/980ba84b-6d3c-438d-b32d-b37a3fd338c5">

Lightness 0.1-100%:
<img width="763" alt="almost-to-hundred" src="https://github.com/w3c/csswg-drafts/assets/498917/64d12dd8-f267-4d8a-a603-bc2698eed381">

Lightness 0.1-99.9%: 
<img width="763" alt="almost-to-almost" src="https://github.com/w3c/csswg-drafts/assets/498917/f0c620fb-7b3f-4a8d-bdbe-071c427cb63c">

In Firefox and Safari, all gradients look like the last case.

The fastest way to get back to an interoperable state would be to revert the Chrome change, so that all browsers do [channel clipping](https://github.com/w3c/csswg-drafts/issues/9449), but ideally the behavior would only change once. I'm filing this issue as background reading for the breakout session planned on March 27.

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


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

Received on Thursday, 21 March 2024 09:28:28 UTC