Re: Background-repeat:extend (for gradients)

On Mar 18, 2010, at 9:13 AM, Tab Atkins Jr. wrote:

> On Thu, Mar 18, 2010 at 8:15 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> 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).
> 
> Neither of those value seem at all obvious,

What is obvious, and expected, is that if I have a vertical gradient of a fixed height and width (due to 'background-size', for instance), with 'background-repeat:repeat-x', then I would get a gradient that extended across the width of my element, but was only as high as that image. This is no different than with any other type of image.

The thing is, though, is that without special behavior, the tiles of an angled gradient (say, 30deg, for the sake of argument) do not join together seamlessly, and is unlikely to be what any author would actually want. So the special behavior I am suggesting would look as if you rotated the entire background instead of the pre-tiled gradient. This would make background-'repeat:repeat*' much more useful for non-vertical, non-horizontal gradients.

> and would even be
> confusingly contradictory for horizontal gradients, where repeat-y
> makes it repeat horizontally.

That is a good point, but I think I would only have this special behavior for non-vertical, non-horizontal gradients, as they are the only ones to benefit from it.

> I'm also not sure what you mean for it to repeat in a direction
> perpendicular to the gradient path.

I mean that if you have 'background: linear-gradient(92deg, yellow, blue) repeat-x;' then it would repeat in a direction that is 2deg counterclockwise from horizontal (assuming that 90deg still means upward).

>> [...] 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
> 
> That design principle is *precisely* why I think reusing
> background-repeat and giving some of the values special meaning is
> wrong.  

It's precisely why I think the opposite. It means that, given the default sizing of dimensionless images (as 'background-size:100%') these two things create the same effect:

'background: linear-gradient(90deg, yellow, blue);'
'background: repeating-linear-gradient(90deg, yellow, blue);'

This is in addition to the countless ways of creating a yellow-on-the-bottom/blue-on-the-top gradient, several of which you have listed in example VI.

> Having both background-repeat and repeating-*-gradient does mean that
> there are two ways to have a vertical or horizontal gradient repeat,
> but that's a small price to pay for the fact that the two ways produce
> *different* results for all other gradients.

I disagree. Vertical and Horizontal gradients are probably the most common type, and so people will become accustomed to using the familiar 'background-repeat' property to get repeating patterns. Then when they do want a more angled gradient, they will discover that the repeating is done in a way that is not very useful or pretty. So then what? They're SOL, unless they can hunt around and eventually find that there is a 'repeating-linear-gradient' image-type that replicates what they are familiar with, and then they learn what part of the changed syntax (compared to linear-gradient) controls how many repeats there are (this assumes that repeating-*-gradient()  is put back in sometime, instead of following my suggestions).

> 
> (Note, again, that repeating-*-gradient() is not in the draft at the
> moment, except for an overlooked mention at the very end in an
> example.)

Yes, also overlooked in the very beginning of Gradients. And I think it should stay out, and let background-repeat deal with repeating.