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

Re: Gradient syntax proposal

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 22 Aug 2009 09:56:08 -0500
Message-ID: <dd0fbad0908220756y217da4c7v703f01491bba7e71@mail.gmail.com>
To: Fran├žois REMY <fremycompany_pub@yahoo.fr>
Cc: David Perrell <davidp@hpaa.com>, www-style@w3.org
On Sat, Aug 22, 2009 at 7:14 AM, Fran├žois REMY<fremycompany_pub@yahoo.fr> wrote:
> Only one question though. Gradients are images that does not have any
> predefined size. Is it really usefull to allow <length> to be used (that
> mean
> we could use units like "px" or "em") ?

I still think so.

> If yes, what to do if the background where the gradient must take place is
> 50px * 50px and the start point of the background is, let's say, at (60px:
> 0px).
> Is that valid but 'outside' the visible zone of the image ? Is this invalid
> ?

This is actually a slightly odd case - I think it's impossible to have
a gradient outside of the box with just a bg-position, because the
ending-point always swings around to the other side.  In this case,
for example, your starting point is "60px 0", which is aligned with
the top edge but 10px outside of the right edge.  Thus the ending
point is at "-10px 50px", aligned with the bottom and 10px outside of
the left.  This'll produce a diagonal gradient across the box.

But let's say you did manage to do so, such as by specifying "60px 0
0deg".  This actually isn't accounted for the in the current draft...
(Fixes draft.)  So, let's say you specified that.  Then yes, it's
still a valid rule.  The gradient is sized and chopped to the
background-box, but it's theoretically painted on an infinite canvas.
The starting-point, ending-point, and bounding box are just used for
reference; they don't have any real effect on the drawing of the

So, given a 50px by 50px box, and the following rule:

background: linear-gradient(60px 0 0deg, yellow, blue)

You'd just end up with a solid blue image (it's solid blue because the
starting-point and ending-point are identical according to the rule I
just added, and thus the gradient image itself is just a solid color
equal to the last color-stop).

Received on Saturday, 22 August 2009 14:57:03 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:38 UTC