W3C home > Mailing lists > Public > www-style@w3.org > January 2011

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

From: Alan Gresley <alan@css-class.com>
Date: Thu, 13 Jan 2011 02:19:31 +1100
Message-ID: <4D2DC683.3000801@css-class.com>
To: Simon Fraser <smfr@me.com>
CC: Peter Beverloo <peter@lvp-media.com>, Irfan Mir <theirf@gmail.com>, www-style@w3.org
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?

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.

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.

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

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.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Wednesday, 12 January 2011 15:20:16 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:35 GMT