[css3-images] 'contain' radial gradients edge case

Assume the following gradients:

background-image: radial-gradient(contain, white 99%, black 100%);
background-image: radial-gradient(contain, white 100%, black 100%);
background-image: radial-gradient(contain, white 100%, black 101%);

Fiddle for easy testing: http://jsfiddle.net/leaverou/qBurF/

The 1st and 3rd are rendered consistently in Gecko and Webkit and are 
just what somebody would expect.
The 2nd has a rendering that's very disconnected from the 1st and 2nd 
examples: It's a solid color, black in Minefield (which I is probably a 
bug, so I reported it) and white in Webkit. I assume Webkit's rendering 
is consistent with that the spec defines (although I couldn't find any 
explicit instruction in Image Values), and it makes sense as it's 
consistent with how linear gradients or other kinds of radial gradients 
should display. However, in this case it's not what a designer would 
expect (which is a solid ellipse) and it will make interpolation look 
weird. The expected rendering could be useful for some cases, whereas a 
solid color could be easily achieved in other ways.


Lea Verou
Web designer & developer, specializing in front-end development
leaverou.me <http://leaverou.me> . Twitter <http://twitter.com/LeaVerou> 
. LinkedIn <http://gr.linkedin.com/in/leaverou>

Received on Friday, 18 February 2011 15:37:28 UTC