[css-images-4] Allow a single color stop with two positions

[cdoublev]

Fixes #10092.

Also, the value definition of <color-stop-list> does not allow a single color stop implicitly representing two color stops

it needs a variant production that allows a single doubled stop

I am not sure this remains an editorial change. I assume a single color stop defined with two positions was supposed to become valid at the time the syntax of (more than one) color stop defined with two positions was specified.

Chrome and FF (at least) supports this syntax, but it is not tested.

Maybe this sentence should also be updated:

Color stops and transition hints are specified in a color stop list, which is a list of two or more color stops interleaved with optional transition hints:

[w3cbot]

svgeesus marked as non substantive for IPR from ash-nazg.

[LeaVerou]

Hey, thanks for working on this! Long overdue!

Here are some tests: https://codepen.io/leaverou/pen/eYodMoj (if anyone can port them to WPT after this is merged, that would be great)

And yes, the two position syntax works everywhere. Safari as well, just tested. No browser seems to support one or zero positions.

Looking at the change, it's a little unfortunate we have to define new separate tokens just to make sure that if we have a single color stop it has two positions. And it makes me wonder why do we actually need to enforce this. What purpose does it serve? What's the harm in simply allowing a single color stop, even if it has one position — or even none? You get a single color anyway, and allowing these would provide a smoother authoring experience for editors offering realtime updates. Even with the two color stop positions, you can specify both to be equal, so can't we just spec that a single position expands to that, and no position expands to 0% 100% or something? If anything, when you have a single color stop no position makes more sense!

cc @tabatkins thoughts?

[tabatkins]

If you have a single color, any number of positions will produce the same thing (a solid-color gradient), so in theory that would be fine, but the current spec is just the most straightforward mapping of the earlier requirement (that you have at least two stops, so there's some notion of a "gradient" being defined) into the new ability for one stop to define two positions. If you just wanted a solid-color image, the intention is that you shouldn't reach for a gradient, but image(blue) (which has never been implemented, sadly).

I don't really have an opinion on this, but since impls all seem to agree, I'm inclined to just accept Guillaume's PR as-is.

[cdoublev]

I had not considered that browser vendors added support for a single color stop without a clear purpose. I thought it was an oversight in the spec. So the proposed change is substantive.

Fwiw, I have a preference for Lea's suggestion, which requires a simpler syntax change.

[LeaVerou]

I just filed this issue so we can discuss there: #10092

But after enumerating the pros and cons, I think I'm pretty strongly in favor of dropping this restriction.

[LeaVerou]

@cdoublev Now that we have a resolution to drop that restriction, could you update the PR? Thanks!

[cdoublev]

Great! I updated the changes. Should they also be applied in CSS Images 3?

[svgeesus]

@LeaVerou this looks ok now, right?

[LeaVerou]

LGTM, thanks!

[tabatkins]

Closing in favor of the reoslution from #10092