masking/index.html@59236286d848
masking/index.html
Sun, 10 Mar 2013 19:35:27 -0700
- author
- Dirk Schulze <dschulze@adobe.com>
- date
- Sun, 10 Mar 2013 19:35:27 -0700
- changeset 734
- 59236286d848
- parent 731
- fd09b94a3a4d
- child 741
- cd0593275768
- permissions
- -rw-r--r--
Incorporate feedback from Liam R E Quin.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html lang=en>
5 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
6 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
7 <title>CSS Masking</title>
9 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
10 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
11 rel=dcterms.rights>
12 <meta content="CSS Masking" name=dcterms.title>
13 <meta content=text name=dcterms.type>
14 <meta content=2013-03-11 name=dcterms.issued>
15 <meta
16 content="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html"
17 name=dcterms.creator>
18 <meta content=W3C name=dcterms.publisher>
19 <meta content="http://dev.w3.org/csswg/css-masking/"
20 name=dcterms.identifier>
21 <link href="#contents" rel=contents>
22 <link href="#index" rel=index>
23 <link href=default.css rel=stylesheet type="text/css">
24 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
25 type="text/css">
26 <script defer=defer
27 src="http://test.csswg.org/harness/annotate.js#CSS-MASKING_DEV"
28 type="text/javascript"></script>
30 <body>
31 <div class=head> <!--begin-logo-->
32 <p><a href="http://www.w3.org/"><img alt=W3C height=48
33 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
35 <h1>CSS Masking</h1>
37 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 March 2013</h2>
39 <dl>
40 <dt>This version:
42 <dd><a
43 href="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html">http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html</a>
44 <!--http://www.w3.org/TR/2013/WD-css-masking-20130311/-->
46 <dt>Latest version:
48 <dd><a
49 href="http://www.w3.org/TR/css-masking/">http://www.w3.org/TR/css-masking/</a>
51 <dt>Editor's draft:
53 <dd><a
54 href="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html">http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html</a>
56 <dt>Editors:
58 <dd class=vcard> <span class=fn>Dirk Schulze</span>, <span
59 class=org>Adobe Systems</span>, <span
60 class=email>dschulze@adobe.com</span>
62 <dd class=vcard> <span class=fn>Brian Birtles</span>, <span
63 class=org>Mozilla Japan</span>, <span
64 class=email>bbirtles@mozilla.com</span>
66 <dd class=vcard> <span class=fn><a
67 href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a></span>, <span
68 class=org>Google, Inc.</span>
69 </dl>
70 <!--begin-copyright-->
71 <p class=copyright><a
72 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
73 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
74 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
75 href="http://www.csail.mit.edu/"><abbr
76 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
77 href="http://www.ercim.eu/"><abbr
78 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
79 <a href="http://www.keio.ac.jp/">Keio</a>, <a
80 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
81 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
82 <a
83 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
84 and <a
85 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
86 use</a> rules apply.</p>
87 <!--end-copyright-->
88 <hr title="Separator for header">
89 </div>
91 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
93 <p> CSS Masking provides two means for partially or fully hiding portions
94 of visual elements: masking and clipping.
96 <p> Masking describes how to use another graphical element or image as a
97 luminance or alpha mask. Typically, rendering an element via CSS or SVG
98 can conceptually described as if the element, including its children, are
99 drawn into a buffer and then that buffer is composited into the element's
100 parent. Luminance and alpha masks influence the transparency of this
101 buffer before the compositing stage.
103 <p> Clipping describes the visible region of visual elements. The region
104 can be described by using certain SVG graphics elements or basic shapes.
105 Anything outside of this region is not rendered.
107 <h2 class="no-num no-toc" id=status>Status of this document</h2>
108 <!--begin-status-->
110 <p>This is a public copy of the editors' draft. It is provided for
111 discussion only and may change at any moment. Its publication here does
112 not imply endorsement of its contents by W3C. Don't cite this document
113 other than as work in progress.
115 <p>The (<a
116 href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>) public
117 mailing list <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (see
118 <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
119 for discussion of this specification. When sending e-mail, please put the
120 text “css-masking” in the subject, preferably like this:
121 “[<!---->css-masking<!---->] <em>…summary of comment…</em>”
123 <p>This document was produced by the <a
124 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
125 the <a href="http://www.w3.org/Style/">Style Activity</a>) and the <a
126 href="http://www.w3.org/Graphics/SVG/">SVG Working Group</a> (part of the
127 <a href="http://www.w3.org/Graphics/">Graphics Activity</a>).
129 <p>This document was produced by groups operating under the <a
130 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
131 2004 W3C Patent Policy</a>. W3C maintains a <a
132 href="http://www.w3.org/2004/01/pp-impl/32061/status"
133 rel=disclosure>public list of any patent disclosures (CSS)</a> and a <a
134 href="http://www.w3.org/2004/01/pp-impl/19480/status"
135 rel=disclosure>public list of any patent disclosures (SVG)</a> made in
136 connection with the deliverables of each group; these pages also include
137 instructions for disclosing a patent. An individual who has actual
138 knowledge of a patent which the individual believes contains <a
139 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
140 Claim(s)</a> must disclose the information in accordance with <a
141 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
142 6 of the W3C Patent Policy</a>.</p>
143 <!--end-status-->
145 <h2 class="no-num no-toc" id=contents> Table of contents</h2>
146 <!--begin-toc-->
148 <ul class=toc>
149 <li><a href="#intro"><span class=secno>1. </span> Introduction </a>
151 <li><a href="#placement"><span class=secno>2. </span>Module
152 interactions</a>
154 <li><a href="#values"><span class=secno>3. </span>Values</a>
156 <li><a href="#definitions"><span class=secno>4. </span>Definitions</a>
158 <li><a href="#the-mask-rendering-model"><span class=secno>5. </span>The
159 Mask Rendering Model</a>
160 <ul class=toc>
161 <li><a href="#layering"><span class=secno>5.1. </span>Layering Multiple
162 Mask Images</a>
164 <li><a href="#MaskValues"><span class=secno>5.2. </span>Calculating mask
165 values</a>
166 </ul>
168 <li><a href="#masking"><span class=secno>6. </span>Mask</a>
169 <ul class=toc>
170 <li><a href="#the-mask-image"><span class=secno>6.1. </span>The ‘<code
171 class=property>mask-image</code>’ property</a>
173 <li><a href="#the-mask-source-type"><span class=secno>6.2. </span>The
174 ‘<code class=property>mask-source-type</code>’ property</a>
176 <li><a href="#the-mask-repeat"><span class=secno>6.3. </span>The
177 ‘<code class=property>mask-repeat</code>’ property</a>
179 <li><a href="#the-mask-position"><span class=secno>6.4. </span>The
180 ‘<code class=property>mask-position</code>’ property</a>
182 <li><a href="#the-mask-clip"><span class=secno>6.5. </span>The ‘<code
183 class=property>mask-clip</code>’ property</a>
185 <li><a href="#the-mask-origin"><span class=secno>6.6. </span>The
186 ‘<code class=property>mask-origin</code>’ property</a>
188 <li><a href="#the-mask-size"><span class=secno>6.7. </span>The ‘<code
189 class=property>mask-size</code>’ property</a>
191 <li><a href="#mask-property"><span class=secno>6.8. </span>The ‘<code
192 class=property>mask</code>’ property</a>
194 <li><a href="#the-mask-type"><span class=secno>6.9. </span>The ‘<code
195 class=property>mask-type</code>’ property</a>
197 <li><a href="#MaskElement"><span class=secno>6.10. </span>The <span
198 class=element-name>‘<code class=property>mask</code>’</span>
199 element</a>
200 </ul>
202 <li><a href="#mask-box-image"><span class=secno>7. </span>Mask Box
203 Image</a>
204 <ul class=toc>
205 <li><a href="#the-mask-box-image-source"><span class=secno>7.1.
206 </span>The ‘<code class=property>mask-box-image-source</code>’
207 property</a>
209 <li><a href="#the-mask-box-image-slice"><span class=secno>7.2.
210 </span>The ‘<code class=property>mask-box-image-slice</code>’
211 property</a>
213 <li><a href="#the-mask-box-image-width"><span class=secno>7.3.
214 </span>The ‘<code class=property>mask-box-image-width</code>’
215 property</a>
217 <li><a href="#the-mask-box-image-outset"><span class=secno>7.4.
218 </span>The ‘<code class=property>mask-box-image-outset</code>’
219 property</a>
221 <li><a href="#the-mask-box-image-repeat"><span class=secno>7.5.
222 </span>The ‘<code class=property>mask-box-image-repeat</code>’
223 property</a>
225 <li><a href="#the-mask-box-image"><span class=secno>7.6. </span>The
226 ‘<code class=property>mask-box-image</code>’ property</a>
228 <li><a href="#masking-with-the-mask-box-image"><span class=secno>7.7.
229 </span>Masking with the mask-box-image</a>
230 </ul>
232 <li><a href="#clipping-paths"><span class=secno>8. </span>Clipping
233 paths</a>
234 <ul class=toc>
235 <li><a href="#the-clip-path"><span class=secno>8.1. </span>The ‘<code
236 class=property>clip-path</code>’ property</a>
238 <li><a href="#the-clip-rule"><span class=secno>8.2. </span>The ‘<code
239 class=property>clip-rule</code>’ property</a>
241 <li><a href="#clip-property"><span class=secno>8.3. </span>The ‘<code
242 class=property>clip</code>’ property</a>
244 <li><a href="#ClipPathElement"><span class=secno>8.4. </span>The
245 ‘<code class=property>clipPath</code>’ element</a>
247 <li><a href="#clipPath-geometry"><span class=secno>8.5. </span>Clipping
248 paths, geometry, and pointer events</a>
249 </ul>
251 <li><a href="#security"><span class=secno>9. </span>Security</a>
252 <ul class=toc>
253 <li><a href="#origin-restrictions"><span class=secno>9.1. </span>Origin
254 Restrictions</a>
255 </ul>
257 <li><a href="#DOMInterfaces"><span class=secno>10. </span>DOM
258 interfaces</a>
259 <ul class=toc>
260 <li><a href="#InterfaceSVGClipPathElement"><span class=secno>10.1.
261 </span>Interface SVGClipPathElement</a>
263 <li><a href="#InterfaceSVGMaskElement"><span class=secno>10.2.
264 </span>Interface SVGMaskElement</a>
265 </ul>
267 <li><a href="#conformance"><span class=secno>11. </span> Conformance</a>
268 <ul class=toc>
269 <li><a href="#conventions"><span class=secno>11.1. </span> Document
270 conventions</a>
272 <li><a href="#conformance-classes"><span class=secno>11.2. </span>
273 Conformance classes</a>
275 <li><a href="#partial"><span class=secno>11.3. </span> Partial
276 implementations</a>
278 <li><a href="#experimental"><span class=secno>11.4. </span> Experimental
279 implementations</a>
281 <li><a href="#testing"><span class=secno>11.5. </span> Non-experimental
282 implementations</a>
283 </ul>
285 <li class=no-num><a href="#references"> References</a>
286 <ul class=toc>
287 <li class=no-num><a href="#normative-references"> Normative
288 references</a>
290 <li class=no-num><a href="#other-references"> Other references</a>
291 </ul>
293 <li class=no-num><a href="#index"> Index</a>
295 <li class=no-num><a href="#property-index"> Property index</a>
296 </ul>
297 <!--end-toc-->
299 <h2 id=intro><span class=secno>1. </span> Introduction</h2>
301 <p> With CSS Masking it is possible to specify another graphics element,
302 shape or file to be used as clipping region or an luminance or alpha mask
303 for compositing the current object into the background.
305 <p> A mask is applied using the ‘<a href="#mask"><code
306 class=property>mask</code></a>’, ‘<a href="#mask-image"><code
307 class=property>mask-image</code></a>’ or ‘<a
308 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
309 properties. The mask source may be defined using a <a class=element-name
310 href="#MaskElement">‘<code class=property>mask</code>’</a> element
311 referenced by the ‘<a href="#mask"><code
312 class=property>mask</code></a>’ property. Alternatively, for many simple
313 uses, the ‘<a href="#mask-image"><code
314 class=property>mask-image</code></a>’ property may refer directly to
315 graphical elements or images to be used as mask forgoing the need for an
316 explicit <a class=element-name href="#MaskElement">‘<code
317 class=property>mask</code>’</a> element. The ‘<a href="#mask"><code
318 class=property>mask</code></a>’ property is also a shorthand for other
319 masking properties. ‘<a href="#mask-box-image0"><code
320 class=property>mask-box-image</code></a>’ splits a mask image into 9
321 pieces. The pieces may be sliced, scaled and stretched in various ways to
322 fit the size of the mask image area.
324 <p> The effect of applying a mask is as if the mask images or mask source
325 elements are rendered into an off-screen image which has been initialized
326 to transparent black. The graphical object to which the mask is applied
327 will be painted onto the background through the mask, thus completely or
328 partially masking out parts of the graphical object.
330 <p> Clipping defines a visible region of a visual element. The region can
331 be specified with SVG <a
332 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
333 element</a> or basic shapes. Everything outside of a region does not get
334 rendered.
336 <div class=example>
337 <div class=figure> <img alt="Example Mask" height=260px
338 src="images/luminance-mask.svg" width=655px>
339 <p class=caption> A luminance mask (middle) is applied on a shape filled
340 with a gradient (left). This results in a masked shape (right).
341 </div>
342 </div>
344 <h2 id=placement><span class=secno>2. </span>Module interactions</h2>
346 <p>This specification defines a set of CSS properties that affect the
347 visual rendering of elements to which those properties are applied; these
348 effects are applied after elements have been sized and positioned
349 according to the <a href="http://www.w3.org/TR/CSS2/visuren.html"
350 title="Visual formatting model">Visual formatting model</a> from <a
351 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of
352 these properties result in the creation of a <a
353 href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"
354 title="Visual formatting model">containing block</a>, and/or the creation
355 of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
356 title="Visual formatting model">stacking context</a>.
358 <p> Definitions of CSS properties and values in this specification comply
359 with defintions in CSS Backgrounds and Borders <a href="#CSS3BG"
360 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
361 specification relies on descriptions and definitions of CSS Backgrounds
362 and Borders. Every reference will be marked clearly. The following terms
363 in CSS Backgrounds and Borders have the following meaning in this
364 specification:
366 <table class=data id=term-matching>
367 <thead>
368 <tr>
369 <th>Term in <a href="#CSS3BG"
370 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
372 <th>Term in CSS Masking
374 <tbody>
375 <tr>
376 <th>background images
378 <td>mask images
380 <tr>
381 <th>background painting area
383 <td>mask painting area
385 <tr>
386 <th>background-size
388 <td>mask-size
390 <tr>
391 <th>background-position
393 <td>mask-position
395 <tr>
396 <th>background positioning area
398 <td>mask positioning area
400 <tr>
401 <th>border image area
403 <td>mask box image area
404 </table>
406 <p> Some property and element definitions in this specification require an
407 SVG 1.1 implementation <a href="#SVG11"
408 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
409 must not implement any of the following properties and elements: ‘<a
410 href="#mask-type"><code class=property>mask-type</code></a>’, ‘<a
411 href="#clip-rule"><code class=property>clip-rule</code></a>’, <a
412 class=element-name href="#ClipPathElement">‘<code
413 class=property>clipPath</code>’</a> element, <a class=element-name
414 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
415 For UAs without support for SVG, the ‘<a href="#mask"><code
416 class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
417 class=property>clip-path</code></a>’ properties must neither support
418 references to <a class=element-name href="#MaskElement">‘<code
419 class=property>mask</code>’</a> elements nor to <a class=element-name
420 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
421 elements.
423 <h2 id=values><span class=secno>3. </span>Values</h2>
425 <p> This specification follows the <a
426 href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
427 definition conventions</a> from <a href="#CSS21"
428 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
429 this specification are defined in CSS Values and Units Module Level 3 <a
430 href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
432 <p> In addition to the property-specific values listed in their
433 definitions, all properties defined in this specification also accept the
434 <a
435 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
436 keyword as their property value. For readability it has not been repeated
437 explicitly.
439 <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
441 <p> When used in this specification, terms have the meanings assigned in
442 this section.
444 <dl>
445 <dt id=TermClientBoundingRect><dfn id=bounding-client-rect>bounding client
446 rect</dfn>
448 <dd>
449 <p> The union of all border boxes for the element that has an associated
450 CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>
451 namespace and its descendant elements. Or the object bounding box <a
452 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>, if the
453 element does not have an associated CSS layout box and is in the
454 <code>http://www.w3.org/2000/svg</code> namespace (See <a
455 href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
456 <a href="#CSSOM-VIEW"
457 rel=biblioentry>[CSSOM-VIEW]<!--{{CSSOM-VIEW}}--></a>).
459 <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
460 coordinate system</dfn>
462 <dd>
463 <p> In general, a coordinate system defines locations and distances on
464 the current canvas. The current local coordinate system (also user
465 coordinate system) is the coordinate system that is currently active and
466 which is used to define how coordinates and lengths are located and
467 computed, respectively, on the current canvas <a href="#CSS3-TRANSFORMS"
468 rel=biblioentry>[CSS3-TRANSFORMS]<!--{{CSS3-TRANSFORMS}}--></a>.
470 <p> For elements that have an associated CSS layout box, the current user
471 coordinate system has its origin at the top-left corner of the <a
472 class=term href="#bounding-client-rect">bounding client rect</a> and one
473 unit equals one CSS pixel. The viewport for resolving percentage values
474 is defined by the width and height of the <a class=term
475 href="#bounding-client-rect">bounding client rect</a>.
477 <p> If the element does not have an associated CSS layout box and is in
478 the <code>http://www.w3.org/2000/svg</code> namespace, the current local
479 coordinate system has its origin at the top-left corner of the element's
480 nearest viewport.
482 <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
483 coordinate system</dfn>
485 <dd> The term <a href="#user-coordinate-system"><var>user coordinate
486 system</var></a> is equivalent to the term <a
487 href="#local-coordinate-system"><var>local coordinate system</var></a>.
489 <dt id=TermObjectBoundingBoxUnits><dfn id=object-bounding-box-units>object
490 bounding box units</dfn>
492 <dd> The <a class=term href="#bounding-client-rect">bounding client
493 rect</a> defines the coordinate system in which to resolve values, as
494 defined in <a
495 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#ObjectBoundingBoxUnits">object
496 bounding box units</a> <a href="#SVG11"
497 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>.
499 <dt id=TermMask><dfn id=mask0>mask</dfn>
501 <dd> An off-screen image which has been initialized to transparent black.
502 The graphical object to which the mask is applied will be painted onto
503 the background through the mask, thus completely or partially masking out
504 parts of the graphical object.
506 <dt id=TermMaskSource><dfn id=mask-source>mask source</dfn>
508 <dd> A mask defined by a <a class=element-name
509 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
511 <dt id=TermClippingPath>clipping path
513 <dd> A combination of the SVG elements <a class=element-name
514 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
515 class=property>path</code>’</a>, <a class=element-name
516 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
517 class=property>text</code>’</a> and <a
518 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
519 shapes</a> which serve as the outline of a (in the absence of
520 anti-aliasing) 1-bit <a href="#TermMask">mask</a>, where everything on
521 the "inside" of the outline is allowed to show through but everything on
522 the outside is masked out. See ‘<a href="#clip-path"><code
523 class=property>clip-path</code></a>’.
524 </dl>
526 <h2 id=the-mask-rendering-model><span class=secno>5. </span>The Mask
527 Rendering Model</h2>
529 <p> The application of the ‘<a href="#clip-path"><code
530 class=property>clip-path</code></a>’, ‘<a href="#mask"><code
531 class=property>mask</code></a>’ or ‘<a href="#mask-image"><code
532 class=property>mask-image</code></a>’ properties to an element formatted
533 with the CSS box model establishes a stacking context in the same way that
534 CSS ‘<code class=property>opacity</code>’ does, and all the element's
535 descendants are rendered together as a group with the masking applied to
536 the group as a whole.
538 <p> The ‘<a href="#mask"><code class=property>mask</code></a>’ and
539 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
540 properties have no effect on the geometry of any element's CSS boxes.
542 <p> The compositing model follows the SVG compositing model <a
543 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>: first any
544 filter effect is applied, then any clipping, masking and opacity. These
545 effects all apply after any other CSS effects such as ‘<code
546 class=property>border</code>’. As per SVG, the application of ‘<a
547 href="#mask"><code class=property>mask</code></a>’ or ‘<a
548 href="#mask-image"><code class=property>mask-image</code></a>’ has no
549 effect on hit-testing.
551 <h3 id=layering><span class=secno>5.1. </span>Layering Multiple Mask Images</h3>
553 <p>The mask of a box can have multiple <span class=index
554 id=layers>layers</span>. The number of layers is determined by the number
555 of comma-separated values in the ‘<a href="#mask-image"><code
556 class=property>mask-image</code></a>’ property. Note that a value of
557 ‘<a href="#none"><code class=property>none</code></a>’ still creates a
558 layer. See <a
559 href="http://www.w3.org/TR/css3-background/#layering">Layering Multiple
560 Background Images</a> <a href="#CSS3BG"
561 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
563 <p>The first layer is the layer closest to the user, the next one is
564 painted behind the first, and so on. All mask images are transformed to
565 alpha masks (if necessary) and combined by compositing on the <a
566 href="#TermMask">mask</a>.
568 <h3 id=MaskValues><span class=secno>5.2. </span>Calculating mask values</h3>
570 <p> A mask may be interpreted using one of two different methods with
571 regards to calculating the mask values that will be multiplied with the
572 target alpha values.
574 <p> The first and simplest method of calculating the mask values is to use
575 the alpha channel of the mask source. In this case the mask value at a
576 given point is simply the value of the alpha channel at that point. The
577 color channels do not contribute to the mask value.
579 <p> The second method of calculating the mask values is to use the
580 luminance of the mask source. In this case the mask value at a given point
581 is computed from the color channel values and alpha channel value using
582 the following procedure.
584 <ol>
585 <li>Compute a luminance value from the color channel values.
586 <ul>
587 <li> If the computed value of ‘<code
588 class=property>color-interpolation</code>’ on the <a
589 class=element-name href="#MaskElement">‘<code
590 class=property>mask</code>’</a> element is ‘<code
591 class=property>linearRGB</code>’, convert the original image color
592 values (potentially in the sRGB color space) to the linear RGB color
593 space.
595 <li>Then, using non-premultiplied RGB color values, apply the
596 luminance-to-alpha coefficients (as defined in the <a
597 class=element-name
598 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#feColorMatrixElement">‘<code
599 class=property>feColorMatrix</code>’</a> filter primitive <a
600 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>) to convert
601 the RGB color values to luminance values.
602 </ul>
604 <li>Multiply the computed luminance value by the corresponding alpha value
605 to produce the mask value.
606 </ol>
608 <p>Regardless of the method used, the procedure for calculating mask values
609 assumes the content of the mask is a four-channel RGBA graphics object.
610 For other types of graphics objects, special handling is required as
611 follows.
613 <p>For a three-channel RGB graphics object that is used in a mask (e.g.,
614 when referencing a three-channel image file), the effect is as if the
615 object were converted into a four-channel RGBA image with the alpha
616 channel uniformly set to 1.
618 <p>For a single-channel image that is used in a mask (e.g., when
619 referencing a single-channel grayscale image file), the effect is as if
620 the object were converted into a four-channel RGBA image, where the single
621 channel from the referenced object is used to compute the three color
622 channels and the alpha channel is uniformly set to 1.
624 <p class=note>Note that when referencing a grayscale image file, the
625 transfer curve relating the encoded grayscale values to linear light
626 values must be taken into account when computing the color channels.
628 <p class=note>Note that SVG <a
629 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
630 elements</a> (e.g., <a class=element-name
631 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
632 class=property>circle</code>’</a> or <a class=element-name
633 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
634 class=property>text</code>’</a>) are all treated as four-channel RGBA
635 images for the purposes of masking operations.
637 <p>The effect of a mask is identical to what would have happened if there
638 were no mask but instead the alpha channel of the given object were
639 multiplied with the mask's resulting mask values.
641 <h2 id=masking><span class=secno>6. </span>Mask</h2>
643 <h3 id=the-mask-image><span class=secno>6.1. </span>The ‘<a
644 href="#mask-image"><code class=property>mask-image</code></a>’ property</h3>
646 <table class=propdef>
647 <tbody>
648 <tr>
649 <th>Name:
651 <td><dfn id=mask-image>mask-image</dfn>
653 <tr>
654 <th><a href="#values">Value</a>:
656 <td><a href="#ltmask-referencegt"><var><mask-reference></var></a>
658 <tr>
659 <th>Initial:
661 <td>none
663 <tr>
664 <th>Applies to:
666 <td>All elements. In SVG, it applies to <a
667 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
668 elements</a> and <a
669 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
670 elements</a>
672 <tr>
673 <th>Inherited:
675 <td>no
677 <tr>
678 <th>Percentages:
680 <td>N/A
682 <tr>
683 <th>Media:
685 <td>visual
687 <tr>
688 <th>Computed value:
690 <td>as specified, but with URIs made absolute
692 <tr>
693 <th>Animatable:
695 <td>no
696 </table>
698 <p>This property sets the mask image(s) or the mask source of an element.
699 Images are drawn with the first specified one on top (closest to the user)
700 and each subsequent image behind the previous one. Where:
702 <pre class=prod><var><dfn
703 id=ltmask-referencegt><mask-reference></dfn></var> = <a
704 href="#ltmask-imagegt"><var><mask-image></var></a># | <a
705 href="#ltmask-elementgt"><var><mask-element></var></a></pre>
707 <pre class=prod><var><dfn
708 id=ltmask-imagegt><mask-image></dfn></var> = <a
709 href="#ltimagegt"><var><image></var></a> | none </pre>
711 <pre class=prod><var><dfn
712 id=ltmask-elementgt><mask-element></dfn></var> = <a
713 href="#lturlgt"><var><url></var></a> | <var>child</var> | <a
714 href="#ltchild-selectorgt"><var><child-selector></var></a></pre>
716 <pre class=prod><dfn
717 id=ltchild-selectorgt><child-selector></dfn> = select(<a
718 href="#ltcompound-selectorgt"><var><compound-selector></var></a>#)</pre>
720 <p class=note>A <a
721 href="#ltmask-elementgt"><var><mask-element></var></a> can just be
722 specified as a single value and can not contibute to a list of <a
723 href="#ltmask-referencegt"><var><mask-reference></var></a> values.
724 Otherwise the specified value of the property is invalid. (See examples
725 below.)
727 <dl>
728 <dt> <dfn id=lturlgt>‘<code class=css><url></code>’</dfn>
730 <dd> A URL reference to a <a class=element-name
731 href="#MaskElement">‘<code class=property>mask</code>’</a> element
732 (for example ‘<code class=css>url(commonmasks.svg#mask)</code>’) or
733 an <a href="#ltimagegt"><var><image></var></a>.
735 <dt>‘<code class=css>child</code>’
737 <dd> A keyword to indicate that the last direct sibling <a
738 class=element-name href="#MaskElement">‘<code
739 class=property>mask</code>’</a> element of the element the ‘<a
740 href="#mask-image"><code class=property>mask-image</code></a>’ property
741 is applied should be used as the mask source. It is equivalent to
742 ‘<code class=css>select(mask:last-of-type)</code>’.
744 <dt>‘<a href="#ltchild-selectorgt"><code
745 class=css><child-selector></code></a>’
747 <dd> A comma-separated list of <a
748 href="http://dev.w3.org/csswg/selectors4/#compound">compound
749 selector</a>s scoped at the element to which the ‘<a
750 href="#mask-image"><code class=property>mask-image</code></a>’ property
751 is applied. The first matching element in <a
752 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
753 order</a> (as defined in <a href="#DOM"
754 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
755 list of selectors is taken as the mask source. If there are no matching
756 elements the mask source is invalid.
758 <dt><dfn id=ltcompound-selectorgt>‘<code
759 class=css><compound-selector></code>’</dfn>
761 <dd> A <a href="http://dev.w3.org/csswg/selectors4/#compound">compound
762 selector</a> as defined in <a href="#SELECTORS4"
763 rel=biblioentry>[SELECTORS4]<!--{{!SELECTORS4}}--></a>.
765 <dd>
767 <dt><dfn id=ltimagegt><image></dfn>
769 <dd> A 2D image. (See <a href="#CSS3-IMAGES"
770 rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>.)
772 <dt><dfn id=none>‘<code class=css>none</code>’</dfn>
774 <dd> A value of ‘<a href="#none"><code class=css>none</code></a>’
775 counts as an image layer but does not mask the element.
776 </dl>
778 <p class=note>If the URI in the ‘<code class=css>url()</code>’ function
779 has a fragment identifier, the <a
780 href="#ltmask-referencegt"><var><mask-reference></var></a> is
781 treated as <a
782 href="#ltmask-elementgt"><var><mask-element></var></a>, otherwise as
783 <a href="#ltmask-imagegt"><var><mask-image></var></a>.
785 <p>An invalid or non-existent mask source is ignored and no masking is
786 applied.
788 <p>A mask image that is empty (zero width or zero height), that fails to
789 download, is non-existent, or that cannot be displayed (e.g. because it is
790 not in a supported image format) is ignored. No masking is applied.
792 <p>See the section <a href="#layering">“Layering multiple mask
793 images”</a> for how ‘<a href="#mask-image"><code
794 class=property>mask-image</code></a>’ interacts with other
795 comma-separated mask properties to form each mask image layer.
797 <div class=example>
798 <p>Some examples specifying mask images:
800 <pre>
801 body { mask-image: linear-gradient(black 0%, transparent 100%) }
802 p { mask-image: none }
803 div { mask-image: url(tl.png), url(tr.png) }
804 </pre>
806 <p>Some examples of a specified mask source:
808 <pre>
809 img { mask-image: url(#mask) }
810 span { mask-image: url(resources.svg#mask2) }
811 </pre>
813 <p>Examples of <i>invalid</i> mask source usages:
815 <pre>
816 p { mask-image: url(#mask), url(tl.png) }
817 img { mask-image: url(#mask), url(resources.svg#mask2) }
818 </pre>
820 <p>A <a href="#ltmask-elementgt"><var><mask-element></var></a> value
821 that is either used together with another <a
822 href="#ltmask-elementgt"><var><mask-element></var></a> value or an
823 <a href="#ltmask-imagegt"><var><mask-image></var></a> value makes
824 the whole specified ‘<a href="#mask-image"><code
825 class=property>mask-image</code></a>’ value list invalid.
826 </div>
828 <h3 id=the-mask-source-type><span class=secno>6.2. </span>The ‘<a
829 href="#mask-source-type"><code
830 class=property>mask-source-type</code></a>’ property</h3>
832 <table class=propdef>
833 <tbody>
834 <tr>
835 <th>Name:
837 <td><dfn id=mask-source-type>mask-source-type</dfn>
839 <tr>
840 <th><a href="#values">Value</a>:
842 <td><a href="#ltsource-typegt"><var><source-type></var></a>#
844 <tr>
845 <th>Initial:
847 <td>auto
849 <tr>
850 <th>Applies to:
852 <td>All elements. In SVG, it applies to <a
853 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
854 elements</a> and <a
855 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
856 elements</a>
858 <tr>
859 <th>Inherited:
861 <td>no
863 <tr>
864 <th>Percentages:
866 <td>N/A
868 <tr>
869 <th>Media:
871 <td>visual
873 <tr>
874 <th>Computed value:
876 <td>as specified
878 <tr>
879 <th>Animatable:
881 <td>no
882 </table>
884 <p>The ‘<a href="#mask-source-type"><code
885 class=property>mask-source-type</code></a>’ property indicates whether
886 the <a href="#ltmask-referencegt"><var><mask-reference></var></a> is
887 treated as luminance mask or alpha mask. (See <a
888 href="#MaskValues">Calculating mask values</a>.)
890 <pre class=prod><dfn
891 id=ltsource-typegt><var><source-type></var></dfn> = alpha | luminance | auto</pre>
893 <p>Values have the following meanings:
895 <dl>
896 <dt><dfn id=alpha>‘<code class=css>alpha</code>’</dfn>
898 <dd> A value of ‘<a href="#alpha"><code class=css>alpha</code></a>’
899 indicates that the alpha values of the mask image should be used as the
900 mask values. See <a href="#MaskValues">Calculating mask values</a>.
902 <dt><dfn id=luminance>‘<code class=css>luminance</code>’</dfn>
904 <dd> A value of ‘<a href="#luminance"><code
905 class=css>luminance</code></a>’ indicates that the luminance values of
906 the mask image should be used as the mask values. See <a
907 href="#MaskValues">Calculating mask values</a>.
909 <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
911 <dd>
912 <p> If the <a
913 href="#ltmask-referencegt"><var><mask-reference></var></a> of the
914 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
915 property is of type <a
916 href="#ltmask-imagegt"><var><mask-image></var></a> the luminance
917 values of the mask image should be used as the mask values.
919 <p> If the <a
920 href="#ltmask-referencegt"><var><mask-reference></var></a> of the
921 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
922 property is of type <a
923 href="#ltmask-elementgt"><var><mask-element></var></a> the alpha
924 values of the mask image should be used as the mask values.
925 </dl>
927 <div class=example>
928 <p> In the following example, the ‘<a href="#mask-type"><code
929 class=property>mask-type</code></a>’ property sets the mask type value
930 for the <a class=element-name href="#MaskElement">‘<code
931 class=property>mask</code>’</a> element to ‘<a href="#alpha"><code
932 class=css>alpha</code></a>’. The ‘<a href="#mask-image"><code
933 class=property>mask-image</code></a>’ property has a reference to this
934 <a class=element-name href="#MaskElement">‘<code
935 class=property>mask</code>’</a> element and the ‘<a
936 href="#mask-source-type"><code
937 class=property>mask-source-type</code></a>’ property has a value of
938 ‘<a href="#luminance"><code class=css>luminance</code></a>’. The
939 ‘<a href="#mask-source-type"><code
940 class=property>mask-source-type</code></a>’ property will override the
941 definition of ‘<a href="#mask-type"><code
942 class=property>mask-type</code></a>’ to ‘<a href="#luminance"><code
943 class=css>luminance</code></a>’.
945 <pre>
946 <mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
947 <radialGradient id="radialFill">
948 <stop stop-color="white" offset="0"/>
949 <stop stop-color="black" offset="1"/>
950 </radialGradient>
951 <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
952 </mask>
954 <style>
955 rect {
956 mask-image: url(#SVGMask);
957 mask-source-type: luminance;
958 }
959 </style>
961 <rect width="200" height="200" fill="green"/>
962 </pre>
963 </div>
965 <h3 id=the-mask-repeat><span class=secno>6.3. </span>The ‘<a
966 href="#mask-repeat"><code class=property>mask-repeat</code></a>’
967 property</h3>
969 <table class=propdef>
970 <tbody>
971 <tr>
972 <th>Name:
974 <td><dfn id=mask-repeat>mask-repeat</dfn>
976 <tr>
977 <th><a href="#values">Value</a>:
979 <td><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>#
981 <tr>
982 <th>Initial:
984 <td>repeat
986 <tr>
987 <th>Applies to:
989 <td>All elements. In SVG, it applies to <a
990 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
991 elements</a> and <a
992 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
993 elements</a>
995 <tr>
996 <th>Inherited:
998 <td>no
1000 <tr>
1001 <th>Percentages:
1003 <td>N/A
1005 <tr>
1006 <th>Media:
1008 <td>visual
1010 <tr>
1011 <th>Computed value:
1013 <td>A list, each item consisting of: two keywords, one per dimension
1015 <tr>
1016 <th>Animatable:
1018 <td>no
1019 </table>
1021 <p>Specifies how mask images are tiled after they have been <a
1022 href="#the-mask-size">sized</a> and <a
1023 href="#the-mask-position">positioned</a>. Where
1025 <pre class=prod><dfn
1026 id=ltrepeat-stylegt><var><repeat-style></var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
1028 <p>See <a
1029 href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling
1030 Images: the ‘<code class=property>background-repeat</code>’
1031 property</a> <a href="#CSS3BG"
1032 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
1033 property values.
1035 <div class=example>
1036 <p style="display:none">Example(s):
1038 <pre>
1039 body {
1040 background-color: blue;
1041 mask-image: url(dot-mask.png) luminance;
1042 mask-repeat: space;
1043 }
1044 </pre>
1046 <div class=figure>
1047 <p><img alt="Image of an element with a dotted mask."
1048 src="images/mask-repeat.svg" style="border: solid black 1px;" width=240>
1050 <p class=caption>The effect of ‘<code class=property>space</code>’:
1051 the mask image of a dot is tiled to cover the whole <a class=index
1052 href="#mask-painting-area" id=mask-painting-area0>mask painting area</a>
1053 and the mask images are equally spaced.
1054 </div>
1055 </div>
1057 <p>See the section <a href="#layering">“Layering multiple mask
1058 images”</a> for how ‘<a href="#mask-repeat"><code
1059 class=property>mask-repeat</code></a>’ interacts with other
1060 comma-separated mask properties to form each mask image layer.
1062 <h3 id=the-mask-position><span class=secno>6.4. </span>The ‘<a
1063 href="#mask-position"><code class=property>mask-position</code></a>’
1064 property</h3>
1066 <table class=propdef>
1067 <tbody>
1068 <tr>
1069 <th>Name:
1071 <td><dfn id=mask-position>mask-position</dfn>
1073 <tr>
1074 <th><a href="#values">Value</a>:
1076 <td><a href="#ltpositiongt"><var><position></var></a>#
1078 <tr>
1079 <th>Initial:
1081 <td>0% 0%
1083 <tr>
1084 <th>Applies to:
1086 <td>All elements. In SVG, it applies to <a
1087 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1088 elements</a> and <a
1089 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1090 elements</a>
1092 <tr>
1093 <th>Inherited:
1095 <td>no
1097 <tr>
1098 <th>Percentages:
1100 <td>refer to size of <a class=index href="#mask-painting-area"
1101 id=mask-painting-area1>mask painting area</a> <em>minus</em> size of
1102 mask image; see text
1104 <tr>
1105 <th>Media:
1107 <td>visual
1109 <tr>
1110 <th>Computed value:
1112 <td>A list, each item consisting of: two keywords representing the
1113 origin and two offsets from that origin, each given as an absolute
1114 length (if given a <length>), otherwise as a percentage.
1116 <tr>
1117 <th>Animatable:
1119 <td>as <a
1120 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
1121 list</a> of <a
1122 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
1123 list</a> of <a
1124 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
1125 percentage, or calc</a>
1126 </table>
1128 <p>Where
1130 <pre class=prod><dfn id=ltpositiongt><var><position></var></dfn> = [
1131 [ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ]
1132 |
1133 [ left | center | right | <var><percentage></var> | <var><length></var> ]
1134 [ top | center | bottom | <var><percentage></var> | <var><length></var> ]
1135 |
1136 [ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] &&
1137 [ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ]
1138 ]</pre>
1140 <p>See <a
1141 href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning
1142 Images: the ‘<code class=property>background-position</code>’
1143 property</a> <a href="#CSS3BG"
1144 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
1145 property values.
1147 <div class=example>
1148 <p>In the example below, the (single) image is placed in the lower-right
1149 corner of the viewport.
1151 <pre>
1152 body {
1153 mask-image: url("logo.png");
1154 mask-position: 100% 100%;
1155 mask-repeat: no-repeat;
1156 }
1157 </pre>
1158 </div>
1160 <div class=example>
1161 <p>Mask positions can also be relative to other corners than the top left.
1162 E.g., the following puts the background image 10px from the bottom and
1163 3em from the right:
1165 <pre>mask-position: right 3em bottom 10px</pre>
1166 </div>
1168 <p>See the section <a href="#layering">“Layering multiple mask
1169 images”</a> for how ‘<a href="#mask-position"><code
1170 class=property>mask-position</code></a>’ interacts with other
1171 comma-separated mask properties to form each mask image layer.
1173 <h3 id=the-mask-clip><span class=secno>6.5. </span>The ‘<a
1174 href="#mask-clip"><code class=property>mask-clip</code></a>’ property</h3>
1176 <table class=propdef>
1177 <tbody>
1178 <tr>
1179 <th>Name:
1181 <td><dfn id=mask-clip>mask-clip</dfn>
1183 <tr>
1184 <th><a href="#values">Value</a>:
1186 <td><a href="#ltclip-boxgt"><var><clip-box></var></a>#
1188 <tr>
1189 <th>Initial:
1191 <td>border-box
1193 <tr>
1194 <th>Applies to:
1196 <td>All elements. In SVG, it applies to <a
1197 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1198 elements</a> and <a
1199 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1200 elements</a>
1202 <tr>
1203 <th>Inherited:
1205 <td>no
1207 <tr>
1208 <th>Percentages:
1210 <td>N/A
1212 <tr>
1213 <th>Media:
1215 <td>visual
1217 <tr>
1218 <th>Computed value:
1220 <td>as specified
1222 <tr>
1223 <th>Animatable:
1225 <td>no
1226 </table>
1228 <p>Determines the <dfn id=mask-painting-area>mask painting area</dfn>,
1229 which determines the area that is affected by the mask. The painted
1230 content of an element may be resricted to this area. The syntax of the
1231 property is given with
1233 <pre class=prod><dfn id=ltclip-boxgt><var><clip-box></var></dfn> = <a
1234 href="#ltboxgt"><var><box></var></a> | no-clip</pre>
1236 <pre class=prod><dfn
1237 id=ltboxgt><var><box></var></dfn> = border-box | padding-box | content-box</pre>
1239 <p>Values have the following meanings:
1241 <dl>
1242 <dt><dfn id=border-box title="''border-box''!!'mask-clip' value"> ‘<code
1243 class=css>border-box</code>’</dfn>
1245 <dd>The painted content is rectricted to (clipped to) the <span>border
1246 box</span> respectively <span>painting box</span> for objects without
1247 associated layout box.
1249 <dt><dfn id=padding-box title="''padding-box''!!'mask-clip' value">
1250 ‘<code class=css>padding-box</code>’</dfn>
1252 <dd>The painted content is rectricted to (clipped to) the <span>padding
1253 box.</span>
1255 <dt><dfn id=content-box title="''content-box''!!'mask-clip' value">
1256 ‘<code class=css>content-box</code>’</dfn>
1258 <dd>The painted content is rectricted to (clipped to) the <span>content
1259 box</span> respectively <span>object bounding box</span> <a href="#SVG11"
1260 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
1261 associated layout box.
1263 <dt><dfn id=no-clip title="''no-clip''!!'mask-clip' value"> ‘<code
1264 class=css>no-clip</code>’</dfn>
1266 <dd>The painted content is not restricted (not clipped). The <a
1267 href="#mask-painting-area">mask painting area</a> is set to the <a
1268 href="#bounding-client-rect">bounding client rect</a>.
1269 </dl>
1271 <p class=note>Note that there is no corresponding box for ‘<code
1272 class=css>padding-box</code>’ on objects without associated layout box
1273 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
1274 is choosen instead.
1276 <p>See the section <a href="#layering">“Layering multiple mask
1277 images”</a> for how ‘<a href="#mask-clip"><code
1278 class=property>mask-clip</code></a>’ interacts with other
1279 comma-separated mask properties to form each mask image layer.
1281 <h3 id=the-mask-origin><span class=secno>6.6. </span>The ‘<a
1282 href="#mask-origin"><code class=property>mask-origin</code></a>’
1283 property</h3>
1285 <table class=propdef>
1286 <tbody>
1287 <tr>
1288 <th>Name:
1290 <td><dfn id=mask-origin>mask-origin</dfn>
1292 <tr>
1293 <th><a href="#values">Value</a>:
1295 <td><a href="#ltboxgt"><var><box></var></a>#
1297 <tr>
1298 <th>Initial:
1300 <td>padding-box
1302 <tr>
1303 <th>Applies to:
1305 <td>All elements. In SVG, it applies to <a
1306 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1307 elements</a> and <a
1308 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1309 elements</a>
1311 <tr>
1312 <th>Inherited:
1314 <td>no
1316 <tr>
1317 <th>Percentages:
1319 <td>N/A
1321 <tr>
1322 <th>Media:
1324 <td>visual
1326 <tr>
1327 <th>Computed value:
1329 <td>as specified
1331 <tr>
1332 <th>Animatable:
1334 <td>no
1335 </table>
1337 <p>For elements rendered as a single box, specifies the <dfn
1338 id=mask-positioning-area>mask positioning area</dfn>. For elements
1339 rendered as multiple boxes (e.g., inline boxes on several lines, boxes on
1340 several pages) specifies which boxes ‘<code
1341 class=property>box-decoration-break</code>’ operates on to determine the
1342 mask positioning area(s).
1344 <dl>
1345 <dt><dfn id=padding-box0 title="''padding-box''!!'mask-origin' value">
1346 ‘<code class=css>padding-box</code>’</dfn>
1348 <dd>The position is relative to the padding box. (For single boxes
1349 ‘<code class=css>0 0</code>’ is the upper left corner of the padding
1350 edge, ‘<code class=css>100% 100%</code>’ is the lower right corner.)
1352 <dt><dfn id=border-box0 title="''border-box''!!'mask-origin' value">
1353 ‘<code class=css>border-box</code>’</dfn>
1355 <dd>The position is relative to the border box respectively <span>painting
1356 box</span> for objects without associated layout box.
1358 <dt><dfn id=content-box0>‘<code class=css>content-box</code>’</dfn>
1360 <dd>The position is relative to the content box respectively object
1361 bounding box <a href="#SVG11"
1362 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
1363 associated layout box.
1364 </dl>
1366 <p class=note>Note that there is no corresponding box for ‘<code
1367 class=css>padding-box</code>’ on objects without associated layout box
1368 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
1369 is choosen instead.
1371 <p class=note>Note that if ‘<a href="#mask-clip"><code
1372 class=property>mask-clip</code></a>’ is ‘<code
1373 class=css>padding-box</code>’, ‘<a href="#mask-origin"><code
1374 class=property>mask-origin</code></a>’ is ‘<code
1375 class=css>border-box</code>’, ‘<a href="#mask-position"><code
1376 class=property>mask-position</code></a>’ is ‘<code class=css>top
1377 left</code>’ (the initial value), and the element has a non-zero border,
1378 then the top and left of the mask image will be clipped.
1380 <p>See the section <a href="#layering">“Layering multiple mask
1381 images”</a> for how ‘<a href="#mask-origin"><code
1382 class=property>mask-origin</code></a>’ interacts with other
1383 comma-separated mask properties to form each mask image layer.
1385 <h3 id=the-mask-size><span class=secno>6.7. </span>The ‘<a
1386 href="#mask-size"><code class=property>mask-size</code></a>’ property</h3>
1388 <table class=propdef>
1389 <tbody>
1390 <tr>
1391 <th>Name:
1393 <td><dfn id=mask-size>mask-size</dfn>
1395 <tr>
1396 <th><a href="#values">Value</a>:
1398 <td><a href="#ltmask-sizegt"><var><mask-size></var></a>#
1400 <tr>
1401 <th>Initial:
1403 <td>auto
1405 <tr>
1406 <th>Applies to:
1408 <td>All elements. In SVG, it applies to <a
1409 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1410 elements</a> and <a
1411 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1412 elements</a>
1414 <tr>
1415 <th>Inherited:
1417 <td>no
1419 <tr>
1420 <th>Percentages:
1422 <td>see text
1424 <tr>
1425 <th>Media:
1427 <td>visual
1429 <tr>
1430 <th>Computed value:
1432 <td>as specified, but with lengths made absolute
1434 <tr>
1435 <th>Animatable:
1437 <td>as <a
1438 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
1439 list</a> of <a
1440 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
1441 list</a> of <a
1442 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
1443 percentage, or calc</a> (<span class=note>This means keyword values are
1444 not animatable.</span>)
1445 </table>
1447 <p>Specifies the size of the mask images. Where
1449 <pre class=prod><dfn
1450 id=ltmask-sizegt><var><mask-size></var></dfn> = [ <var><length></var> | <var><percentage></var> | auto ]{1,2} | cover | contain</pre>
1452 <p>See <a
1453 href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing
1454 Images: the ‘background-size’ property</a> <a href="#CSS3BG"
1455 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
1456 property values.
1458 <p>See the section <a href="#layering">“Layering multiple mask
1459 images”</a> for how ‘<a href="#mask-size"><code
1460 class=property>mask-size</code></a>’ interacts with other
1461 comma-separated mask properties to form each mask image layer.
1463 <h3 id=mask-property><span class=secno>6.8. </span>The ‘<a
1464 href="#mask"><code class=property>mask</code></a>’ property</h3>
1466 <table class=propdef>
1467 <tbody>
1468 <tr>
1469 <th>Name:
1471 <td><dfn id=MaskProperty>mask</dfn>
1473 <tr>
1474 <th>Value:
1476 <td><a href="#ltmask-layergt"><var><mask-layer></var></a>#
1478 <tr>
1479 <th>Initial:
1481 <td>see individual properties
1483 <tr>
1484 <th>Applies to:
1486 <td>All elements. In SVG, it applies to <a
1487 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1488 elements</a> and <a
1489 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1490 elements</a>
1492 <tr>
1493 <th>Inherited:
1495 <td>no
1497 <tr>
1498 <th>Percentages:
1500 <td>see individual properties
1502 <tr>
1503 <th>Media:
1505 <td>visual
1507 <tr>
1508 <th>Computed value:
1510 <td>see individual properties
1512 <tr>
1513 <th>Animatable:
1515 <td>see individual properties
1516 </table>
1518 <p>Where
1520 <pre class=prod><dfn id=ltmask-layergt><mask-layer></dfn> = <a
1521 href="#ltmask-referencegt"><var><mask-reference></var></a> <a
1522 href="#ltsource-typegt"><var><source-type></var></a>? || <a
1523 href="#ltpositiongt"><var><position></var></a> [ / <a
1524 href="#ltmask-sizegt"><var><mask-size></var></a> ]? || <a
1525 href="#ltrepeat-stylegt"><var><repeat-style></var></a> || <a
1526 href="#ltboxgt"><var><box></var></a> || <a
1527 href="#ltclip-boxgt"><var><clip-box></var></a></pre>
1529 <p> If one <a href="#ltboxgt"><var><box></var></a> value is present
1530 then it sets both ‘<a href="#mask-origin"><code
1531 class=property>mask-origin</code></a>’ and ‘<a href="#mask-clip"><code
1532 class=property>mask-clip</code></a>’ to that value. If two <a
1533 href="#ltboxgt"><var><box></var></a> values are present, then the
1534 first sets ‘<a href="#mask-origin"><code
1535 class=property>mask-origin</code></a>’ and the second ‘<a
1536 href="#mask-clip"><code class=property>mask-clip</code></a>’.
1538 <p class=note> Note that the properties ‘<a href="#mask-image"><code
1539 class=property>mask-image</code></a>’, ‘<a href="#mask-repeat"><code
1540 class=property>mask-repeat</code></a>’, ‘<a
1541 href="#mask-position"><code class=property>mask-position</code></a>’,
1542 ‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’,
1543 ‘<a href="#mask-origin"><code class=property>mask-origin</code></a>’
1544 and ‘<a href="#mask-size"><code class=property>mask-size</code></a>’
1545 have no affect on <a class=element-name href="#MaskElement">‘<code
1546 class=property>mask</code>’</a> elements.
1548 <h3 id=the-mask-type><span class=secno>6.9. </span>The ‘<a
1549 href="#mask-type"><code class=property>mask-type</code></a>’ property</h3>
1551 <table class=propdef>
1552 <tbody>
1553 <tr>
1554 <th>Name:
1556 <td><dfn id=mask-type>mask-type</dfn>
1558 <tr>
1559 <th><a href="#values">Value</a>:
1561 <td>luminance | alpha
1563 <tr>
1564 <th>Initial:
1566 <td>luminance
1568 <tr>
1569 <th>Applies to:
1571 <td><a class=element-name href="#MaskElement">‘<code
1572 class=property>mask</code>’</a> elements
1574 <tr>
1575 <th>Inherited:
1577 <td>no
1579 <tr>
1580 <th>Percentages:
1582 <td>N/A
1584 <tr>
1585 <th>Media:
1587 <td>visual
1589 <tr>
1590 <th>Computed value:
1592 <td>as specified
1594 <tr>
1595 <th>Animatable:
1597 <td>no
1598 </table>
1600 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
1601 property defines whether the content of the <a class=element-name
1602 href="#MaskElement">‘<code class=property>mask</code>’</a> is treated
1603 as as luminance mask or alpha mask, as described in <a
1604 href="#MaskValues">Calculating mask values</a>.
1606 <p>Values have the following meanings:
1608 <dl>
1609 <dt>‘<a href="#luminance"><code class=css>luminance</code></a>’
1611 <dd>Indicates that the luminance values of the mask should be used.
1613 <dt>‘<a href="#alpha"><code class=css>alpha</code></a>’
1615 <dd>Indicates that the alpha values of the mask should be used.
1616 </dl>
1618 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
1619 property is a presentation attribute for SVG elements.
1621 <h3 id=MaskElement><span class=secno>6.10. </span>The <a class=element-name
1622 href="#mask">‘<code class=property>mask</code>’</a> element</h3>
1624 <table class=propdef summary="mask element">
1625 <tbody>
1626 <tr>
1627 <th>Name:
1629 <td><dfn id=mask>mask</dfn>
1631 <tr>
1632 <th>Categories:
1634 <td><a
1635 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">Container
1636 element</a>
1638 <tr>
1639 <th>Content model:
1641 <td>Any number of the following elements, in any order:
1642 <ul class=no-bullets>
1643 <li><a
1644 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
1645 <span class=expanding> — <a
1646 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
1647 class=element-name>‘animate’</span></a>, <a
1648 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
1649 class=element-name>‘animateColor’</span></a>, <a
1650 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
1651 class=element-name>‘animateMotion’</span></a>, <a
1652 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
1653 class=element-name>‘animateTransform’</span></a>, <a
1654 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
1655 class=element-name>‘set’</span></a></span>
1657 <li><a
1658 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
1659 <span class=expanding> — <a
1660 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
1661 class=element-name>‘desc’</span></a>, <a
1662 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
1663 class=element-name>‘title’</span></a>, <a
1664 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
1665 class=element-name>‘metadata’</span></a></span>
1667 <li><a
1668 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
1669 <span class=expanding> — <a
1670 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
1671 class=element-name>‘circle’</span></a>, <a
1672 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
1673 class=element-name>‘ellipse’</span></a>, <a
1674 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
1675 class=element-name>‘line’</span></a>, <a
1676 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
1677 class=element-name>‘path’</span></a>, <a
1678 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
1679 class=element-name>‘polygon’</span></a>, <a
1680 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
1681 class=element-name>‘polyline’</span></a>, <a
1682 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
1683 class=element-name>‘rect’</span></a></span>
1685 <li><a
1686 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a>
1687 <span class=expanding> — <a
1688 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement"><span
1689 class=element-name>‘defs’</span></a>, <a
1690 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#GElement"><span
1691 class=element-name>‘g’</span></a>, <a
1692 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElement"><span
1693 class=element-name>‘svg’</span></a>, <a
1694 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SymbolElement"><span
1695 class=element-name>‘symbol’</span></a>, <a
1696 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
1697 class=element-name>‘use’</span></a></span>
1699 <li><a
1700 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a>
1701 <span class=expanding> — <a
1702 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElement"><span
1703 class=element-name>‘linearGradient’</span></a>, <a
1704 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradientElement"><span
1705 class=element-name>‘radialGradient’</span></a></span>
1707 <li><a
1708 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElement"><span
1709 class=element-name>‘a’</span></a>
1711 <li><a href="#ClipPathElement"><span
1712 class=element-name>‘clipPath’</span></a>
1714 <li><a
1715 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileElement"><span
1716 class=element-name>‘color-profile’</span></a>
1718 <li><a
1719 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorElement"><span
1720 class=element-name>‘cursor’</span></a>
1722 <li><a
1723 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterElement"><span
1724 class=element-name>‘filter’</span></a>
1726 <li><a
1727 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontElement"><span
1728 class=element-name>‘font’</span></a>
1730 <li><a
1731 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontFaceElement"><span
1732 class=element-name>‘font-face’</span></a>
1734 <li><a
1735 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/extend.html#ForeignObjectElement"><span
1736 class=element-name>‘foreignObject’</span></a>
1738 <li><a
1739 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElement"><span
1740 class=element-name>‘image’</span></a>
1742 <li><a
1743 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement"><span
1744 class=element-name>‘marker’</span></a>
1746 <li><a href="#MaskElement"><span
1747 class=element-name>‘mask’</span></a>
1749 <li><a
1750 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement"><span
1751 class=element-name>‘pattern’</span></a>
1753 <li><a
1754 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/script.html#ScriptElement"><span
1755 class=element-name>‘script’</span></a>
1757 <li><a
1758 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElement"><span
1759 class=element-name>‘style’</span></a>
1761 <li><a
1762 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SwitchElement"><span
1763 class=element-name>‘switch’</span></a>
1765 <li><a
1766 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#ViewElement"><span
1767 class=element-name>‘view’</span></a>
1769 <li><a
1770 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
1771 class=element-name>‘text’</span></a>
1773 <li><a
1774 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AltGlyphDefElement"><span
1775 class=element-name>‘altGlyphDef’</span></a>
1776 </ul>
1778 <tr>
1779 <th>Attributes:
1781 <td>
1782 <ul class=no-bullets>
1783 <li><a
1784 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
1785 processing attributes</a><span class=expanding> — <a
1786 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
1787 class=attr-name>‘requiredFeatures’</span></a>, <a
1788 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
1789 class=attr-name>‘requiredExtensions’</span></a>, <a
1790 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
1791 class=attr-name>‘systemLanguage’</span></a></span>
1793 <li><a
1794 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
1795 attributes</a><span class=expanding> — <a
1796 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
1797 class=attr-name>‘id’</span></a>, <a
1798 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
1799 class=attr-name>‘xml:base’</span></a>, <a
1800 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
1801 class=attr-name>‘xml:lang’</span></a>, <a
1802 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
1803 class=attr-name>‘xml:space’</span></a></span>
1805 <li><a
1806 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
1807 attributes</a><span class=expanding> — <a
1808 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
1809 class=attr-name>‘alignment-baseline’</span></a>, <a
1810 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
1811 class=attr-name>‘baseline-shift’</span></a>, <a
1812 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
1813 class=attr-name>‘clip’</span></a>, <a
1814 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
1815 class=attr-name>‘clip-path’</span></a>, <a
1816 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
1817 class=attr-name>‘clip-rule’</span></a>, <a
1818 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
1819 class=attr-name>‘color’</span></a>, <a
1820 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
1821 class=attr-name>‘color-interpolation’</span></a>, <a
1822 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
1823 class=attr-name>‘color-interpolation-filters’</span></a>, <a
1824 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
1825 class=attr-name>‘color-profile’</span></a>, <a
1826 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
1827 class=attr-name>‘color-rendering’</span></a>, <a
1828 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
1829 class=attr-name>‘cursor’</span></a>, <a
1830 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
1831 class=attr-name>‘direction’</span></a>, <a
1832 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
1833 class=attr-name>‘display’</span></a>, <a
1834 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
1835 class=attr-name>‘dominant-baseline’</span></a>, <a
1836 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
1837 class=attr-name>‘enable-background’</span></a>, <a
1838 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
1839 class=attr-name>‘fill’</span></a>, <a
1840 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
1841 class=attr-name>‘fill-opacity’</span></a>, <a
1842 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
1843 class=attr-name>‘fill-rule’</span></a>, <a
1844 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
1845 class=attr-name>‘filter’</span></a>, <a
1846 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
1847 class=attr-name>‘flood-color’</span></a>, <a
1848 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
1849 class=attr-name>‘flood-opacity’</span></a>, <a
1850 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
1851 class=attr-name>‘font’</span></a>, <a
1852 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
1853 class=attr-name>‘font-family’</span></a>, <a
1854 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
1855 class=attr-name>‘font-size’</span></a>, <a
1856 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
1857 class=attr-name>‘font-size-adjust’</span></a>, <a
1858 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
1859 class=attr-name>‘font-stretch’</span></a>, <a
1860 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
1861 class=attr-name>‘font-style’</span></a>, <a
1862 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
1863 class=attr-name>‘font-variant’</span></a>, <a
1864 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
1865 class=attr-name>‘font-weight’</span></a>, <a
1866 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
1867 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
1868 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
1869 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
1870 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
1871 class=attr-name>‘image-rendering’</span></a>, <a
1872 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
1873 class=attr-name>‘kerning’</span></a>, <a
1874 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
1875 class=attr-name>‘letter-spacing’</span></a>, <a
1876 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
1877 class=attr-name>‘lighting-color’</span></a>, <a
1878 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
1879 class=attr-name>‘marker’</span></a>, <a
1880 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
1881 class=attr-name>‘marker-end’</span></a>, <a
1882 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
1883 class=attr-name>‘marker-mid’</span></a>, <a
1884 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
1885 class=attr-name>‘marker-start’</span></a>, <a
1886 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
1887 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
1888 class=attr-name>‘opacity’</span></a>, <a
1889 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
1890 class=attr-name>‘overflow’</span></a>, <a
1891 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
1892 class=attr-name>‘pointer-events’</span></a>, <a
1893 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
1894 class=attr-name>‘shape-rendering’</span></a>, <a
1895 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
1896 class=attr-name>‘stop-color’</span></a>, <a
1897 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
1898 class=attr-name>‘stop-opacity’</span></a>, <a
1899 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
1900 class=attr-name>‘stroke’</span></a>, <a
1901 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
1902 class=attr-name>‘stroke-dasharray’</span></a>, <a
1903 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
1904 class=attr-name>‘stroke-dashoffset’</span></a>, <a
1905 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
1906 class=attr-name>‘stroke-linecap’</span></a>, <a
1907 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
1908 class=attr-name>‘stroke-linejoin’</span></a>, <a
1909 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
1910 class=attr-name>‘stroke-miterlimit’</span></a>, <a
1911 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
1912 class=attr-name>‘stroke-opacity’</span></a>, <a
1913 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
1914 class=attr-name>‘stroke-width’</span></a>, <a
1915 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
1916 class=attr-name>‘text-anchor’</span></a>, <a
1917 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
1918 class=attr-name>‘text-decoration’</span></a>, <a
1919 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
1920 class=attr-name>‘text-rendering’</span></a>, <a
1921 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
1922 class=attr-name>‘unicode-bidi’</span></a>, <a
1923 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
1924 class=attr-name>‘visibility’</span></a>, <a
1925 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
1926 class=attr-name>‘word-spacing’</span></a>, <a
1927 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
1928 class=attr-name>‘writing-mode’</span></a></span>
1930 <li><a
1931 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
1932 class=attr-name>‘class’</span></a>
1934 <li><a
1935 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
1936 class=attr-name>‘style’</span></a>
1938 <li><a href="#MaskElementXAttribute"><span
1939 class=attr-name>‘x’</span></a>
1941 <li><a href="#MaskElementYAttribute"><span
1942 class=attr-name>‘y’</span></a>
1944 <li><a href="#MaskElementWidthAttribute"><span
1945 class=attr-name>‘width’</span></a>
1947 <li><a href="#MaskElementHeightAttribute"><span
1948 class=attr-name>‘height’</span></a>
1950 <li><a href="#MaskElementMaskUnitsAttribute"><span
1951 class=attr-name>‘maskUnits’</span></a>
1953 <li><a href="#MaskElementMaskContentUnitsAttribute"><span
1954 class=attr-name>‘maskContentUnits’</span></a>
1955 </ul>
1957 <tr>
1958 <th>DOM Interfaces:
1960 <td><a class=idlinterface
1961 href="#InterfaceSVGMaskElement">SVGMaskElement</a>
1962 </table>
1964 <div class=adef-list>
1965 <p><em>Attribute definitions:</em>
1967 <dl>
1968 <dt id=MaskElementMaskUnitsAttribute><span class=adef>maskUnits</span> =
1969 "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
1971 <dd>Defines the coordinate system for attributes <a class=attr-name
1972 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>,
1973 <a class=attr-name href="#MaskElementYAttribute">‘<code
1974 class=property>y</code>’</a>, <a class=attr-name
1975 href="#MaskElementWidthAttribute">‘<code
1976 class=property>width</code>’</a> and <a class=attr-name
1977 href="#MaskElementHeightAttribute">‘<code
1978 class=property>height</code>’</a>.<br>
1979 If <span class=attr-value>maskUnits="userSpaceOnUse"</span>, <a
1980 class=attr-name href="#MaskElementXAttribute">‘<code
1981 class=property>x</code>’</a>, <a class=attr-name
1982 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
1983 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
1984 class=property>width</code>’</a> and <a class=attr-name
1985 href="#MaskElementHeightAttribute">‘<code
1986 class=property>height</code>’</a> represent values in the current user
1987 coordinate system in place at the time when the <a class=element-name
1988 href="#MaskElement">‘<code class=property>mask</code>’</a> element
1989 is referenced (i.e., the user coordinate system for the element
1990 referencing the <a class=element-name href="#MaskElement">‘<code
1991 class=property>mask</code>’</a> element via the ‘<a
1992 href="#mask"><code class=property>mask</code></a>’ property).<br>
1993 If <span class=attr-value>maskUnits="objectBoundingBox"</span>, <a
1994 class=attr-name href="#MaskElementXAttribute">‘<code
1995 class=property>x</code>’</a>, <a class=attr-name
1996 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
1997 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
1998 class=property>width</code>’</a> and <a class=attr-name
1999 href="#MaskElementHeightAttribute">‘<code
2000 class=property>height</code>’</a> represent fractions or percentages
2001 of the bounding box of the element to which the mask is applied. (See <a
2002 class=term href="#object-bounding-box-units">object bounding box
2003 units</a>.)<br>
2004 If attribute <a class=attr-name
2005 href="#MaskElementMaskUnitsAttribute">‘<code
2006 class=property>maskUnits</code>’</a> is not specified, then the effect
2007 is as if a value of <span class=attr-value>‘<code
2008 class=property>objectBoundingBox</code>’</span> were specified.<br>
2009 <span class=anim-target>Animatable: yes.</span>
2011 <dt id=MaskElementMaskContentUnitsAttribute><span
2012 class=adef>maskContentUnits</span> = "<em>userSpaceOnUse</em> |
2013 <em>objectBoundingBox</em>"
2015 <dd>Defines the coordinate system for the contents of the <a
2016 class=element-name href="#MaskElement">‘<code
2017 class=property>mask</code>’</a>.<br>
2018 If <span class=attr-value>maskContentUnits="userSpaceOnUse"</span>, the
2019 user coordinate system for the contents of the <a class=element-name
2020 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2021 is the current user coordinate system in place at the time when the <a
2022 class=element-name href="#MaskElement">‘<code
2023 class=property>mask</code>’</a> element is referenced (i.e., the user
2024 coordinate system for the element referencing the <a class=element-name
2025 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2026 via the ‘<a href="#mask"><code class=property>mask</code></a>’
2027 property).<br>
2028 If <span class=attr-value>maskContentUnits="objectBoundingBox"</span>,
2029 the user coordinate system for the contents of the <a class=element-name
2030 href="#MaskElement">‘<code class=property>mask</code>’</a> is
2031 established using the bounding box of the element to which the mask is
2032 applied. (See <a class=term href="#object-bounding-box-units">object
2033 bounding box units</a>.)<br>
2034 If attribute <a class=attr-name
2035 href="#MaskElementMaskContentUnitsAttribute">‘<code
2036 class=property>maskContentUnits</code>’</a> is not specified, then the
2037 effect is as if a value of <span class=attr-value>‘<code
2038 class=property>userSpaceOnUse</code>’</span> were specified.<br>
2039 <span class=anim-target>Animatable: yes.</span>
2041 <dt id=MaskElementXAttribute><span class=adef>x</span> =
2042 "<var><length></var> | <var><percentage></var>"
2044 <dd>The x-axis coordinate of one corner of the rectangle for the largest
2045 possible offscreen buffer. If the attribute is not specified but at
2046 least one of the attributes <a class=attr-name
2047 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
2048 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
2049 class=property>width</code>’</a> or <a class=attr-name
2050 href="#MaskElementHeightAttribute">‘<code
2051 class=property>height</code>’</a> are specified, the effect is as if a
2052 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
2053 were specified.<br>
2054 <span class=anim-target>Animatable: yes.</span>
2056 <dt id=MaskElementYAttribute><span class=adef>y</span> =
2057 "<var><length></var> | <var><percentage></var>"
2059 <dd>The y-axis coordinate of one corner of the rectangle for the largest
2060 possible offscreen buffer.<br>
2061 If the attribute is not specified but at least one of the attributes <a
2062 class=attr-name href="#MaskElementXAttribute">‘<code
2063 class=property>x</code>’</a>, <a class=attr-name
2064 href="#MaskElementWidthAttribute">‘<code
2065 class=property>width</code>’</a> or <a class=attr-name
2066 href="#MaskElementHeightAttribute">‘<code
2067 class=property>height</code>’</a> are specified, the effect is as if a
2068 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
2069 were specified.<br>
2070 <span class=anim-target>Animatable: yes.</span>
2072 <dt id=MaskElementWidthAttribute><span class=adef>width</span> =
2073 "<var><length></var> | <var><percentage></var>"
2075 <dd>The width of the largest possible offscreen buffer. A negative value
2076 or a value of zero disables rendering of the element.<br>
2077 If the attribute is not specified but at least one of the attributes <a
2078 class=attr-name href="#MaskElementXAttribute">‘<code
2079 class=property>x</code>’</a>, <a class=attr-name
2080 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
2081 <a class=attr-name href="#MaskElementHeightAttribute">‘<code
2082 class=property>height</code>’</a> are specified, the effect is as if a
2083 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
2084 were specified.<br>
2085 <span class=anim-target>Animatable: yes.</span>
2087 <dt id=MaskElementHeightAttribute><span class=adef>height</span> =
2088 "<var><length></var> | <var><percentage></var>"
2090 <dd>The height of the largest possible offscreen buffer.<br>
2091 A negative value or a value of zero disables rendering of the
2092 element.<br>
2093 If the attribute is not specified but at least one of the attributes <a
2094 class=attr-name href="#MaskElementXAttribute">‘<code
2095 class=property>x</code>’</a>, <a class=attr-name
2096 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
2097 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
2098 class=property>width</code>’</a> are specified, the effect is as if a
2099 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
2100 were specified.<br>
2101 <span class=anim-target>Animatable: yes.</span>
2102 </dl>
2103 </div>
2105 <p>If at least one of the attributes <a class=attr-name
2106 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
2107 class=attr-name href="#MaskElementYAttribute">‘<code
2108 class=property>y</code>’</a>, <a class=attr-name
2109 href="#MaskElementWidthAttribute">‘<code
2110 class=property>width</code>’</a> or <a class=attr-name
2111 href="#MaskElementHeightAttribute">‘<code
2112 class=property>height</code>’</a> are specified, the given object and
2113 the rectangle defined by <a class=attr-name
2114 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
2115 class=attr-name href="#MaskElementYAttribute">‘<code
2116 class=property>y</code>’</a>, <a class=attr-name
2117 href="#MaskElementWidthAttribute">‘<code
2118 class=property>width</code>’</a> and <a class=attr-name
2119 href="#MaskElementHeightAttribute">‘<code
2120 class=property>height</code>’</a> establish a current clipping path. The
2121 rendered content of the mask must be clipped by this current clipping
2122 path.
2124 <p>
2126 <p>CSS properties inherit into the <a class=element-name
2127 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2128 from its ancestors; properties do <em>not</em> inherit from the element
2129 referencing the <a class=element-name href="#MaskElement">‘<code
2130 class=property>mask</code>’</a> element.
2132 <p><a class=element-name href="#MaskElement">‘<code
2133 class=property>mask</code>’</a> elements are never rendered directly;
2134 their only usage is as something that can be referenced using the ‘<a
2135 href="#mask"><code class=property>mask</code></a>’ property. The
2136 ‘<code class=property>opacity</code>’, ‘<code
2137 class=property>filter</code>’ and ‘<code
2138 class=property>display</code>’ properties do not apply to the <a
2139 class=element-name href="#MaskElement">‘<code
2140 class=property>mask</code>’</a> element; thus, <a class=element-name
2141 href="#MaskElement">‘<code class=property>mask</code>’</a> elements
2142 are not directly rendered even if the ‘<code
2143 class=property>display</code>’ property is set to a value other than
2144 ‘<a href="#none"><code class=property>none</code></a>’, and <a
2145 class=element-name href="#MaskElement">‘<code
2146 class=property>mask</code>’</a> elements are available for referencing
2147 even when the ‘<code class=property>display</code>’ property on the <a
2148 class=element-name href="#MaskElement">‘<code
2149 class=property>mask</code>’</a> element or any of its ancestors is set
2150 to <a class=prop-value href="#none">none</a>.
2152 <h2 id=mask-box-image><span class=secno>7. </span>Mask Box Image</h2>
2154 <p> With ‘<a href="#mask-box-image0"><code
2155 class=property>mask-box-image</code></a>’ a mask can be split into nine
2156 pieces: four corners, four edges and the middle piece as demonstrated in
2157 the figure below.
2159 <div class=figure> <img alt="pieces of a mask box image"
2160 src="images/mask-box-image-mask.svg" width=240>
2161 <p class=caption> Pieces of a mask box image.
2162 </div>
2164 <p> These pieces may be sliced, scaled and stretched in various ways to fit
2165 the size of the <span class=index id=mask-image-area>mask image
2166 area</span>. The usage of ‘<a href="#mask-box-image0"><code
2167 class=property>mask-box-image</code></a>’ corresponds to the ‘<code
2168 class=property>border-image</code>’ property of CSS Background and
2169 Borders <a href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
2171 <div class=example>
2172 <p> The mask image in the following example is split into four corners
2173 with dimensions of 75 pixels, four edges and the middle piece that is
2174 stretched and scaled.
2176 <div class=figure> <img alt="Example for 'mask-box-image'" height=240
2177 src="images/mask-box-image.svg" width=720>
2178 <p class=caption> Example for ‘<a href="#mask-box-image0"><code
2179 class=property>mask-box-image</code></a>’. The object on the left is
2180 the object to mask. The second image is the alpha mask and the last
2181 image the masked object.
2182 </div>
2184 <pre>
2185 div {
2186 background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
2187 mask-box-image-slice: 25 fill;
2188 mask-box-image-repeat: stretch;
2189 mask-box-image-source: url(mask.png);
2190 }</pre>
2191 </div>
2193 <h3 id=the-mask-box-image-source><span class=secno>7.1. </span>The ‘<a
2194 href="#mask-box-image-source"><code
2195 class=property>mask-box-image-source</code></a>’ property</h3>
2197 <table class=propdef>
2198 <tbody>
2199 <tr>
2200 <th>Name:
2202 <td><dfn id=mask-box-image-source>mask-box-image-source</dfn>
2204 <tr>
2205 <th><a href="#values">Value</a>:
2207 <td><a href="#ltmask-imagegt"><var><mask-image></var></a>
2209 <tr>
2210 <th>Initial:
2212 <td>none
2214 <tr>
2215 <th>Applies to:
2217 <td>All elements. In SVG, it applies to <a
2218 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2219 elements</a> and <a
2220 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2221 elements</a>.
2223 <tr>
2224 <th>Inherited:
2226 <td>no
2228 <tr>
2229 <th>Percentages:
2231 <td>N/A
2233 <tr>
2234 <th>Media:
2236 <td>visual
2238 <tr>
2239 <th>Computed value:
2241 <td>‘<a href="#none"><code class=css>none</code></a>’ or the image
2242 with its URI made absolute
2244 <tr>
2245 <th>Animatable:
2247 <td>no
2248 </table>
2250 <p>Specifies an image to be used as mask. If the value is ‘<a
2251 href="#none"><code class=css>none</code></a>’ or if the image cannot be
2252 displayed (or the property doesn't apply), the content won't get masked.
2254 <h3 id=the-mask-box-image-slice><span class=secno>7.2. </span>The ‘<a
2255 href="#mask-box-image-slice"><code
2256 class=property>mask-box-image-slice</code></a>’ property</h3>
2258 <table class=propdef>
2259 <tbody>
2260 <tr>
2261 <th>Name:
2263 <td><dfn id=mask-box-image-slice>mask-box-image-slice</dfn>
2265 <tr>
2266 <th><a href="#values">Value</a>:
2268 <td>[<var><number></var> | <var><percentage></var>]{1,4}
2269 && fill?
2271 <tr>
2272 <th>Initial:
2274 <td>0 fill
2276 <tr>
2277 <th>Applies to:
2279 <td>All elements. In SVG, it applies to <a
2280 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2281 elements</a> and <a
2282 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2283 elements</a>.
2285 <tr>
2286 <th>Inherited:
2288 <td>no
2290 <tr>
2291 <th>Percentages:
2293 <td>refer to size of the mask image
2295 <tr>
2296 <th>Media:
2298 <td>visual
2300 <tr>
2301 <th>Computed value:
2303 <td>as specified
2305 <tr>
2306 <th>Animatable:
2308 <td>no
2309 </table>
2311 <p>This property specifies inward offsets from the top, right, bottom, and
2312 left edges of the mask image, dividing it into nine regions: four corners,
2313 four edges and a middle. The middle image part is discarded (treated as
2314 fully transparent black) unless the ‘<code class=css>fill</code>’
2315 keyword is present.
2317 <p>See <a
2318 href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image
2319 Slicing: the ‘<code class=property>border-image-slice</code>’
2320 property</a> <a href="#CSS3BG"
2321 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
2322 property values.
2324 <h3 id=the-mask-box-image-width><span class=secno>7.3. </span>The ‘<a
2325 href="#mask-box-image-width"><code
2326 class=property>mask-box-image-width</code></a>’ property</h3>
2328 <table class=propdef>
2329 <tbody>
2330 <tr>
2331 <th>Name:
2333 <td><dfn id=mask-box-image-width>mask-box-image-width</dfn>
2335 <tr>
2336 <th><a href="#values">Value</a>:
2338 <td>[ <var><length></var> | <var><percentage></var> |
2339 <var><number></var> | auto ]{1,4}
2341 <tr>
2342 <th>Initial:
2344 <td>auto
2346 <tr>
2347 <th>Applies to:
2349 <td>All elements. In SVG, it applies to <a
2350 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2351 elements</a> and <a
2352 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2353 elements</a>.
2355 <tr>
2356 <th>Inherited:
2358 <td>no
2360 <tr>
2361 <th>Percentages:
2363 <td>relative to width/height of the <a
2364 href="#mask-box-image-area"><em>mask box image area</em></a>
2366 <tr>
2367 <th>Media:
2369 <td>visual
2371 <tr>
2372 <th>Computed value:
2374 <td>all <var><length></var>s made absolute, otherwise as specified
2376 <tr>
2377 <th>Animatable:
2379 <td>no
2380 </table>
2382 <p>The mask image is drawn inside an area called the <a
2383 href="#mask-box-image-area"><em>mask box image area</em></a>. This is an
2384 area whose boundaries by default correspond to the mask box, see ‘<a
2385 href="#mask-box-image-outset"><code
2386 class=property>mask-box-image-outset</code></a>’.
2388 <p>See <a
2389 href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing
2390 Areas: the ‘border-image-width’ property</a> <a href="#CSS3BG"
2391 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
2392 property values.
2394 <p class=note> Note that for SVG elements without an associated layout box
2395 the ‘<code class=property>border-width</code>’ is considered to be
2396 ‘<code class=css>0</code>’.
2398 <h3 id=the-mask-box-image-outset><span class=secno>7.4. </span>The ‘<a
2399 href="#mask-box-image-outset"><code
2400 class=property>mask-box-image-outset</code></a>’ property</h3>
2402 <table class=propdef>
2403 <tbody>
2404 <tr>
2405 <th>Name:
2407 <td><dfn id=mask-box-image-outset>mask-box-image-outset</dfn>
2409 <tr>
2410 <th><a href="#values">Value</a>:
2412 <td>[ <var><length></var> | <var><number></var> ]{1,4}
2414 <tr>
2415 <th>Initial:
2417 <td>0
2419 <tr>
2420 <th>Applies to:
2422 <td>All elements. In SVG, it applies to <a
2423 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2424 elements</a> and <a
2425 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2426 elements</a>.
2428 <tr>
2429 <th>Inherited:
2431 <td>no
2433 <tr>
2434 <th>Percentages:
2436 <td>N/A
2438 <tr>
2439 <th>Media:
2441 <td>visual
2443 <tr>
2444 <th>Computed value:
2446 <td>all <var><length></var>s made absolute, otherwise as specified
2448 <tr>
2449 <th>Animatable:
2451 <td>no
2452 </table>
2454 <p>The values specify the amount by which the <dfn
2455 id=mask-box-image-area>mask box image area</dfn> extends beyond the border
2456 box. If it has four values, they set the outsets on the top, right, bottom
2457 and left sides in that order. If the left is missing, it is the same as
2458 the right; if the bottom is missing, it is the same as the top; if the
2459 right is missing, it is the same as the top.
2461 <p>As with ‘<a href="#mask-box-image-width"><code
2462 class=property>mask-box-image-width</code></a>’, a <number>
2463 represents a multiple of the corresponding ‘<code
2464 class=property>border-width</code>’. Negative values are not allowed for
2465 any of the ‘<a href="#mask-box-image-outset"><code
2466 class=property>mask-box-image-outset</code></a>’ values.
2468 <p class=note>Note that for SVG elements without associated layout box the
2469 ‘<code class=property>border-width</code>’ is considered to be
2470 ‘<code class=css>0</code>’.
2472 <h3 id=the-mask-box-image-repeat><span class=secno>7.5. </span>The ‘<a
2473 href="#mask-box-image-repeat"><code
2474 class=property>mask-box-image-repeat</code></a>’ property</h3>
2476 <table class=propdef>
2477 <tbody>
2478 <tr>
2479 <th>Name:
2481 <td><dfn id=mask-box-image-repeat>mask-box-image-repeat</dfn>
2483 <tr>
2484 <th><a href="#values">Value</a>:
2486 <td>[ stretch | repeat | round | space ]{1,2}
2488 <tr>
2489 <th>Initial:
2491 <td>stretch
2493 <tr>
2494 <th>Applies to:
2496 <td>All elements. In SVG, it applies to <a
2497 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2498 elements</a> and <a
2499 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2500 elements</a>.
2502 <tr>
2503 <th>Inherited:
2505 <td>no
2507 <tr>
2508 <th>Percentages:
2510 <td>N/A
2512 <tr>
2513 <th>Media:
2515 <td>visual
2517 <tr>
2518 <th>Computed value:
2520 <td>as specified
2522 <tr>
2523 <th>Animatable:
2525 <td>no
2526 </table>
2528 <p>This property specifies how the images for the sides and the middle part
2529 of the mask image are scaled and tiled. The first keyword applies to the
2530 horizontal sides, the second to the vertical ones. If the second keyword
2531 is absent, it is assumed to be the same as the first.
2533 <p>See <a
2534 href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image
2535 Tiling: the ‘<code class=property>border-image-repeat</code>’
2536 property</a> <a href="#CSS3BG"
2537 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
2538 property values.
2540 <p>The exact process for scaling and tiling the mask box image parts is
2541 given in the section <a href="#masking-with-the-mask-box-image">Masking
2542 with the mask-box-image</a>.
2544 <h3 id=the-mask-box-image><span class=secno>7.6. </span>The ‘<a
2545 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
2546 property</h3>
2548 <table class=propdef>
2549 <tbody>
2550 <tr>
2551 <th>Name:
2553 <td><dfn id=mask-box-image0>mask-box-image</dfn>
2555 <tr>
2556 <th><a href="#values">Value</a>:
2558 <td> <var><‘<a href="#mask-box-image-source"><code
2559 class=property>mask-box-image-source</code></a>’></var> ||
2560 <var><‘<a href="#mask-box-image-slice"><code
2561 class=property>mask-box-image-slice</code></a>’></var> [ /
2562 <var><‘<a href="#mask-box-image-width"><code
2563 class=property>mask-box-image-width</code></a>’></var> | /
2564 <var><‘<a href="#mask-box-image-width"><code
2565 class=property>mask-box-image-width</code></a>’></var>? /
2566 <var><‘<a href="#mask-box-image-outset"><code
2567 class=property>mask-box-image-outset</code></a>’></var> ]? ||
2568 <var><‘<a href="#mask-box-image-repeat"><code
2569 class=property>mask-box-image-repeat</code></a>’></var>
2571 <tr>
2572 <th>Initial:
2574 <td>See individual properties
2576 <tr>
2577 <th>Applies to:
2579 <td>See individual properties
2581 <tr>
2582 <th>Inherited:
2584 <td>no
2586 <tr>
2587 <th>Percentages:
2589 <td>N/A
2591 <tr>
2592 <th>Media:
2594 <td>visual
2596 <tr>
2597 <th>Computed value:
2599 <td>See individual properties
2601 <tr>
2602 <th>Animatable:
2604 <td>See individual properties
2605 </table>
2607 <p>This is a shorthand property for setting ‘<a
2608 href="#mask-box-image-source"><code
2609 class=property>mask-box-image-source</code></a>’, ‘<a
2610 href="#mask-box-image-slice"><code
2611 class=property>mask-box-image-slice</code></a>’, ‘<a
2612 href="#mask-box-image-width"><code
2613 class=property>mask-box-image-width</code></a>’, ‘<a
2614 href="#mask-box-image-outset"><code
2615 class=property>mask-box-image-outset</code></a>’ and ‘<a
2616 href="#mask-box-image-repeat"><code
2617 class=property>mask-box-image-repeat</code></a>’. Omitted values are set
2618 to their initial values.
2620 <h3 id=masking-with-the-mask-box-image><span class=secno>7.7.
2621 </span>Masking with the mask-box-image</h3>
2623 <p> After the mask-box-image given by ‘<a
2624 href="#mask-box-image-source"><code
2625 class=property>mask-box-image-source</code></a>’ is sliced by the ‘<a
2626 href="#mask-box-image-slice"><code
2627 class=property>mask-box-image-slice</code></a>’ values, the resulting
2628 nine images are scaled, positioned, and tiled into their corresponding
2629 mask image regions in four steps as described in the section <a
2630 href="http://www.w3.org/TR/css3-background/#border-image-process">Drawing
2631 the Border Image</a> <a href="#CSS3BG"
2632 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
2634 <h2 id=clipping-paths><span class=secno>8. </span>Clipping paths</h2>
2636 <p> The clipping path restricts the region to which paint can be applied,
2637 the so-called clipping region. Conceptually, any parts of the drawing that
2638 lie outside of this region are not drawn. This includes any content,
2639 background, borders, text decoration, outline and visible scrolling
2640 mechanism of the element to which the clipping path is applied, and those
2641 of its descendants.
2643 <p> An element's ancestors may also clip portions of their content (e.g.,
2644 via their own ‘<a href="#ClipProperty"><code
2645 class=property>clip</code></a>’ or ‘<a href="#clip-path"><code
2646 class=property>clip-path</code></a>’ properties and/or if their ‘<code
2647 class=property>overflow</code>’ property is not ‘<code
2648 class=css>visible</code>’). What is rendered is the cumulative
2649 intersection.
2651 <p> If the clipping region exceeds the bounds of the UA's document window,
2652 content may be clipped to that window by the native operating environment.
2654 <h3 id=the-clip-path><span class=secno>8.1. </span>The ‘<a
2655 href="#clip-path"><code class=property>clip-path</code></a>’ property</h3>
2657 <table class=propdef>
2658 <tbody>
2659 <tr>
2660 <th>Name:
2662 <td><dfn id=clip-path>clip-path</dfn>
2664 <tr>
2665 <th>Value:
2667 <td><a href="#ltshapegt"><var><shape></var></a> | <a
2668 href="#ltclip-sourcegt"><var><clip-source></var></a> | none
2670 <tr>
2671 <th>Initial:
2673 <td>none
2675 <tr>
2676 <th>Applies to:
2678 <td>All elements. SVG <a
2679 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2680 elements</a>, <a
2681 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2682 elements</a> and <a class=element-name href="#ClipPathElement">‘<code
2683 class=property>clipPath</code>’</a>
2685 <tr>
2686 <th>Inherited:
2688 <td>no
2690 <tr>
2691 <th>Percentages:
2693 <td>as specified
2695 <tr>
2696 <th>Media:
2698 <td>visual
2700 <tr>
2701 <th>Computed value:
2703 <td>as specified, but with <a href="#lturlgt"><var><url></var></a>
2704 values made absolute
2706 <tr>
2707 <th>Animatable:
2709 <td>See <a
2710 href="http://dev.w3.org/csswg/css3-exclusions/#shape-inside">‘<code
2711 class=property>shape-inside</code>’</a> and <a
2712 href="http://dev.w3.org/csswg/css3-exclusions/#shape-outside">‘<code
2713 class=property>shape-outside</code>’</a> <a href="#CSS3-EXCLUSIONS"
2714 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>
2715 </table>
2717 <pre class=prod><dfn id=ltclip-sourcegt><clip-source></dfn> = <a
2718 href="#lturlgt"><var><url></var></a> | <var>child</var> | <a
2719 href="#ltchild-selectorgt"><var><child-selector></var></a>
2720 </pre>
2722 <dl>
2723 <dt> <dfn id=ltshapegt>‘<code class=css><shape></code>’</dfn>
2725 <dd> A basic shape function as defined in CSS3 Exclusions. The origin of
2726 clipping shapes is on the top left of the <a class=index
2727 href="#bounding-client-rect" id=bounding-client-rect0>bounding client
2728 rect</a>. Percentage values are resolved against the <a class=index
2729 href="#bounding-client-rect" id=bounding-client-rect1>bounding client
2730 rect</a> width and height. (See <a href="#CSS3-EXCLUSIONS"
2731 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>.)
2733 <dt>‘<code class=css>child</code>’
2735 <dd> A keyword to indicate that the last direct sibling <a
2736 class=element-name href="#ClipPathElement">‘<code
2737 class=property>clipPath</code>’</a> element of the element the ‘<a
2738 href="#clip-path"><code class=property>clip-path</code></a>’ property
2739 is applied should be used as the clip source. It is equivalent to
2740 ‘<code class=css>select(clipPath:last-of-type)</code>’.
2742 <dt>‘<a href="#ltchild-selectorgt"><code
2743 class=css><child-selector></code></a>’
2745 <dd> A comma-separated list of <a
2746 href="http://dev.w3.org/csswg/selectors4/#compound">compound
2747 selector</a>s scoped at the element to which the ‘<a
2748 href="#clip-path"><code class=property>clip-path</code></a>’ property
2749 is applied. The first matching element in <a
2750 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
2751 order</a> (as defined in <a href="#DOM"
2752 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
2753 list of selectors is taken as the clip source. If there are no matching
2754 elements the clip source is invalid.
2755 </dl>
2757 <h3 id=the-clip-rule><span class=secno>8.2. </span>The ‘<a
2758 href="#clip-rule"><code class=property>clip-rule</code></a>’ property</h3>
2760 <table class=propdef>
2761 <tbody>
2762 <tr>
2763 <th>Name:
2765 <td><dfn id=clip-rule>clip-rule</dfn>
2767 <tr>
2768 <th>Value:
2770 <td>nonzero | evenodd
2772 <tr>
2773 <th>Initial:
2775 <td>nonzero
2777 <tr>
2778 <th>Applies to:
2780 <td><a
2781 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2782 elements</a> within a <a class=element-name
2783 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
2784 element
2786 <tr>
2787 <th>Inherited:
2789 <td>yes
2791 <tr>
2792 <th>Percentages:
2794 <td>N/A
2796 <tr>
2797 <th>Media:
2799 <td>visual
2801 <tr>
2802 <th>Computed value:
2804 <td>as specified
2806 <tr>
2807 <th>Animatable:
2809 <td>no
2810 </table>
2812 <dl>
2813 <dt><dfn id=nonzero>‘<code class=css>nonzero</code>’</dfn>
2815 <dd>See description of <a class=property
2816 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
2817 class=property>fill-rule</code>’</a> property <a href="#SVG11"
2818 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
2820 <dt><dfn id=evenodd>‘<code class=css>evenodd</code>’</dfn>
2822 <dd>See description of <a class=property
2823 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
2824 class=property>fill-rule</code>’</a> property <a href="#SVG11"
2825 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
2826 </dl>
2828 <p>The ‘<a href="#clip-rule"><code class=property>clip-rule</code></a>’
2829 property only applies to graphics elements that are contained within a <a
2830 class=element-name href="#ClipPathElement">‘<code
2831 class=property>clipPath</code>’</a> element.
2833 <div class=example> The following fragment of code will cause an evenodd
2834 clipping rule to be applied to the clipping path because ‘<a
2835 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
2836 specified on the <a class=element-name
2837 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
2838 class=property>path</code>’</a> element that defines the clipping shape:
2840 <pre>
2841 <g clip-rule="nonzero">
2842 <clipPath id="MyClip">
2843 <path d="..." clip-rule="evenodd" />
2844 </clipPath>
2845 <rect clip-path="url(#MyClip)" ... />
2846 </g>
2847 </pre>
2849 <p>whereas the following fragment of code will <em>not</em> cause an
2850 evenodd clipping rule to be applied because the ‘<a
2851 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
2852 specified on the referencing element, not on the object defining the
2853 clipping shape:
2855 <pre>
2856 <g clip-rule="nonzero">
2857 <clipPath id="MyClip">
2858 <path d="..." />
2859 </clipPath>
2860 <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
2861 </g>
2862 </pre>
2863 </div>
2865 <h3 id=clip-property><span class=secno>8.3. </span>The ‘<a
2866 href="#ClipProperty"><code class=property>clip</code></a>’ property</h3>
2868 <table class=propdef>
2869 <tbody>
2870 <tr>
2871 <th>Name:
2873 <td><dfn id=ClipProperty>clip</dfn>
2875 <tr>
2876 <th>Value:
2878 <td><a href="#ltshapegt"><var><shape></var></a> | auto
2880 <tr>
2881 <th>Initial:
2883 <td>see individual properties
2885 <tr>
2886 <th>Applies to:
2888 <td>Absolutely positioned elements. In SVG, it applies to <a
2889 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
2890 which establish a new viewport</a>, <a class=element-name
2891 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
2892 class=property>pattern</code>’</a> elements and <a class=element-name
2893 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
2894 class=property>marker</code>’</a> elements.
2896 <tr>
2897 <th>Inherited:
2899 <td>no
2901 <tr>
2902 <th>Percentages:
2904 <td>N/A
2906 <tr>
2907 <th>Media:
2909 <td>visual
2911 <tr>
2912 <th>Computed value:
2914 <td>as specified
2916 <tr>
2917 <th>Animatable:
2919 <td>as <a
2920 href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a>
2921 </table>
2923 <p class=note>With this specification the ‘<a href="#ClipProperty"><code
2924 class=property>clip</code></a>’ property is deprecated. Authors are
2925 encouraged to use the ‘<a href="#clip-path"><code
2926 class=property>clip-path</code></a>’ property instead. UAs must support
2927 the ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
2928 property.
2930 <p> The ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
2931 property applies only to absolutely positioned elements. In SVG, it
2932 applies to <a
2933 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
2934 which establish a new viewport</a>, <a class=element-name
2935 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
2936 class=property>pattern</code>’</a> elements and <a class=element-name
2937 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
2938 class=property>marker</code>’</a> elements. Values have the following
2939 meanings:
2941 <dl>
2942 <dt>‘<a href="#auto"><code class=css>auto</code></a>’
2944 <dd>The element does not clip.
2946 <dt><a href="#ltshapegt"><var><shape></var></a>
2948 <dd>
2949 <p> In CSS 2.1, the only valid <shape> value is: rect(<a
2950 href="#lttopgt"><var><top></var></a>, <a
2951 href="#ltrightgt"><var><right></var></a>, <a
2952 href="#ltbottomgt"><var><bottom></var></a>, <a
2953 href="#ltleftgt"><var><left></var></a>) where <a
2954 href="#lttopgt"><var><top></var></a> and <a
2955 href="#ltbottomgt"><var><bottom></var></a> specify offsets from
2956 the top border edge of the box, and <a
2957 href="#ltrightgt"><var><right></var></a>, and <a
2958 href="#ltleftgt"><var><left></var></a> specify offsets from the
2959 left border edge of the box. Authors should separate offset values with
2960 commas. User agents must support separation with commas, but may also
2961 support separation without commas (but not a combination), because a
2962 previous revision of this specification was ambiguous in this respect.
2964 <p><dfn id=lttopgt><top></dfn>, <dfn
2965 id=ltrightgt><right></dfn>, <dfn
2966 id=ltbottomgt><bottom></dfn>, and <dfn
2967 id=ltleftgt><left></dfn> may either have a
2968 <var><length></var> value or ‘<a href="#auto"><code
2969 class=css>auto</code></a>’. Negative lengths are permitted. The value
2970 ‘<a href="#auto"><code class=css>auto</code></a>’ means that a given
2971 edge of the clipping region will be the same as the edge of the
2972 element's generated border box (i.e., ‘<a href="#auto"><code
2973 class=css>auto</code></a>’ means the same as ‘<code
2974 class=css>0</code>’ for <a href="#lttopgt"><var><top></var></a>
2975 and <a href="#ltleftgt"><var><left></var></a>, the same as the
2976 used value of the height plus the sum of vertical padding and border
2977 widths for <a href="#ltbottomgt"><var><bottom></var></a>, and the
2978 same as the used value of the width plus the sum of the horizontal
2979 padding and border widths for <a
2980 href="#ltrightgt"><var><right></var></a>, such that four ‘<a
2981 href="#auto"><code class=property>auto</code></a>’ values result in
2982 the clipping region being the same as the element's border box).
2984 <p> When coordinates are rounded to pixel coordinates, care should be
2985 taken that no pixels remain visible when <a
2986 href="#ltleftgt"><var><left></var></a> and <a
2987 href="#ltrightgt"><var><right></var></a> have the same value (or
2988 <a href="#lttopgt"><var><top></var></a> and <a
2989 href="#ltbottomgt"><var><bottom></var></a> have the same value),
2990 and conversely that no pixels within the element's border box remain
2991 hidden when these values are ‘<a href="#auto"><code
2992 class=css>auto</code></a>’.
2993 </dl>
2995 <div class=example>
2996 <p> Example: The following two rules:
2998 <pre><code>
2999 p#one { clip: rect(5px, 40px, 45px, 5px); }
3000 p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
3002 <p> and assuming both Ps are 50 by 55 pixel, will create, respectively,
3003 the rectangular clipping regions delimited by the dashed lines in the
3004 following illustrations:
3006 <div class=figure> <img alt="Values for rect shape" height=577
3007 src="images/clip.png" width=292>
3008 <p class=caption>This diagram illustrates two block boxes, one above the
3009 other, with rectangular clipping regions of different dimensions. (See
3010 <a href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long
3011 description</a>.)
3012 </div>
3013 </div>
3015 <h3 id=ClipPathElement><span class=secno>8.4. </span>The <a
3016 class=element-name href="#ClipPathElement">‘<code
3017 class=property>clipPath</code>’</a> element</h3>
3019 <table class=propdef summary="clipPath element">
3020 <tbody>
3021 <tr>
3022 <th>Name:
3024 <td><dfn id=clippath>clipPath</dfn>
3026 <tr>
3027 <th>Categories:
3029 <td>None.
3031 <tr>
3032 <th>Content model:
3034 <td>Any number of the following elements, in any order:
3035 <ul class=no-bullets>
3036 <li><a
3037 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
3038 <span class=expanding> — <a
3039 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
3040 class=element-name>‘desc’</span></a>, <a
3041 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
3042 class=element-name>‘title’</span></a>, <a
3043 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
3044 class=element-name>‘metadata’</span></a></span>
3046 <li><a
3047 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
3048 <span class=expanding> — <a
3049 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
3050 class=element-name>‘animate’</span></a>, <a
3051 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
3052 class=element-name>‘animateColor’</span></a>, <a
3053 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
3054 class=element-name>‘animateMotion’</span></a>, <a
3055 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
3056 class=element-name>‘animateTransform’</span></a>, <a
3057 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
3058 class=element-name>‘set’</span></a></span>
3060 <li><a
3061 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
3062 <span class=expanding> — <a
3063 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
3064 class=element-name>‘circle’</span></a>, <a
3065 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
3066 class=element-name>‘ellipse’</span></a>, <a
3067 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
3068 class=element-name>‘line’</span></a>, <a
3069 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
3070 class=element-name>‘path’</span></a>, <a
3071 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
3072 class=element-name>‘polygon’</span></a>, <a
3073 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
3074 class=element-name>‘polyline’</span></a>, <a
3075 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
3076 class=element-name>‘rect’</span></a></span>
3078 <li><a
3079 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
3080 class=element-name>‘text’</span></a>
3082 <li><a
3083 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
3084 class=element-name>‘use’</span></a>
3085 </ul>
3087 <tr>
3088 <th>Attributes:
3090 <td>
3091 <ul class=no-bullets>
3092 <li><a
3093 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
3094 processing attributes</a><span class=expanding> — <a
3095 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
3096 class=attr-name>‘requiredFeatures’</span></a>, <a
3097 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
3098 class=attr-name>‘requiredExtensions’</span></a>, <a
3099 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
3100 class=attr-name>‘systemLanguage’</span></a></span>
3102 <li><a
3103 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
3104 attributes</a><span class=expanding> — <a
3105 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
3106 class=attr-name>‘id’</span></a>, <a
3107 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
3108 class=attr-name>‘xml:base’</span></a>, <a
3109 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
3110 class=attr-name>‘xml:lang’</span></a>, <a
3111 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
3112 class=attr-name>‘xml:space’</span></a></span>
3114 <li><a
3115 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
3116 attributes</a><span class=expanding> — <a
3117 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
3118 class=attr-name>‘alignment-baseline’</span></a>, <a
3119 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
3120 class=attr-name>‘baseline-shift’</span></a>, <a
3121 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
3122 class=attr-name>‘clip’</span></a>, <a
3123 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
3124 class=attr-name>‘clip-path’</span></a>, <a
3125 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
3126 class=attr-name>‘clip-rule’</span></a>, <a
3127 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
3128 class=attr-name>‘color’</span></a>, <a
3129 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
3130 class=attr-name>‘color-interpolation’</span></a>, <a
3131 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
3132 class=attr-name>‘color-interpolation-filters’</span></a>, <a
3133 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
3134 class=attr-name>‘color-profile’</span></a>, <a
3135 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
3136 class=attr-name>‘color-rendering’</span></a>, <a
3137 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
3138 class=attr-name>‘cursor’</span></a>, <a
3139 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
3140 class=attr-name>‘direction’</span></a>, <a
3141 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
3142 class=attr-name>‘display’</span></a>, <a
3143 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
3144 class=attr-name>‘dominant-baseline’</span></a>, <a
3145 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
3146 class=attr-name>‘enable-background’</span></a>, <a
3147 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
3148 class=attr-name>‘fill’</span></a>, <a
3149 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
3150 class=attr-name>‘fill-opacity’</span></a>, <a
3151 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
3152 class=attr-name>‘fill-rule’</span></a>, <a
3153 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
3154 class=attr-name>‘filter’</span></a>, <a
3155 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
3156 class=attr-name>‘flood-color’</span></a>, <a
3157 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
3158 class=attr-name>‘flood-opacity’</span></a>, <a
3159 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
3160 class=attr-name>‘font’</span></a>, <a
3161 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
3162 class=attr-name>‘font-family’</span></a>, <a
3163 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
3164 class=attr-name>‘font-size’</span></a>, <a
3165 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
3166 class=attr-name>‘font-size-adjust’</span></a>, <a
3167 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
3168 class=attr-name>‘font-stretch’</span></a>, <a
3169 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
3170 class=attr-name>‘font-style’</span></a>, <a
3171 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
3172 class=attr-name>‘font-variant’</span></a>, <a
3173 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
3174 class=attr-name>‘font-weight’</span></a>, <a
3175 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
3176 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
3177 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
3178 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
3179 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
3180 class=attr-name>‘image-rendering’</span></a>, <a
3181 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
3182 class=attr-name>‘kerning’</span></a>, <a
3183 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
3184 class=attr-name>‘letter-spacing’</span></a>, <a
3185 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
3186 class=attr-name>‘lighting-color’</span></a>, <a
3187 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
3188 class=attr-name>‘marker’</span></a>, <a
3189 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
3190 class=attr-name>‘marker-end’</span></a>, <a
3191 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
3192 class=attr-name>‘marker-mid’</span></a>, <a
3193 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
3194 class=attr-name>‘marker-start’</span></a>, <a
3195 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
3196 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
3197 class=attr-name>‘opacity’</span></a>, <a
3198 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
3199 class=attr-name>‘overflow’</span></a>, <a
3200 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
3201 class=attr-name>‘pointer-events’</span></a>, <a
3202 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
3203 class=attr-name>‘shape-rendering’</span></a>, <a
3204 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
3205 class=attr-name>‘stop-color’</span></a>, <a
3206 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
3207 class=attr-name>‘stop-opacity’</span></a>, <a
3208 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
3209 class=attr-name>‘stroke’</span></a>, <a
3210 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
3211 class=attr-name>‘stroke-dasharray’</span></a>, <a
3212 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
3213 class=attr-name>‘stroke-dashoffset’</span></a>, <a
3214 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
3215 class=attr-name>‘stroke-linecap’</span></a>, <a
3216 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
3217 class=attr-name>‘stroke-linejoin’</span></a>, <a
3218 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
3219 class=attr-name>‘stroke-miterlimit’</span></a>, <a
3220 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
3221 class=attr-name>‘stroke-opacity’</span></a>, <a
3222 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
3223 class=attr-name>‘stroke-width’</span></a>, <a
3224 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
3225 class=attr-name>‘text-anchor’</span></a>, <a
3226 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
3227 class=attr-name>‘text-decoration’</span></a>, <a
3228 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
3229 class=attr-name>‘text-rendering’</span></a>, <a
3230 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
3231 class=attr-name>‘unicode-bidi’</span></a>, <a
3232 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
3233 class=attr-name>‘visibility’</span></a>, <a
3234 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
3235 class=attr-name>‘word-spacing’</span></a>, <a
3236 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
3237 class=attr-name>‘writing-mode’</span></a></span>
3239 <li><a
3240 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
3241 class=attr-name>‘class’</span></a>
3243 <li><a
3244 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
3245 class=attr-name>‘style’</span></a>
3247 <li><a
3248 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute"><span
3249 class=attr-name>‘externalResourcesRequired’</span></a>
3251 <li><a
3252 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute"><span
3253 class=attr-name>‘transform’</span></a>
3255 <li><a href="#ClipPathElementClipPathUnitsAttribute"><span
3256 class=attr-name>‘clipPathUnits’</span></a>
3257 </ul>
3259 <tr>
3260 <th>DOM Interfaces:
3262 <td><a class=idlinterface
3263 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
3264 </table>
3266 <div class=adef-list>
3267 <p><em>Attribute definitions:</em>
3269 <dl>
3270 <dt id=ClipPathElementClipPathUnitsAttribute><span
3271 class=adef>clipPathUnits</span> = "<em>userSpaceOnUse</em> |
3272 <em>objectBoundingBox</em>"
3274 <dd>Defines the coordinate system for the contents of the <a
3275 class=element-name href="#ClipPathElement">‘<code
3276 class=property>clipPath</code>’</a>.<br>
3277 If <span class=attr-value>clipPathUnits="userSpaceOnUse"</span>, the
3278 contents of the <a class=element-name href="#ClipPathElement">‘<code
3279 class=property>clipPath</code>’</a> represent values in the current
3280 user coordinate system in place at the time when the <a
3281 class=element-name href="#ClipPathElement">‘<code
3282 class=property>clipPath</code>’</a> element is referenced (i.e., the
3283 user coordinate system for the element referencing the <a
3284 class=element-name href="#ClipPathElement">‘<code
3285 class=property>clipPath</code>’</a> element via the <a class=property
3286 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
3287 class=property>clip-path</code>’</a> property).<br>
3288 If <span class=attr-value>clipPathUnits="objectBoundingBox"</span>, then
3289 the user coordinate system for the contents of the <a class=element-name
3290 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3291 element is established using the bounding box of the element to which
3292 the clipping path is applied (see <a class=index
3293 href="#object-bounding-box-units" id=object-bounding-box-units0>object
3294 bounding box units</a>).<br>
3295 If attribute <a class=attr-name
3296 href="#ClipPathElementClipPathUnitsAttribute">‘<code
3297 class=property>clipPathUnits</code>’</a> is not specified, then the
3298 effect is as if a value of <span class=attr-value>‘<code
3299 class=property>userSpaceOnUse</code>’</span> were specified.<br>
3300 <span class=anim-target>Animatable: yes.</span>
3301 </dl>
3302 </div>
3304 <p>CSS properties inherit into the <a class=element-name
3305 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3306 element from its ancestors; properties do <em>not</em> inherit from the
3307 element referencing the <a class=element-name
3308 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3309 element.
3311 <p><a class=element-name href="#ClipPathElement">‘<code
3312 class=property>clipPath</code>’</a> elements are never rendered
3313 directly; their only usage is as something that can be referenced using
3314 the <a class=property
3315 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
3316 class=property>clip-path</code>’</a> property. The <a class=property
3317 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
3318 class=property>display</code>’</a> property does not apply to the <a
3319 class=element-name href="#ClipPathElement">‘<code
3320 class=property>clipPath</code>’</a> element; thus, <a class=element-name
3321 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3322 elements are not directly rendered even if the ‘<code
3323 class=property>display</code>’ property is set to a value other than <a
3324 class=prop-value href="#none">none</a>, and <a class=element-name
3325 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3326 elements are available for referencing even when the <a class=property
3327 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
3328 class=property>display</code>’</a> property on the <a class=element-name
3329 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3330 element or any of its ancestors is set to <a class=prop-value
3331 href="#none">none</a>.
3333 <p>A <a class=element-name href="#ClipPathElement">‘<code
3334 class=property>clipPath</code>’</a> element can contain <a
3335 class=element-name
3336 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
3337 class=property>path</code>’</a> elements, <a class=element-name
3338 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
3339 class=property>text</code>’</a> elements, <a
3340 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
3341 shapes</a> (such as <a class=element-name
3342 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
3343 class=property>circle</code>’</a>) or a <a class=element-name
3344 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
3345 class=property>use</code>’</a> element. If a <a class=element-name
3346 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
3347 class=property>use</code>’</a> element is a child of a <a
3348 class=element-name href="#ClipPathElement">‘<code
3349 class=property>clipPath</code>’</a> element, it must directly reference
3350 <a class=element-name
3351 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
3352 class=property>path</code>’</a>, <a class=element-name
3353 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
3354 class=property>text</code>’</a> or <a
3355 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
3356 shapes</a> elements. Indirect references are an error and the <a
3357 class=element-name href="#ClipPathElement">‘<code
3358 class=property>clipPath</code>’</a> element must be ignored.
3360 <p>The raw geometry of each child element exclusive of rendering properties
3361 such as ‘<code class=property>fill</code>’, ‘<code
3362 class=property>stroke</code>’, ‘<code
3363 class=property>stroke-width</code>’ within a <a class=element-name
3364 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3365 conceptually defines a 1-bit mask (with the possible exception of
3366 anti-aliasing along the edge of the geometry) which represents the
3367 silhouette of the graphics associated with that element. Anything outside
3368 the outline of the object is masked out. If a child element is made
3369 invisible by ‘<code class=property>display</code>’ or ‘<code
3370 class=property>visibility</code>’ it does not contribute to the clipping
3371 path. When the <a class=element-name href="#ClipPathElement">‘<code
3372 class=property>clipPath</code>’</a> element contains multiple child
3373 elements, the silhouettes of the child elements are logically OR'd
3374 together to create a single silhouette which is then used to restrict the
3375 region onto which paint can be applied. Thus, a point is inside the
3376 clipping path if it is inside any of the children of the <a
3377 class=element-name href="#ClipPathElement">‘<code
3378 class=property>clipPath</code>’</a>.
3380 <p>For a given graphics element, the actual clipping path used will be the
3381 intersection of the clipping path specified by its ‘<a
3382 href="#clip-path"><code class=property>clip-path</code></a>’ property
3383 (if any) with any clipping paths on its ancestors, as specified by the
3384 ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
3385 property on the elements which establish a new viewport. (See <a
3386 href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>)
3388 <p>A couple of additions:
3390 <ul>
3391 <li>The <a class=element-name href="#ClipPathElement">‘<code
3392 class=property>clipPath</code>’</a> element itself and its child
3393 elements do <em>not</em> inherit clipping paths from the ancestors of the
3394 <a class=element-name href="#ClipPathElement">‘<code
3395 class=property>clipPath</code>’</a> element.
3397 <li>The <a class=element-name href="#ClipPathElement">‘<code
3398 class=property>clipPath</code>’</a> element or any of its children can
3399 specify property ‘<a href="#clip-path"><code
3400 class=property>clip-path</code></a>’.<br>
3401 If a valid ‘<a href="#clip-path"><code
3402 class=property>clip-path</code></a>’ reference is placed on a <a
3403 class=element-name href="#ClipPathElement">‘<code
3404 class=property>clipPath</code>’</a> element, the resulting clipping
3405 path is the intersection of the contents of the <a class=element-name
3406 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3407 element with the referenced clipping path.<br>
3408 If a valid ‘<a href="#clip-path"><code
3409 class=property>clip-path</code></a>’ reference is placed on one of the
3410 children of a <a class=element-name href="#ClipPathElement">‘<code
3411 class=property>clipPath</code>’</a> element, then the given child
3412 element is clipped by the referenced clipping path before OR'ing the
3413 silhouette of the child element with the silhouettes of the other child
3414 elements.
3416 <li>An empty clipping path will completely clip away the element that had
3417 the ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
3418 property applied.
3419 </ul>
3421 <h3 id=clipPath-geometry><span class=secno>8.5. </span>Clipping paths,
3422 geometry, and pointer events</h3>
3424 <p>A clipping path is conceptually equivalent to a custom viewport for the
3425 referencing element. Thus, it affects the rendering of an element, but not
3426 the element's inherent geometry. The <a class=index
3427 href="#bounding-client-rect" id=bounding-client-rect2>bounding client
3428 rect</a> of a clipped element (that is, an element which references a <a
3429 class=element-name href="#ClipPathElement">‘<code
3430 class=property>clipPath</code>’</a> element via a ‘<a
3431 href="#clip-path"><code class=property>clip-path</code></a>’ property,
3432 or a child of the referencing element) must remain the same as if it were
3433 not clipped.
3435 <p>By default, <a
3436 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty">pointer
3437 events</a> must not be dispatched on the clipped (non-visible) regions of
3438 a shape. For example, a circle with a radius of 10 which is clipped to a
3439 circle with a radius of 5 will not receive <span class=event-name>‘<code
3440 class=property>click</code>’</span> events outside the smaller radius.
3441 Later versions of this specification may define new properties to enable
3442 fine-grained control over the interactions between hit testing and
3443 clipping.
3445 <h2 id=security><span class=secno>9. </span>Security</h2>
3447 <h3 id=origin-restrictions><span class=secno>9.1. </span>Origin
3448 Restrictions</h3>
3450 <p> External references to resources like <a class=element-name
3451 href="#MaskElement">‘<code class=property>mask</code>’</a> or <a
3452 class=element-name href="#ClipPathElement">‘<code
3453 class=property>clipPath</code>’</a> must not violate the same origin
3454 restrictions <a href="#CORS" rel=biblioentry>[CORS]<!--{{!CORS}}--></a>.
3456 <p>This restriction includes:
3458 <ul>
3459 <li>Any images, either as content or via styling, that are not exposed
3460 with CORS
3462 <li>Any tainted canvas
3464 <li>Any cross-origin content referenced by ‘<code
3465 class=css>xlink:href</code>’ or <use>
3466 </ul>
3468 <p> If content falls under this restriction, the resource must be rejected.
3469 The element is drawn as if the resource was not specified (i.e. the ‘<a
3470 href="#clip-path"><code class=property>clip-path</code></a>’ or ‘<a
3471 href="#mask"><code class=property>mask</code></a>’ property were set to
3472 ‘<a href="#none"><code class=css>none</code></a>’).
3474 <h2 id=DOMInterfaces><span class=secno>10. </span>DOM interfaces</h2>
3476 <h3 id=InterfaceSVGClipPathElement><span class=secno>10.1. </span>Interface
3477 SVGClipPathElement</h3>
3479 <p>The <a href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
3480 interface corresponds to the <a class=element-name
3481 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3482 element.
3484 <pre class=idl>interface <b>SVGClipPathElement</b> : <a
3485 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
3486 readonly attribute <a
3487 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3488 href="#SVGClipPathElement__clipPathUnits">clipPathUnits</a>;
3489 readonly attribute <a
3490 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a> <a
3491 href="#SVGClipPathElement__transform">transform</a>;
3492 };
3494 <a
3495 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a> implements <a
3496 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
3498 <dl class=interface>
3499 <dt class=attributes-header>Attributes:
3501 <dd>
3502 <dl class=attributes>
3503 <dt class="attribute first-child"
3504 id="SVGClipPathElement__clipPathUnits"><b>clipPathUnits</b><span
3505 class=idl-type-parenthetical> (readonly <a
3506 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3508 <dd class=attribute>
3509 <div> Corresponds to attribute <a class=attr-name
3510 href="#ClipPathElementClipPathUnitsAttribute">‘<code
3511 class=property>clipPathUnits</code>’</a> on the given <a
3512 class=element-name href="#ClipPathElement">‘<code
3513 class=property>clipPath</code>’</a> element. Takes one of the
3514 constants defined in <a
3515 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3517 <dt class="attribute first-child"
3518 id="SVGClipPathElement__transform"><b>transform</b><span
3519 class=idl-type-parenthetical> (readonly <a
3520 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>)</span>
3522 <dd class=attribute>
3523 <div> Corresponds to attribute <a class=attr-name
3524 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute">‘<code
3525 class=property>transform</code>’</a> on the given element.</div>
3526 </dl>
3527 </dl>
3529 <h3 id=InterfaceSVGMaskElement><span class=secno>10.2. </span>Interface
3530 SVGMaskElement</h3>
3532 <p>The <a href="#InterfaceSVGMaskElement">SVGMaskElement</a> interface
3533 corresponds to the <a class=element-name href="#MaskElement">‘<code
3534 class=property>mask</code>’</a> element.
3536 <pre class=idl>interface <b>SVGMaskElement</b> : <a
3537 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
3538 readonly attribute <a
3539 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3540 href="#SVGMaskElement__maskUnits">maskUnits</a>;
3541 readonly attribute <a
3542 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3543 href="#SVGMaskElement__maskContentUnits">maskContentUnits</a>;
3544 readonly attribute <a
3545 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3546 href="#SVGMaskElement__x">x</a>;
3547 readonly attribute <a
3548 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3549 href="#SVGMaskElement__y">y</a>;
3550 readonly attribute <a
3551 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3552 href="#SVGMaskElement__width">width</a>;
3553 readonly attribute <a
3554 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3555 href="#SVGMaskElement__height">height</a>;
3556 };
3558 <a
3559 href="#InterfaceSVGMaskElement">SVGMaskElement</a> implements <a
3560 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
3562 <dl class=interface>
3563 <dt class=attributes-header>Attributes:
3565 <dd>
3566 <dl class=attributes>
3567 <dt class="attribute first-child"
3568 id="SVGMaskElement__maskUnits"><b>maskUnits</b><span
3569 class=idl-type-parenthetical> (readonly <a
3570 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3572 <dd class=attribute>
3573 <div> Corresponds to attribute <a class=attr-name
3574 href="#MaskElementMaskUnitsAttribute">‘<code
3575 class=property>maskUnits</code>’</a> on the given <a
3576 class=element-name href="#MaskElement">‘<code
3577 class=property>mask</code>’</a> element. Takes one of the constants
3578 defined in <a
3579 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3581 <dt class=attribute
3582 id="SVGMaskElement__maskContentUnits"><b>maskContentUnits</b><span
3583 class=idl-type-parenthetical> (readonly <a
3584 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3586 <dd class=attribute>
3587 <div> Corresponds to attribute <a class=attr-name
3588 href="#MaskElementMaskContentUnitsAttribute">‘<code
3589 class=property>maskContentUnits</code>’</a> on the given <a
3590 class=element-name href="#MaskElement">‘<code
3591 class=property>mask</code>’</a> element. Takes one of the constants
3592 defined in <a
3593 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3595 <dt class=attribute id="SVGMaskElement__x"><b>x</b><span
3596 class=idl-type-parenthetical> (readonly <a
3597 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3599 <dd class=attribute>
3600 <div> Corresponds to attribute <a class=attr-name
3601 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>
3602 on the given <a class=element-name href="#MaskElement">‘<code
3603 class=property>mask</code>’</a> element.</div>
3605 <dt class=attribute id="SVGMaskElement__y"><b>y</b><span
3606 class=idl-type-parenthetical> (readonly <a
3607 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3609 <dd class=attribute>
3610 <div> Corresponds to attribute <a class=attr-name
3611 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>
3612 on the given <a class=element-name href="#MaskElement">‘<code
3613 class=property>mask</code>’</a> element.</div>
3615 <dt class=attribute id="SVGMaskElement__width"><b>width</b><span
3616 class=idl-type-parenthetical> (readonly <a
3617 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3619 <dd class=attribute>
3620 <div> Corresponds to attribute <a class=attr-name
3621 href="#MaskElementWidthAttribute">‘<code
3622 class=property>width</code>’</a> on the given <a class=element-name
3623 href="#MaskElement">‘<code class=property>mask</code>’</a>
3624 element.</div>
3626 <dt class=attribute id="SVGMaskElement__height"><b>height</b><span
3627 class=idl-type-parenthetical> (readonly <a
3628 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3630 <dd class=attribute>
3631 <div> Corresponds to attribute <a class=attr-name
3632 href="#MaskElementHeightAttribute">‘<code
3633 class=property>height</code>’</a> on the given <a class=element-name
3634 href="#MaskElement">‘<code class=property>mask</code>’</a>
3635 element.</div>
3636 </dl>
3637 </dl>
3639 <h2 id=conformance><span class=secno>11. </span> Conformance</h2>
3641 <h3 id=conventions><span class=secno>11.1. </span> Document conventions</h3>
3643 <p>Conformance requirements are expressed with a combination of descriptive
3644 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
3645 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
3646 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
3647 normative parts of this document are to be interpreted as described in RFC
3648 2119. However, for readability, these words do not appear in all uppercase
3649 letters in this specification.
3651 <p>All of the text of this specification is normative except sections
3652 explicitly marked as non-normative, examples, and notes. <a
3653 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
3655 <p>Examples in this specification are introduced with the words “for
3656 example” or are set apart from the normative text with
3657 <code>class="example"</code>, like this:
3659 <div class=example>
3660 <p>This is an example of an informative example.
3661 </div>
3663 <p>Informative notes begin with the word “Note” and are set apart from
3664 the normative text with <code>class="note"</code>, like this:
3666 <p class=note>Note, this is an informative note.
3668 <h3 id=conformance-classes><span class=secno>11.2. </span> Conformance
3669 classes</h3>
3671 <p>Conformance to CSS Masking is defined for three conformance classes:
3673 <dl>
3674 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
3675 sheet</dfn>
3677 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
3678 style sheet</a>.
3680 <dt><dfn id=renderer>renderer</dfn>
3682 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
3683 that interprets the semantics of a style sheet and renders documents that
3684 use them.
3686 <dt><dfn id=authoring-tool>authoring tool</dfn>
3688 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
3689 that writes a style sheet.
3690 </dl>
3692 <p>A style sheet is conformant to CSS Masking if all of its statements that
3693 use syntax defined in this module are valid according to the generic CSS
3694 grammar and the individual grammars of each feature defined in this
3695 module.
3697 <p>A renderer is conformant to CSS Masking if, in addition to interpreting
3698 the style sheet as defined by the appropriate specifications, it supports
3699 all the features defined by CSS Masking by parsing them correctly and
3700 rendering the document accordingly. However, the inability of a UA to
3701 correctly render a document due to limitations of the device does not make
3702 the UA non-conformant. (For example, a UA is not required to render color
3703 on a monochrome monitor.)
3705 <p>An authoring tool is conformant to CSS Masking if it writes style sheets
3706 that are syntactically correct according to the generic CSS grammar and
3707 the individual grammars of each feature in this module, and meet all other
3708 conformance requirements of style sheets as described in this module.
3710 <h3 id=partial><span class=secno>11.3. </span> Partial implementations</h3>
3712 <p>So that authors can exploit the forward-compatible parsing rules to
3713 assign fallback values, CSS renderers <strong>must</strong> treat as
3714 invalid (and <a
3715 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
3716 appropriate</a>) any at-rules, properties, property values, keywords, and
3717 other syntactic constructs for which they have no usable level of support.
3718 In particular, user agents <strong>must not</strong> selectively ignore
3719 unsupported component values and honor supported values in a single
3720 multi-value property declaration: if any value is considered invalid (as
3721 unsupported values must be), CSS requires that the entire declaration be
3722 ignored.
3724 <h3 id=experimental><span class=secno>11.4. </span> Experimental
3725 implementations</h3>
3727 <p>To avoid clashes with future CSS features, the CSS2.1 specification
3728 reserves a <a
3729 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
3730 syntax</a> for proprietary and experimental extensions to CSS.
3732 <p>Prior to a specification reaching the Candidate Recommendation stage in
3733 the W3C process, all implementations of a CSS feature are considered
3734 experimental. The CSS Working Group recommends that implementations use a
3735 vendor-prefixed syntax for such features, including those in W3C Working
3736 Drafts. This avoids incompatibilities with future changes in the draft.
3738 <h3 id=testing><span class=secno>11.5. </span> Non-experimental
3739 implementations</h3>
3741 <p>Once a specification reaches the Candidate Recommendation stage,
3742 non-experimental implementations are possible, and implementors should
3743 release an unprefixed implementation of any CR-level feature they can
3744 demonstrate to be correctly implemented according to spec.
3746 <p>To establish and maintain the interoperability of CSS across
3747 implementations, the CSS Working Group requests that non-experimental CSS
3748 renderers submit an implementation report (and, if necessary, the
3749 testcases used for that implementation report) to the W3C before releasing
3750 an unprefixed implementation of any CSS features. Testcases submitted to
3751 W3C are subject to review and correction by the CSS Working Group.
3753 <p>Further information on submitting testcases and implementation reports
3754 can be found from on the CSS Working Group's website at <a
3755 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
3756 Questions should be directed to the <a
3757 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
3758 mailing list.
3760 <h2 class=no-num id=references> References</h2>
3762 <h3 class=no-num id=normative-references> Normative references</h3>
3763 <!--begin-normative-->
3764 <!-- Sorted by label -->
3766 <dl class=bibliography>
3767 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3768 <!---->
3770 <dt id=CORS>[CORS]
3772 <dd>Anne van Kesteren. <a
3773 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
3774 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
3775 Recommendation. (Work in progress.) URL: <a
3776 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
3777 </dd>
3778 <!---->
3780 <dt id=CSS21>[CSS21]
3782 <dd>Bert Bos; et al. <a
3783 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
3784 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
3785 2011. W3C Recommendation. URL: <a
3786 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
3787 </dd>
3788 <!---->
3790 <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
3792 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
3793 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS
3794 Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working
3795 Draft. (Work in progress.) URL: <a
3796 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a>
3797 </dd>
3798 <!---->
3800 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
3802 <dd>Elika J. Etemad; Tab Atkins Jr. <a
3803 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
3804 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
3805 Candidate Recommendation. (Work in progress.) URL: <a
3806 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
3807 </dd>
3808 <!---->
3810 <dt id=CSS3BG>[CSS3BG]
3812 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
3813 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
3814 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
3815 Candidate Recommendation. (Work in progress.) URL: <a
3816 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
3817 </dd>
3818 <!---->
3820 <dt id=CSS3VAL>[CSS3VAL]
3822 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
3823 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
3824 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
3825 Recommendation. (Work in progress.) URL: <a
3826 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
3827 </dd>
3828 <!---->
3830 <dt id=DOM>[DOM]
3832 <dd>Anne van Kesteren; et al. <a
3833 href="http://www.w3.org/TR/2012/WD-dom-20121206/"><cite>DOM4.</cite></a>
3834 6 December 2012. W3C Working Draft. (Work in progress.) URL: <a
3835 href="http://www.w3.org/TR/2012/WD-dom-20121206/">http://www.w3.org/TR/2012/WD-dom-20121206/</a>
3836 </dd>
3837 <!---->
3839 <dt id=RFC2119>[RFC2119]
3841 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
3842 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
3843 RFC 2119. URL: <a
3844 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
3845 </dd>
3846 <!---->
3848 <dt id=SELECTORS4>[SELECTORS4]
3850 <dd>Elika J. Etemad. <a
3851 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/"><cite>Selectors
3852 Level 4.</cite></a> 23 August 2012. W3C Working Draft. (Work in
3853 progress.) URL: <a
3854 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/">http://www.w3.org/TR/2012/WD-selectors4-20120823/</a>
3855 </dd>
3856 <!---->
3858 <dt id=SVG11>[SVG11]
3860 <dd>Erik Dahlström; et al. <a
3861 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
3862 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
3863 W3C Recommendation. URL: <a
3864 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
3865 </dd>
3866 <!---->
3867 </dl>
3868 <!--end-normative-->
3870 <dl>
3871 <dt id=ref-svg2><strong class=normref>[SVG2]</strong>
3873 <dd> Cameron McCormack; et al. <a
3874 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/"><cite>Scalable Vector
3875 Graphics (SVG) 2</cite>.</a> 28 August 2012. W3C Working Draft. (Work in
3876 progress.) URL: <a
3877 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/">http://www.w3.org/TR/2012/WD-SVG2-20120828/</a>
3878 </dl>
3880 <h3 class=no-num id=other-references> Other references</h3>
3881 <!--begin-informative-->
3882 <!-- Sorted by label -->
3884 <dl class=bibliography>
3885 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3886 <!---->
3888 <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
3890 <dd>Simon Fraser; et al. <a
3891 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS
3892 Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in
3893 progress.) URL: <a
3894 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
3895 </dd>
3896 <!---->
3898 <dt id=CSSOM-VIEW>[CSSOM-VIEW]
3900 <dd>Anne van Kesteren. <a
3901 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/"><cite>CSSOM View
3902 Module.</cite></a> 4 August 2011. W3C Working Draft. (Work in progress.)
3903 URL: <a
3904 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/">http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a>
3905 </dd>
3906 <!---->
3907 </dl>
3908 <!--end-informative-->
3910 <h2 class=no-num id=index> Index</h2>
3911 <!--begin-index-->
3913 <ul class=indexlist>
3914 <li>‘<a href="#alpha"><code class=css>alpha</code></a>’, <a
3915 href="#alpha" title="section 6.2."><strong>6.2.</strong></a>
3917 <li>authoring tool, <a href="#authoring-tool"
3918 title="section 11.2."><strong>11.2.</strong></a>
3920 <li>‘<a href="#auto"><code class=css>auto</code></a>’, <a href="#auto"
3921 title="section 6.2."><strong>6.2.</strong></a>
3923 <li>‘<code class=css>border-box</code>’
3924 <ul>
3925 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3926 value, <a href="#border-box"
3927 title="section 6.5."><strong>6.5.</strong></a>
3929 <li>‘<a href="#mask-origin"><code
3930 class=property>mask-origin</code></a>’ value, <a href="#border-box0"
3931 title="section 6.6."><strong>6.6.</strong></a>
3932 </ul>
3934 <li><bottom>, <a href="#ltbottomgt"
3935 title="section 8.3."><strong>8.3.</strong></a>
3937 <li>bounding client rect, <a href="#bounding-client-rect"
3938 title="section 4."><strong>4.</strong></a>, <a
3939 href="#bounding-client-rect0" title="section 8.1.">8.1.</a>, <a
3940 href="#bounding-client-rect1" title="section 8.1.">8.1.</a>, <a
3941 href="#bounding-client-rect2" title="section 8.5.">8.5.</a>
3943 <li><a href="#ltboxgt"><var><box></var></a>, <a href="#ltboxgt"
3944 title="section 6.5."><strong>6.5.</strong></a>
3946 <li><child-selector>, <a href="#ltchild-selectorgt"
3947 title="section 6.1."><strong>6.1.</strong></a>
3949 <li>clip, <a href="#ClipProperty"
3950 title="section 8.3."><strong>8.3.</strong></a>
3952 <li><a href="#ltclip-boxgt"><var><clip-box></var></a>, <a
3953 href="#ltclip-boxgt" title="section 6.5."><strong>6.5.</strong></a>
3955 <li>clipPath, <a href="#clippath"
3956 title="section 8.4."><strong>8.4.</strong></a>
3958 <li>clip-path, <a href="#clip-path"
3959 title="section 8.1."><strong>8.1.</strong></a>
3961 <li>clip-rule, <a href="#clip-rule"
3962 title="section 8.2."><strong>8.2.</strong></a>
3964 <li><clip-source>, <a href="#ltclip-sourcegt"
3965 title="section 8.1."><strong>8.1.</strong></a>
3967 <li>‘<a href="#ltcompound-selectorgt"><code
3968 class=css><compound-selector></code></a>’, <a
3969 href="#ltcompound-selectorgt"
3970 title="section 6.1."><strong>6.1.</strong></a>
3972 <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’,
3973 <a href="#content-box0" title="section 6.6."><strong>6.6.</strong></a>
3974 <ul>
3975 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3976 value, <a href="#content-box"
3977 title="section 6.5."><strong>6.5.</strong></a>
3978 </ul>
3980 <li>‘<a href="#evenodd"><code class=css>evenodd</code></a>’, <a
3981 href="#evenodd" title="section 8.2."><strong>8.2.</strong></a>
3983 <li><image>, <a href="#ltimagegt"
3984 title="section 6.1."><strong>6.1.</strong></a>
3986 <li>layers, <a href="#layers" title="section 5.1.">5.1.</a>
3988 <li><left>, <a href="#ltleftgt"
3989 title="section 8.3."><strong>8.3.</strong></a>
3991 <li>local coordinate system, <a href="#local-coordinate-system"
3992 title="section 4."><strong>4.</strong></a>
3994 <li>‘<a href="#luminance"><code class=css>luminance</code></a>’, <a
3995 href="#luminance" title="section 6.2."><strong>6.2.</strong></a>
3997 <li>mask, <a href="#MaskProperty"
3998 title="section 6.8."><strong>6.8.</strong></a>, <a href="#mask"
3999 title="section 6.10."><strong>6.10.</strong></a>, <a href="#mask0"
4000 title="section 4."><strong>4.</strong></a>
4002 <li>mask-box-image, <a href="#mask-box-image0"
4003 title="section 7.6."><strong>7.6.</strong></a>
4005 <li>mask box image area, <a href="#mask-box-image-area"
4006 title="section 7.4."><strong>7.4.</strong></a>
4008 <li>mask-box-image-outset, <a href="#mask-box-image-outset"
4009 title="section 7.4."><strong>7.4.</strong></a>
4011 <li>mask-box-image-repeat, <a href="#mask-box-image-repeat"
4012 title="section 7.5."><strong>7.5.</strong></a>
4014 <li>mask-box-image-slice, <a href="#mask-box-image-slice"
4015 title="section 7.2."><strong>7.2.</strong></a>
4017 <li>mask-box-image-source, <a href="#mask-box-image-source"
4018 title="section 7.1."><strong>7.1.</strong></a>
4020 <li>mask-box-image-width, <a href="#mask-box-image-width"
4021 title="section 7.3."><strong>7.3.</strong></a>
4023 <li>mask-clip, <a href="#mask-clip"
4024 title="section 6.5."><strong>6.5.</strong></a>
4026 <li><mask-element>, <a href="#ltmask-elementgt"
4027 title="section 6.1."><strong>6.1.</strong></a>
4029 <li><mask-image>, <a href="#ltmask-imagegt"
4030 title="section 6.1."><strong>6.1.</strong></a>
4032 <li>mask-image, <a href="#mask-image"
4033 title="section 6.1."><strong>6.1.</strong></a>
4035 <li>mask image area, <a href="#mask-image-area" title="section 7.">7.</a>
4037 <li><mask-layer>, <a href="#ltmask-layergt"
4038 title="section 6.8."><strong>6.8.</strong></a>
4040 <li>mask-origin, <a href="#mask-origin"
4041 title="section 6.6."><strong>6.6.</strong></a>
4043 <li>mask painting area, <a href="#mask-painting-area"
4044 title="section 6.5."><strong>6.5.</strong></a>, <a
4045 href="#mask-painting-area0" title="section 6.3.">6.3.</a>, <a
4046 href="#mask-painting-area1" title="section 6.4.">6.4.</a>
4048 <li>mask-position, <a href="#mask-position"
4049 title="section 6.4."><strong>6.4.</strong></a>
4051 <li>mask positioning area, <a href="#mask-positioning-area"
4052 title="section 6.6."><strong>6.6.</strong></a>
4054 <li><mask-reference>, <a href="#ltmask-referencegt"
4055 title="section 6.1."><strong>6.1.</strong></a>
4057 <li>mask-repeat, <a href="#mask-repeat"
4058 title="section 6.3."><strong>6.3.</strong></a>
4060 <li><a href="#ltmask-sizegt"><var><mask-size></var></a>, <a
4061 href="#ltmask-sizegt" title="section 6.7."><strong>6.7.</strong></a>
4063 <li>mask-size, <a href="#mask-size"
4064 title="section 6.7."><strong>6.7.</strong></a>
4066 <li>mask source, <a href="#mask-source"
4067 title="section 4."><strong>4.</strong></a>
4069 <li>mask-source-type, <a href="#mask-source-type"
4070 title="section 6.2."><strong>6.2.</strong></a>
4072 <li>mask-type, <a href="#mask-type"
4073 title="section 6.9."><strong>6.9.</strong></a>
4075 <li>‘<code class=css>no-clip</code>’
4076 <ul>
4077 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
4078 value, <a href="#no-clip"
4079 title="section 6.5."><strong>6.5.</strong></a>
4080 </ul>
4082 <li>‘<a href="#none"><code class=css>none</code></a>’, <a href="#none"
4083 title="section 6.1."><strong>6.1.</strong></a>
4085 <li>‘<a href="#nonzero"><code class=css>nonzero</code></a>’, <a
4086 href="#nonzero" title="section 8.2."><strong>8.2.</strong></a>
4088 <li>object bounding box units, <a href="#object-bounding-box-units"
4089 title="section 4."><strong>4.</strong></a>, <a
4090 href="#object-bounding-box-units0" title="section 8.4.">8.4.</a>
4092 <li>‘<code class=css>padding-box</code>’
4093 <ul>
4094 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
4095 value, <a href="#padding-box"
4096 title="section 6.5."><strong>6.5.</strong></a>
4098 <li>‘<a href="#mask-origin"><code
4099 class=property>mask-origin</code></a>’ value, <a href="#padding-box0"
4100 title="section 6.6."><strong>6.6.</strong></a>
4101 </ul>
4103 <li><a href="#ltpositiongt"><var><position></var></a>, <a
4104 href="#ltpositiongt" title="section 6.4."><strong>6.4.</strong></a>
4106 <li>renderer, <a href="#renderer"
4107 title="section 11.2."><strong>11.2.</strong></a>
4109 <li><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>, <a
4110 href="#ltrepeat-stylegt" title="section 6.3."><strong>6.3.</strong></a>
4112 <li><right>, <a href="#ltrightgt"
4113 title="section 8.3."><strong>8.3.</strong></a>
4115 <li>‘<a href="#ltshapegt"><code class=css><shape></code></a>’,
4116 <a href="#ltshapegt" title="section 8.1."><strong>8.1.</strong></a>
4118 <li><a href="#ltsource-typegt"><var><source-type></var></a>, <a
4119 href="#ltsource-typegt" title="section 6.2."><strong>6.2.</strong></a>
4121 <li>style sheet
4122 <ul>
4123 <li>as conformance class, <a href="#style-sheet"
4124 title="section 11.2."><strong>11.2.</strong></a>
4125 </ul>
4127 <li><top>, <a href="#lttopgt"
4128 title="section 8.3."><strong>8.3.</strong></a>
4130 <li>‘<a href="#lturlgt"><code class=css><url></code></a>’, <a
4131 href="#lturlgt" title="section 6.1."><strong>6.1.</strong></a>
4133 <li>user coordinate system, <a href="#user-coordinate-system"
4134 title="section 4."><strong>4.</strong></a>
4135 </ul>
4136 <!--end-index-->
4138 <h2 class=no-num id=property-index> Property index</h2>
4139 <!--begin-properties-->
4141 <table class=proptable>
4142 <thead>
4143 <tr>
4144 <th>Property
4146 <th>Values
4148 <th>Initial
4150 <th>Applies to
4152 <th>Inh.
4154 <th>Percentages
4156 <th>Media
4158 <tbody>
4159 <tr>
4160 <th><a class=property href="#ClipProperty">clip</a>
4162 <td><shape> | auto
4164 <td>see individual properties
4166 <td>Absolutely positioned elements. In SVG, it applies to elements which
4167 establish a new viewport, ‘pattern’ elements and ‘marker’
4168 elements.
4170 <td>no
4172 <td>N/A
4174 <td>visual
4176 <tr>
4177 <th><a class=property href="#clippath">clipPath</a>
4179 <td>
4181 <td>
4183 <td>
4185 <td>
4187 <td>
4189 <td>
4191 <tr>
4192 <th><a class=property href="#clip-path">clip-path</a>
4194 <td><shape> | <clip-source> | none
4196 <td>none
4198 <td>All elements. SVG container elements, graphics elements and
4199 ‘clipPath’
4201 <td>no
4203 <td>as specified
4205 <td>visual
4207 <tr>
4208 <th><a class=property href="#clip-rule">clip-rule</a>
4210 <td>nonzero | evenodd
4212 <td>nonzero
4214 <td>graphics elements within a ‘clipPath’ element
4216 <td>yes
4218 <td>N/A
4220 <td>visual
4222 <tr>
4223 <th><a class=property href="#mask">mask</a>
4225 <td>
4227 <td>
4229 <td>
4231 <td>
4233 <td>
4235 <td>
4237 <tr>
4238 <th><a class=property href="#MaskProperty">mask</a>
4240 <td><mask-layer>#
4242 <td>see individual properties
4244 <td>All elements. In SVG, it applies to container elements and graphics
4245 elements
4247 <td>no
4249 <td>see individual properties
4251 <td>visual
4253 <tr>
4254 <th><a class=property href="#mask-box-image0">mask-box-image</a>
4256 <td><‘mask-box-image-source’> ||
4257 <‘mask-box-image-slice’> [ /
4258 <‘mask-box-image-width’> | /
4259 <‘mask-box-image-width’>? /
4260 <‘mask-box-image-outset’> ]? ||
4261 <‘mask-box-image-repeat’>
4263 <td>See individual properties
4265 <td>See individual properties
4267 <td>no
4269 <td>N/A
4271 <td>visual
4273 <tr>
4274 <th><a class=property
4275 href="#mask-box-image-outset">mask-box-image-outset</a>
4277 <td>[ <length> | <number> ]{1,4}
4279 <td>0
4281 <td>All elements. In SVG, it applies to container elements and graphics
4282 elements.
4284 <td>no
4286 <td>N/A
4288 <td>visual
4290 <tr>
4291 <th><a class=property
4292 href="#mask-box-image-repeat">mask-box-image-repeat</a>
4294 <td>[ stretch | repeat | round | space ]{1,2}
4296 <td>stretch
4298 <td>All elements. In SVG, it applies to container elements and graphics
4299 elements.
4301 <td>no
4303 <td>N/A
4305 <td>visual
4307 <tr>
4308 <th><a class=property
4309 href="#mask-box-image-slice">mask-box-image-slice</a>
4311 <td>[<number> | <percentage>]{1,4} && fill?
4313 <td>0 fill
4315 <td>All elements. In SVG, it applies to container elements and graphics
4316 elements.
4318 <td>no
4320 <td>refer to size of the mask image
4322 <td>visual
4324 <tr>
4325 <th><a class=property
4326 href="#mask-box-image-source">mask-box-image-source</a>
4328 <td><mask-image>
4330 <td>none
4332 <td>All elements. In SVG, it applies to container elements and graphics
4333 elements.
4335 <td>no
4337 <td>N/A
4339 <td>visual
4341 <tr>
4342 <th><a class=property
4343 href="#mask-box-image-width">mask-box-image-width</a>
4345 <td>[ <length> | <percentage> | <number> | auto ]{1,4}
4347 <td>auto
4349 <td>All elements. In SVG, it applies to container elements and graphics
4350 elements.
4352 <td>no
4354 <td>relative to width/height of the mask box image area
4356 <td>visual
4358 <tr>
4359 <th><a class=property href="#mask-clip">mask-clip</a>
4361 <td><clip-box>#
4363 <td>border-box
4365 <td>All elements. In SVG, it applies to container elements and graphics
4366 elements
4368 <td>no
4370 <td>N/A
4372 <td>visual
4374 <tr>
4375 <th><a class=property href="#mask-image">mask-image</a>
4377 <td><mask-reference>
4379 <td>none
4381 <td>All elements. In SVG, it applies to container elements and graphics
4382 elements
4384 <td>no
4386 <td>N/A
4388 <td>visual
4390 <tr>
4391 <th><a class=property href="#mask-origin">mask-origin</a>
4393 <td><box>#
4395 <td>padding-box
4397 <td>All elements. In SVG, it applies to container elements and graphics
4398 elements
4400 <td>no
4402 <td>N/A
4404 <td>visual
4406 <tr>
4407 <th><a class=property href="#mask-position">mask-position</a>
4409 <td><position>#
4411 <td>0% 0%
4413 <td>All elements. In SVG, it applies to container elements and graphics
4414 elements
4416 <td>no
4418 <td>refer to size of mask painting area minus size of mask image; see
4419 text
4421 <td>visual
4423 <tr>
4424 <th><a class=property href="#mask-repeat">mask-repeat</a>
4426 <td><repeat-style>#
4428 <td>repeat
4430 <td>All elements. In SVG, it applies to container elements and graphics
4431 elements
4433 <td>no
4435 <td>N/A
4437 <td>visual
4439 <tr>
4440 <th><a class=property href="#mask-size">mask-size</a>
4442 <td><mask-size>#
4444 <td>auto
4446 <td>All elements. In SVG, it applies to container elements and graphics
4447 elements
4449 <td>no
4451 <td>see text
4453 <td>visual
4455 <tr>
4456 <th><a class=property href="#mask-source-type">mask-source-type</a>
4458 <td><source-type>#
4460 <td>auto
4462 <td>All elements. In SVG, it applies to container elements and graphics
4463 elements
4465 <td>no
4467 <td>N/A
4469 <td>visual
4471 <tr>
4472 <th><a class=property href="#mask-type">mask-type</a>
4474 <td>luminance | alpha
4476 <td>luminance
4478 <td>‘mask’ elements
4480 <td>no
4482 <td>N/A
4484 <td>visual
4485 </table>
4486 <!--end-properties-->
4487 </html>
4488 <!-- Keep this comment at the end of the file
4489 Local variables:
4490 mode: sgml
4491 sgml-declaration:"~/SGML/HTML4.decl"
4492 sgml-default-doctype-name:"html"
4493 sgml-minimize-attributes:t
4494 sgml-nofill-elements:("pre" "style" "br")
4495 sgml-live-element-indicator:t
4496 sgml-omittag:nil
4497 sgml-shorttag:nil
4498 sgml-namecase-general:t
4499 sgml-general-insert-case:lower
4500 sgml-always-quote-attributes:t
4501 sgml-indent-step:nil
4502 sgml-indent-data:t
4503 sgml-parent-document:nil
4504 sgml-exposed-tags:nil
4505 sgml-local-catalogs:nil
4506 sgml-local-ecat-files:nil
4507 End:
4508 -->
