W3C home > Mailing lists > Public > www-style@w3.org > November 2009

Re: [gradients] basics

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 10 Nov 2009 14:46:23 -0600
Message-ID: <dd0fbad0911101246v33aa655cpb2fb220d095a5721@mail.gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>
Cc: robert@ocallahan.org, Simon Fraser <smfr@me.com>, news@terrainformatica.com, www-style <www-style@w3.org>
On Tue, Nov 10, 2009 at 2:23 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
> I don't really understand what you're trying to do here. If you want
> to fill the box and not necessarily keep the aspect ratio, you use
> background-size: 100%. If you want to keep the aspect ratio, and clip
> out the parts that don't fit inside the box, you use 'cover'. If you
> want to keep the aspect ratio and size the image so that it /just/
> fits the box, you use 'contain'.

Hmm.  The issue is the interaction of aspect ratios, clip boxes, and
infinitely-size images.

First, what's the aspect ratio of the gradient?  I suspect just the
size of the box used to paint it.  Another possible answer is the
aspect ratio of the ellipse, or of the rise/run of the line, but I'm
not certain that will act like we want.  Similarly, what are the
intrinsic width and height?

Now, background-size mentions nothing about clipping, just scaling.
It implicitly assumes an image with finite extent, so the notion of
scaling it to a finite size makes sense.  That doesn't apply here.  Do
we need to patch background-size, or patch gradients?  Current
implementations take the latter route and make gradients *not*
infinite, but that slightly damages what I think is a useful behavior
(adjusting the background-position of a gradient to just make it slide

I'm not certain why you see 100%, contain, and cover as different
cases, fantasai.  Can you explain this in more depth?

> Now I think gradients should behave a little special in how they clip.
> They should have a size, but their clip rect should be infinite. So if
> you specify a gradient on the root element, it is sized and positioned
> as for the root element, but its paint continues beyond the box to fill
> the canvas. Similarly a gradient with 'contain' should be sized to that
> container, but its paint should continue to fill the entire background
> painting area. I'd even say any background-size value would size the
> gradient but not clip it unless the gradient were repeated in that
> dimension.

That's basically my idea.  background-size creates the abstract 'box'
mentioned in the gradient spec (this is implicit, as background-size
affects the used size of an image without intrinsic dimensions).  The
gradient itself should be infinite and should spill paint out in all

We should definitely clip in the direction of repetition.  Right now
it clips in *all* directions, which isn't so cool.  Should this be
fixed in Backgrounds & Borders so that we automatically act correctly
with infinite images, or should it be fixed just in gradients, and
we'll watch out for similar problems if we run into them again later?

Received on Tuesday, 10 November 2009 20:47:14 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:41 UTC