Background-repeat:extend (for gradients)

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.

~TJ

Received on Wednesday, 17 March 2010 16:54:50 UTC