Re: [css3 images] radial gradient question

On Jan 10, 2011, at 10:50 AM, Tab Atkins Jr. wrote:

> On Sun, Jan 2, 2011 at 2:26 PM, Simon Fraser <smfr@me.com> wrote:
>> There's slight ambiguity about color stop handling for radial gradients.
>> 
>> Consider the following:
>> 
>> div {
>>  width: 200px;
>>  height: 200px;
>>  background-image: radial-gradient(left, circle, closest-corner, red, green 100px, blue);
>> }
> 
> Slight syntax nitpick - the 'circle' and 'closest-corner' are part of
> the same argument, and shouldn't have commas between them.

Right, typo, sorry.

> 
>> The 100% point of the gradient is either of the left corners, but the
>> green color stop is in that same location. Is the expected rendering
>> to extend the green to fill the rest of the square, or to have a sharp
>> boundary between green and blue, and fill the rest with blue?
>> Firefox does the former.
> 
> This shouldn't be ambiguous.  Following the algorithm in the spec
> gives a clear answer.  The first color stop is set to 0%, the last to
> 100%.  When you resolve those percentages to actual values, you get
> "red 0px, green 100px, blue 100px", which the spec specifies must be
> rendered in the latter method you describe, where there's a sharp
> boundary between green and blue, and blue fills the rest of the
> square.
> 
> I'm getting precisely that behavior in Firefox 3.6.13.  What version
> are you getting the bad behavior in?

In a recent Minefield build on Mac (where I believe Core Graphics gradients
are used), this hits a CG bug that causes the box to be filled with green,
rather than blue. This was confusing me. WebKit currently shares this same
bug, but I plan to work around it at some point.

Simon

Received on Monday, 10 January 2011 18:59:07 UTC