Re: [css-compositing] group logic in CSS

On Jul 31, 2012, at 11:51 AM, Rik Cabanier <cabanier@gmail.com> wrote:

> 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
Just a small addition. Filters create a pseudo-stacking-context as specified in Filter Effects at the moment. Transforms can create a stacking context as well.

> 
> 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 20:58:31 UTC