Re: Background-repeat:extend (for gradients)

On Thu, Mar 18, 2010 at 10:41 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Mar 18, 2010, at 9:13 AM, Tab Atkins Jr. wrote:
>>> 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.

Yeah, that's obvious and expected.  Unless I'm off base, it's
precisely what happens right now, too.  (It should be unnecessary,
though, as the gradient will by default fill the whole viewport, which
is the size of the element.)

> 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.

Wait, rotated?  Did you mean to use some other word?  If not, can you
explain this?

>> 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.

So a 0deg gradient would use repeat-x to make its color stops repeat,
while a 1deg gradient would use repeat-y to do so?

>> 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).

So, if you moved it with background-position, you'd see it as a ribbon
of gradient color?

> 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.

Yes, there are lots of ways to produce certain simple types of
gradients.  There are lots of ways to do many simple things in CSS,
just because of how things interact.  I believe that the main use-case
for repeating gradients uses length units on the stops.

Note, though, that this criticism applies equally to using
background-repeat to trigger a repeating gradient.  "background:
linear-gradient(yellow, blue) repeat;" still looks identical to using
no-repeat.

>> 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).

Hmm.  I do find this line of argument slightly convincing.  I'm still
against smuggling in arbitrary meanings to repeat-x and repeat-y,
pretending that one of them actually means repeat-parallel and one is
repeat-perpendicular.  If I were to do this, I'd go with all the
repeat* values triggering a repeating gradient.

However, this still leaves us with the problem of finite/infinite (or
viewport overflow hidden/visible, if you want to look at it that way).
 We still have no-repeat meaning finite, and extend meaning infinite.
What do the repeat* values mean?  This is the *strongest* reason I'm
against making the repeat* values trigger a repeating gradient.
Background-repeat has a specific meaning, and this idea is mixing into
it a semantically-similar, but technically quite different, meaning.
This causes problems.

We could just say that the repeat* values automatically extend the
gradient, but then we're special-casing gradients in a different way
than we'd like to do for other things.  If we use 'extend' to make SVG
images pop out of their viewports, we *don't* want the repeat* values
to suddenly change behavior and *also* make them pop out of their
viewport.  SVG images should maintain their normal
viewport-constrained nature under the repeat* values.

So, we have a conundrum.  If the repeat* values *don't* automatically
extend the gradient, then it becomes impossible to make a repeating,
extended gradient (which is bad for radial gradients).  If the repeat*
values *do* automatically extend the gradient, then we have
inconsistent behavior between gradients and SVG images.

(The third possibility, make background extension a separate property
rather than a value of background-repeat, isn't right either.  An
extended image *can't* be repeated in the standard sense by
definition, so it's not orthogonal to the background-repeat property,
and thus should probably not be separate.)

Repeating gradients are simply orthogonal to repeating backgrounds.
They should thus be achieved through a separate mechanism, if we
decide they are sufficiently worthwhile to spec.  Yes, in some ways it
is somewhat easier to trigger this behavior through background-repeat.
 But it's not the technically correct solution, and this will cause
inconsistencies and problems down the line.

~TJ

Received on Friday, 19 March 2010 00:02:41 UTC