Re: [CSS3] support for linear-gradients & radial-gradients

On Wed, Jan 12, 2011 at 7:19 AM, Alan Gresley <alan@css-class.com> wrote:
> On 12/01/2011 3:58 AM, Simon Fraser wrote:
>> On Jan 11, 2011, at 5:03 am, Alan Gresley wrote:
> [snip]
>>>
>>> Hello Simon,
>>>
>>> With the new syntax, does WebKit show gradients from a<color>  to
>>> transparent un-premultiplied like the old syntax does? From yellow to
>>> transparent there were these steps,
>>>
>>>  rgba(255, 255, 0, 1);}
>>>  rgba(191, 191, 0, 0.75);}
>>>  rgba(127, 127, 0, 0.5);}
>>>  rgba(63, 63, 0, 0.25);}
>>>  rgba(0, 0, 0, 0);}
>>>
>>>
>>> which is interpolation in un-premultiplied space. In an old list message
>>> [1] you were leaning towards interpolation in premultiplied space as you
>>> mentioned here?
>>
>> WebKit currently does color interpolation for gradients in
>> un-premultiplied space, because of limitations of the underlying graphics
>> library. We're tracking this as a
>> bug<https://bugs.webkit.org/show_bug.cgi?id=51844>.
>>
>> Simon
>
>
> Why does this have to be a bug? The current behavior as seen in Gecko and
> WebKit is what one should expect from <color> to transparent. I have seen it
> said that this notation rgba(0,0,0,0) is transparent. This notation
> rgba(255,255,255,0) is also transparent. The later is the type of
> transparent that both Gecko and WebKit want to change to. Why?

I don't understand what you are trying to say or ask here.


> A transparent color does not have a point so it can not exist in any
> colorspace. It does not exist as a color apart from some concept which is
> very ambivalent.

No, transparent colors exist perfectly fine.


> As gradients are currently implemented by Gecko and WebKit, there are only 4
> gradients that run in a direct line through sRGB colorspace. They are White
> to Black, Aqua to Red, Fuchsia to Lime and Yellow to Blue. The rest of the
> gradients from opaque <color> to opaque <color> either run through sRGB
> colorspace as cubic Bézier curve or quartic Bézier curve. If gradients
> become interpolated in premultiplied space then any gradient from <color> to
> transparent would run in a direct line in through sRGB colorspace.

No, all opaque colors are interpolated along a straight line in sRGB
space.  It doesn't matter whether you're using premultiplied colors or
not, as both color-spaces treat opaque colors the same.


> Is it correct that a gradient from Lime to Red has it midway point that is
> olive (#797900)? It also has the same saturation as the midway point between
> yellow and transparent interpolated in premultiplied space.

I forget exactly what color Lime corresponds to.  Is it just #0f0?  If
so, then yes, the midway point is #797900, exactly what you would
expect from a linear interpolation between #f00 and #0f0.


> I don't understand why the CSS WG or implementers would want a CSS gradient
> to behave differently from a SVG gradient. A SVG gradient from <color> to
> transparent is the same as the current Gecko and WebKit implemented CSS
> gradient which is interpolation in un-premultiplied space.

SVG gradients don't use RGBA colors - they have RGB colors and then,
separately, an opacity.  Implementations allow the SVG colors to be
rgba, though, and when that occurs they want to do interpolation in
premultiplied space, same as CSS.


> Another issue is how gradients from <color> to transparent on a dark
> background become dirty. This is seen in this test.
>
> <http://css-class.com/test/css/colors/color-layer-above-below.htm>
>
> Example 5 is a SVG. Example 9, 10 and 11 are what gradients from <color> to
> transparent would look like if interpolated in un-premultiplied space. At
> the bottom of the viewport is some buttons to change the background color.
> Underneath the test are various screenshots.
>
> <http://css-class.com/test/css/colors/gradient-test1.htm>
>
> The second example for "yellow - transparent" shows yellow polluting the
> background. The beginnings of the gradient don't fall of quick enough in
> intensity and hides the backgrounds in some examples.

What you're seeing is the fact that transitions from opaque colors to
transparent in non-premultiplied space get darker as they progress.
Try doing a transition from opaque white to transparent over a white
background, and you'll see it very clearly - you'll get an image that
starts white, darkens to gray, and then lightens to white again.

~TJ

Received on Wednesday, 12 January 2011 17:26:53 UTC