CSS3 Color: definition of "mask" and example

In CSS3 Color [1] "3.2. Transparency: the 'opacity' property" the term
'mask' is used without having a definition. After looking at SVG1.1 [2] it
seemed to me that the clipping, masking and composition model of SVG1.1,
chapter 14 was assumed (or equivalent in SVG1.0).

Could we perhaps make a reference in [1] to this so it becomes more clear
for readers not familiar with SVG1.1?

In thinking through how to implement it I found it useful to internalize and
learn these compositing rules and I made up an example. Perhaps an example
like this could be included in [1] to further clarify what is supposed to
happen so the implementer has something to verify his understanding against.

Consider a <span> inside a <p> and the following stylesheet (a notation of
p_rgba() is used for premultiplied rgba):

p { background: blue }
span { background: yellow;
       border: solid thin rgba(100%,0,0,0.8);
       color: rgba(100%,0,0,0.8);
       opacity: 0.7 }

The intermediate canvas for <span> starts with transparent black:

p_rgba(0,0,0,0)

The border before compositing onto the <span> intermediate canvas is:

rgba(100%,0,0,0.8) -> 
p_rgba(80%,0,0,0.8)

When composited onto the <span> intermediate canvas (using simple alpha
blend - sab[]):

sab[p_rgba(80%,0,0,0.8), p_rgba(0,0,0,0)] -> 
p_rgba(80%,0,0,1-(1-0)(1-0.8)) -> 
p_rgba(80%,0,0,0.8)

When 'opacity' of 0.7 is used:

p_rgba(80%*0.7,0,0,0.8*0.7) -> 
p_rgba(56%,0,0,0.56)

When combined with the blue background of the parent:

sab[p_rgba(56%,0,0,0.56), p_rgba(0,0,100%,1)] -> 
p_rgba(56%,0,100%*(1-0.56),1-(1-0.56)(1-1)) -> 
p_rgba(56%,0,44%,1)

The background before compositing onto <span> intermedia canvas is:

yellow -> 
rgba(100%,100%,0) -> 
p_rgba(100%,100%,0,1)

And is the same when painted onto the intermediate canvas. When combined
with the 'opacity' of 0.7 it becomes:

p_rgba(100%*0.7,100%*0.7,0,1*0.7) -> p_rgba(70%,70%,0,0.7)

Which is then combined onto the blue background:

sab[p_rgba(70%,70%,0,0.7), p_rgba(0,0,100%,1)] -> 
p_rgba(70%,70%,100%*(1-0.7),1-(1-0.7)(1-1) -> 
p_rgba(70%,70%,30%)

Finally the text when combined onto the already yellow intermediate canvas
becomes:

sab[p_rgba(80%,0,0,0.8), p_rgba(100%,100%,0,1)] -> 
p_rgba(80%+(1-0.8)*100%,(1-0.8)*100%,0,1-(1-0.8)(1-1)] -> 
p_rgba(100%,20%,0,1)

Combined with 'opacity' of 0.7:

p_rgba(100%*0.7,20%*0.7,0,0.7) ->
p_rgba(70%,14%,0,0.7)

When combined onto the parent's blue background:

sab[p_rgba(70%,14%,0,0.7), p_rgba(0,0,100%,1)] ->
p_rgba(70%,14%,100%*(1-0.7),1-(1-0.7)(1-1)) ->
p_rgba(70%,14%,30%,1)

Regards,
- Jacob

[1] http://www.w3.org/TR/2003/CR-css3-color-20030506 
[2] http://www.w3.org/TR/SVG11

Received on Monday, 28 July 2003 14:21:38 UTC