Re: Background-repeat:extend (for gradients)

On Mar 18, 2010, at 1:53 AM, Tab Atkins Jr. wrote:

> 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.

FWIW, Gecko trunk (1.9.3a4pre) has a different behaviour here, one that matches what WebKit does:
The 'image' is offset by 100px to the right, but repeated. The background-color is not visible.

testcase
http://dev.l-c-n.com/CSS3_border-background/background-repeat-gradient.html

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/

Received on Thursday, 18 March 2010 08:14:59 UTC