[css-compositing] group logic in CSS

After David's feedback on the compositing spec [1], I read up more on
stacking contexts.
I think the CSS part of spec needs to be adjusted to describe what groups
are. Please let me know if my following conclusions make sense.

*What is a group?*
A group in CSS/HTML is another word for a stacking context [2].
It is NOT formed by a <div> or any other HTML 'grouping' element. This is
different from SVG where structure such as <g> creates a group.

*What creates a stacking context?*
z-index + filters + non-default opacity/blending/compositing/group
isolation/group knockout

*What is the background?*
The background is the result of doing a src-over of all partially drawn
stacking contexts that are at lower z-order + the graphics preceding the
current graphic in the current stacking context.

When walking up the current stack of contexts, properties that create
stacking context are ignored during this calculation. For example:

<stacking context 1>...
<stacking context 2 opacity= .4 blend=screen>

<graphic 1>

<graphic2 which needs background>


If graphic 2 calculates the background, it will take the result of stacking
context 1 and do a src-over with graphic1 using 100% opacity and a normal
blend mode .

*What does an isolated group do?*
An isolated group marks a stop to the logic that walks up the current stack
to calculate the background.
In other words, content within an isolated group, will start with the
isolated group instead of the group with the lowest z-order. For example:

<stacking context 1>...
<stacking context 2 isolation=isolated>

<graphic 1>

<graphic2 which needs background>

If graphic 2 calculates the background, it will start at stacking context 2
which just contains graphic1.

*What does a knockout group do?*
A knockout group is the opposite of an isolated group. When calculating the
background in a knockout group, you start with the group at the lowest
z-order (or the nearest isolated group) as usual, but stop when you reach
the knockout group.
The result is that the graphic will not composite or blend with the
graphics in its own group. For example:

<stacking context 1>...
<stacking context 2 knock-out= knock-out >

<graphic 1>

<graphic2 which needs background>

If graphic 2 calculates the background, it will only look at stacking
context 1.

Rik



1: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html
2: http://www.w3.org/TR/CSS21/zindex.html/
https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context

Received on Tuesday, 31 July 2012 18:52:23 UTC