Re: [css-images] color-stop position interpolation

> > Since CSS gradients support <length> and <percentage> values for color
> stops, interpolation between color stops gets more complicated. While there
> isn't necessarily a problem with interpolation between two <length> values
> or two <percentage> values, interpolation between <length> and <percentage>
> does require layout information to calculate the gradient length. Some
> implementations might not be able to provide the layout information
> (especially the gradient size) at the time of the interpolation. This seems
> at least to be the case for WebKit and Blink. The layout information are
> available on drawing the gradient. Until then, the values must be generic
> and independent of the gradient size.
>
> No it doesn't.  Interpolating between <length> and
> <percentage-based-on-length> should be done with calc().


Note that this doesn't solve interpolation of gradient stops without
explicit positions, due to the order of Section 4.5 steps 2 and 3.

A concrete example:

linear-gradient(red 50%, green, blue 50px)
linear-gradient(red 40px, green 50px, blue 80px)

At 50% interpolation between these gradients:
* the red color stop is at calc(25% + 20px)
* the blue is at 60px.

By the spec, however, the green stop is halfway between the layout-specific
position it gets in the first gradient and 50px. In particular, this is
_not_ 50% between calc(25% + 25px) and 50px because Section 4.5 step 2
moves the blue stop around before resolving the position of the green stop
when 50% > 50px.

So a container that is 200px wide resolves the first gradient's stops to
red 100px, green 100px , blue 100px, and the second's to red 40px, green
50px, blue 80px. At 50% interpolation, we'd get stops at red 70px, green
75px, blue 90px. Note that 75px != 0.5x(25%x200 + 25) + 0.5x50 = 0.5x(75 +
50) = 62.5px.

Back in 2011 I proposed switching steps 2 and 3 of Section 4.5. I still
think this is probably the cleanest option.

Cheers,
    -Shane