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

Re: [css3-images] Premultiplication switch

From: Alan Gresley <alan@css-class.com>
Date: Sun, 31 Jul 2011 09:24:46 +1000
Message-ID: <4E3492BE.3040403@css-class.com>
To: Brian Manthos <brianman@microsoft.com>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Leif Arne Storset <lstorset@opera.com>, Brad Kemper <brad.kemper@gmail.com>, "www-style@w3.org" <www-style@w3.org>
On 30/07/2011 12:43 PM, Brian Manthos wrote:
> Alan Gresley: (a)
>> background: white -o-linear-gradient(left, red, transparent,
>> blue);
> (b)
>> background: white -o-linear-gradient(left, red, rgba(255,0,0,0)
>> 50%, rgba(0,0,255,0) 50%, blue);
>>
>> Then how is it possible that Opera renders both these gradients
>> the same? One has one midpoint color stop and the other has two
>> midpoint color stops.
>
> It's fairly straightforward, IMO, given that Opera seems to be
> applying pre-multiplied color interpolation.
>
> non-premultiplied a0	red, transparent, blue a1	red 0%, transparent
> 50%, blue 100% a2	red 0%, rgba(0,0,0,0) 50%, blue 100% premultiplied
> a3	red 0%, prgba(0,0,0,0) 50%, blue 100%
>
> non-premultiplied b0	red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%,
> blue b1	red 0%, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue 100%
> premultiplied b1	red 0%, prgba(0,0,0,0) 50%, prgba(0,0,0,0) 50%, blue
> 100%
>
>
> All 7 render the same, but behave differently when transitions and
> animations are involved (3 stops for a0/a1/a2/a3 vs. 4 stops for
> b0/b1/b2).


I can understand this since the former (3 stops) has only that can be 
transitioned where the later (4 stops) has only two midway points that 
can be transitioned.


> In case it's useful, try changing transparent to rgba(0,0,0,0) in (a)
> and you'll notice the rendering is unchanged in browsers that use
> pre-multiplied color interpolation.
>
> Another approach that might prove useful to evaluate is to use
> opacities of 0.5 instead of 0.


I can evaluate what is happening regardless of the opacity. This is how 
I conceptually see it from one side of a sRGB color cube with alpha 
going off into an alpha dimension.

  ('R' for Red, 'B' for Blue, 'b' for black and F for Fuchsia)


1. _red, rgba(0,0,0,0), blue_


    F------B
    |       |\
    |       |
    |       |\
    R------b
      \     \ \
        \    \
          \   \\
            \  \
                t


2. _red, rgba(255,0,255,0) 50%, rgba(255,0,255,0) 50%, blue_


    F-------B
    |\      |
    | \    /|
    |  \    |
    R---\-/-b
       \ \
          t


3. _red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue_


    F-------B
    |       |\
    |       | \
    |       |  \
    R-------b   \
     \           t
      \
       \
        \
         t


The last (3) has transparent points that are separated.


Take these two gradients.


   linear-gradient(left, red, rgba(255,0,0,0) 50%, blue)

   linear-gradient(left, red, rgba(0,0,255,0) 50%, blue)


In premultiplied space, they are identical. In non-premultiplied space, 
we have two different gradients.


A question. What display devices, OS or UAs use prgba? I could not find 
any good definition of what it does when I did a search.



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Saturday, 30 July 2011 23:25:18 GMT

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