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

Re: [CSS3-color] [css3-images] [css3-transitions] gradient pre-multiplied interpolation

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 27 Jul 2011 07:32:27 -0700
Message-ID: <CAAWBYDBM5XOKimJu-pEfXHw9JYp6dhi1XPxwxN3QTbhyq8TWRA@mail.gmail.com>
To: Alan Gresley <alan@css-class.com>
Cc: CSS 3 W3C Group <www-style@w3.org>
On Wed, Jul 27, 2011 at 3:52 AM, Alan Gresley <alan@css-class.com> wrote:
> To avoid that olive, you can go yellow to rgba(255,255,0,0) or yellow to
> rgba(255,255,255,0).

I know.


>> 23:57:51 [fantasai]
>>    plinss: Why don't we want to do premultiplied?
>> 23:58:03 [fantasai]
>>    TabAtkins: It's not natively available on some platforms
>> 23:58:10 [fantasai]
>>    smfr: We'd have to get libraries to add it
>
>
> So Tab wants un-prefix gradients as soon as possible but it could be a year
> before this works correctly on Mac?

Sure.


>> 23:58:29 [glazou]
>>    glazou has joined #css
>> 23:59:28 [fantasai]
>>    Brian: Alan Gresley was asking about non-premultiplied
>> gradients because there are some cases that you'd want that
>> result
>
>
> And I have not had sufficient time to show the full scale of my testing.

I don't believe there's anything to show with more testing.  We fully
understand the effects of both possibilities.


>> 23:59:53 [fantasai]
>>    TabAtkins: You could simulate it by manually arc
>> it through the color space, it's tricky, but doable,
>> and a very uncommon case in comparison
>
>
> At one time believed that it was possible to simulate. Now I am of the
> opinion that it is impossible since every color stop you add causes the
> gradient to have a banding appearance. Plus the results are not pleasant if
> the background-color is transitioned from a darkish color to a lightish
> color or visa verso. If you say it is doable, can you demonstrate how this
> is done? I know of a way, but it does not involved adding extra color stops.

I disagree; you should only see banding effects if you use too few color-stops.


>> 00:00:13 [fantasai]
>>    Brian: I had good results with Opera
>
> The gradient path has to also appear the same when composite on a
> background-color that is also the opposite (ie. red~aqua or white~black).

I'm not sure I understand.  Do you mean that, for example,
partially-transparent yellow composited over partially-transparent
black should give the same result as the middle of a gradient between
the two colors?  Here's an example of the two effects:

<!DOCTYPE html>
<style>
div { width: 100px; height: 100px; }
</style>
<div style="background: rgba(0,0,0,.1);">
  <div style="background: rgba(255,255,0,.5);">
  </div>
</div>
<div style="background: -webkit-linear-gradient(left, rgba(0,0,0,.1)
-10000px, rgba(255,255,0,.5) 10000px);">
</div>

(Stretching out the gradient ensures that the box is filled with the
average color, as computed by the gradient transition.)

If this is what you mean, then I agree, and browsers do too - they
composite in premultiplied rgba space.  (They have to, or else the web
would be much much uglier, since compositing things with 'transparent'
happens constantly.)


>> 00:00:35 [fantasai]
>>    TabAtkins: With Opera and IE we'll have 2 impls,
>
> Are you sure they are interoperable at all different alpha levels?

Premultiplied colors are extremely simple.  I'm confident that Opera
and IE are competent enough to get this right.


>>  so let's stick with that.
>> 00:00:45 [fantasai]
>>    RESOLVED: Use premultiplied colors for gradients and transitions
>
>
> One way around the issue is that when keywords are used, the gradient uses
> pre-multiplied space. If rgba() or hsla() are used, the gradient uses
> un-premultiplied space. The same can happen with transitions for color to
> color.

This would introduce a significant divergence from how colors work
currently, where keywords are just aliases for the other forms of the
color.  I think that would be pretty confusing.  (Plus, if we were
going to do this, I'd have hsl colors transition in hsl space, which
is also often better-looking than using rgb space.)

If a switch is desired, there is already a mechanism for this in SVG
that could be reused: the color-interpolation property.  It currently
only has a switch between sRGB and linearRGB (which is also useful, as
linearRGB *also* sometimes interpolates prettier than normal RGB)
because SVG doesn't officially have alpha colors, but it could
potentially be modified to indicate whether to premultiply or not as
well.

~TJ
Received on Wednesday, 27 July 2011 14:33:15 GMT

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