none vs zero: when does it makes a difference? Chrome and Firefox disagree

[sidewayss]

I asked this question at stackoverflow yesterday and the 1 answer is not definitive, so I thought I'd try to pull in some expertise from you all. I especially want to know which browser is doing it correctly in which cases. Firefox and Chrome are in clear disagreement in the examples I provide, which can be viewed on codepen as:
https://codepen.io/sidewayss/pen/GRLWMmm (same as the example in stackoverflow snippet)
https://codepen.io/sidewayss/pen/NWmpjyz (used in this bug that I might have prematurely filed on Bugzilla for Firefox)

The first example has both Chrome and Firefox handling none differently from 0 for lightness in lab() and lch(), no interpolation. I can only reproduce this browser-polar-opposite effect with the lightness parameter in lch and lab, but my tests have not been exhaustive. If no lightness is black, then all four rectangles should be black, right? If so, then both browsers are wrong, which makes sense because both browsers are treating none and 0 differently within a single, not interpolated, color value.

The second example is trying to demonstrate specific interpolation differences, but Firefox makes everything monochrome for none, i.e. none and 0 don't match within a single color value, no interpolation involved. I assumed that Firefox was in the wrong and submitted that bug report, but I would like some confirmation of who's got it right where, and Bugzilla is slow-moving. I'm trying to create codepen examples of cases where none and 0 are interpolated differently so that I can be sure that I understand the rules. I'm using linear-gradient() as my interpolater. This second example above uses colors from the MDN docs on this subject.

If, for whatever reason you'd prefer to respond here instead of stackoverflow, please do so and let me know if I may repost it onto stackoverflow.

Thanks!

[facelessuser]

All I need to see from Firefox is below. This tells me they aren't handling none correctly.

What should have happened is none should have been treated as zero before display and you should have gotten a red.

In general, none is undefined. It is undefined until it is forced to be defined. CSS has rules for when this must occur. When it is forced to be defined, it becomes zero. Displaying colors is one of those times. Converting colors as well.

Interpolation has special rules, such as when an undefined value and a defined value are to be interpolated, the undefined value will take on the defined value.

There's also carry forward during interpolation (not sure if anyone has implemented this part) which when converting to a compatible space for interpolation, the none will carry over when the conversion is done. Let's say I want to interpolate in Display P3, but my input is sRGB, and one of my colors has a none, well in this case, after conversion, an undefined red channel, will still be undefined. An undefined red channel will not make a chroma channel undefined though as they are not compatible.

[sidewayss]

The interpolation and carry forward rules you mention are described in the MDN docs for <color>, but they use color-mix() as the example interpolater and that makes it harder to understand how it applies to a gradient or an animation, which have a series of intermediate values. I was in the process of trying to clarify my understanding with some gradient examples when I bumped into these discrepancies. Thanks for the heads up on the carry forward rules being possibly "experimental" as MDN defines it.

So the Firefox implementation of none is wrong, but isn't Chrome handling 0 incorrectly for lightness in lch and lab (as demonstrated by the second codepen link in my question)?

[facelessuser]

I'm not sure what you mean by handling 0 incorrectly for lightness. The second codepen doesn't set lightness to zero. IIRC, the default interpolation space is Oklab, so both the OkLCh and Display P3 examples are converted to Oklab, none being treated as 0, so making both examples equivalent.

[facelessuser]

I think you maybe meant in the first codepen. This is what I would expect. Keep in mind Chrome doesn't yet implement gamut mapping, so I show in the first two examples the CSS gamut mapping approach and then in the next two examples I use clipping, which Chrome currently does.

[facelessuser]

Forgive me for not using Color.js to demonstrate, it's just easier for me to generate easy-to-see examples using this approach.

[sidewayss]

Yes, I meant first codepen not second, sorry... OK, I didn't realize that Chrome doesn't yet implement gamut mapping and how that would affect this. No worries about how you demonstrated it, I get the idea. Color.js wouldn't be able to demonstrate this anyway, given that Chrome only supports one of the two methods and Firefox can't display none properly. Though maybe Firefox can illustrate clipping vs gamut mapping for the 0 examples?

[facelessuser]

Here is Safari's (Technical Preview) rendering. This matches my clipping assessment.

[sidewayss]

I don't know exactly what chrome is doing. I just know what I think it should be doing.

OK, then maybe I should submit a Chrome bug too. Worst case they tell me I'm wrong. In this example Chrome is displaying different colors for none and 0. My original premise that in all these cases none and 0 should produce the same results is still intact at the end of this discussion. All this varied browser behavior threw me for a loop. I don't have Safari except via browserstack, so I have only been testing Chrome and Firefox, which has proved to be plenty.

Thanks for all the info. I had no idea that there were so many holes and different approaches at play here. MDN/caniuse indicate support for features, but there is a lot of detail underneath that here. It also shows that not a lot of people are using this particular feature at this time, as I stumbled on this while building my initial example, my first try. These newer color functions are still under construction more places than docs would indicate. No wonder I couldn't find any examples and decided to build my own.

[facelessuser]

Yeah, I think pretty much all implementations have some quirks at this point. It's better to read the spec and ask questions. It is nice to be able to confirm your interpretations by seeing other implementations doing the same, when possible.

[sidewayss]

fyi - Chrome has two "fixed" issues for this:

https://issues.chromium.org/issues/40265669
https://issues.chromium.org/issues/40262403

I posted a comment there linking my now updated codepen (includes oklab and oklch too, same behavior). Based on the response, or lack thereof, I might submit a new bug. Thanks again for all your explanations.

[sidewayss]

fyi - After no response on the two closed Chrome issues I created a new one here: https://issues.chromium.org/issues/331383943