[css-masking] new value for 'mask-clip'

Hi,

The 'mask-clip' property[1] takes the three boxes defined for 'background-clip'[2]: content-box, padding-box and border-box. This means that the 'mask-image' property will always clip to at least the border box element. Overflowing content will always be clipped to the border box.

Authors may want masking to take overflowing content into account as well.

#parent {
	mask-image: url(image.svg);
	width: 200px;
	height: 200px;
}

#content {
	width: 500px;
	height: 500px;
}

<div id="parent">
	<img id="content" src="image.png" width="500">
</div>

Instead of having the image clipped to the border box of the div box, authors may want to have the whole group get masked.

I would suggest a new keyword 'group-box'. If that keyword is used, the union of border boxes of the current element and all descendant elements get computed and used to specify the clipping area.

The SVG WG asked for another keyword 'filter-box'. This keyword would use the calculated filter box of an applied 'filter' property. The filter box is the affected (painted) area of an filter. The current specification of Filter Effects[3] does not define such a term yet. It must be described by Filter Effects first.

Any comments or suggestions?

Greetings,
Dirk

[1] http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-mask-clip
[2] http://www.w3.org/TR/css3-background/#the-background-clip
[3] https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Received on Saturday, 20 October 2012 03:03:51 UTC