Re: [gradients] basics

On Nov 11, 2009, at 3:22 PM, Tab Atkins Jr. wrote:

>>> Sure.  The most important one is using background-position in the
>>> expected manner.  If I start with "background-image:
>>> radial-gradient(yellow, red);" and then apply "background-position:
>>> 100px 100px", I expect the gradient to shift a bit but still fill my
>>> box.
>>
>> The reason I would find that surprising is that other images used at
>> 'background-size:100% 100%' (the effective result of using an  
>> dimensionless
>> image as a background) don't do that. They offset the image and let
>> background-color be seen. I suppose someone might use this as a  
>> lightweight
>> version of inner shadow, for instance, but your special magic would  
>> make the
>> gradient box inconsistent.
>
> The offset behavior is the same for both.

There was an "and" in there. Followed by "let background-color be  
seen". That is not the same for both if your infinite gradient ends  
are not clipped.


> The issue, though, is that
> those images don't extend outside of the box anyway (especially if
> you're using background-size: 100% 100% in tandem), while gradients
> *do*.

I'll assume that by 'box' you mean the image box, and not for the  
gradient to extend outside the background painting area.

> On the other hand, an image which is finite but larger than the box
> would work as expected - when you move it down and to the right, the
> upper and left portions of the image, which were clipped by the box,
> come into view.

Which is different than what happens for other images with 'background- 
size: 100% 100%' and 'background-repeat: no-repeat'. On those, you see  
the background-color along the top and left (assuming still example of  
'background-position: 100px 100px'). That was my point.

> I think the only sensical behavior is to treat a gradient identically
> to how we'd treat an image which is finite but larger than the box.
> The only special behavior necessary is specifying what effect
> background-size has, as there is no notion of 'scaling' an infinite
> image to a finite size (I'd just make clear that it scales the 'box'
> that gradients use to measure out how to draw themselves).

I understand what you're after; I'm just not entirely sure I like the  
special magic which makes it unlike what other images do. The real  
magic is that you've got infinite image extending outside the image  
dimensions when it doesn't repeat. Then when you size and/or offset  
it, the outside part scales and offsets too.

On the other hand, if you did have that magic in 'background- 
position', you might be able to eliminate the <bg-position> as an  
argument from 'radial-gradient', and just always have it centered. It  
would be simpler, even if it could not create every radial gradient  
imaginable.