- From: Alan Gresley <alan@css-class.com>
- Date: Sun, 31 Jul 2011 09:24:46 +1000
- 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 UTC