1.1 --- a/css-masking-1/Overview.bs Sun Jun 11 07:11:57 2017 +0200
1.2 +++ b/css-masking-1/Overview.bs Mon Jun 12 10:01:20 2017 +0200
1.3 @@ -17,28 +17,29 @@
1.4 Abstract:
1.5 Abstract: Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.
1.6 Test Suite: http://test.csswg.org/suites/css-masking/nightly-unstable/
1.7 -Use <i> Autolinks: no
1.8 Ignored Vars: trapeze.svg
1.9 </pre>
1.10 <pre class=link-defaults>
1.11 spec:fill-stroke-3; type:value; text:square
1.12 -spec:svg2; type:property; text:fill
1.13 -spec:svg2; type:property; text:fill-rule
1.14 -spec:svg2; type:property; text:fill-opacity
1.15 -spec:svg2; type:property; text:stroke
1.16 -spec:svg2; type:property; text:stroke-dashoffset
1.17 -spec:svg2; type:property; text:stroke-dasharray
1.18 -spec:svg2; type:property; text:stroke-opacity
1.19 -spec:svg2; type:property; text:stroke-linecap
1.20 -spec:svg2; type:property; text:stroke-miterlimit
1.21 -spec:svg2; type:property; text:stroke-linejoin
1.22 -spec:svg2; type:property; text:stroke-width
1.23 -spec:svg2; type:element; text:a
1.24 +spec:svg2; type:property
1.25 + text:fill
1.26 + text:fill-rule
1.27 + text:fill-opacity
1.28 + text:stroke
1.29 + text:stroke-dashoffset
1.30 + text:stroke-dasharray
1.31 + text:stroke-opacity
1.32 + text:stroke-linecap
1.33 + text:stroke-miterlimit
1.34 + text:stroke-linejoin
1.35 + text:stroke-width
1.36 +spec:svg2; type:element
1.37 + text:a
1.38 + text:title
1.39 + text:script
1.40 + text:style
1.41 spec:css-color-4; type:property; text:color
1.42 spec:css-fonts-4; type:property; text:font-stretch
1.43 -spec:svg2; type:element; text:title
1.44 -spec:svg2; type:element; text:script
1.45 -spec:svg2; type:element; text:style
1.46 </pre>
1.47 <pre class=anchors>
1.48 spec:svg2; url:https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute; type:element-attr; for:svg; text:viewBox
1.49 @@ -173,18 +174,21 @@
1.50 A clipping path affects the rendering of an element. It does not affect the element's inherent geometry. The geometry of a clipped element (i.e. an element which references a <a element>clipPath</a> element via a 'clip-path' property, or a child of the referencing element) must remain the same as if it were not clipped.
1.51
1.52 <div class=example>
1.53 -Consider a shape that is clipped by a clipping path applied to an ancestor:
1.54 + Consider a shape that is clipped by a clipping path applied to an ancestor:
1.55
1.56 -<pre><code class=html><g clip-path="circle()">
1.57 + <pre><code highlight=svg>
1.58 + <g clip-path="circle()">
1.59 + <path id="shape" d="M0,0 L10,10, L 20,0 z"/>
1.60 + </g>
1.61 + </code></pre>
1.62
1.63 - <path id="shape" d="M0,0 L10,10, L 20,0 z"/>
1.64 -</g></code></pre>
1.65 + The shape is referenced by a <a element>use</a> element:
1.66
1.67 -The shape is referenced by a <a element>use</a> element:
1.68 -<pre><code class=html><use xlink:href="#shape"/>
1.69 -</code></pre>
1.70 + <pre><code highlight=svg>
1.71 + <use xlink:href="#shape"/>
1.72 + </code></pre>
1.73
1.74 -The geometry of the shape is not influenced by the circular clipping path.</p>
1.75 + The geometry of the shape is not influenced by the circular clipping path.
1.76 </div>
1.77
1.78 By default, 'pointer-events' must not be dispatched on the clipped-out (non-visible) regions of a shape. For example, an element with a dimension of 10px to 10px which is clipped to a circle with a radius of 5px will not receive ''click'' events outside the <a>clipping region</a>.
1.79 @@ -240,23 +244,29 @@
1.80 If the URI reference is not valid (e.g it points to an object that doesn't exist or the object is not a <a element>clipPath</a> element), no clipping is applied.
1.81
1.82 <div class=example>
1.83 - <p>This example demonstrates the use of the basic shape <<polygon()>> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the <a href="#clipping">introduction</a>.</p>
1.84 - <pre><code class=css>
1.85 -clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
1.86 + This example demonstrates the use of the basic shape <<polygon()>> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the <a href="#clipping">introduction</a>.
1.87 +
1.88 + <pre><code highlight=css>
1.89 + clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
1.90 122px 57px, 184px 73px, 198px 105px, 199px 150px,
1.91 145px 159px, 155px 139px, 126px 120px, 112px 138px,
1.92 - 80px 128px, 39px 126px, 24px 104px);</code></pre>
1.93 + 80px 128px, 39px 126px, 24px 104px);
1.94 + </code></pre>
1.95 </div>
1.96
1.97 <div class=example>
1.98 - <p>In this example, the 'clip-path' property references an SVG <a element>clipPath</a> element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the <a href="#clipping">introduction</a>.</p>
1.99 - <pre><code class=css>clip-path: url("#clip1");</code></pre>
1.100 + In this example, the 'clip-path' property references an SVG <a element>clipPath</a> element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the <a href="#clipping">introduction</a>.</p>
1.101 +
1.102 + <pre><code highlight=css>
1.103 + clip-path: url("#clip1");
1.104 + </code></pre>
1.105
1.106 - <pre><code class=html>
1.107 -<clipPath id="clip1">
1.108 - <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
1.109 - 199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/>
1.110 -</clipPath></code></pre>
1.111 + <pre><code highlight=xml>
1.112 + <clipPath id="clip1">
1.113 + <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
1.114 + 199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/>
1.115 + </clipPath>
1.116 + </code></pre>
1.117 </div>
1.118
1.119
1.120 @@ -308,11 +318,11 @@
1.121
1.122 A <a element>clipPath</a> element can contain <a element>path</a> elements, <a element>text</a> elements, <a>basic shapes</a> (such as <a element>circle</a>) or a <a element>use</a> element. If a <a element>use</a> element is a child of a <a element>clipPath</a> element, it must directly reference <a element>path</a>, <a element>text</a> or <a>basic shapes</a> elements. Indirect references are an error and the <a element>clipPath</a> element must be ignored.
1.123
1.124 -Issue: Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference: <a href="https://github.com/w3c/fxtf-drafts/issues/17">https://github.com/w3c/fxtf-drafts/issues/17</a>
1.125 +Issue(17): Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference.
1.126
1.127 The raw geometry of each child element exclusive of rendering properties such as 'fill', 'stroke', 'stroke-width' within a <a element>clipPath</a> conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by 'display' or 'visibility' it does not contribute to the clipping path. When the <a element>clipPath</a> element contains multiple child elements, the silhouettes of the child elements are logically OR'd together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the <a element>clipPath</a>.
1.128
1.129 -Issue: Define raw geometry with regards to CSS properties that affect it. Especially on text. <a href="https://github.com/w3c/fxtf-drafts/issues/170">https://github.com/w3c/fxtf-drafts/issues/170</a>
1.130 +Issue(170): Define raw geometry with regards to CSS properties that affect it. Especially on text.
1.131
1.132 For a given <a>graphics element</a>, the actual clipping path used will be the intersection of the clipping path specified by its 'clip-path' property (if any) with any clipping paths on its ancestors, as specified by the 'clip-path' property on the elements which establish a new viewport. (See [[!SVG11]])
1.133
1.134 @@ -360,28 +370,32 @@
1.135 <p><img src="images/cliprule-evenodd.svg" alt="Shape with even-odd rule." style="border: solid black 1px;">
1.136 </div>
1.137
1.138 + Issue: Add figure description.
1.139 +
1.140 </div>
1.141
1.142 <div class=example>
1.143 -<p>The following fragment of code will cause an even-odd clipping rule to be applied to the clipping path because 'clip-rule' is specified on the <a element>path</a> element that defines the clipping shape:</p>
1.144 + The following fragment of code will cause an even-odd clipping rule to be applied to the clipping path because 'clip-rule' is specified on the <a element>path</a> element that defines the clipping shape:
1.145
1.146 -<pre><code class=html>
1.147 -<g clip-rule="nonzero">
1.148 - <clipPath id="MyClip">
1.149 - <path d="..." clip-rule="evenodd" />
1.150 - </clipPath>
1.151 - <rect clip-path="url(#MyClip)" ... />
1.152 -</g></code></pre>
1.153 + <pre><code highlight=svg>
1.154 + <g clip-rule="nonzero">
1.155 + <clipPath id="MyClip">
1.156 + <path d="..." clip-rule="evenodd" />
1.157 + </clipPath>
1.158 + <rect clip-path="url(#MyClip)" ... />
1.159 + </g>
1.160 + </code></pre>
1.161
1.162 -<p>whereas the following fragment of code will <em>not</em> cause an evenodd clipping rule to be applied because the 'clip-rule' is specified on the referencing element, not on the object defining the clipping shape:</p>
1.163 + whereas the following fragment of code will <em>not</em> cause an evenodd clipping rule to be applied because the 'clip-rule' is specified on the referencing element, not on the object defining the clipping shape:
1.164
1.165 -<pre><code class=html>
1.166 -<g clip-rule="nonzero">
1.167 - <clipPath id="MyClip">
1.168 - <path d="..." />
1.169 - </clipPath>
1.170 - <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
1.171 -</g></code></pre>
1.172 + <pre><code highlight=svg>
1.173 + <g clip-rule="nonzero">
1.174 + <clipPath id="MyClip">
1.175 + <path d="..." />
1.176 + </clipPath>
1.177 + <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
1.178 + </g>
1.179 + </code></pre>
1.180 </div>
1.181
1.182 # Positioned Masks # {#positioned-masks}
1.183 @@ -427,10 +441,12 @@
1.184
1.185 <div class="example">
1.186 Examples for mask references:
1.187 - <pre><code class=css>
1.188 -body { mask-image: linear-gradient(black 0%, transparent 100%) }
1.189 -p { mask-image: none }
1.190 -div { mask-image: url(resources.svg#mask2) }</code></pre>
1.191 +
1.192 + <pre><code highlight=css>
1.193 + body { mask-image: linear-gradient(black 0%, transparent 100%) }
1.194 + p { mask-image: none }
1.195 + div { mask-image: url(resources.svg#mask2) }
1.196 + </code></pre>
1.197 </div>
1.198
1.199 See the section <a href="#layering">“Layering multiple mask layer imagesâ€</a> for how 'mask-image' interacts with other comma-separated mask properties to form each mask layer.
1.200 @@ -474,23 +490,24 @@
1.201
1.202 The 'mask-mode' property must not affect the masking mode of 'mask-border-source'.
1.203
1.204 - <pre><code class=html>
1.205 -<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
1.206 - <radialGradient id="radialFill">
1.207 - <stop stop-color="white" offset="0"/>
1.208 - <stop stop-color="black" offset="1"/>
1.209 - </radialGradient>
1.210 - <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
1.211 -</mask>
1.212 + <pre><code highlight=svg>
1.213 + <mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
1.214 + <radialGradient id="radialFill">
1.215 + <stop stop-color="white" offset="0"/>
1.216 + <stop stop-color="black" offset="1"/>
1.217 + </radialGradient>
1.218 + <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
1.219 + </mask>
1.220
1.221 -<style>
1.222 - rect {
1.223 - mask-image: url(#SVGMask);
1.224 - mask-mode: luminance;
1.225 - }
1.226 -</style>
1.227 + <style>
1.228 + rect {
1.229 + mask-image: url(#SVGMask);
1.230 + mask-mode: luminance;
1.231 + }
1.232 + </style>
1.233
1.234 -<rect width="200" height="200" fill="green"/></code></pre>
1.235 + <rect width="200" height="200" fill="green"/>
1.236 + </code></pre>
1.237 </div>
1.238
1.239 See the section <a href="#layering">“Layering multiple mask layer imagesâ€</a> for how 'mask-mode' interacts with other comma-separated mask properties to form each mask layer.
1.240 @@ -517,19 +534,18 @@
1.241 Note: The initial value of 'mask-repeat' is different from the initial value of 'background-repeat'.
1.242
1.243 <div class=example>
1.244 - <pre><code class=css>
1.245 -body {
1.246 - background-color: blue;
1.247 - mask-image: url(dot-mask.png) luminance;
1.248 - mask-repeat: space;
1.249 -}</code></pre>
1.250 + <pre><code highlight=css>
1.251 + body {
1.252 + background-color: blue;
1.253 + mask-image: url(dot-mask.png) luminance;
1.254 + mask-repeat: space;
1.255 + }
1.256 + </code></pre>
1.257
1.258 <div class=figure>
1.259 - <p><img src="images/mask-repeat.svg" alt="Image of an element with a dotted mask." width="240" style="border: solid black 1px;">
1.260 + <p><img src="images/mask-repeat.svg" alt="Image of an element with a dotted mask." width="240" style="border: solid black 1px;">
1.261
1.262 - <p class=caption>The effect of ''space'': the <a>mask layer image</a> of a dot is
1.263 - tiled to cover the whole <a>mask painting area</a> and the
1.264 - <a>mask layer image</a>s are equally spaced.
1.265 + <p class=caption>The effect of ''space'': the <a>mask layer image</a> of a dot is tiled to cover the whole <a>mask painting area</a> and th <a>mask layer image</a>s are equally spaced.</p>
1.266 </div>
1.267 </div>
1.268
1.269 @@ -557,18 +573,19 @@
1.270 <div class="example">
1.271 In the example below, the (single) image is placed in the lower-right corner of the viewport.
1.272
1.273 - <pre><code class=css>
1.274 -body {
1.275 - mask-image: url("logo.png");
1.276 - mask-position: 100% 100%;
1.277 - mask-repeat: no-repeat;
1.278 -}</code></pre>
1.279 + <pre><code highlight=css>
1.280 + body {
1.281 + mask-image: url("logo.png");
1.282 + mask-position: 100% 100%;
1.283 + mask-repeat: no-repeat;
1.284 + }
1.285 + </code></pre>
1.286 </div>
1.287
1.288 <div class=example>
1.289 Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:</p>
1.290
1.291 - <pre><code class=css>mask-position: right 3em bottom 10px</code></pre>
1.292 + <pre><code highlight=css>mask-position: right 3em bottom 10px</code></pre>
1.293 </div>
1.294
1.295 See the section <a href="#layering">“Layering multiple mask layer imagesâ€</a> for how 'mask-position' interacts with other comma-separated mask properties to form each mask layer.
1.296 @@ -730,97 +747,82 @@
1.297 All mask layers below the current mask layer must be composited before applying the compositing operation for the current mask layer.
1.298
1.299 <div class=example>
1.300 -<p>This example uses two <a>mask layer images</a>: <var>circle.svg</var> and <var>rect.svg</var>.</p>
1.301 + This example uses two <a>mask layer images</a>: <var>circle.svg</var> and <var>rect.svg</var>.
1.302
1.303 -<div class=figure>
1.304 - <img src="images/mask-source-destination.svg" width="440" height="240" alt="Example of source-over compositing of mask layers">
1.305 -</div>
1.306 + <div class=figure>
1.307 + <img src="images/mask-source-destination.svg" width="440" height="240" alt="Example of source-over compositing of mask layers">
1.308 + </div>
1.309
1.310 -<p>Both <a>mask layer images</a> are references with the 'mask-image' property:</p>
1.311 + Both <a>mask layer images</a> are references with the 'mask-image' property:
1.312
1.313 -<pre><code class=css>
1.314 -mask-image: circle.svg, rect.svg;
1.315 -</code></pre>
1.316 + <pre><code highlight=css>
1.317 + mask-image: circle.svg, rect.svg;
1.318 + </code></pre>
1.319
1.320 -<p>The mask layer with <var>rect.svg</var> is below the mask layer with <var>circle.svg</var>. That means <var>circle.svg</var> is closer to the user than <var>rect.svg</var>.</p>
1.321 + The mask layer with <var>rect.svg</var> is below the mask layer with <var>circle.svg</var>. That means <var>circle.svg</var> is closer to the user than <var>rect.svg</var>.
1.322
1.323 -<p>With the property 'mask-composite' the author may choose different ways to combine multiple mask layers.</p>
1.324 + With the property 'mask-composite' the author may choose different ways to combine multiple mask layers.
1.325
1.326 -<ul>
1.327 -<li>
1.328 -<p>''mask-composite/add'' paints the <var>circle.svg</var> on top of <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover'>source over</a>.</p>
1.329 + * ''mask-composite/add'' paints the <var>circle.svg</var> on top of <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover'>source over</a>.</p>
1.330 + <pre><code highlight=css>
1.331 + mask-composite: add;
1.332 + </code></pre>
1.333
1.334 -<pre><code class=css>
1.335 -mask-composite: add;
1.336 -</code></pre>
1.337 + <div class=figure>
1.338 + <img src="images/mask-composite-add.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.339 + </div>
1.340 + * ''mask-composite/subtract'' paints portions of <var>circle.svg</var> that do not overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout'>source out</a>.</p>
1.341 + <pre><code highlight=css>
1.342 + mask-composite: subtract;
1.343 + </code></pre>
1.344
1.345 -<div class=figure>
1.346 - <img src="images/mask-composite-add.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.347 -</div>
1.348 -</li>
1.349 -<li>
1.350 -<p>''mask-composite/subtract'' paints portions of <var>circle.svg</var> that do not overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout'>source out</a>.</p>
1.351 + <div class=figure>
1.352 + <img src="images/mask-composite-subtract.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.353 + </div>
1.354 + * ''mask-composite/intersect'' paints portions of <var>circle.svg</var> that overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin'>source in</a>.</p>
1.355 + <pre><code highlight=css>
1.356 + mask-composite: intersect;
1.357 + </code></pre>
1.358
1.359 -<pre><code class=css>
1.360 -mask-composite: subtract;
1.361 -</code></pre>
1.362 + <div class=figure>
1.363 + <img src="images/mask-composite-intersect.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.364 + </div>
1.365 + * ''mask-composite/exclude'' paints portions of <var>circle.svg</var> and <var>rect.svg</var> that do not overlap. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor'>XOR</a>.</p>
1.366 + <pre><code highlight=css>
1.367 + mask-composite: exclude;
1.368 + </code></pre>
1.369
1.370 -<div class=figure>
1.371 - <img src="images/mask-composite-subtract.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.372 -</div>
1.373 -</li>
1.374 -<li>
1.375 -<p>''mask-composite/intersect'' paints portions of <var>circle.svg</var> that overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin'>source in</a>.</p>
1.376 -
1.377 -<pre><code class=css>
1.378 -mask-composite: intersect;
1.379 -</code></pre>
1.380 -
1.381 -<div class=figure>
1.382 - <img src="images/mask-composite-intersect.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.383 -</div>
1.384 -</li>
1.385 -<li>
1.386 -<p>''mask-composite/exclude'' paints portions of <var>circle.svg</var> and <var>rect.svg</var> that do not overlap. The behavior is described by the compositing operator <a href='https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor'>XOR</a>.</p>
1.387 -
1.388 -<pre><code class=css>
1.389 -mask-composite: exclude;
1.390 -</code></pre>
1.391 -
1.392 -<div class=figure>
1.393 - <img src="images/mask-composite-exclude.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.394 -</div>
1.395 -</li>
1.396 -</ul>
1.397 + <div class=figure>
1.398 + <img src="images/mask-composite-exclude.svg" width="220" height="220" alt="Example of source-over compositing of mask layers">
1.399 + </div>
1.400 </div>
1.401
1.402 <div class=example>
1.403 -<p>The following example specifies two mask layers and two compositing operators.</p>
1.404 + The following example specifies two mask layers and two compositing operators.
1.405
1.406 -<pre><code class=css>
1.407 -mask-image: rect.svg, circle.svg;
1.408 -mask-composite: add, exclude;
1.409 -</code></pre>
1.410 + <pre><code highlight=css>
1.411 + mask-image: rect.svg, circle.svg;
1.412 + mask-composite: add, exclude;
1.413 + </code></pre>
1.414
1.415 -<var>rect.svg</var> and <var>circle.svg</var> make use of the ''mask-composite/add'' compositing operator. There is no further mask layer to use ''mask-composite/exclude'' and therefore, ''mask-composite/exclude'' is ignored.
1.416 + <var>rect.svg</var> and <var>circle.svg</var> make use of the ''mask-composite/add'' compositing operator. There is no further mask layer to use ''mask-composite/exclude'' and therefore, ''mask-composite/exclude'' is ignored.
1.417 </div>
1.418
1.419 <div class=example>
1.420 -<p>This is an example of 3 mask layers with different compositing operators.</p>
1.421 + This is an example of 3 mask layers with different compositing operators.
1.422
1.423 -<pre><code class=css>
1.424 -mask-image: trapeze.svg, circle.svg, rect.svg;
1.425 -mask-composite: subtract, add;
1.426 -</code></pre>
1.427 + <pre><code highlight=css>
1.428 + mask-image: trapeze.svg, circle.svg, rect.svg;
1.429 + mask-composite: subtract, add;
1.430 + </code></pre>
1.431
1.432 -<p>First, <var>circle.svg</var> is “added†to <var>rect.svg</var>. In a second step, <var>trapeze.svg</var> is “subtracted†from the previous two layers.</p>
1.433 + First, <var>circle.svg</var> is “added†to <var>rect.svg</var>. In a second step, <var>trapeze.svg</var> is “subtracted†from the previous two layers.
1.434
1.435 -<div class=figure>
1.436 - <img src="images/mask-composite-subtract-add.svg" width="440" height="240" alt="Example of source-over compositing of mask layers">
1.437 -</div>
1.438 + <div class=figure>
1.439 + <img src="images/mask-composite-subtract-add.svg" width="440" height="240" alt="Example of source-over compositing of mask layers">
1.440 + </div>
1.441
1.442 -Issue: The figure shows an intersection and not a subtraction. <a href="https://github.com/w3c/fxtf-drafts/issues/84">https://github.com/w3c/fxtf-drafts/issues/84</a>
1.443 -
1.444 + Issue(84): The figure shows an intersection and not a subtraction.
1.445 </div>
1.446
1.447 See the section <a href="#layering">“Layering multiple mask layer imagesâ€</a> for how 'mask-composite' interacts with other comma-separated mask properties to form each mask layer.
1.448 @@ -910,21 +912,21 @@
1.449 These pieces may be sliced, scaled and stretched in various ways to fit the size of the <a>mask border image area</a>. This distorted image is then used as a mask. The syntax of 'mask-border' corresponds to the 'border-image' property of CSS Background and Borders [[!CSS3BG]].
1.450
1.451 <div class=example>
1.452 -<p>The <a>mask border image</a> in the following example is split into four corners with
1.453 -dimensions of 75 pixels, four edges and the middle piece that is stretched
1.454 -and scaled.</p>
1.455 + The <a>mask border image</a> in the following example is split into four corners with dimensions of 75 pixels, four edges and the middle piece that is stretched and scaled.
1.456
1.457 -<div class=figure>
1.458 - <img src="images/mask-box-image.svg" alt="Example for 'mask-border'" width="720" height="240">
1.459 - <p class=caption>Example for 'mask-border'. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.</p>
1.460 -</div>
1.461 + <div class=figure>
1.462 + <img src="images/mask-box-image.svg" alt="Example for 'mask-border'" width="720" height="240">
1.463 + <p class=caption>Example for 'mask-border'. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.</p>
1.464 + </div>
1.465
1.466 -<pre><code class=css>div {
1.467 - background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
1.468 - mask-border-slice: 25 fill;
1.469 - mask-border-repeat: stretch;
1.470 - mask-border-source: url(mask.png);
1.471 -}</code></pre>
1.472 + <pre><code highlight=css>
1.473 + div {
1.474 + background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
1.475 + mask-border-slice: 25 fill;
1.476 + mask-border-repeat: stretch;
1.477 + mask-border-source: url(mask.png);
1.478 + }
1.479 + </code></pre>
1.480 </div>
1.481
1.482
1.483 @@ -1208,33 +1210,33 @@
1.484 The 'mask-type' property allows the author of the <a element>mask</a> element to specify the preferred masking mode. However, the author can override this preference by setting the 'mask-mode' value to something different than ''mask-mode/match-source'' on the masked content.
1.485
1.486 <div class=example>
1.487 -<p>In the following example the computed value of 'mask-type' is ''mask-type/luminance'' and the computed value of 'mask-mode' is ''mask-mode/match-source''. The UA must follow the preferred masking mode defined on the <a element>mask</a> element.
1.488 + In the following example the computed value of 'mask-type' is ''mask-type/luminance'' and the computed value of 'mask-mode' is ''mask-mode/match-source''. The UA must follow the preferred masking mode defined on the <a element>mask</a> element.
1.489
1.490 -<pre><code class=html>
1.491 -<svg>
1.492 - <mask style="mask-type: luminance;" id="mask">
1.493 - ...
1.494 - </mask>
1.495 -</svg>
1.496 + <pre><code highlight=svg>
1.497 + <svg>
1.498 + <mask style="mask-type: luminance;" id="mask">
1.499 + ...
1.500 + </mask>
1.501 + </svg>
1.502
1.503 -<p style="mask-image: url(#mask); mask-mode: auto;">
1.504 - This is the masked content.
1.505 -</p>
1.506 -</code></pre>
1.507 + <p style="mask-image: url(#mask); mask-mode: auto;">
1.508 + This is the masked content.
1.509 + </p>
1.510 + </code></pre>
1.511
1.512 -<p>In the next example the computed value of 'mask-mode' is ''mask-mode/alpha'' and overrides the preference on the <a element>mask</a> element that is computed to ''mask-type/luminance''. The <a>mask layer image</a> is used as an alpha mask.</p>
1.513 + In the next example the computed value of 'mask-mode' is ''mask-mode/alpha'' and overrides the preference on the <a element>mask</a> element that is computed to ''mask-type/luminance''. The <a>mask layer image</a> is used as an alpha mask.</p>
1.514
1.515 -<pre><code class=html>
1.516 -<svg>
1.517 - <mask style="mask-type: luminance;" id="mask2">
1.518 - ...
1.519 - </mask>
1.520 -</svg>
1.521 + <pre><code highlight=html>
1.522 + lt;svg>
1.523 + <mask style="mask-type: luminance;" id="mask2">
1.524 + ...
1.525 + </mask>
1.526 + lt;/svg>
1.527
1.528 -<p style="mask-image: url(#mask2); mask-mode: alpha;">
1.529 - This is the masked content.
1.530 -</p>
1.531 -</code></pre>
1.532 + lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
1.533 + This is the masked content.
1.534 + lt;/p>
1.535 + </code></pre>
1.536 </div>
1.537
1.538 The 'mask-type' property is a presentation attribute for SVG elements.
1.539 @@ -1284,9 +1286,10 @@
1.540 <div class="example">
1.541 Example: The following two rules:
1.542
1.543 - <pre><code class=css>
1.544 -p#one { clip: rect(5px, 40px, 45px, 5px); }
1.545 -p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
1.546 + <pre><code highlight=css>
1.547 + p#one { clip: rect(5px, 40px, 45px, 5px); }
1.548 + p#two { clip: rect(5px, 55px, 45px, 5px); }
1.549 + </code></pre>
1.550
1.551 and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations:
1.552
