|
59 | 59 | </p> |
60 | 60 | <h1 class="p-name no-ref" id=title>CSS Masking Module Level 1</h1> |
61 | 61 | <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, |
62 | | - <span class=dt-updated><span class=value-title title=20140620>20 June 2014</span></span></span></h2> |
63 | | - <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/fxtf/css-masking-1/>http://dev.w3.org/fxtf/css-masking-1/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-masking-1/>http://www.w3.org/TR/css-masking-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/fxtf/css-masking-1/>http://dev.w3.org/fxtf/css-masking-1/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2014/WD-css-masking-1-20140213/ rel=previous>http://www.w3.org/TR/2014/WD-css-masking-1-20140213/</a> |
64 | | - <dt>Feedback:</dt> |
65 | | - <dd><a href="mailto:public-fx@w3.org?subject=%5Bcss-masking%5D%20feedback">public-fx@w3.org</a> |
| 62 | + <span class=dt-updated><span class=value-title title=20140626>26 June 2014</span></span></span></h2> |
| 63 | + <div data-fill-with=spec-metadata><dl> |
| 64 | + <dt>Feedback: |
| 65 | + <dd><a href="mailto:public-fx@w3.org?subject=%5Bcss-masking%5D%20feedback">public-fx@w3.org</a> |
66 | 66 | with subject line |
67 | | - “<kbd>[css-masking] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/public-fx/ rel=discussion>archives</a>)<dt>Test Suite:<dd><a href=http://test.csswg.org/suites/css-masking/nightly-unstable/>http://test.csswg.org/suites/css-masking/nightly-unstable/</a><dt>Editors: |
68 | | -<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dschulze@adobe.com>Dirk Schulze</a> (<span class="p-org org">Adobe Systems Inc.</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:bbirtles@mozilla.com>Brian Birtles</a> (<span class="p-org org">Mozilla Japan</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://www.xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)</dl></div> |
| 67 | + “<kbd>[css-masking] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/public-fx/ rel=discussion>archives</a>) |
| 68 | + <dt>Test Suite: |
| 69 | + <dd><a href=http://test.csswg.org/suites/css-masking/nightly-unstable/>http://test.csswg.org/suites/css-masking/nightly-unstable/</a> |
| 70 | + <dt>Editors: |
| 71 | + <dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dschulze@adobe.com>Dirk Schulze</a> (<span class="p-org org">Adobe Systems Inc.</span>) |
| 72 | + <dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:bbirtles@mozilla.com>Brian Birtles</a> (<span class="p-org org">Mozilla Japan</span>) |
| 73 | + <dd><dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://www.xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>) |
| 74 | + <dt>Previous Versions: |
| 75 | + <dd><dd><a href=http://www.w3.org/TR/2014/WD-css-masking-1-20140213/ rel=previous>http://www.w3.org/TR/2014/WD-css-masking-1-20140213/</a> |
| 76 | + <dt>Latest version: |
| 77 | + <dd><a href=http://www.w3.org/TR/css-masking-1/>http://www.w3.org/TR/css-masking-1/</a> |
| 78 | + <dt>This version: |
| 79 | + <dd><a class=u-url href=http://dev.w3.org/fxtf/css-masking-1/>http://dev.w3.org/fxtf/css-masking-1/</a> |
| 80 | +</dl> |
| 81 | +</div> |
69 | 82 | <div data-fill-with=warning></div> |
70 | 83 | <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply. |
71 | 84 | </p> |
72 | 85 | <hr title="Separator for header"> |
73 | 86 | </div> |
74 | 87 |
|
75 | 88 | <h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2> |
76 | | -<p class=p-summary data-fill-with=abstract>CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.<p>Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.<p>Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered. |
| 89 | +<p class=p-summary data-fill-with=abstract><p>CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.</p> |
| 90 | + |
| 91 | + |
| 92 | + |
| 93 | +<p>Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.</p> |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | +<p>Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.</p> |
| 98 | + |
77 | 99 | <a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents |
78 | 100 | (such as HTML and XML) |
79 | 101 | on screen, on paper, in speech, etc.</p> |
@@ -114,71 +136,71 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=c |
114 | 136 |
|
115 | 137 | <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2> |
116 | 138 | <div data-fill-with=table-of-contents><ul class=toc> |
117 | | - <li><a href=#intro><span class=secno>1</span>Introduction</a> |
| 139 | + <li><a href=#intro><span class=secno>1</span> Introduction</a> |
118 | 140 | <ul class=toc> |
119 | | - <li><a href=#clipping><span class=secno>1.1</span>Clipping</a> |
120 | | - <li><a href=#masking0><span class=secno>1.2</span>Masking</a></ul> |
121 | | - <li><a href=#placement><span class=secno>2</span>Module interactions</a> |
122 | | - <li><a href=#values><span class=secno>3</span>Values</a> |
123 | | - <li><a href=#terminology><span class=secno>4</span>Terminology</a> |
124 | | - <li><a href=#clipping-paths><span class=secno>5</span>Clipping Paths</a> |
| 141 | + <li><a href=#clipping><span class=secno>1.1</span> Clipping</a> |
| 142 | + <li><a href=#masking0><span class=secno>1.2</span> Masking</a></ul> |
| 143 | + <li><a href=#placement><span class=secno>2</span> Module interactions</a> |
| 144 | + <li><a href=#values><span class=secno>3</span> Values</a> |
| 145 | + <li><a href=#terminology><span class=secno>4</span> Terminology</a> |
| 146 | + <li><a href=#clipping-paths><span class=secno>5</span> Clipping Paths</a> |
125 | 147 | <ul class=toc> |
126 | | - <li><a href=#the-clip-path><span class=secno>5.1</span>Clipping Shape: the <span class=property data-link-type=propdesc title=clip-path>clip-path</span> property</a></ul> |
127 | | - <li><a href=#svg-clipping-paths><span class=secno>6</span>SVG Clipping Path Sources</a> |
| 148 | + <li><a href=#the-clip-path><span class=secno>5.1</span> Clipping Shape: the <span>clip-path</span> property</a></ul> |
| 149 | + <li><a href=#svg-clipping-paths><span class=secno>6</span> SVG Clipping Path Sources</a> |
128 | 150 | <ul class=toc> |
129 | | - <li><a href=#ClipPathElement><span class=secno>6.1</span>The <span data-link-type=element title=clippath>clipPath</span> element</a> |
130 | | - <li><a href=#the-clip-rule><span class=secno>6.2</span>Winding Rules: the <span class=property data-link-type=propdesc title=clip-rule>clip-rule</span> property</a></ul> |
131 | | - <li><a href=#masking><span class=secno>7</span>Positioned Masks</a> |
| 151 | + <li><a href=#ClipPathElement><span class=secno>6.1</span> The <span>clipPath</span> element</a> |
| 152 | + <li><a href=#the-clip-rule><span class=secno>6.2</span> Winding Rules: the <span>clip-rule</span> property</a></ul> |
| 153 | + <li><a href=#masking><span class=secno>7</span> Positioned Masks</a> |
132 | 154 | <ul class=toc> |
133 | | - <li><a href=#the-mask-image><span class=secno>7.1</span>Mask Image Source: the <span class=property data-link-type=propdesc title=mask-image>mask-image</span> property</a> |
134 | | - <li><a href=#the-mask-mode><span class=secno>7.2</span>Mask Image Interpretation: the <span class=property data-link-type=propdesc title=mask-mode>mask-mode</span> property</a> |
135 | | - <li><a href=#the-mask-repeat><span class=secno>7.3</span>Tiling Mask Images: The <span class=property data-link-type=propdesc title=mask-repeat>mask-repeat</span> property</a> |
136 | | - <li><a href=#the-mask-position><span class=secno>7.4</span>Positioning Mask Images: the <span class=property data-link-type=propdesc title=mask-position>mask-position</span> property</a> |
137 | | - <li><a href=#the-mask-clip><span class=secno>7.5</span>Masking Area: the <span class=property data-link-type=propdesc title=mask-clip>mask-clip</span> property</a> |
138 | | - <li><a href=#the-mask-origin><span class=secno>7.6</span>Positioning Area: the <span class=property data-link-type=propdesc title=mask-origin>mask-origin</span> property</a> |
139 | | - <li><a href=#the-mask-size><span class=secno>7.7</span>Sizing Mask Images: the <span class=property data-link-type=propdesc title=mask-size>mask-size</span> property</a> |
140 | | - <li><a href=#the-mask-composite><span class=secno>7.8</span>Compositing mask layers: the <span class=property data-link-type=propdesc title=mask-composite>mask-composite</span> property</a> |
141 | | - <li><a href=#the-mask><span class=secno>7.9</span>Mask Shorthand: the <span class=property data-link-type=propdesc title=mask>mask</span> property</a> |
142 | | - <li><a href=#the-mask-image-rendering-model><span class=secno>7.10</span>The Mask Image Rendering Model</a> |
| 155 | + <li><a href=#the-mask-image><span class=secno>7.1</span> Mask Image Source: the <span>mask-image</span> property</a> |
| 156 | + <li><a href=#the-mask-mode><span class=secno>7.2</span> Mask Image Interpretation: the <span>mask-mode</span> property</a> |
| 157 | + <li><a href=#the-mask-repeat><span class=secno>7.3</span> Tiling Mask Images: The <span>mask-repeat</span> property</a> |
| 158 | + <li><a href=#the-mask-position><span class=secno>7.4</span> Positioning Mask Images: the <span>mask-position</span> property</a> |
| 159 | + <li><a href=#the-mask-clip><span class=secno>7.5</span> Masking Area: the <span>mask-clip</span> property</a> |
| 160 | + <li><a href=#the-mask-origin><span class=secno>7.6</span> Positioning Area: the <span>mask-origin</span> property</a> |
| 161 | + <li><a href=#the-mask-size><span class=secno>7.7</span> Sizing Mask Images: the <span>mask-size</span> property</a> |
| 162 | + <li><a href=#the-mask-composite><span class=secno>7.8</span> Compositing mask layers: the <span>mask-composite</span> property</a> |
| 163 | + <li><a href=#the-mask><span class=secno>7.9</span> Mask Shorthand: the <span>mask</span> property</a> |
| 164 | + <li><a href=#the-mask-image-rendering-model><span class=secno>7.10</span> The Mask Image Rendering Model</a> |
143 | 165 | <ul class=toc> |
144 | | - <li><a href=#MaskValues><span class=secno>7.10.1</span>Mask processing</a> |
145 | | - <li><a href=#layering><span class=secno>7.10.2</span>Layering Multiple Mask Images</a></ul></ul> |
146 | | - <li><a href=#mask-borders><span class=secno>8</span>Border-Box Mask</a> |
| 166 | + <li><a href=#MaskValues><span class=secno>7.10.1</span> Mask processing</a> |
| 167 | + <li><a href=#layering><span class=secno>7.10.2</span> Layering Multiple Mask Images</a></ul></ul> |
| 168 | + <li><a href=#mask-borders><span class=secno>8</span> Border-Box Mask</a> |
147 | 169 | <ul class=toc> |
148 | | - <li><a href=#the-mask-border-source><span class=secno>8.1</span>Mask Border Image Source: the <span class=property data-link-type=propdesc title=mask-border-source>mask-border-source</span> property</a> |
149 | | - <li><a href=#the-mask-border-mode><span class=secno>8.2</span>Mask Border Image Interpretation: the <span class=property data-link-type=propdesc title=mask-border-mode>mask-border-mode</span> property</a> |
150 | | - <li><a href=#the-mask-border-slice><span class=secno>8.3</span>Mask Border Image Slicing: the <span class=property data-link-type=propdesc title=mask-border-slice>mask-border-slice</span> property</a> |
151 | | - <li><a href=#the-mask-border-width><span class=secno>8.4</span>Masking Areas: the <span class=property data-link-type=propdesc title=mask-border-width>mask-border-width</span> property</a> |
152 | | - <li><a href=#the-mask-border-outset><span class=secno>8.5</span>Edge Overhang: the <span class=property data-link-type=propdesc title=mask-border-outset>mask-border-outset</span> property</a> |
153 | | - <li><a href=#the-mask-border-repeat><span class=secno>8.6</span>Mask Border Image Tiling: the <span class=property data-link-type=propdesc title=mask-border-repeat>mask-border-repeat</span> property</a> |
154 | | - <li><a href=#the-mask-border><span class=secno>8.7</span>Mask Border Image Shorthand: the <span class=property data-link-type=propdesc title=mask-border>mask-border</span> property</a> |
155 | | - <li><a href=#masking-with-the-mask-border-image><span class=secno>8.8</span>Masking with the mask border image</a></ul> |
156 | | - <li><a href=#svg-masks><span class=secno>9</span>SVG Mask Sources</a> |
| 170 | + <li><a href=#the-mask-border-source><span class=secno>8.1</span> Mask Border Image Source: the <span>mask-border-source</span> property</a> |
| 171 | + <li><a href=#the-mask-border-mode><span class=secno>8.2</span> Mask Border Image Interpretation: the <span>mask-border-mode</span> property</a> |
| 172 | + <li><a href=#the-mask-border-slice><span class=secno>8.3</span> Mask Border Image Slicing: the <span>mask-border-slice</span> property</a> |
| 173 | + <li><a href=#the-mask-border-width><span class=secno>8.4</span> Masking Areas: the <span>mask-border-width</span> property</a> |
| 174 | + <li><a href=#the-mask-border-outset><span class=secno>8.5</span> Edge Overhang: the <span>mask-border-outset</span> property</a> |
| 175 | + <li><a href=#the-mask-border-repeat><span class=secno>8.6</span> Mask Border Image Tiling: the <span>mask-border-repeat</span> property</a> |
| 176 | + <li><a href=#the-mask-border><span class=secno>8.7</span> Mask Border Image Shorthand: the <span>mask-border</span> property</a> |
| 177 | + <li><a href=#masking-with-the-mask-border-image><span class=secno>8.8</span> Masking with the mask border image</a></ul> |
| 178 | + <li><a href=#svg-masks><span class=secno>9</span> SVG Mask Sources</a> |
157 | 179 | <ul class=toc> |
158 | | - <li><a href=#MaskElement><span class=secno>9.1</span>The <span data-link-type=element title=mask>mask</span> element</a> |
159 | | - <li><a href=#the-mask-type><span class=secno>9.2</span>Mask Source Interpretation: the <span class=property data-link-type=propdesc title=mask-type>mask-type</span> property</a></ul> |
160 | | - <li><a href=#security><span class=secno>10</span>Security</a> |
161 | | - <li><a href=#clip-property><span class=secno></span>Appendix A: The deprecated <span class=property data-link-type=propdesc title=clip>clip</span> property</a> |
162 | | - <li><a href=#compute-stroke-bounding-box><span class=secno></span>Appendix B: Compute stroke bounding box</a> |
163 | | - <li><a href=#DOMInterfaces><span class=secno></span>Appendix C: DOM interfaces</a> |
| 180 | + <li><a href=#MaskElement><span class=secno>9.1</span> The <span>mask</span> element</a> |
| 181 | + <li><a href=#the-mask-type><span class=secno>9.2</span> Mask Source Interpretation: the <span>mask-type</span> property</a></ul> |
| 182 | + <li><a href=#security><span class=secno>10</span> Security</a> |
| 183 | + <li><a href=#clip-property><span class=secno></span> Appendix A: The deprecated <span>clip</span> property</a> |
| 184 | + <li><a href=#compute-stroke-bounding-box><span class=secno></span> Appendix B: Compute stroke bounding box</a> |
| 185 | + <li><a href=#DOMInterfaces><span class=secno></span> Appendix C: DOM interfaces</a> |
164 | 186 | <ul class=toc> |
165 | | - <li><a href=#InterfaceSVGClipPathElement><span class=secno></span>Interface SVGClipPathElement</a> |
166 | | - <li><a href=#InterfaceSVGMaskElement><span class=secno></span>Interface SVGMaskElement</a></ul> |
167 | | - <li><a href=#changes><span class=secno></span>Changes since last publication</a> |
168 | | - <li><a href=#acknowledgments><span class=secno></span>Acknowledgments</a> |
169 | | - <li><a href=#conformance><span class=secno></span> Conformance</a> |
| 187 | + <li><a href=#InterfaceSVGClipPathElement><span class=secno></span> Interface SVGClipPathElement</a> |
| 188 | + <li><a href=#InterfaceSVGMaskElement><span class=secno></span> Interface SVGMaskElement</a></ul> |
| 189 | + <li><a href=#changes><span class=secno></span> Changes since last publication</a> |
| 190 | + <li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a> |
| 191 | + <li><a href=#conformance><span class=secno></span> Conformance</a> |
170 | 192 | <ul class=toc> |
171 | | - <li><a href=#conventions><span class=secno></span> Document conventions</a> |
172 | | - <li><a href=#conformance-classes><span class=secno></span> Conformance classes</a> |
173 | | - <li><a href=#partial><span class=secno></span> Partial implementations</a> |
174 | | - <li><a href=#experimental><span class=secno></span> Experimental implementations</a> |
175 | | - <li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul> |
176 | | - <li><a href=#references><span class=secno></span> References</a> |
| 193 | + <li><a href=#conventions><span class=secno></span> Document conventions</a> |
| 194 | + <li><a href=#conformance-classes><span class=secno></span> Conformance classes</a> |
| 195 | + <li><a href=#partial><span class=secno></span> Partial implementations</a> |
| 196 | + <li><a href=#experimental><span class=secno></span> Experimental implementations</a> |
| 197 | + <li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul> |
| 198 | + <li><a href=#references><span class=secno></span> References</a> |
177 | 199 | <ul class=toc> |
178 | | - <li><a href=#normative><span class=secno></span> Normative References</a> |
179 | | - <li><a href=#informative><span class=secno></span> Informative References</a></ul> |
180 | | - <li><a href=#index><span class=secno></span> Index</a> |
181 | | - <li><a href=#property-index><span class=secno></span> Property index</a></ul></div> |
| 200 | + <li><a href=#normative><span class=secno></span> Normative References</a> |
| 201 | + <li><a href=#informative><span class=secno></span> Informative References</a></ul> |
| 202 | + <li><a href=#index><span class=secno></span> Index</a> |
| 203 | + <li><a href=#property-index><span class=secno></span> Property index</a></ul></div> |
182 | 204 |
|
183 | 205 |
|
184 | 206 |
|
|
0 commit comments