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

On Mon, Aug 19, 2013 at 2:14 PM, Shane Stephens <shans@google.com> wrote:
>> > 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.

Correct.  I think we were too fatigued by gradient changes at the time
to make this change, but given that it's just a minor effect (and only
to gradients that are badly-written in the first place), I think it's
probably possible to make the tweak.

~TJ

Received on Monday, 19 August 2013 21:16:56 UTC