Re: Background-repeat:extend (for gradients)

On Mar 17, 2010, at 5:26 PM, Philippe Wittenbergh wrote:

>> Firefox 3.6 renders the gradient as a 200px by 200px image, and then
>> moves it 100px over, leaving an area not covered by a background image
>> and revealing the background-color underneath.
> 
> FWIW, Gecko trunk (1.9.3a4pre) has a different behaviour here, one that matches what WebKit does:
> The 'image' is offset by 100px to the right, but repeated. The background-color is not visible.
> 
> testcase
> http://dev.l-c-n.com/CSS3_border-background/background-repeat-gradient.html

It should be repeated in that test case, because the initial value used by that shorthand is 'background-repeat:repeat'. It should only _not_ be repeated at all if there is 'background-repeat:no-repeat' (or 'background-repeat:extend').

'repeat', 'repeat-x', and 'repeat-y' are still useful for gradient backgrounds (especially for horizontal or vertical linear gradients, as is). 

In fact, since backgrounds are the place where repeating the gradient is more useful, I would prefer to remove repeating-linear-gradient() and repeating-radial-gradient() from CSS Images and just have repeating handled by 'background-repeat', with some special behavior to deal with the repeat not always being horizontal or vertical. 

Instead, we can simply say that for 'background-repeat:repeat-y' that the gradient repeats in the direction of the gradient path, and for 'background-repeat:repeat-x' that the gradient repeats in a direction perpendicular to the gradient path (for radial gradients, it would repeat radially for any of these three values).

For border-image, I don't see the non-infinite repeatability of non-horizontal and non-vertical gradients to be an issue of great concern, and for list-style-image it is no concern at all.

Having background-image-repeat work this way would simplify CSS Images, and avoid redundant ways to do the same thing: repeating a sized gradient using background-repeat, as one would normally expect to work (at least with horizontal and vertical it would look good and be very useful), or by using a special version of the image functions. As the CSS Design Principles state:

"The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect."

http://www.w3.org/TR/2009/CR-CSS2-20090908/intro.html#design-principles