Re: Background-repeat:extend (for gradients)

On Wed, Mar 17, 2010 at 9:53 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> http://lists.w3.org/Archives/Public/www-style/2010Mar/0142.html
>
> Summary of the proposal:
>
> 1) Clarify, in the gradients section of the Images module, that
> gradients are, by default, still finitely-sized images with edges and
> intrinsic dimensions equal to the 'box' specified in the gradient
> section.  This makes the current Firefox behavior wrt gradients
> conformant.  You can see this behavior with the following test-case:
>
> <div id=foo></div>
> <style>
> #foo {
>        width: 200px;
>        height: 200px;
>        margin: 50px;
>        border: 3px solid black;
>        background: -moz-linear-gradient(left, red, blue) gray;
>        background-position: 100px;
> }
> </style>
>
> Firefox 3.6 renders the gradient as a 200px by 200px image, and then
> moves it 100px over, leaving an area not covered by a background image
> and revealing the background-color underneath.
>
> 2) Add a new 'extend' value to background-repeat.  For 'normal' sorts
> of images (basically, any <image> value except gradients), this is
> equivalent to the 'no-repeat' value.  For gradients, this makes the
> browser treat it as truly infinite.
>
> If we took the previous test case and added a background-repeat:extend
> rule to it, it would produce a display equivalent to the following:
>
> <div id=foo></div>
> <style>
> #foo {
>        width: 200px;
>        height: 200px;
>        margin: 50px;
>        border: 3px solid black;
>        background: -moz-linear-gradient(left, red 50%, blue 150%) gray;
> }
> </style>
>
> While this particular case can be replicated without
> background-repeat:extend just by tweaking the color-stop locations (as
> demonstrated), it is a rarity.  The vast majority of possible
> gradients, including all linear gradients at an angle and all radial
> gradients, cannot be faked in this way.

We talked about this for a bit in the telcon yesterday.  Fantasai
brought up that this property would also be useful for SVG images,
where it would make them extend past the viewport (normally, SVG
images are clipped to the viewport).

I think this would indeed be useful, and also suggests that I can make
the gradients draft more clear by explicitly referencing a "viewport"
rather than a "box".  Unless there are objections, I will make this
change to the draft soon.

This also suggests some slightly more comprehensive language about how
to define the "size" of an infinite image - infinite images *must*
have a viewport which is finitely-sized and which can be used as a
reference for resizing, positioning, etc.

At the telcon, Brad suggested that the infinite version of the
gradient is the more useful one, and so should be the default, with
some other backgroung-repeat value used to turn it back into a finite
image.  I may agree that it would be slightly more useful, but I think
it's easier to fit into the existing background-repeat system if it's
finite by default, so that you can then immediately apply the existing
background-repeat values to it sensically.  As well, we would likely
still want the 'extend' value anyway, for the noted use-case of
allowing an SVG image to pop out of its viewport.

~TJ

Received on Thursday, 18 March 2010 16:24:19 UTC