[css-masking] multiple mask layers and mask-composite

Hi all,

We removed multiple mask layers from the CSS Masking spec[1]. We could not reach consensus on how to composite the different mask layers. The idea was to delay layers together with other features to the next level.

After the Last Call period there were requests to move some of these delayed features back into CSS Masking level 1. Layered masking is the only main feature request that is left.

It turns out that multiple layers of masking are more popular than initially anticipated.

I would like to propose adding layered masks back to level 1 again. To provide the ultimate control how to combine mask layers for authors I suggest adding a new mask longhand property: mask-composite.

Name: mask-composite
Value: <composite-operator>#
Initial: source-over
Applies to: All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements
Inherited: no
Percentages: n/a
Computed value: as specified
Media: visual
Animatable: no

<composite-operator> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor

Each composite operator maps to one of the porter duff compositing operators specified in CSS Compositing and Blending level 1[2]. Compositing just affects mask layers. There is not interaction between the mask compositing operators and the content. This is very similar to the background-blend-mode property[3].

The feature is already implemented prefixed in WebKit and Blink. A famous example is “Animate icons”[4] which gives some impression how this feature can be used. (The example just works on WebKit or Blink based browsers.)

Please provide your feedback to the proposal. If you have more examples for multiple mask layers or compositing of mask layers, I encourage you to send them too!

Greetings,
Dirk

PS: I am aware that a proposal like this might delay the spec by 1 or 2 months more (depending on the acceptance of the proposal), but I believe that it is worth it.
1) I think it is easier for implementations to plan for multiple layers from the beginning. This aligns the implementation work much more with the background property. WebKit and Blink share most of the code paths between background and mask. Just a little bit of overhead is needed in comprising to not implementing the feature at all.
2) The overhead of a second level right after the first level seems to be significant. Furthermore, I did not even get the acceptance of the WG to proceed with a second level. At this point I am not even sure if layered mask should justify a second level instead of putting it into level 1 from the beginning.

[1] http://dev.w3.org/fxtf/css-masking-1/
[2] http://dev.w3.org/fxtf/compositing-1/#porterduffcompositingoperators
[3] http://dev.w3.org/fxtf/compositing-1/#background-blend-mode
[4] http://codepen.io/simurai/pen/gGAjr

Received on Tuesday, 4 March 2014 08:55:07 UTC