- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 10 Jan 2011 10:50:21 -0800
- To: Simon Fraser <smfr@me.com>
- Cc: www-style list <www-style@w3.org>
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.
> 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?
~TJ
Received on Monday, 10 January 2011 18:51:16 UTC