Re: [gradients] basics

On Tue, Dec 8, 2009 at 11:50 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Dec 7, 2009, at 4:25 PM, Tab Atkins Jr. wrote:
>> This still doesn't seem consistent with how no-repeat works for other
>> images, though.
>
> With other images, the entire image fits within the 'background-size' dimensions. I am saying gradients should also, except when there is some value to say otherwise.

No it doesn't, and that's probably why we're arguing - you have a
slightly incorrect notion of when the clipping normally occurs, so
you're not seeing the problems that I'm pointing out.

With an ordinary image, if it's too large to all fit within the
background-painting area, nothing special occurs.  The full image is
painted onto an infinite canvas and positioned/scaled/repeated/etc.
Finally, when it actually paints onto the element's background layer,
the end-result of the transformations is clipped appropriately.  (In
practice this isn't exactly right, but it should generally be
blackbox-indistinguishable.)  The fact that this clipping only occurs
at the very end is crucial to the workings of CSS Sprites, for example
- if it clipped the source image at the beginning, you couldn't use
spriting techniques at all.

Because of this, I consider it inconsistent to have gradients clipped
by default at the image level.  They're infinite in size, and should
be treated as such.  The final painting step applied to the element
would still be clipped as normal, of course, but any transformations
applied to the source image before this point would be working with an
infinite-size image.


> With the repeat effect, you are talking about something that few authors need to begin with. For those that do want an infinitely repeating linear gradient, its not going to be in a list-item-image, its going to almost always be in a background (you could put it into a border-image with 1px or 0px slices, I suppose, but its not terribly useful that way, and you are mostly just simulating a background layer anyway at that point).

I think a repeating radial gradient is a valid list-style-image, and
using a repeating gradiant on border-image is definitely useful as
well.  border-image has special properties, like the ability to paint
outside of the box geometry, that could be desired.

> I disagree. We already have everything we need to size and position an image in a background. The example I gave is just one case where I wouldn't want the image to repeat. Here is another:
>
> http://www.bradclicks.com/cssplay/linear-gradient/limited-gradient.html

I can provide an example of the opposite - consider a
background-attachment:fixed gradient.  If the gradient itself is
clipped by the box, then as soon as you scroll you'll immediately see
the edge of the image and background-color behind it.
background-attachment:fixed normally relies on things being repeated,
but for gradients it's perfectly valid to have them not repeat, but
rather just extend onward.

In general, though, this is an issue of consistency.  Why would you
want completely different behavior for 'very large' images versus
'infinite' images?  Both of them can extend far outside of the
background-positioning area.  Clipping infinite images to the box but
*not* clipping very large images in the same way will be confusing and
frustrating.  If you want the ability to arbitrarily clip an image to
certain dimensions (and you've made good cases for the ability to do
so), then we should introduce that ability, through an image-rect() or
similar function.

~TJ

Received on Tuesday, 8 December 2009 18:23:48 UTC