[css-images] stripes() interpolation makes no sense

[Loirooriol]

https://drafts.csswg.org/css-images-4/#interpolating-1d-images

There are only a few restrictions on what images are allowed to be interpolated:

1. Both the starting and ending image must have the same number of <color-stripe>s.
2. Neither image uses a combination of <length>, <percentage>, and <flex> stripes.

[...] Then, for each pair of stripes, interpolate the thickness and color independently.

How do you interpolate from stripes(#000 10px, #111 20px) to stripes(#222 10fr, #333 20fr)?
This is invalid, right? stripes(#111 calc(5px + 5fr), #222 calc(10px + 10fr))

I think that restriction 2 should be changed. Instead of checking that each <1d-image> does not mix different types, it should check that each pair of interpolated thicknesses does not mix different types.

[SebastianZ]

I believe restriction 2 could actually be lifted. Calculating the transitions between them should be straight forward.

Taking your first example and applying it to a total width of 60px, the transition would be to one from stripes(#000 10px, #111 20px, transparent 30px) to stripes(#222 20px, #333 40px, transparent 0px). For 120px total width it would be from stripes(#000 10px, #111 20px, transparent 90px) to stripes(#222 40px, #333 80px, transparent 0px).

And stripes(#111 calc(5px + 5fr), #222 calc(10px + 10fr)) might not be invalid. With a total length of 60px again, it would be equivalent to stripes(#111 calc(5px + 15px), #222 calc(10px + 30px)). And assuming a total width of 120px, it would be the same as stripes(#111 calc(5px + 35px), #222 calc(10px + 70px)).

Sebastian

[Loirooriol]

But transitions work on computed values, and #8140 made percentages compute as-is and clarified that <flex> computes as-is. So if this can be interpolated, we need a way to express the intermediate values as a combination of <flex> and <length-percentage>.

Then, if calc(5px + 5fr) is valid then everything is fine. But I'm not sure it's automatically valid, with <length-percentage> a percentage resolves against a length and thus has type «[ "length" → 1 ]». But <flex> has type «[ "flex" → 1 ]», so need to be careful.

[SebastianZ]

I've made the change suggested by @Loirooriol now. It still restricts interpolation to the same type per interpolation pair. This might be too restrictive as outlined by me earlier, though at least it fixes the current definition.

I'll create a separate issue to discuss lifting this restriction once the patch is merged.

Sebastian