W3C home > Mailing lists > Public > www-style@w3.org > November 2009

Re: [gradients] basics

From: Simon Fraser <smfr@me.com>
Date: Sun, 08 Nov 2009 13:12:54 -0800
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, news@terrainformatica.com, www-style <www-style@w3.org>
Message-id: <D041B98A-25E9-437D-9017-3149D25A0DE5@me.com>
To: Brad Kemper <brad.kemper@gmail.com>
On Nov 8, 2009, at 11:37 am, Brad Kemper wrote:

> On Nov 8, 2009, at 8:50 AM, Simon Fraser wrote:
>
>>>> You are correct. Gradient images have no intrinsic size, so the  
>>>> behavior of these properties needs to be specified. At one point  
>>>> Gecko used background-repeat as an indication that it should  
>>>> paint a repeating gradient, but that is not in Tab's current  
>>>> proposal.
>>>
>>> I don't understand how this is unclear.  If these properties have
>>> undefined interactions with images lacking intrinsic sizes, then the
>>> problem lies in CSS2.1.  It is not appropriate to define that
>>> treatment here.
>>
>> I see that <http://www.w3.org/TR/css3-background/#the-background- 
>> size> etc. describe behavior when lacking intrinsic size. I stand  
>> corrected.
>>
>> Making gradients always have no intrinsic size does prevent one  
>> possible effect an author may desire: generating a gradient image  
>> of a particular size, and then having that tiled over the background.
>
> Right. I think this is a fairly essential assumption of the  
> proposal, and not one that I would change either. Because there is  
> no intrinsic size or aspect ratio, the default interaction with  
> 'background-image' is that the gradient is scaled to the dimensions  
> of the background positioning area.
>
> If you actually want the gradient scaled to some other dimensions,  
> you can use 'background-size' to do so. Then you can use 'background- 
> repeat' to tile the gradient.

You're right, so it's possible to do the tiled gradient effect I  
mention above. I tested WebKit's current gradient implementation, and  
that works as expected.

> Which is why you don't need the gradient function itself to have a  
> way to repeat the gradient inside itself.
>
> Any UA that supports 'background-repeat', 'background-size', and  
> Tab's 'linear-gradient()' should support tiling a properly sized  
> gradient with 'background-repeat'. What Gecko does that goes beyond  
> this is to adjust the tiling so that the gradients in each tile line  
> up with each other. Thus, if you had a 30deg gradient, the tiles of  
> 'background-repeat' are not in rows and columns as they normally  
> are, but presumably shift each column (or row?) so that the colors  
> of the gradient in each tile will line up with its neighbor.  
> Although, that doesn't precisely describe how something like 'repeat- 
> x' would work with a gradient that includes, say, a 10deg gradient  
> or even a top-left to lower-right gradient.

I don't think this can be construed as "adjusting the tiling so that  
the gradients line up with eachother", since Gecko also makes radial  
gradients repeat, and that can't be described by adjusting the tiles.

What they do is to simply repeat the color stops along the gradient  
axis for as long as is necessary to fill the box.

> That is kind of nice behavior, even though it seems like a somewhat  
> uncommon need. Perhaps we could eventually add a note to 'background- 
> repeat' to explain how to tile generated images like gradients that  
> can have a more seamless joining of tiles as with Gecko.

If we want background-repeat to have this magic effect on gradients,  
we should just say that it's achieved by repeating the color stops.  
However, Tab's approach was to have two more gradient functions  
(repeating-linear-gradient, repeating-radial-gradient), which I think  
is a bit more honest.

Simon
Received on Sunday, 8 November 2009 21:13:50 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:22 GMT