W3C home > Mailing lists > Public > www-style@w3.org > August 2013

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

From: Shane Stephens <shans@google.com>
Date: Tue, 20 Aug 2013 07:14:43 +1000
Message-ID: <CAGTfzwSdyEVU4geUDreKU2B0GTKsA8sczRqx=MJNkt=zJOViNA@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Dirk Schulze <dschulze@adobe.com>, www-style list <www-style@w3.org>
> > 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.

Received on Monday, 19 August 2013 21:15:11 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:31 UTC