Re: [css4-images] repeating-conic-gradient was (First draft of css4-images, feedback requested)

On Thu, Aug 9, 2012 at 5:40 AM, Alan Gresley <alan@css-class.com> wrote:
> On 7/08/2012 10:02 AM, Tab Atkins Jr. wrote:
>
>> * Added conic-gradient() function
>
> Liking very much. About repeating conic gradients. What happens with the
> interpolation of color when angles similar to below are given?
>
> repeating-conic-gradient(white 0deg, red 100deg)
>
> Once it makes it way around and back to 360 degrees you will have one uneven
> span between two color stops (the last possible one and the first one). Like
> so.
>
> white    0deg
> red    100deg
> white  200deg
> red    300deg
> white  400deg  <-- outside of possible range
>
> The same would apply to values like 0% being followed by 30%.
>
> white     0%
> red      30%
> white    60%
> red      90%
> white    120%  <-- outside of possible range

You just follow the spec.  Only colors between 0deg and 360deg (or 0%
and 100%) are painted, but color-stops can be placed anywhere on the
gradient line, and they can affect interpolation.

(Note that your expansion is incorrect - the next "virtual" white stop
is at 100px, not 200px.  I'll assume you meant to write out "white
0deg, red 100deg, white 200deg" in the original function.)

So, repeating-conic-gradient(white 0deg, red 100deg, white 200deg) is
exactly equivalent to conic-gradient(white 0deg, red 100deg, white
200deg, red 300deg, #f99 360deg);

As Sebastian says, this is exactly the same behavior as
repeating-radial-gradient(), which doesn't paint any color below 0%.

~TJ

Received on Thursday, 9 August 2012 16:22:09 UTC