changeset
added Sylvain's comments
Tue, 14 May 2013 17:54:08 -0700
- author
- Rik Cabanier <cabanier@adobe.com>
- date
- Tue, 14 May 2013 17:54:08 -0700
- branch
- separate-api
- changeset 896
- a8551eca4def
- parent 743
- 15c1d1038bde
- child 2316
- ce1eea64a0b4
added Sylvain's comments
| compositing/Compositing.src.html | file | annotate | diff | comparison | revisions | |
| compositing/index.html | file | annotate | diff | comparison | revisions |
1.1 --- a/compositing/Compositing.src.html Tue Mar 12 13:11:08 2013 +0900 1.2 +++ b/compositing/Compositing.src.html Tue May 14 17:54:08 2013 -0700 1.3 @@ -293,13 +293,559 @@ 1.4 <!-- ****************************************************************************** --> 1.5 1.6 <h2 id="introduction">Introduction</h2> 1.7 -<p> 1.8 -The first part of this document will describe the algorithms of Porter Duff compositing and blending. 1.9 -The second part describes the properties used to control the compositing in CSS. <br/> 1.10 +<p><em>This subsection is non-normative.</em><br/> 1.11 +The first part of this document describes the properties used to control the compositing in CSS. 1.12 +The second part will describe the algorithms of Porter Duff compositing and blending.<br/> 1.13 </p> 1.14 1.15 -<h3 id="whatiscompositing">What is compositing?</h3> 1.16 +<h2>Reading This Document</h2> 1.17 <p> 1.18 +Each section of this document is normative unless otherwise specified.<br/> 1.19 +This document contains explicit conformance criteria that overlap with some RelaxNG definitions in requirements. If there is any conflict between the two, the explicit conformance criteria are the definitive reference. 1.20 +</p> 1.21 + 1.22 +<h2 id="csscompositingandblending">Specifying Compositing and Blending in CSS </h2> 1.23 +<h3 id="compositingandblendingorder">Order of graphical operations</h3> 1.24 +The compositing model must follow the <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model: first any filter effect is applied, then any clipping, masking, blending and compositing. 1.25 +</h3> 1.26 + 1.27 +<h3 id="csscompositingrules_CSS">Behavior specific to CSS</h3> 1.28 +<p> 1.29 +If an element specifies non-default blending<!--, compositing--> or <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a>, its <a href="http://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> and that of all of its children must revert to 'flat'.<br/> 1.30 +The application of non-default blending<!-- or compositing--> to an element must also establish a <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> the same way that CSS <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does. One of the consequences is that elements with z-index must not honor the depth of elements outside of the group.<br/> 1.31 +<!--Everything in CSS that creates a <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be considered a group. HTML elements themselves should not create groups.--> 1.32 +</p> 1.33 +<p class="issue"> 1.34 +This spec assumes that a stacking context creates an offscreen buffer (also known as a group) which is not always the case. Sometimes elements even have internal grouping (for instance with 'background-attachment: fixed'). We need to clarify when groups are created so we can have interoperable behavior. Ideally it would be a new spec or an extension of the spec that describes <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking contexts</a>. 1.35 +</p> 1.36 + 1.37 +<h3 id="csscompositingrules_SVG">Behavior specific to SVG</h3> 1.38 +<p> 1.39 +In SVG, every element must create a non-isolated group.</p><p class="note">This seems costly but implementations can optimize this by not treating elements with default arguments as groups.</p><br/> 1.40 +<!-- SVG has the following <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">compositing model</a>: first any filter effect is applied, then any clipping, masking, blending and compositing --> 1.41 +</p> 1.42 +<p class="issue"> 1.43 +This SVG spec states that every element creates an 'accumulating' group. In practice, few (no) browsers implemented this. We should update the SVG spec so it follows CSS' rules for grouping. 1.44 +</p> 1.45 + 1.46 +<h3 id="csskeywords">CSS Properties</h3> 1.47 +<!-- 1.48 +<h4 id="mix-composite">The <span class="prop-name">'mix-composite'</span> property</h4> 1.49 +<p> 1.50 +Defines the compositing mode that must be used on the area of an element.<br/> 1.51 +This behavior is described in more detail in <a href="#advancedcompositing">Advanced compositing features</a>.<br/> 1.52 +The description of the <span class="prop-name">'mix-composite'</span> property is 1.53 +as follows:</p> 1.54 + 1.55 +<div class="propdef"> 1.56 +<dl> 1.57 + <dt id='propdef-mix-composite'><span class='propdef-title prop-name'>'mix-composite'</span></dt> 1.58 + <dd> 1.59 + <table summary="mix-composite property" class="propinfo" cellspacing="0" 1.60 + cellpadding="0"> 1.61 + <tbody> 1.62 + <tr valign="baseline"> 1.63 + <td><em>Value:</em> </td> 1.64 + <td><a href="#ltcompositeareagt"><var><composite-area></var></a># </td> 1.65 + </tr> 1.66 + <tr valign="baseline"> 1.67 + <td><em>Initial:</em> </td> 1.68 + <td>source-over</td> 1.69 + </tr> 1.70 + <tr valign="baseline"> 1.71 + <td><em>Applies to:</em> </td> 1.72 + <td>All elements. In SVG, it applies to svg, g, use, image, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, and marker.</td> 1.73 + </tr> 1.74 + <tr valign="baseline"> 1.75 + <td><em>Inherited:</em> </td> 1.76 + <td>no</td> 1.77 + </tr> 1.78 + <tr valign="baseline"> 1.79 + <td><em>Percentages:</em> </td> 1.80 + <td>N/A</td> 1.81 + </tr> 1.82 + <tr valign="baseline"> 1.83 + <td><em>Media:</em> </td> 1.84 + <td>visual</td> 1.85 + </tr> 1.86 + <tr valign="baseline"> 1.87 + <td><em>Computed value:</em> </td> 1.88 + <td>same as the specified value</td> 1.89 + </tr> 1.90 + <tr valign="baseline"> 1.91 + <td><em>Animatable:</em> </td> 1.92 + <td>no</td> 1.93 + </tr> 1.94 + </tbody> 1.95 + </table> 1.96 + </dd> 1.97 +</dl> 1.98 +</div> 1.99 +<p>The syntax of the property of <var><composite-area></var> is given with:</p> 1.100 +<pre class="compositearea"><dfn id="ltcompositeareagt"><var><composite-area></var></dfn> = <a href="#ltareagt"><area></a>? <a href="#ltcompositegt"><composite-mode></a></pre> 1.101 + 1.102 + 1.103 +<p>The syntax of the property of <var><area></var> is given with:</p> 1.104 +<pre class="area"><dfn id="ltareagt"><var><area></var></dfn> = element | box-shadow | text-shadow | background | border | content</pre> 1.105 +<p>Values have the following meanings:</p> 1.106 + 1.107 + <dl> 1.108 + <dt><dfn id='area-element' title="''element'' value"> 1.109 + ‘<code class=css>element</code>’</dfn></dt> 1.110 + 1.111 + <dd>The area is the whole element, including shadows, background and content</dd> 1.112 + 1.113 + <dt><dfn id='area-box-shadow' title="''box-shadow'' value"> 1.114 + ‘<code class=css>box-shadow</code>’</dfn></dt> 1.115 + 1.116 + <dd>The area is the box shadow</dd> 1.117 + 1.118 + <dt><dfn id='area-text-shadow' title="''text-shadow'' value"> 1.119 + ‘<code class=css>text-shadow</code>’</dfn></dt> 1.120 + 1.121 + <dd>The area is the shadow of the text</dd> 1.122 + 1.123 + <dt><dfn id='area-background' title="''background'' value"> 1.124 + ‘<code class=css>background</code>’</dfn></dt> 1.125 + 1.126 + <dd>The area is the composited result of all the background images.</dd> 1.127 + 1.128 + <dt><dfn id='area-border' title="''border'' value"> 1.129 + ‘<code class=css>border</code>’</dfn></dt> 1.130 + 1.131 + <dd>The area is the composited result of all the borders.</dd> 1.132 + 1.133 + <dt><dfn id='area-content' title="''content'' value"> 1.134 + ‘<code class=css>content</code>’</dfn></dt> 1.135 + 1.136 + <dd>The area is the content of the element (such as the text).</dd> 1.137 + </dl> 1.138 + <p class="note">If <var><area></var> is omitted, <var>'<a href="#area-element">element</a>'</var> must be assumed. An area can only be set once in the CSS property; an attempt to list it more than once must be ignored.</p> 1.139 + <p class="note">In SVG, <var>'<a href="#area-element">element</a>'</var> will be used, regardless of what area is specified.</p> 1.140 + <p class="issue">We need to define more clearly what 'content' means.</p> 1.141 + 1.142 +<p>The syntax of the property of <var><composite-mode></var> is given with:</p> 1.143 +<pre class="composite"><dfn id="ltcompositegt"><var><composite-mode></var></dfn> = <a href="#porterduffcompositingoperators_clear">clear</a> | <a href="#porterduffcompositingoperators_src">copy</a> | <a href="#porterduffcompositingoperators_dst">destination</a> | <a href="#porterduffcompositingoperators_srcover">source-over</a> | <a href="#porterduffcompositingoperators_dstover">destination-over</a> | <a href="#porterduffcompositingoperators_srcin">source-in</a> | <a href="#porterduffcompositingoperators_dstin">destination-in</a> | <a href="#porterduffcompositingoperators_srcout">source-out</a> | <a href="#porterduffcompositingoperators_dstout">destination-out</a> | <a href="#porterduffcompositingoperators_srcatop">source-atop</a> | <a href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a href="#porterduffcompositingoperators_xor">xor</a> | <a href="#porterduffcompositingoperators_plus">lighter</a></pre> 1.144 + 1.145 +<p class="note">Applying a non-default compositing mode to the <var>'<a href="#area-element">element</a>'</var> area must establish a new stacking context.</p> 1.146 + 1.147 +<p class="note">Applying a non-default compositing mode to areas other than <var>'<a href="#area-element">element</a>'</var> must render those areas in an offscreen buffer first. This buffer will then be composited.</p> 1.148 + 1.149 +<p class="note">An area must always composite with <a href="#groupcompositingcliptoself">'clip-to-self'</a> set to 'true'.</p> 1.150 +--> 1.151 + 1.152 +<h4 id="mix-blend-mode">The <span class="prop-name">'mix-blend-mode'</span> property</h4> 1.153 + 1.154 +<p> 1.155 +Defines the blend mode that must be used on an area of the element. 1.156 +The blend mode defines the formula that must be used to mix the colors with the backdrop.<br/> 1.157 +This behavior is described in more detail in <a href="#blending">Blending</a>. 1.158 +</p> 1.159 + 1.160 +<div class="propdef"> 1.161 +<dl> 1.162 + <dt id='propdef-mix-blend-mode'><span class='propdef-title prop-name'>'mix-blend-mode'</span></dt> 1.163 + <dd> 1.164 + <table summary="mix-blend-mode property" class="propinfo" cellspacing="0" 1.165 + cellpadding="0"> 1.166 + <tbody> 1.167 + <tr valign="baseline"> 1.168 + <td><em>Value:</em> </td> 1.169 + <td><a href="#ltblendmodegt"><var><blend-mode></var></a>#</td> 1.170 + </tr> 1.171 + <tr valign="baseline"> 1.172 + <td><em>Initial:</em> </td> 1.173 + <td>normal</td> 1.174 + </tr> 1.175 + <tr valign="baseline"> 1.176 + <td><em>Applies to:</em> </td> 1.177 + <td>All elements. In SVG, it applies to svg, g, use, image, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, and marker.</td> 1.178 + </tr> 1.179 + <tr valign="baseline"> 1.180 + <td><em>Inherited:</em> </td> 1.181 + <td>no</td> 1.182 + </tr> 1.183 + <tr valign="baseline"> 1.184 + <td><em>Percentages:</em> </td> 1.185 + <td>N/A</td> 1.186 + </tr> 1.187 + <tr valign="baseline"> 1.188 + <td><em>Media:</em> </td> 1.189 + <td>visual</td> 1.190 + </tr> 1.191 + <tr valign="baseline"> 1.192 + <td><em>Computed value:</em> </td> 1.193 + <td>same as the specified value</td> 1.194 + </tr> 1.195 + <tr valign="baseline"> 1.196 + <td><em>Animatable:</em> </td> 1.197 + <td>no</td> 1.198 + </tr> 1.199 + </tbody> 1.200 + </table> 1.201 + </dd> 1.202 +</dl> 1.203 +</div> 1.204 +<!-- 1.205 +<p>The syntax of the property of <var><blend-area></var> is given with:</p> 1.206 +<pre class="blendarea"><dfn id="ltblendareagt"><var><blend-area></var></dfn> = <a href="#ltareagt"><area></a>? <a href="#ltblendmodegt"><blend-mode></a></pre> 1.207 + 1.208 +<p>The syntax of the property of <var><area></var> is given with:</p> 1.209 +<pre class="area"><dfn id="ltareagt"><var><area></var></dfn> = element | box-shadow | text-shadow | background | border | content</pre> 1.210 +<p>Values have the following meanings:</p> 1.211 + 1.212 + <dl> 1.213 + <dt><dfn id='area-element' title="''element'' value"> 1.214 + ‘<code class=css>element</code>’</dfn></dt> 1.215 + 1.216 + <dd>The area is the whole element, including shadows, background and content</dd> 1.217 + 1.218 + <dt><dfn id='area-box-shadow' title="''box-shadow'' value"> 1.219 + ‘<code class=css>box-shadow</code>’</dfn></dt> 1.220 + 1.221 + <dd>The area is the box shadow</dd> 1.222 + 1.223 + <dt><dfn id='area-text-shadow' title="''text-shadow'' value"> 1.224 + ‘<code class=css>text-shadow</code>’</dfn></dt> 1.225 + 1.226 + <dd>The area is the shadow of the text</dd> 1.227 + 1.228 + <dt><dfn id='area-background' title="''background'' value"> 1.229 + ‘<code class=css>background</code>’</dfn></dt> 1.230 + 1.231 + <dd>The area is the composited result of all the background images.</dd> 1.232 + 1.233 + <dt><dfn id='area-border' title="''border'' value"> 1.234 + ‘<code class=css>border</code>’</dfn></dt> 1.235 + 1.236 + <dd>The area is the composited result of all the borders.</dd> 1.237 + 1.238 + <dt><dfn id='area-content' title="''content'' value"> 1.239 + ‘<code class=css>content</code>’</dfn></dt> 1.240 + 1.241 + <dd>The area is the content of the element (such as the text).</dd> 1.242 + </dl> 1.243 + <p class="note">If <var><area></var> is omitted, <var>'<a href="#area-element">element</a>'</var> must be assumed. An area can only be set once in the CSS property; an attempt to list it more than once must be ignored.</p> 1.244 + <p class="note">In SVG, <var>'<a href="#area-element">element</a>'</var> will be used, regardless of what area is specified.</p> 1.245 + <p class="issue">We need to define more clearly what 'content' means.</p> 1.246 +--> 1.247 + 1.248 +<p>The syntax of the property of <var><blend-mode></var> is given with:</p> 1.249 +<pre class="blendmode"><dfn id="ltblendmodegt"><var><blend-mode></var></dfn> = <a href="#blendingnormal">normal</a> | <a href="#blendingmultiply">multiply</a> | <a href="#blendingscreen">screen</a> | <a href="#blendingoverlay">overlay</a> | <a href="#blendingdarken">darken</a> | <a href="#blendinglighten">lighten</a> | <a href="#blendingcolordodge">color-dodge</a> | <a href="#blendingcolorburn">color-burn</a> | <a href="#blendinghardlight">hard-light</a> | <a href="#blendingsoftlight">soft-light</a> | <a href="#blendingdifference">difference</a> | <a href="#blendingexclusion">exclusion</a> | <a href="#blendinghue">hue</a> | <a href="#blendingsaturation">saturation</a> | <a href="#blendingcolor">color</a> | <a href="#blendingluminosity">luminosity</a></pre> 1.250 + 1.251 +<p class="note">Applying a non-default blendmode to the element must establish a new stacking context.</p> 1.252 + 1.253 +<p class="note">Applying a non-default blendmode to an area must render it to a group. This group will then be blended and composited.</p> 1.254 + 1.255 +<h4 id="isolation">The <span class="prop-name">'isolation'</span> property</h4> 1.256 +<p> 1.257 +Defines whether a group is isolated or not.<br /> 1.258 +When a group is isolated, the group's backdrop must be replaced with transparent black.<br/> 1.259 +Groups can be set to non-isolated with the 'auto' keyword. However certain operations that cause the creation of stacking context (such as 3D transforms or a non-default blend mode on the 'element' <a href="#ltareagt">area</a>) will cause a group to be isolated.<br/> 1.260 +This behavior is described in more detail in <a href="#isolatedgroups">Isolated Gropus</a>. 1.261 +</p> 1.262 + 1.263 +<div class="propdef"> 1.264 +<dl> 1.265 + <dt id='propdef-isolation'><span class='propdef-title prop-name'>'isolation'</span></dt> 1.266 + <dd> 1.267 + <table summary="isolation property" class="propinfo" cellspacing="0" 1.268 + cellpadding="0"> 1.269 + <tbody> 1.270 + <tr valign="baseline"> 1.271 + <td><em>Value:</em> </td> 1.272 + <td><a href="#isolated-propid"><var><isolation-mode></var></a></td> 1.273 + </tr> 1.274 + <tr valign="baseline"> 1.275 + <td><em>Initial:</em> </td> 1.276 + <td>auto</td> 1.277 + </tr> 1.278 + <tr valign="baseline"> 1.279 + <td><em>Applies to:</em> </td> 1.280 + <td>All HTML elements. In SVG, it applies to all container elements except <a href="http://www.w3.org/TR/SVG/masking.html#Masking">'mask'</a></span></td> 1.281 + </tr> 1.282 + <tr valign="baseline"> 1.283 + <td><em>Inherited:</em> </td> 1.284 + <td>no</td> 1.285 + </tr> 1.286 + <tr valign="baseline"> 1.287 + <td><em>Percentages:</em> </td> 1.288 + <td>N/A</td> 1.289 + </tr> 1.290 + <tr valign="baseline"> 1.291 + <td><em>Media:</em> </td> 1.292 + <td>visual</td> 1.293 + </tr> 1.294 + <tr valign="baseline"> 1.295 + <td><em>Computed value:</em> </td> 1.296 + <td>same as the specified value</td> 1.297 + </tr> 1.298 + <tr valign="baseline"> 1.299 + <td><em>Animatable:</em> </td> 1.300 + <td>no</td> 1.301 + </tr> 1.302 + </tbody> 1.303 + </table> 1.304 + </dd> 1.305 +</dl> 1.306 +</div> 1.307 +<p>The syntax of the property of <var><isolation-mode></var> is given with:</p> 1.308 +<pre class="isolated"><dfn id="isolated-propid"><var><isolation-mode></var></dfn> = auto | isolate</pre> 1.309 +<p> 1.310 +In CSS, a background image or the content of an <img> must always be rendered into an isolated group.<br/>For instance, if you link to an SVG file through the 'img' tag, the artwork of that SVG will not blend with the backdrop of the content.</p> 1.311 +<p> 1.312 +In SVG, <a href="http://www.w3.org/TR/SVG/masking.html#Masking">'mask'</a> always creates an isolated group. 1.313 +</p> 1.314 +<p class="note">'Isolation' is always applied to the 'element' <a href="#ltareagt">area</a></p> 1.315 + 1.316 +<!-- 1.317 +<h4 id="knock-out">The <span class="prop-name">'knock-out'</span> property</h4> 1.318 +<p> 1.319 +Defines whether a group is a knock-out group.<br/> 1.320 +When a group is set to 'knock-out', the elements within the group must only composite and blend with elements outside that group. This effectively 'knocks out' any element from within the group that is already drawn. The end result is as if every shape composites with a 'clear' operation (with clip-to-self enabled) first before it blends and composites.<br/> 1.321 +When 'knock-out' is set to 'preserve', the group must not be a knock-out group and its elements composite normally.<br/> 1.322 +The behavior of this keyword is described in more detail in <a href="#knockoutgroups">Knockout Groups</a>. 1.323 + 1.324 +<div class="propdef"> 1.325 +<dl> 1.326 + <dt id='propdef-knock-out'><span class='propdef-title prop-name'>'knock-out'</span></dt> 1.327 + <dd> 1.328 + <table summary="knock-out property" class="propinfo" cellspacing="0" 1.329 + cellpadding="0"> 1.330 + <tbody> 1.331 + <tr valign="baseline"> 1.332 + <td><em>Value:</em> </td> 1.333 + <td><a href="#knockout-propid"><var><knock-out-mode></var></a></td> 1.334 + </tr> 1.335 + <tr valign="baseline"> 1.336 + <td><em>Initial:</em> </td> 1.337 + <td>preserve</td> 1.338 + </tr> 1.339 + <tr valign="baseline"> 1.340 + <td><em>Applies to:</em> </td> 1.341 + <td>All HTML elements. In SVG, it applies to all container elements except 'mask'</td> 1.342 + </tr> 1.343 + <tr valign="baseline"> 1.344 + <td><em>Inherited:</em> </td> 1.345 + <td>yes</td> 1.346 + </tr> 1.347 + <tr valign="baseline"> 1.348 + <td><em>Percentages:</em> </td> 1.349 + <td>N/A</td> 1.350 + </tr> 1.351 + <tr valign="baseline"> 1.352 + <td><em>Media:</em> </td> 1.353 + <td>visual</td> 1.354 + </tr> 1.355 + <tr valign="baseline"> 1.356 + <td><em>Computed value:</em> </td> 1.357 + <td>same as the specified value</td> 1.358 + </tr> 1.359 + <tr valign="baseline"> 1.360 + <td><em>Animatable:</em> </td> 1.361 + <td>no</td> 1.362 + </tr> 1.363 + </tbody> 1.364 + </table> 1.365 + </dd> 1.366 +</dl> 1.367 +</div> 1.368 +<p>The syntax of the property of <var><knock-out-mode></var> is given with:</p> 1.369 +<pre class="knockout-prop"><dfn id="knockout-propid"><var><knock-out-mode></var></dfn> = preserve | knock-out</pre> 1.370 +<p class="note">'Knock-out' is always applied to the area of the element</p> 1.371 + 1.372 +<h4 id="mix-shorthand">Compositing and blending shorthand: the <span class="prop-name">'mix'</span> property</h4> 1.373 +<p> 1.374 +The 'mix' property is a shorthand property for setting blending and compositing properties at the same place in the style sheet.<br/> 1.375 +Omitted values are set to their initial values. 1.376 +</p> 1.377 +<div class="propdef"> 1.378 +<dl> 1.379 + <dt id='propdef-mix'><span class='propdef-title prop-name'>'mix'</span></dt> 1.380 + <dd> 1.381 + <table summary="knock-out property" class="propinfo" cellspacing="0" 1.382 + cellpadding="0"> 1.383 + <tbody> 1.384 + <tr valign="baseline"> 1.385 + <td><em>Value:</em> </td> 1.386 + <td><a href="#ltmixareagt"><var><mix-area></var></a>#</td> 1.387 + </tr> 1.388 + <tr valign="baseline"> 1.389 + <td><em>Initial:</em> </td> 1.390 + <td>source-over</td> 1.391 + </tr> 1.392 + <tr valign="baseline"> 1.393 + <td><em>Applies to:</em> </td> 1.394 + <td>See individual properties</td> 1.395 + </tr> 1.396 + <tr valign="baseline"> 1.397 + <td><em>Inherited:</em> </td> 1.398 + <td>See individual properties</td> 1.399 + </tr> 1.400 + <tr valign="baseline"> 1.401 + <td><em>Percentages:</em> </td> 1.402 + <td>N/A</td> 1.403 + </tr> 1.404 + <tr valign="baseline"> 1.405 + <td><em>Media:</em> </td> 1.406 + <td>visual</td> 1.407 + </tr> 1.408 + <tr valign="baseline"> 1.409 + <td><em>Computed value:</em> </td> 1.410 + <td>same as the specified value</td> 1.411 + </tr> 1.412 + <tr valign="baseline"> 1.413 + <td><em>Animatable:</em> </td> 1.414 + <td>No</td> 1.415 + </tr> 1.416 + </tbody> 1.417 + </table> 1.418 + </dd> 1.419 +</dl> 1.420 +</div> 1.421 + 1.422 +<p>The syntax of the property of <var><mix-area></var> is given with:</p> 1.423 +<pre class="blendarea"><dfn id="ltmixareagt"><var><mix-area></var></dfn> = <a href="#ltareagt"><var><area></var></a>? [<a href="#ltblendmodegt"><var><blend-mode></var></a> || <a href="#ltcompositegt"><var><composite-mode></var></a> || <a href="#isolated-propid"><var><isolation-mode></var></a> || <a href="#knockout-propid"><var><knock-out-mode></var></a>]</pre> 1.424 +--> 1.425 +<!-- 1.426 +<h3 id="cssbackgroundsyntax">Specifying blending and compositing in the element background</h3> 1.427 +Defines how background images composite with each other.<br/> 1.428 +Background images must always composite with <a href="#groupcompositingcliptoself">'clip-to-self'</a> set to 'true'.<br/> 1.429 +</p> 1.430 +<p> 1.431 + The description of the <span class="prop-name">'background-composite'</span> property is 1.432 +as follows:</p> 1.433 + 1.434 +<div class="propdef"> 1.435 +<dl> 1.436 + <dt id='propdef-background-composite'><span class='propdef-title prop-name'>'background-composite'</span></dt> 1.437 + <dd> 1.438 + <table summary="background-composite property" class="propinfo" cellspacing="0" 1.439 + cellpadding="0"> 1.440 + <tbody> 1.441 + <tr valign="baseline"> 1.442 + <td><em>Value:</em> </td> 1.443 + <td> <a href="#ltcompositegt"><composite-mode></a># </td> 1.444 + </tr> 1.445 + <tr valign="baseline"> 1.446 + <td><em>Initial:</em> </td> 1.447 + <td>source-over</td> 1.448 + </tr> 1.449 + <tr valign="baseline"> 1.450 + <td><em>Applies to:</em> </td> 1.451 + <td>All HTML elements</span></td> 1.452 + </tr> 1.453 + <tr valign="baseline"> 1.454 + <td><em>Inherited:</em> </td> 1.455 + <td>no</td> 1.456 + </tr> 1.457 + <tr valign="baseline"> 1.458 + <td><em>Percentages:</em> </td> 1.459 + <td>N/A</td> 1.460 + </tr> 1.461 + <tr valign="baseline"> 1.462 + <td><em>Media:</em> </td> 1.463 + <td>visual</td> 1.464 + </tr> 1.465 + <tr valign="baseline"> 1.466 + <td><em>Computed value:</em> </td> 1.467 + <td>same as the specified value</td> 1.468 + </tr> 1.469 + <tr valign="baseline"> 1.470 + <td><em>Animatable:</em> </td> 1.471 + <td>no</td> 1.472 + </tr> 1.473 + </tbody> 1.474 + </table> 1.475 + </dd> 1.476 +</dl> 1.477 +</div> 1.478 +--> 1.479 +<h4 id="background-blend-mode">The <span class="prop-name">'background-blend-mode'</span> property</h4> 1.480 +<p>Defines the blending mode of each background image. <br/> 1.481 +Each background image must blend with the element's background images that are below it and the element's background color. Background image must not blend with the content that is behind the element. 1.482 +<br/>The description of the <span class="prop-name">'background-blend-mode'</span> property is 1.483 +as follows:</p> 1.484 + 1.485 +<div class="propdef"> 1.486 +<dl> 1.487 + <dt id='propdef-mix-blend-mode-background'><span class='propdef-title prop-name'>'background-blend-mode'</span></dt> 1.488 + <dd> 1.489 + <table summary="background-blend-mode property" class="propinfo" cellspacing="0" 1.490 + cellpadding="0"> 1.491 + <tbody> 1.492 + <tr valign="baseline"> 1.493 + <td><em>Value:</em> </td> 1.494 + <td> <a href="#ltblendmodegt"><blendmode></a># </td> 1.495 + </tr> 1.496 + <tr valign="baseline"> 1.497 + <td><em>Initial:</em> </td> 1.498 + <td>normal</td> 1.499 + </tr> 1.500 + <tr valign="baseline"> 1.501 + <td><em>Applies to:</em> </td> 1.502 + <td>All HTML elements</td> 1.503 + </tr> 1.504 + <tr valign="baseline"> 1.505 + <td><em>Inherited:</em> </td> 1.506 + <td>no</td> 1.507 + </tr> 1.508 + <tr valign="baseline"> 1.509 + <td><em>Percentages:</em> </td> 1.510 + <td>N/A</td> 1.511 + </tr> 1.512 + <tr valign="baseline"> 1.513 + <td><em>Media:</em> </td> 1.514 + <td>visual</td> 1.515 + </tr> 1.516 + <tr valign="baseline"> 1.517 + <td><em>Computed value:</em> </td> 1.518 + <td>same as the specified value</td> 1.519 + </tr> 1.520 + <tr valign="baseline"> 1.521 + <td><em>Animatable:</em> </td> 1.522 + <td>no</td> 1.523 + </tr> 1.524 + </tbody> 1.525 + </table> 1.526 + </dd> 1.527 +</dl> 1.528 +</div> 1.529 +<p class="note">The <span class="prop-name">'background-blend-mode'</span> list must apply to images in reverse order. This means that the first element in the list will apply to the image that is on top. If there are fewer items in the list than there are background images, the remaining background images must use the initial value.</p> 1.530 + 1.531 +<h2 id="canvascompositingandblending">Specifying Compositing and Blending in Canvas 2D</h2> 1.532 +<p>The <a href="http://www.w3.org/TR/2dcontext">canvas 2d</a> context has the <a href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> attribute that is used to set the current compositing and blending operator.<p> 1.533 +<!-- 1.534 +<p><a href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> takes the same arguments as the '<a href='#mix-shorthand'>mix</a>' shorthand property except that it doesn't support the <a href="#ltareagt"><area></a>. The 'isolation' and 'knock-out' values are ignored in a canvas 2d context. If a value is not specified, it is assumed to be the default.</p> 1.535 +--> 1.536 +<p>Compositing and blending in canvas 2d must always done with <a href="#groupcompositingcliptoself">'clip-to-self'</a> assumed false. This means that a compositing operation may affect the entire canvas and not just be limited to the shape that is being composited. 1.537 +However, the <a href="http://www.w3.org/TR/2dcontext/#clipping-region">clipping region</a> will still be in effect and limit the affected area.</p> 1.538 +<div class="propdef"> 1.539 +<dl> 1.540 + <dt id='propdef-mix'><span class='propdef-title prop-name'>'globalCompositeOperation'</span></dt> 1.541 + <dd> 1.542 + <table summary="knock-out property" class="propinfo" cellspacing="0" 1.543 + cellpadding="0"> 1.544 + <tbody> 1.545 + <tr valign="baseline"> 1.546 + <td><em>Value:</em> </td> 1.547 + <td> <a href="#ltblendmodegt"><var><blend-mode></var></a> | <a href="#ltcompositegt"><var><composite-mode></var></a> <!--|| <a href="#isolated-propid"><var><isolation-mode></var></a> || <a href="#knockout-propid"><var><knock-out-mode></var></a>--></td> 1.548 + </tr> 1.549 + <tr valign="baseline"> 1.550 + <td><em>Initial:</em> </td> 1.551 + <td>source-over</td> 1.552 + </tr> 1.553 + </tbody> 1.554 + </table> 1.555 + </dd> 1.556 +</dl> 1.557 +</div> 1.558 + 1.559 +<p>The syntax of the property of <var><composite-mode></var> is given with:</p> 1.560 +<pre class="composite"><dfn id="ltcompositegt"><var><composite-mode></var></dfn> = <a href="#porterduffcompositingoperators_clear">clear</a> | <a href="#porterduffcompositingoperators_src">copy</a> | <a href="#porterduffcompositingoperators_dst">destination</a> | <a href="#porterduffcompositingoperators_srcover">source-over</a> | <a href="#porterduffcompositingoperators_dstover">destination-over</a> | <a href="#porterduffcompositingoperators_srcin">source-in</a> | <a href="#porterduffcompositingoperators_dstin">destination-in</a> | <a href="#porterduffcompositingoperators_srcout">source-out</a> | <a href="#porterduffcompositingoperators_dstout">destination-out</a> | <a href="#porterduffcompositingoperators_srcatop">source-atop</a> | <a href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a href="#porterduffcompositingoperators_xor">xor</a> | <a href="#porterduffcompositingoperators_plus">lighter</a></pre> 1.561 + 1.562 +<h2 id="whatiscompositing">Introduction to compositing</h2> 1.563 +<p><em>This subsection is non-normative.</em><br/> 1.564 Compositing is the combining of a graphic element with its backdrop. 1.565 <p> 1.566 The figure below, gives a basic example of compositing. The graphic element, a ... in this case, is overlaid on top of the backdrop to produce a composite image. 1.567 @@ -324,7 +870,7 @@ 1.568 </p> 1.569 </p> 1.570 1.571 -<h3 id="simplealphacompositing">simple alpha compositing</h3> 1.572 +<h3 id="simplealphacompositing">Simple alpha compositing</h3> 1.573 <p> 1.574 The simple alpha compositing model used in previous versions of SVG allowed for the illusion of partial or full transparency. 1.575 While this specification provides the author the choice of many Porter Duff compositing operators and many blending modes, the simple alpha compositing 1.576 @@ -338,10 +884,10 @@ 1.577 </pre> 1.578 Where 1.579 <br/> 1.580 -co: the pixel value after compositing<br/> 1.581 +co: the premultiplied pixel value after compositing<br/> 1.582 Cs: the color value of the source graphic element being composited<br/> 1.583 αs: the alpha value of the source graphic element being composited<br /> 1.584 -Cb: the pixel value of the <a href="#backdrop">backdrop</a><br/> 1.585 +Cb: the color value of the <a href="#backdrop">backdrop</a><br/> 1.586 αb: the alpha value of the <a href="#backdrop">backdrop</a><br/> 1.587 <p class="note"> 1.588 All values are between 0 and 1 inclusive.<br/> 1.589 @@ -531,7 +1077,7 @@ 1.590 </div> 1.591 1.592 <h2 id="generalformula">General Formula for Compositing and Blending</h2> 1.593 -<p> 1.594 +<p><em>This subsection is non-normative.</em><br/> 1.595 The general formula for compositing and blending which allows for selection of the compositing operator and blending function comprises two steps. 1.596 The terms used in these functions will be described in detail in the following sections. 1.597 <p> 1.598 @@ -557,7 +1103,7 @@ 1.599 </p> 1.600 1.601 <h2 id="backdrop">Backdrop calculation</h2> 1.602 -<p> 1.603 +<p><em>This subsection is non-normative.</em><br/> 1.604 The backdrop is the content behind the element and is what the element is composited with. 1.605 This means that the backdrop is the result of compositing all previous elements. 1.606 1.607 @@ -583,7 +1129,7 @@ 1.608 </div> 1.609 1.610 <h2 id="groups">Compositing Groups</h2> 1.611 -<p> 1.612 +<p><em>This subsection is non-normative.</em><br/> 1.613 Compositing groups allow more control over the interaction of compositing with the backdrop. Groups can be used to specify how a compositing effect 1.614 within a group will interact with the content that is already in the scene (the backdrop). 1.615 </p> 1.616 @@ -591,8 +1137,7 @@ 1.617 Compositing groups may be made up of any number of elements, and may contain other compositing groups. 1.618 </p> 1.619 <p> 1.620 -The default properties of a compositing group shall cause no visual difference compared to no groups. See <a href="#groupinvariance">Group Invariance</a>. 1.621 -The result of this is that single elements behave as if they were in a group by themselves. 1.622 +The default properties of a compositing group shall cause no visual difference compared to having no group. See <a href="#groupinvariance">Group Invariance</a>. 1.623 </p> 1.624 <p> 1.625 A compositing group is rendered by first compositing the elements of the group onto the inital backdrop. The result of this is a single element containing 1.626 @@ -601,7 +1146,7 @@ 1.627 <dl> 1.628 <dt id="initialbackdrop">initial backdrop</dt> 1.629 <dd> 1.630 -The intial backdrop is the backdrop selected for compositing the group's first element. This will be the same as the group backdrop in a non-isolated 1.631 +The intial backdrop is the backdrop used for compositing the group's first element. This will be the same as the group backdrop in a non-isolated 1.632 group, or a fully transparent backdrop for an isolated group. 1.633 </dd> 1.634 <dt id="groupbackdrop">group backdrop</dt> 1.635 @@ -614,10 +1159,10 @@ 1.636 1.637 <h3 id="groupinvariance">Group invariance</h3> 1.638 <p> 1.639 -An important behavior of simple alpha compositing is its group invariance. This behavior is preserved in the more complex model described in this specification. 1.640 +An important property of simple alpha compositing is its group invariance. This behavior is preserved in the more complex model described in this specification. 1.641 Adding or removing grouping with default attributes shall not show visual differences.<br/> 1.642 <pre>so: A + B + C = A + (B + C) = (A + B) + C</pre> 1.643 -When adding attributes to the group such as knockout, isolate, blending modes other than normal or Porter Duff compositing operators other than source-over, groups may no longer be invariant. 1.644 +When adding attributes to the group such as 'knockout', 'isolate', blending modes other than 'normal' or Porter Duff compositing operators other than 'source-over', groups may no longer be invariant. 1.645 </p> 1.646 1.647 <h3 id="isolatedgroups">Isolated Groups</h3> 1.648 @@ -653,9 +1198,9 @@ 1.649 The page group may be used as an element in another graphical composition. 1.650 </p> 1.651 <p> 1.652 -For example, <br /> 1.653 -an SVG file contains a red object at 50% opacity, <br /> 1.654 -The user agent composites the page group onto a white background with 100% opacity. <br /> 1.655 +For example, 1.656 +this is an SVG file that contains a red object at 50% opacity. <br /> 1.657 +The user agent will composite the page group onto a white background with 100% opacity. <br /> 1.658 The results are as follows: 1.659 <pre> 1.660 co = RGB(255, 0, 0) * .5 + RGB(255, 255, 255) * 1 * (1 - .5) 1.661 @@ -666,9 +1211,9 @@ 1.662 </p> 1.663 1.664 <h2 id="advancedcompositing">Advanced compositing features</h2> 1.665 -<p> 1.666 +<p><em>This subsection is non-normative.</em><br/> 1.667 <a href="#simplealphacompositing">Simple alpha compositing</a> uses the source-over Porter Duff compositing operator. Additional compositing operators exist and may be specified with the <a href="#propdef-mix-composite">mix-composite property</a>. 1.668 -The additional compositing operators allow for more complex interactions between the shapes of elements being composited. The compositing operators are described in <a href="#porterduffcompositingoperators">'The Porter Duff compositing operators'</a>. 1.669 +The additional compositing operators allow for more complex interactions between the shapes of elements being composited. The compositing operators are described in the <a href="#porterduffcompositingoperators">Porter Duff compositing operators</a>. 1.670 The operators that applies to an element or group is selected using the <a href="#propdef-mix-composite">mix-composite</a> property. 1.671 </p> 1.672 <p> 1.673 @@ -742,7 +1287,7 @@ 1.674 <pre> 1.675 co = αs x Fa x Cs + αb x Fb x Cb 1.676 </pre> 1.677 -Where: co is the output color pre-multiplied with the output alpha [0 <= co <= 1] αs is the coverage of the source Fa is defined by the operator and controls inclusion of the source Cs is the color of the source (not multiplied by alpha) αb is the coverage of the destination Fb is defined by the operator and controls inclusion of the destination Cb is the color of the destination (not multiplied by alpha) 1.678 +Where:<br/>co is the output color pre-multiplied with the output alpha [0 <= co <= 1]<br/>αs is the coverage of the source Fa is defined by the operator and controls inclusion of the source Cs is the color of the source (not multiplied by alpha)<br/>αb is the coverage of the destination Fb is defined by the operator and controls inclusion of the destination Cb is the color of the destination (not multiplied by alpha) 1.679 <h4 id="porterduffcompositingoperators_clear">Clear</h4> 1.680 <p>No regions are enabled.</p> 1.681 <img src="examples/PD_clr.svg" alt="example of porter duff clear"/> 1.682 @@ -851,8 +1396,8 @@ 1.683 <h4 id="groupcompositingisolation">Isolated groups and Porter Duff modes</h4> 1.684 <p> 1.685 When compositing the elements within an isolated group, the elements are composited over an empty (RGBA(0, 0, 0, 0)) initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator 1.686 -which is dependent on the backdrop, such as <a href="#porterduffcompositingoperators_dest">destination</a>, <a href="#porterduffcompositingoperators_srcin">source-in</a>, 1.687 -<a href="#porterduffcompositingoperators_destin">destination-in</a>, <a href="#porterduffcompositingoperators_dest_out">destination-out</a> or <a href="#porterduffcompositingoperators_srcatop">source-atop</a>, 1.688 +which is dependent on the backdrop, such as <a href="#porterduffcompositingoperators_dst">destination</a>, <a href="#porterduffcompositingoperators_srcin">source-in</a>, 1.689 +<a href="#porterduffcompositingoperators_dstin">destination-in</a>, <a href="#porterduffcompositingoperators_dstout">destination-out</a> or <a href="#porterduffcompositingoperators_srcatop">source-atop</a>, 1.690 then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite. 1.691 </p> 1.692 1.693 @@ -877,9 +1422,8 @@ 1.694 </p> 1.695 1.696 <h2 id="blending">Blending</h2> 1.697 -<p> 1.698 -Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap. 1.699 -Blending takes the colors of the source element and mixes them with the <a href="#backdrop">backdrop</a> in areas where the source element and backdrop overlap. 1.700 +<p><em>This subsection is non-normative.</em><br/> 1.701 +Blending is the aspect of compositing that calculates the mixing of colors where the source element and <a href="#backdrop">backdrop</a> overlap.<br/> 1.702 Conceptually, the colors in the source element are blended in place with the backdrop. 1.703 After blending, the modified source element is composited with the backdrop. 1.704 In practice, this is usually all performed in one step. 1.705 @@ -1008,6 +1552,7 @@ 1.706 B(Cb, Cs) = max(Cb, Cs) 1.707 </pre> 1.708 </p> 1.709 +<p class="note">The result must be rounded down if it exceeds the range.</p> 1.710 <img src="examples/lighten.png" alt="example of lighten blending"/> 1.711 1.712 <h4 id="blendingcolordodge">'color-dodge' blend mode</h4> 1.713 @@ -1016,8 +1561,7 @@ 1.714 <pre> 1.715 if(Cb == 0) 1.716 B(Cb, Cs) = 0 1.717 - else 1.718 - if(Cs == 1) 1.719 + else if(Cs == 1) 1.720 B(Cb, Cs) = 1 1.721 else 1.722 B(Cb, Cs) = min(1, Cb / (1 - Cs)) 1.723 @@ -1031,8 +1575,7 @@ 1.724 <pre> 1.725 if(Cb == 1) 1.726 B(Cb, Cs) = 1 1.727 - else 1.728 - if(Cs == 0) 1.729 + else if(Cs == 0) 1.730 B(Cb, Cs) = 0 1.731 else 1.732 B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs) 1.733 @@ -1184,502 +1727,6 @@ 1.734 <div class="example"><img src="examples/isolate_blend_example.png" alt="example of isolated group blending"/></div> 1.735 </p> 1.736 1.737 -<h2 id="csscompositingandblending">Specifying Compositing and Blending in CSS </h2> 1.738 -<h3 id="compositingandblendingorder">Order of graphical operations</h3> 1.739 -The compositing model must follow the <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model: first any filter effect is applied, then any clipping, masking, blending and compositing. 1.740 -</h3> 1.741 - 1.742 -<h3 id="csscompositingrules_CSS">Behavior specific to CSS</h3> 1.743 -<p> 1.744 -If an element specifies non-default blending, compositing or <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a>, its <a href="http://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> and that of all of its children must revert to 'flat'.<br/> 1.745 -The application of non-default blending or compositing to an <var>'<a href="#area-element">element</a>'</var> must also establishe a <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> the same way that CSS <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does. One of the consequences is that elements with z-index must not honor the depth of elements outside of the group.<br/> 1.746 -Everything in CSS that creates a <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be considered a group. HTML elements themselves should not create groups. 1.747 -</p> 1.748 -<p class="issue"> 1.749 -This spec assumes that a stacking context creates an offscreen buffer which is not always the case. We need to clarify what stacking contexts create offscreen buffers or come up with another description. 1.750 -</p> 1.751 - 1.752 -<h3 id="csscompositingrules_SVG">Behavior specific to SVG</h3> 1.753 -<p> 1.754 -In SVG, every element must create a group.<br/> 1.755 -This seems costly but implementations can optimize this by not treating elements with default arguments as groups.<br/> 1.756 -The compositing model follows the <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model: first any filter effect is applied, then any clipping, masking, blending and compositing 1.757 -</p> 1.758 -<p class="issue"> 1.759 -This SVG spec states that every element creates an 'accumulating' group. In practice, few (no) browsers implemented this. We should update the SVG spec so it follows CSS' rules for stacking contexts/offscreen buffers. 1.760 -</p> 1.761 - 1.762 -<h3 id="csscompositingkeyword">Properties</h3> 1.763 -<h4 id="mix-composite">The <span class="prop-name">'mix-composite'</span> property</h4> 1.764 -<p> 1.765 -Defines the compositing mode that must be used on the area of an element.<br/> 1.766 -This behavior is described in more detail in <a href="#advancedcompositing">Advanced compositing features</a>.<br/> 1.767 -The description of the <span class="prop-name">'mix-composite'</span> property is 1.768 -as follows:</p> 1.769 - 1.770 -<div class="propdef"> 1.771 -<dl> 1.772 - <dt id='propdef-mix-composite'><span class='propdef-title prop-name'>'mix-composite'</span></dt> 1.773 - <dd> 1.774 - <table summary="mix-composite property" class="propinfo" cellspacing="0" 1.775 - cellpadding="0"> 1.776 - <tbody> 1.777 - <tr valign="baseline"> 1.778 - <td><em>Value:</em> </td> 1.779 - <td><a href="#ltcompositeareagt"><var><composite-area></var></a># </td> 1.780 - </tr> 1.781 - <tr valign="baseline"> 1.782 - <td><em>Initial:</em> </td> 1.783 - <td>source-over</td> 1.784 - </tr> 1.785 - <tr valign="baseline"> 1.786 - <td><em>Applies to:</em> </td> 1.787 - <td>All elements. In SVG, it applies to svg, g, use, image, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, and marker.</td> 1.788 - </tr> 1.789 - <tr valign="baseline"> 1.790 - <td><em>Inherited:</em> </td> 1.791 - <td>no</td> 1.792 - </tr> 1.793 - <tr valign="baseline"> 1.794 - <td><em>Percentages:</em> </td> 1.795 - <td>N/A</td> 1.796 - </tr> 1.797 - <tr valign="baseline"> 1.798 - <td><em>Media:</em> </td> 1.799 - <td>visual</td> 1.800 - </tr> 1.801 - <tr valign="baseline"> 1.802 - <td><em>Computed value:</em> </td> 1.803 - <td>same as the specified value</td> 1.804 - </tr> 1.805 - <tr valign="baseline"> 1.806 - <td><em>Animatable:</em> </td> 1.807 - <td>no</td> 1.808 - </tr> 1.809 - </tbody> 1.810 - </table> 1.811 - </dd> 1.812 -</dl> 1.813 -</div> 1.814 -<p>The syntax of the property of <var><composite-area></var> is given with:</p> 1.815 -<pre class="compositearea"><dfn id="ltcompositeareagt"><var><composite-area></var></dfn> = <a href="#ltareagt"><area></a>? <a href="#ltcompositegt"><composite-mode></a></pre> 1.816 - 1.817 - 1.818 -<p>The syntax of the property of <var><area></var> is given with:</p> 1.819 -<pre class="area"><dfn id="ltareagt"><var><area></var></dfn> = element | box-shadow | text-shadow | background | border | content</pre> 1.820 -<p>Values have the following meanings:</p> 1.821 - 1.822 - <dl> 1.823 - <dt><dfn id='area-element' title="''element'' value"> 1.824 - ‘<code class=css>element</code>’</dfn></dt> 1.825 - 1.826 - <dd>The area is the whole element, including shadows, background and content</dd> 1.827 - 1.828 - <dt><dfn id='area-box-shadow' title="''box-shadow'' value"> 1.829 - ‘<code class=css>box-shadow</code>’</dfn></dt> 1.830 - 1.831 - <dd>The area is the box shadow</dd> 1.832 - 1.833 - <dt><dfn id='area-text-shadow' title="''text-shadow'' value"> 1.834 - ‘<code class=css>text-shadow</code>’</dfn></dt> 1.835 - 1.836 - <dd>The area is the shadow of the text</dd> 1.837 - 1.838 - <dt><dfn id='area-background' title="''background'' value"> 1.839 - ‘<code class=css>background</code>’</dfn></dt> 1.840 - 1.841 - <dd>The area is the composited result of all the background images.</dd> 1.842 - 1.843 - <dt><dfn id='area-border' title="''border'' value"> 1.844 - ‘<code class=css>border</code>’</dfn></dt> 1.845 - 1.846 - <dd>The area is the composited result of all the borders.</dd> 1.847 - 1.848 - <dt><dfn id='area-content' title="''content'' value"> 1.849 - ‘<code class=css>content</code>’</dfn></dt> 1.850 - 1.851 - <dd>The area is the content of the element (such as the text).</dd> 1.852 - </dl> 1.853 - <p class="note">If <var><area></var> is omitted, <var>'<a href="#area-element">element</a>'</var> must be assumed. An area can only be set once in the CSS property; an attempt to list it more than once must be ignored.</p> 1.854 - <p class="note">In SVG, <var>'<a href="#area-element">element</a>'</var> will be used, regardless of what area is specified.</p> 1.855 - 1.856 -<p>The syntax of the property of <var><composite-mode></var> is given with:</p> 1.857 -<pre class="composite"><dfn id="ltcompositegt"><var><composite-mode></var></dfn> = <a href="#porterduffcompositingoperators_clear">clear</a> | <a href="#porterduffcompositingoperators_src">copy</a> | <a href="#porterduffcompositingoperators_dst">destination</a> | <a href="#porterduffcompositingoperators_srcover">source-over</a> | <a href="#porterduffcompositingoperators_dstover">destination-over</a> | <a href="#porterduffcompositingoperators_srcin">source-in</a> | <a href="#porterduffcompositingoperators_dstin">destination-in</a> | <a href="#porterduffcompositingoperators_srcout">source-out</a> | <a href="#porterduffcompositingoperators_dstout">destination-out</a> | <a href="#porterduffcompositingoperators_srcatop">source-atop</a> | <a href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a href="#porterduffcompositingoperators_xor">xor</a> | <a href="#porterduffcompositingoperators_plus">lighter</a></pre> 1.858 - 1.859 -<p class="note">Applying a non-default compositing mode to the <var>'<a href="#area-element">element</a>'</var> area must establish a new stacking context.</p> 1.860 - 1.861 -<p class="note">Applying a non-default compositing mode to areas other than <var>'<a href="#area-element">element</a>'</var> must render those areas in an offscreen buffer first. This buffer will then be composited.</p> 1.862 - 1.863 -<p class="note">An area must always composite with <a href="#groupcompositingcliptoself">'clip-to-self'</a> set to 'true'.</p> 1.864 - 1.865 -<h4 id="mix-blend-mode">The <span class="prop-name">'mix-blend-mode'</span> property</h4> 1.866 - 1.867 -<p> 1.868 -Defines the blend mode that must be used on an area of the element. 1.869 -The blend mode defines the formula that must be used to mix the colors with the backdrop.<br/> 1.870 -This behavior is described in more detail in <a href="#blending">Blending</a>. 1.871 -</p> 1.872 - 1.873 -<div class="propdef"> 1.874 -<dl> 1.875 - <dt id='propdef-mix-blend-mode'><span class='propdef-title prop-name'>'mix-blend-mode'</span></dt> 1.876 - <dd> 1.877 - <table summary="mix-blend-mode property" class="propinfo" cellspacing="0" 1.878 - cellpadding="0"> 1.879 - <tbody> 1.880 - <tr valign="baseline"> 1.881 - <td><em>Value:</em> </td> 1.882 - <td><a href="#ltblendareagt"><var><blend-area></var></a>#</td> 1.883 - </tr> 1.884 - <tr valign="baseline"> 1.885 - <td><em>Initial:</em> </td> 1.886 - <td>normal</td> 1.887 - </tr> 1.888 - <tr valign="baseline"> 1.889 - <td><em>Applies to:</em> </td> 1.890 - <td>All elements. In SVG, it applies to svg, g, use, image, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, and marker.</td> 1.891 - </tr> 1.892 - <tr valign="baseline"> 1.893 - <td><em>Inherited:</em> </td> 1.894 - <td>no</td> 1.895 - </tr> 1.896 - <tr valign="baseline"> 1.897 - <td><em>Percentages:</em> </td> 1.898 - <td>N/A</td> 1.899 - </tr> 1.900 - <tr valign="baseline"> 1.901 - <td><em>Media:</em> </td> 1.902 - <td>visual</td> 1.903 - </tr> 1.904 - <tr valign="baseline"> 1.905 - <td><em>Computed value:</em> </td> 1.906 - <td>same as the specified value</td> 1.907 - </tr> 1.908 - <tr valign="baseline"> 1.909 - <td><em>Animatable:</em> </td> 1.910 - <td>no</td> 1.911 - </tr> 1.912 - </tbody> 1.913 - </table> 1.914 - </dd> 1.915 -</dl> 1.916 -</div> 1.917 - 1.918 -<p>The syntax of the property of <var><blend-area></var> is given with:</p> 1.919 -<pre class="blendarea"><dfn id="ltblendareagt"><var><blend-area></var></dfn> = <a href="#ltareagt"><area></a>? <a href="#ltblendmodegt"><blend-mode></a></pre> 1.920 - 1.921 -<p>The syntax of the property of <var><blend-mode></var> is given with:</p> 1.922 -<pre class="blendmode"><dfn id="ltblendmodegt"><var><blend-mode></var></dfn> = <a href="#blendingnormal">normal</a> | <a href="#blendingmultiply">multiply</a> | <a href="#blendingscreen">screen</a> | <a href="#blendingoverlay">overlay</a> | <a href="#blendingdarken">darken</a> | <a href="#blendinglighten">lighten</a> | <a href="#blendingcolordodge">color-dodge</a> | <a href="#blendingcolorburn">color-burn</a> | <a href="#blendinghardlight">hard-light</a> | <a href="#blendingsoftlight">soft-light</a> | <a href="#blendingdifference">difference</a> | <a href="#blendingexclusion">exclusion</a> | <a href="#blendinghue">hue</a> | <a href="#blendingsaturation">saturation</a> | <a href="#blendingcolor">color</a> | <a href="#blendingluminosity">luminosity</a></pre> 1.923 - 1.924 -<p class="note">Applying a non-default blendmode to the <var>'<a href="#area-element">element</a>'</var> area must establish a new stacking context.</p> 1.925 - 1.926 -<p class="note">Applying a non-default blendmode to an area other than <var>'<a href="#area-element">element</a>'</var> must render those areas in an offscreen buffer first. This buffer will then be blended and composited.</p> 1.927 - 1.928 -<h4 id="isolation">The <span class="prop-name">'isolation'</span> property</h4> 1.929 -<p> 1.930 -Defines whether a group is isolated or not.<br /> 1.931 -When a group is isolated, the group's backdrop must be ignored and replaced with transparent black.<br /> 1.932 -Groups can be set to non-isolated with the 'auto' keyword. However certain operations that cause the creation of stacking context (such as 3D transforms) will still cause a group to be isolated.<br/> 1.933 -This behavior is described in more detail in <a href="#isolatedgroups">Isolated Gropus</a>. 1.934 -</p> 1.935 - 1.936 -<div class="propdef"> 1.937 -<dl> 1.938 - <dt id='propdef-isolation'><span class='propdef-title prop-name'>'isolation'</span></dt> 1.939 - <dd> 1.940 - <table summary="isolation property" class="propinfo" cellspacing="0" 1.941 - cellpadding="0"> 1.942 - <tbody> 1.943 - <tr valign="baseline"> 1.944 - <td><em>Value:</em> </td> 1.945 - <td><a href="#isolated-propid"><var><isolation-mode></var></a></td> 1.946 - </tr> 1.947 - <tr valign="baseline"> 1.948 - <td><em>Initial:</em> </td> 1.949 - <td>auto</td> 1.950 - </tr> 1.951 - <tr valign="baseline"> 1.952 - <td><em>Applies to:</em> </td> 1.953 - <td>All HTML elements. In SVG, it applies to all container elements except <a href="http://www.w3.org/TR/SVG/masking.html#Masking">'mask'</a></span></td> 1.954 - </tr> 1.955 - <tr valign="baseline"> 1.956 - <td><em>Inherited:</em> </td> 1.957 - <td>no</td> 1.958 - </tr> 1.959 - <tr valign="baseline"> 1.960 - <td><em>Percentages:</em> </td> 1.961 - <td>N/A</td> 1.962 - </tr> 1.963 - <tr valign="baseline"> 1.964 - <td><em>Media:</em> </td> 1.965 - <td>visual</td> 1.966 - </tr> 1.967 - <tr valign="baseline"> 1.968 - <td><em>Computed value:</em> </td> 1.969 - <td>same as the specified value</td> 1.970 - </tr> 1.971 - <tr valign="baseline"> 1.972 - <td><em>Animatable:</em> </td> 1.973 - <td>no</td> 1.974 - </tr> 1.975 - </tbody> 1.976 - </table> 1.977 - </dd> 1.978 -</dl> 1.979 -</div> 1.980 -<p>The syntax of the property of <var><isolation-mode></var> is given with:</p> 1.981 -<pre class="isolated"><dfn id="isolated-propid"><var><isolation-mode></var></dfn> = auto | isolate</pre> 1.982 -<p> 1.983 -In CSS, a background image or the content of an <img> must always be rendered into an isolated group.<br/>For instance, if you link to an SVG file through the 'img' tag, the artwork of that SVG will not blend with the backdrop of the content.</p> 1.984 -<p> 1.985 -In SVG, <a href="http://www.w3.org/TR/SVG/masking.html#Masking">'mask'</a> always creates an isolated group. 1.986 -</p> 1.987 -<p class="note">'Isolation' is always applied to the <a href="#ltareagt">area</a> of the element</p> 1.988 - 1.989 -<h4 id="knock-out">The <span class="prop-name">'knock-out'</span> property</h4> 1.990 -<p> 1.991 -Defines whether a group is a knock-out group.<br/> 1.992 -When a group is set to 'knock-out', the elements within the group must only composite and blend with elements outside that group. This effectively 'knocks out' any element from within the group that is already drawn. The end result is as if every shape composites with a 'clear' operation (with clip-to-self enabled) first before it blends and composites.<br/> 1.993 -When 'knock-out' is set to 'preserve', the group must not be a knock-out group and its elements composite normally.<br/> 1.994 -The behavior of this keyword is described in more detail in <a href="#knockoutgroups">Knockout Groups</a>. 1.995 - 1.996 -<div class="propdef"> 1.997 -<dl> 1.998 - <dt id='propdef-knock-out'><span class='propdef-title prop-name'>'knock-out'</span></dt> 1.999 - <dd> 1.1000 - <table summary="knock-out property" class="propinfo" cellspacing="0" 1.1001 - cellpadding="0"> 1.1002 - <tbody> 1.1003 - <tr valign="baseline"> 1.1004 - <td><em>Value:</em> </td> 1.1005 - <td><a href="#knockout-propid"><var><knock-out-mode></var></a></td> 1.1006 - </tr> 1.1007 - <tr valign="baseline"> 1.1008 - <td><em>Initial:</em> </td> 1.1009 - <td>preserve</td> 1.1010 - </tr> 1.1011 - <tr valign="baseline"> 1.1012 - <td><em>Applies to:</em> </td> 1.1013 - <td>All HTML elements. In SVG, it applies to all container elements except 'mask'</td> 1.1014 - </tr> 1.1015 - <tr valign="baseline"> 1.1016 - <td><em>Inherited:</em> </td> 1.1017 - <td>yes</td> 1.1018 - </tr> 1.1019 - <tr valign="baseline"> 1.1020 - <td><em>Percentages:</em> </td> 1.1021 - <td>N/A</td> 1.1022 - </tr> 1.1023 - <tr valign="baseline"> 1.1024 - <td><em>Media:</em> </td> 1.1025 - <td>visual</td> 1.1026 - </tr> 1.1027 - <tr valign="baseline"> 1.1028 - <td><em>Computed value:</em> </td> 1.1029 - <td>same as the specified value</td> 1.1030 - </tr> 1.1031 - <tr valign="baseline"> 1.1032 - <td><em>Animatable:</em> </td> 1.1033 - <td>no</td> 1.1034 - </tr> 1.1035 - </tbody> 1.1036 - </table> 1.1037 - </dd> 1.1038 -</dl> 1.1039 -</div> 1.1040 -<p>The syntax of the property of <var><knock-out-mode></var> is given with:</p> 1.1041 -<pre class="knockout-prop"><dfn id="knockout-propid"><var><knock-out-mode></var></dfn> = preserve | knock-out</pre> 1.1042 -<p class="note">'Knock-out' is always applied to the area of the element</p> 1.1043 - 1.1044 -<h4 id="mix-shorthand">Compositing and blending shorthand: the <span class="prop-name">'mix'</span> property</h4> 1.1045 -<p> 1.1046 -The 'mix' property is a shorthand property for setting blending and compositing properties at the same place in the style sheet.<br/> 1.1047 -Omitted values are set to their initial values. 1.1048 -</p> 1.1049 -<div class="propdef"> 1.1050 -<dl> 1.1051 - <dt id='propdef-mix'><span class='propdef-title prop-name'>'mix'</span></dt> 1.1052 - <dd> 1.1053 - <table summary="knock-out property" class="propinfo" cellspacing="0" 1.1054 - cellpadding="0"> 1.1055 - <tbody> 1.1056 - <tr valign="baseline"> 1.1057 - <td><em>Value:</em> </td> 1.1058 - <td><a href="#ltmixareagt"><var><mixa-rea></var></a>#</td> 1.1059 - </tr> 1.1060 - <tr valign="baseline"> 1.1061 - <td><em>Initial:</em> </td> 1.1062 - <td>source-over</td> 1.1063 - </tr> 1.1064 - <tr valign="baseline"> 1.1065 - <td><em>Applies to:</em> </td> 1.1066 - <td>See individual properties</td> 1.1067 - </tr> 1.1068 - <tr valign="baseline"> 1.1069 - <td><em>Inherited:</em> </td> 1.1070 - <td>See individual properties</td> 1.1071 - </tr> 1.1072 - <tr valign="baseline"> 1.1073 - <td><em>Percentages:</em> </td> 1.1074 - <td>N/A</td> 1.1075 - </tr> 1.1076 - <tr valign="baseline"> 1.1077 - <td><em>Media:</em> </td> 1.1078 - <td>visual</td> 1.1079 - </tr> 1.1080 - <tr valign="baseline"> 1.1081 - <td><em>Computed value:</em> </td> 1.1082 - <td>same as the specified value</td> 1.1083 - </tr> 1.1084 - <tr valign="baseline"> 1.1085 - <td><em>Animatable:</em> </td> 1.1086 - <td>No</td> 1.1087 - </tr> 1.1088 - </tbody> 1.1089 - </table> 1.1090 - </dd> 1.1091 -</dl> 1.1092 -</div> 1.1093 - 1.1094 -<p>The syntax of the property of <var><mixa-rea></var> is given with:</p> 1.1095 -<pre class="blendarea"><dfn id="ltmixareagt"><var><mix-area></var></dfn> = <a href="#ltareagt"><var><area></var></a>? [<a href="#ltblendmodegt"><var><blend-mode></var></a> || <a href="#ltcompositegt"><var><composite-mode></var></a> || <a href="#isolated-propid"><var><isolation-mode></var></a> || <a href="#knockout-propid"><var><knock-out-mode></var></a>]</pre> 1.1096 - 1.1097 - 1.1098 - 1.1099 -<h3 id="cssbackgroundsyntax">Specifying blending and compositing in the element background</h3> 1.1100 -<h4 id="background-composite">The <span class="prop-name">'background-composite'</span> property</h4> 1.1101 -<p><span class="prop-name">'background-composite'</span> defines how background images composite with each other.<br/> 1.1102 -Background images must always composite with <a href="#groupcompositingcliptoself">'clip-to-self'</a> set to 'true'.<br/> 1.1103 -</p> 1.1104 -<p> 1.1105 - The description of the <span class="prop-name">'background-composite'</span> property is 1.1106 -as follows:</p> 1.1107 - 1.1108 -<div class="propdef"> 1.1109 -<dl> 1.1110 - <dt id='propdef-background-composite'><span class='propdef-title prop-name'>'background-composite'</span></dt> 1.1111 - <dd> 1.1112 - <table summary="background-composite property" class="propinfo" cellspacing="0" 1.1113 - cellpadding="0"> 1.1114 - <tbody> 1.1115 - <tr valign="baseline"> 1.1116 - <td><em>Value:</em> </td> 1.1117 - <td> <a href="#ltcompositegt"><composite-mode></a># </td> 1.1118 - </tr> 1.1119 - <tr valign="baseline"> 1.1120 - <td><em>Initial:</em> </td> 1.1121 - <td>source-over</td> 1.1122 - </tr> 1.1123 - <tr valign="baseline"> 1.1124 - <td><em>Applies to:</em> </td> 1.1125 - <td>All HTML elements</span></td> 1.1126 - </tr> 1.1127 - <tr valign="baseline"> 1.1128 - <td><em>Inherited:</em> </td> 1.1129 - <td>no</td> 1.1130 - </tr> 1.1131 - <tr valign="baseline"> 1.1132 - <td><em>Percentages:</em> </td> 1.1133 - <td>N/A</td> 1.1134 - </tr> 1.1135 - <tr valign="baseline"> 1.1136 - <td><em>Media:</em> </td> 1.1137 - <td>visual</td> 1.1138 - </tr> 1.1139 - <tr valign="baseline"> 1.1140 - <td><em>Computed value:</em> </td> 1.1141 - <td>same as the specified value</td> 1.1142 - </tr> 1.1143 - <tr valign="baseline"> 1.1144 - <td><em>Animatable:</em> </td> 1.1145 - <td>no</td> 1.1146 - </tr> 1.1147 - </tbody> 1.1148 - </table> 1.1149 - </dd> 1.1150 -</dl> 1.1151 -</div> 1.1152 - 1.1153 -<h4 id="background-blend-mode">The <span class="prop-name">'background-blend-mode'</span> property</h4> 1.1154 - 1.1155 -<p>This attribute sets the blending mode of each background image and the background color. <br/> 1.1156 -Each background image will blend with the element's background and the background images at a lower z-index. This must follow the <a href="http://www.w3.org/TR/CSS21/zindex.html">CSS drawing model</a>. 1.1157 - The description of the <span class="prop-name">'background-blend-mode'</span> property is 1.1158 -as follows:</p> 1.1159 - 1.1160 -<div class="propdef"> 1.1161 -<dl> 1.1162 - <dt id='propdef-mix-blend-mode-background'><span class='propdef-title prop-name'>'background-blend-mode'</span></dt> 1.1163 - <dd> 1.1164 - <table summary="background-blend-mode property" class="propinfo" cellspacing="0" 1.1165 - cellpadding="0"> 1.1166 - <tbody> 1.1167 - <tr valign="baseline"> 1.1168 - <td><em>Value:</em> </td> 1.1169 - <td> <a href="#ltblendmodegt"><blendmode></a># </td> 1.1170 - </tr> 1.1171 - <tr valign="baseline"> 1.1172 - <td><em>Initial:</em> </td> 1.1173 - <td>normal</td> 1.1174 - </tr> 1.1175 - <tr valign="baseline"> 1.1176 - <td><em>Applies to:</em> </td> 1.1177 - <td>All HTML elements</td> 1.1178 - </tr> 1.1179 - <tr valign="baseline"> 1.1180 - <td><em>Inherited:</em> </td> 1.1181 - <td>no</td> 1.1182 - </tr> 1.1183 - <tr valign="baseline"> 1.1184 - <td><em>Percentages:</em> </td> 1.1185 - <td>N/A</td> 1.1186 - </tr> 1.1187 - <tr valign="baseline"> 1.1188 - <td><em>Media:</em> </td> 1.1189 - <td>visual</td> 1.1190 - </tr> 1.1191 - <tr valign="baseline"> 1.1192 - <td><em>Computed value:</em> </td> 1.1193 - <td>same as the specified value</td> 1.1194 - </tr> 1.1195 - <tr valign="baseline"> 1.1196 - <td><em>Animatable:</em> </td> 1.1197 - <td>no</td> 1.1198 - </tr> 1.1199 - </tbody> 1.1200 - </table> 1.1201 - </dd> 1.1202 -</dl> 1.1203 -</div> 1.1204 -<p class="note">The <span class="prop-name">'background-blend-mode'</span> list will apply to images in reverse z-order. This means that the first element in the list will apply to the image that is on top. The first element in the list that doesn't correspond with a background image, will apply to the background color. If there are fewer items in the list than there are background images, the remaining background images will use the initial value.</p> 1.1205 - 1.1206 - 1.1207 -<h2 id="canvascompositingandblending">Specifying Compositing and Blending in Canvas 2D</h2> 1.1208 -<p>The <a href="http://www.w3.org/TR/2dcontext">canvas 2d</a> context has the <a href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> attribute that is used to set the current compositing and blending operator.<p> 1.1209 -<p><a href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> takes the same arguments as the '<a href='#mix-shorthand'>mix</a>' shorthand property except that it doesn't support the <a href="#ltareagt"><area></a>. The 'isolation' and 'knock-out' values are ignored in a canvas 2d context. If a value is not specified, it is assumed to be the default.</p> 1.1210 -<p>Compositing and blending in canvas 2d must always done with <a href="#groupcompositingcliptoself">'clip-to-self'</a> assumed false. This means that a compositing operation may affect the entire canvas and not just be limited to the shape that is being composited. 1.1211 -However, the <a href="http://www.w3.org/TR/2dcontext/#clipping-region">clipping region</a> will still be in effect and limit the affected area.</p> 1.1212 -<div class="propdef"> 1.1213 -<dl> 1.1214 - <dt id='propdef-mix'><span class='propdef-title prop-name'>'globalCompositeOperation'</span></dt> 1.1215 - <dd> 1.1216 - <table summary="knock-out property" class="propinfo" cellspacing="0" 1.1217 - cellpadding="0"> 1.1218 - <tbody> 1.1219 - <tr valign="baseline"> 1.1220 - <td><em>Value:</em> </td> 1.1221 - <td> <a href="#ltblendmodegt"><var><blend-mode></var></a> || <a href="#ltcompositegt"><var><composite-mode></var></a> || <a href="#isolated-propid"><var><isolation-mode></var></a> || <a href="#knockout-propid"><var><knock-out-mode></var></a> 1.1222 - </tr> 1.1223 - <tr valign="baseline"> 1.1224 - <td><em>Initial:</em> </td> 1.1225 - <td>source-over</td> 1.1226 - </tr> 1.1227 - </tbody> 1.1228 - </table> 1.1229 - </dd> 1.1230 -</dl> 1.1231 -</div> 1.1232 - 1.1233 <h2 id="security">Security issues with compositing and blending</h2> 1.1234 <p> 1.1235 It is important that the timing to the blending and compositing operations is independant of the source and destination pixel. Operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values.<br/> 1.1236 @@ -1692,6 +1739,10 @@ 1.1237 the element being rendered, without ever having access to the content 1.1238 of the element.</p> 1.1239 1.1240 +<h2>Conformance</h2> 1.1241 + 1.1242 +<!--conformance--> 1.1243 + 1.1244 <h2 id="references1">References</h2> 1.1245 <h3 id="normref">Normative References</h3> 1.1246 <dl>
2.1 --- a/compositing/index.html Tue Mar 12 13:11:08 2013 +0900 2.2 +++ b/compositing/index.html Tue May 14 17:54:08 2013 -0700 2.3 @@ -11,7 +11,7 @@ 2.4 rel=dcterms.rights> 2.5 <meta content="Compositing and Blending Level 1" name=dcterms.title> 2.6 <meta content=text name=dcterms.type> 2.7 - <meta content=2013-03-09 name=dcterms.issued> 2.8 + <meta content=2013-05-15 name=dcterms.date> 2.9 <meta content="Rik Cabanier" name=dcterms.creator> 2.10 <meta content="Nikos Andronikos" name=dcterms.creator> 2.11 <meta content=W3C name=dcterms.publisher> 2.12 @@ -231,14 +231,14 @@ 2.13 2.14 <h1>Compositing and Blending Level 1</h1> 2.15 2.16 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 March 2013</h2> 2.17 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 May 2013</h2> 2.18 2.19 <dl> 2.20 <dt>This version: 2.21 2.22 <dd> <a 2.23 href="https://dvcs.w3.org/hg/FXTF/rawfile/default/compositing/index.html">https://dvcs.w3.org/hg/FXTF/rawfile/default/compositing/index.html</a> 2.24 - <!--http://www.w3.org/TR/2013/WD-compositing-20130309/--> 2.25 + <!--http://www.w3.org/TR/2013/WD-compositing-20130515/--> 2.26 2.27 <dt>Latest version: 2.28 2.29 @@ -357,227 +357,210 @@ 2.30 2.31 <ul class=toc> 2.32 <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> 2.33 - <ul class=toc> 2.34 - <li><a href="#whatiscompositing"><span class=secno>1.1. </span>What is 2.35 - compositing?</a> 2.36 - 2.37 - <li><a href="#simplealphacompositing"><span class=secno>1.2. 2.38 - </span>simple alpha compositing</a> 2.39 - 2.40 - <li><a href="#simplealphacompositingexamples"><span class=secno>1.3. 2.41 - </span>Examples of simple alpha compositing</a> 2.42 - </ul> 2.43 - 2.44 - <li><a href="#generalformula"><span class=secno>2. </span>General Formula 2.45 - for Compositing and Blending</a> 2.46 - 2.47 - <li><a href="#backdrop"><span class=secno>3. </span>Backdrop 2.48 - calculation</a> 2.49 - <ul class=toc> 2.50 - <li><a href="#backdropexamples"><span class=secno>3.1. </span>Examples 2.51 - of backdrop calculation</a> 2.52 - </ul> 2.53 - 2.54 - <li><a href="#groups"><span class=secno>4. </span>Compositing Groups</a> 2.55 - <ul class=toc> 2.56 - <li><a href="#groupinvariance"><span class=secno>4.1. </span>Group 2.57 - invariance</a> 2.58 - 2.59 - <li><a href="#isolatedgroups"><span class=secno>4.2. </span>Isolated 2.60 - Groups</a> 2.61 - 2.62 - <li><a href="#knockoutgroups"><span class=secno>4.3. </span>Knockout 2.63 - Groups</a> 2.64 - 2.65 - <li><a href="#pagebackdrop"><span class=secno>4.4. </span>The Page 2.66 - Group</a> 2.67 - </ul> 2.68 - 2.69 - <li><a href="#advancedcompositing"><span class=secno>5. </span>Advanced 2.70 - compositing features</a> 2.71 - <ul class=toc> 2.72 - <li><a href="#porterduffcompositingoperators"><span class=secno>5.1. 2.73 - </span>The Porter Duff Compositing Operators</a> 2.74 - <ul class=toc> 2.75 - <li><a href="#porterduffcompositingoperators_clear"><span 2.76 - class=secno>5.1.1. </span>Clear</a> 2.77 - 2.78 - <li><a href="#porterduffcompositingoperators_src"><span 2.79 - class=secno>5.1.2. </span>Copy</a> 2.80 - 2.81 - <li><a href="#porterduffcompositingoperators_dst"><span 2.82 - class=secno>5.1.3. </span>Destination</a> 2.83 - 2.84 - <li><a href="#porterduffcompositingoperators_srcover"><span 2.85 - class=secno>5.1.4. </span>Source Over</a> 2.86 - 2.87 - <li><a href="#porterduffcompositingoperators_dstover"><span 2.88 - class=secno>5.1.5. </span>Destination Over</a> 2.89 - 2.90 - <li><a href="#porterduffcompositingoperators_srcin"><span 2.91 - class=secno>5.1.6. </span>Source In</a> 2.92 - 2.93 - <li><a href="#porterduffcompositingoperators_dstin"><span 2.94 - class=secno>5.1.7. </span>Destination In</a> 2.95 - 2.96 - <li><a href="#porterduffcompositingoperators_srcout"><span 2.97 - class=secno>5.1.8. </span>Source Out</a> 2.98 - 2.99 - <li><a href="#porterduffcompositingoperators_dstout"><span 2.100 - class=secno>5.1.9. </span>Destination Out</a> 2.101 - 2.102 - <li><a href="#porterduffcompositingoperators_srcatop"><span 2.103 - class=secno>5.1.10. </span>Source Atop</a> 2.104 - 2.105 - <li><a href="#porterduffcompositingoperators_dstatop"><span 2.106 - class=secno>5.1.11. </span>Destination Atop</a> 2.107 - 2.108 - <li><a href="#porterduffcompositingoperators_xor"><span 2.109 - class=secno>5.1.12. </span>XOR</a> 2.110 - 2.111 - <li><a href="#porterduffcompositingoperators_plus"><span 2.112 - class=secno>5.1.13. </span>Lighter</a> 2.113 - </ul> 2.114 - 2.115 - <li><a href="#groupcompositing"><span class=secno>5.2. </span>Group 2.116 - compositing behavior with Porter Duff modes</a> 2.117 - <ul class=toc> 2.118 - <li><a href="#groupcompositingisolation"><span class=secno>5.2.1. 2.119 - </span>Isolated groups and Porter Duff modes</a> 2.120 - 2.121 - <li><a href="#groupcompositingknockout"><span class=secno>5.2.2. 2.122 - </span>Knockout groups and Porter Duff modes</a> 2.123 - 2.124 - <li><a href="#groupcompositingcliptoself"><span class=secno>5.2.3. 2.125 - </span>Clip to self behavior</a> 2.126 - </ul> 2.127 - </ul> 2.128 - 2.129 - <li><a href="#blending"><span class=secno>6. </span>Blending</a> 2.130 - <ul class=toc> 2.131 - <li><a href="#blendingseparable"><span class=secno>6.1. </span>Separable 2.132 - blend modes</a> 2.133 - <ul class=toc> 2.134 - <li><a href="#blendingnormal"><span class=secno>6.1.1. </span>‘<code 2.135 - class=property>normal</code>’ blend mode</a> 2.136 - 2.137 - <li><a href="#blendingmultiply"><span class=secno>6.1.2. 2.138 - </span>‘<code class=property>multiply</code>’ blend mode</a> 2.139 - 2.140 - <li><a href="#blendingscreen"><span class=secno>6.1.3. </span>‘<code 2.141 - class=property>screen</code>’ blend mode</a> 2.142 - 2.143 - <li><a href="#blendingoverlay"><span class=secno>6.1.4. 2.144 - </span>‘<code class=property>overlay</code>’ blend mode</a> 2.145 - 2.146 - <li><a href="#blendingdarken"><span class=secno>6.1.5. </span>‘<code 2.147 - class=property>darken</code>’ blend mode</a> 2.148 - 2.149 - <li><a href="#blendinglighten"><span class=secno>6.1.6. 2.150 - </span>‘<code class=property>lighten</code>’ blend mode</a> 2.151 - 2.152 - <li><a href="#blendingcolordodge"><span class=secno>6.1.7. 2.153 - </span>‘<code class=property>color-dodge</code>’ blend mode</a> 2.154 - 2.155 - <li><a href="#blendingcolorburn"><span class=secno>6.1.8. 2.156 - </span>‘<code class=property>color-burn</code>’ blend mode</a> 2.157 - 2.158 - <li><a href="#blendinghardlight"><span class=secno>6.1.9. 2.159 - </span>‘<code class=property>hard-light</code>’ blend mode</a> 2.160 - 2.161 - <li><a href="#blendingsoftlight"><span class=secno>6.1.10. 2.162 - </span>‘<code class=property>soft-light</code>’ blend mode</a> 2.163 - 2.164 - <li><a href="#blendingdifference"><span class=secno>6.1.11. 2.165 - </span>‘<code class=property>difference</code>’ blend mode</a> 2.166 - 2.167 - <li><a href="#blendingexclusion"><span class=secno>6.1.12. 2.168 - </span>‘<code class=property>exclusion</code>’ blend mode</a> 2.169 - </ul> 2.170 - 2.171 - <li><a href="#blendingnonseparable"><span class=secno>6.2. 2.172 - </span>Non-separable blend modes</a> 2.173 - <ul class=toc> 2.174 - <li><a href="#blendinghue"><span class=secno>6.2.1. </span>‘<code 2.175 - class=property>hue</code>’ blend mode</a> 2.176 - 2.177 - <li><a href="#blendingsaturation"><span class=secno>6.2.2. 2.178 - </span>‘<code class=property>saturation</code>’ blend mode</a> 2.179 - 2.180 - <li><a href="#blendingcolor"><span class=secno>6.2.3. </span>‘<code 2.181 - class=property>color</code>’ blend mode</a> 2.182 - 2.183 - <li><a href="#blendingluminosity"><span class=secno>6.2.4. 2.184 - </span>‘<code class=property>luminosity</code>’ blend mode</a> 2.185 - </ul> 2.186 - 2.187 - <li><a href="#isolationblending"><span class=secno>6.3. </span>Effect of 2.188 - group isolation on blending</a> 2.189 - </ul> 2.190 - 2.191 - <li><a href="#csscompositingandblending"><span class=secno>7. 2.192 + 2.193 + <li><a href="#reading-this-document"><span class=secno>2. </span>Reading 2.194 + This Document</a> 2.195 + 2.196 + <li><a href="#csscompositingandblending"><span class=secno>3. 2.197 </span>Specifying Compositing and Blending in CSS </a> 2.198 <ul class=toc> 2.199 - <li><a href="#compositingandblendingorder"><span class=secno>7.1. 2.200 + <li><a href="#compositingandblendingorder"><span class=secno>3.1. 2.201 </span>Order of graphical operations</a> 2.202 2.203 - <li><a href="#csscompositingrules_CSS"><span class=secno>7.2. 2.204 + <li><a href="#csscompositingrules_CSS"><span class=secno>3.2. 2.205 </span>Behavior specific to CSS</a> 2.206 2.207 - <li><a href="#csscompositingrules_SVG"><span class=secno>7.3. 2.208 + <li><a href="#csscompositingrules_SVG"><span class=secno>3.3. 2.209 </span>Behavior specific to SVG</a> 2.210 2.211 - <li><a href="#csscompositingkeyword"><span class=secno>7.4. 2.212 - </span>Properties</a> 2.213 + <li><a href="#csskeywords"><span class=secno>3.4. </span>CSS 2.214 + Properties</a> 2.215 <ul class=toc> 2.216 - <li><a href="#mix-composite"><span class=secno>7.4.1. </span>The <span 2.217 - class=prop-name>‘<code 2.218 - class=property>mix-composite</code>’</span> property</a> 2.219 - 2.220 - <li><a href="#mix-blend-mode"><span class=secno>7.4.2. </span>The 2.221 + <li><a href="#mix-blend-mode"><span class=secno>3.4.1. </span>The 2.222 <span class=prop-name>‘<code 2.223 class=property>mix-blend-mode</code>’</span> property</a> 2.224 2.225 - <li><a href="#isolation"><span class=secno>7.4.3. </span>The <span 2.226 + <li><a href="#isolation"><span class=secno>3.4.2. </span>The <span 2.227 class=prop-name>‘<code class=property>isolation</code>’</span> 2.228 property</a> 2.229 2.230 - <li><a href="#knock-out"><span class=secno>7.4.4. </span>The <span 2.231 - class=prop-name>‘<code class=property>knock-out</code>’</span> 2.232 - property</a> 2.233 - 2.234 - <li><a href="#mix-shorthand"><span class=secno>7.4.5. 2.235 - </span>Compositing and blending shorthand: the <span 2.236 - class=prop-name>‘<code class=property>mix</code>’</span> 2.237 - property</a> 2.238 - </ul> 2.239 - 2.240 - <li><a href="#cssbackgroundsyntax"><span class=secno>7.5. 2.241 - </span>Specifying blending and compositing in the element 2.242 - background</a> 2.243 - <ul class=toc> 2.244 - <li><a href="#background-composite"><span class=secno>7.5.1. 2.245 - </span>The <span class=prop-name>‘<code 2.246 - class=property>background-composite</code>’</span> property</a> 2.247 - 2.248 - <li><a href="#background-blend-mode"><span class=secno>7.5.2. 2.249 + <li><a href="#background-blend-mode"><span class=secno>3.4.3. 2.250 </span>The <span class=prop-name>‘<code 2.251 class=property>background-blend-mode</code>’</span> property</a> 2.252 </ul> 2.253 </ul> 2.254 2.255 - <li><a href="#canvascompositingandblending"><span class=secno>8. 2.256 + <li><a href="#canvascompositingandblending"><span class=secno>4. 2.257 </span>Specifying Compositing and Blending in Canvas 2D</a> 2.258 2.259 - <li><a href="#security"><span class=secno>9. </span>Security issues with 2.260 + <li><a href="#whatiscompositing"><span class=secno>5. </span>Introduction 2.261 + to compositing</a> 2.262 + <ul class=toc> 2.263 + <li><a href="#simplealphacompositing"><span class=secno>5.1. 2.264 + </span>Simple alpha compositing</a> 2.265 + 2.266 + <li><a href="#simplealphacompositingexamples"><span class=secno>5.2. 2.267 + </span>Examples of simple alpha compositing</a> 2.268 + </ul> 2.269 + 2.270 + <li><a href="#generalformula"><span class=secno>6. </span>General Formula 2.271 + for Compositing and Blending</a> 2.272 + 2.273 + <li><a href="#backdrop"><span class=secno>7. </span>Backdrop 2.274 + calculation</a> 2.275 + <ul class=toc> 2.276 + <li><a href="#backdropexamples"><span class=secno>7.1. </span>Examples 2.277 + of backdrop calculation</a> 2.278 + </ul> 2.279 + 2.280 + <li><a href="#groups"><span class=secno>8. </span>Compositing Groups</a> 2.281 + <ul class=toc> 2.282 + <li><a href="#groupinvariance"><span class=secno>8.1. </span>Group 2.283 + invariance</a> 2.284 + 2.285 + <li><a href="#isolatedgroups"><span class=secno>8.2. </span>Isolated 2.286 + Groups</a> 2.287 + 2.288 + <li><a href="#knockoutgroups"><span class=secno>8.3. </span>Knockout 2.289 + Groups</a> 2.290 + 2.291 + <li><a href="#pagebackdrop"><span class=secno>8.4. </span>The Page 2.292 + Group</a> 2.293 + </ul> 2.294 + 2.295 + <li><a href="#advancedcompositing"><span class=secno>9. </span>Advanced 2.296 + compositing features</a> 2.297 + <ul class=toc> 2.298 + <li><a href="#porterduffcompositingoperators"><span class=secno>9.1. 2.299 + </span>The Porter Duff Compositing Operators</a> 2.300 + <ul class=toc> 2.301 + <li><a href="#porterduffcompositingoperators_clear"><span 2.302 + class=secno>9.1.1. </span>Clear</a> 2.303 + 2.304 + <li><a href="#porterduffcompositingoperators_src"><span 2.305 + class=secno>9.1.2. </span>Copy</a> 2.306 + 2.307 + <li><a href="#porterduffcompositingoperators_dst"><span 2.308 + class=secno>9.1.3. </span>Destination</a> 2.309 + 2.310 + <li><a href="#porterduffcompositingoperators_srcover"><span 2.311 + class=secno>9.1.4. </span>Source Over</a> 2.312 + 2.313 + <li><a href="#porterduffcompositingoperators_dstover"><span 2.314 + class=secno>9.1.5. </span>Destination Over</a> 2.315 + 2.316 + <li><a href="#porterduffcompositingoperators_srcin"><span 2.317 + class=secno>9.1.6. </span>Source In</a> 2.318 + 2.319 + <li><a href="#porterduffcompositingoperators_dstin"><span 2.320 + class=secno>9.1.7. </span>Destination In</a> 2.321 + 2.322 + <li><a href="#porterduffcompositingoperators_srcout"><span 2.323 + class=secno>9.1.8. </span>Source Out</a> 2.324 + 2.325 + <li><a href="#porterduffcompositingoperators_dstout"><span 2.326 + class=secno>9.1.9. </span>Destination Out</a> 2.327 + 2.328 + <li><a href="#porterduffcompositingoperators_srcatop"><span 2.329 + class=secno>9.1.10. </span>Source Atop</a> 2.330 + 2.331 + <li><a href="#porterduffcompositingoperators_dstatop"><span 2.332 + class=secno>9.1.11. </span>Destination Atop</a> 2.333 + 2.334 + <li><a href="#porterduffcompositingoperators_xor"><span 2.335 + class=secno>9.1.12. </span>XOR</a> 2.336 + 2.337 + <li><a href="#porterduffcompositingoperators_plus"><span 2.338 + class=secno>9.1.13. </span>Lighter</a> 2.339 + </ul> 2.340 + 2.341 + <li><a href="#groupcompositing"><span class=secno>9.2. </span>Group 2.342 + compositing behavior with Porter Duff modes</a> 2.343 + <ul class=toc> 2.344 + <li><a href="#groupcompositingisolation"><span class=secno>9.2.1. 2.345 + </span>Isolated groups and Porter Duff modes</a> 2.346 + 2.347 + <li><a href="#groupcompositingknockout"><span class=secno>9.2.2. 2.348 + </span>Knockout groups and Porter Duff modes</a> 2.349 + 2.350 + <li><a href="#groupcompositingcliptoself"><span class=secno>9.2.3. 2.351 + </span>Clip to self behavior</a> 2.352 + </ul> 2.353 + </ul> 2.354 + 2.355 + <li><a href="#blending"><span class=secno>10. </span>Blending</a> 2.356 + <ul class=toc> 2.357 + <li><a href="#blendingseparable"><span class=secno>10.1. 2.358 + </span>Separable blend modes</a> 2.359 + <ul class=toc> 2.360 + <li><a href="#blendingnormal"><span class=secno>10.1.1. 2.361 + </span>‘<code class=property>normal</code>’ blend mode</a> 2.362 + 2.363 + <li><a href="#blendingmultiply"><span class=secno>10.1.2. 2.364 + </span>‘<code class=property>multiply</code>’ blend mode</a> 2.365 + 2.366 + <li><a href="#blendingscreen"><span class=secno>10.1.3. 2.367 + </span>‘<code class=property>screen</code>’ blend mode</a> 2.368 + 2.369 + <li><a href="#blendingoverlay"><span class=secno>10.1.4. 2.370 + </span>‘<code class=property>overlay</code>’ blend mode</a> 2.371 + 2.372 + <li><a href="#blendingdarken"><span class=secno>10.1.5. 2.373 + </span>‘<code class=property>darken</code>’ blend mode</a> 2.374 + 2.375 + <li><a href="#blendinglighten"><span class=secno>10.1.6. 2.376 + </span>‘<code class=property>lighten</code>’ blend mode</a> 2.377 + 2.378 + <li><a href="#blendingcolordodge"><span class=secno>10.1.7. 2.379 + </span>‘<code class=property>color-dodge</code>’ blend mode</a> 2.380 + 2.381 + <li><a href="#blendingcolorburn"><span class=secno>10.1.8. 2.382 + </span>‘<code class=property>color-burn</code>’ blend mode</a> 2.383 + 2.384 + <li><a href="#blendinghardlight"><span class=secno>10.1.9. 2.385 + </span>‘<code class=property>hard-light</code>’ blend mode</a> 2.386 + 2.387 + <li><a href="#blendingsoftlight"><span class=secno>10.1.10. 2.388 + </span>‘<code class=property>soft-light</code>’ blend mode</a> 2.389 + 2.390 + <li><a href="#blendingdifference"><span class=secno>10.1.11. 2.391 + </span>‘<code class=property>difference</code>’ blend mode</a> 2.392 + 2.393 + <li><a href="#blendingexclusion"><span class=secno>10.1.12. 2.394 + </span>‘<code class=property>exclusion</code>’ blend mode</a> 2.395 + </ul> 2.396 + 2.397 + <li><a href="#blendingnonseparable"><span class=secno>10.2. 2.398 + </span>Non-separable blend modes</a> 2.399 + <ul class=toc> 2.400 + <li><a href="#blendinghue"><span class=secno>10.2.1. </span>‘<code 2.401 + class=property>hue</code>’ blend mode</a> 2.402 + 2.403 + <li><a href="#blendingsaturation"><span class=secno>10.2.2. 2.404 + </span>‘<code class=property>saturation</code>’ blend mode</a> 2.405 + 2.406 + <li><a href="#blendingcolor"><span class=secno>10.2.3. </span>‘<code 2.407 + class=property>color</code>’ blend mode</a> 2.408 + 2.409 + <li><a href="#blendingluminosity"><span class=secno>10.2.4. 2.410 + </span>‘<code class=property>luminosity</code>’ blend mode</a> 2.411 + </ul> 2.412 + 2.413 + <li><a href="#isolationblending"><span class=secno>10.3. </span>Effect 2.414 + of group isolation on blending</a> 2.415 + </ul> 2.416 + 2.417 + <li><a href="#security"><span class=secno>11. </span>Security issues with 2.418 compositing and blending</a> 2.419 2.420 - <li><a href="#references1"><span class=secno>10. </span>References</a> 2.421 + <li><a href="#conformance"><span class=secno>12. </span>Conformance</a> 2.422 + 2.423 + <li><a href="#references1"><span class=secno>13. </span>References</a> 2.424 <ul class=toc> 2.425 - <li><a href="#normref"><span class=secno>10.1. </span>Normative 2.426 + <li><a href="#normref"><span class=secno>13.1. </span>Normative 2.427 References</a> 2.428 2.429 - <li><a href="#informref"><span class=secno>10.2. </span>Informative 2.430 + <li><a href="#informref"><span class=secno>13.2. </span>Informative 2.431 References</a> 2.432 </ul> 2.433 </ul> 2.434 @@ -586,13 +569,711 @@ 2.435 2.436 <h2 id=introduction><span class=secno>1. </span>Introduction</h2> 2.437 2.438 - <p> The first part of this document will describe the algorithms of Porter 2.439 - Duff compositing and blending. The second part describes the properties 2.440 - used to control the compositing in CSS. <br> 2.441 - 2.442 - <h3 id=whatiscompositing><span class=secno>1.1. </span>What is compositing?</h3> 2.443 - 2.444 - <p> Compositing is the combining of a graphic element with its backdrop. 2.445 + <p><em>This subsection is non-normative.</em><br> 2.446 + The first part of this document describes the properties used to control 2.447 + the compositing in CSS. The second part will describe the algorithms of 2.448 + Porter Duff compositing and blending.<br> 2.449 + 2.450 + <h2 id=reading-this-document><span class=secno>2. </span>Reading This 2.451 + Document</h2> 2.452 + 2.453 + <p> Each section of this document is normative unless otherwise 2.454 + specified.<br> 2.455 + This document contains explicit conformance criteria that overlap with 2.456 + some RelaxNG definitions in requirements. If there is any conflict between 2.457 + the two, the explicit conformance criteria are the definitive reference. 2.458 + 2.459 + <h2 id=csscompositingandblending><span class=secno>3. </span>Specifying 2.460 + Compositing and Blending in CSS</h2> 2.461 + 2.462 + <h3 id=compositingandblendingorder><span class=secno>3.1. </span>Order of 2.463 + graphical operations</h3> 2.464 + 2.465 + <p>The compositing model must follow the <a 2.466 + href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG 2.467 + compositing</a> model: first any filter effect is applied, then any 2.468 + clipping, masking, blending and compositing. 2.469 + 2.470 + <h3 id="csscompositingrules_CSS"><span class=secno>3.2. </span>Behavior 2.471 + specific to CSS</h3> 2.472 + 2.473 + <p> If an element specifies non-default blending<!--, compositing--> or <a 2.474 + href="http://www.w3.org/TR/css3-color/#transparency">‘<code 2.475 + class=property>opacity</code>’</a>, its <a 2.476 + href="http://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> 2.477 + and that of all of its children must revert to ‘<code 2.478 + class=property>flat</code>’.<br> 2.479 + The application of non-default blending<!-- or compositing--> to an 2.480 + element must also establish a <a 2.481 + href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> the 2.482 + same way that CSS <a 2.483 + href="http://www.w3.org/TR/css3-color/#transparency">‘<code 2.484 + class=property>opacity</code>’</a> does. One of the consequences is that 2.485 + elements with z-index must not honor the depth of elements outside of the 2.486 + group.<br> 2.487 + <!--Everything in CSS that creates a <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be considered a group. HTML elements themselves should not create groups.--> 2.488 + 2.489 + <p class=issue> This spec assumes that a stacking context creates an 2.490 + offscreen buffer (also known as a group) which is not always the case. 2.491 + Sometimes elements even have internal grouping (for instance with ‘<code 2.492 + class=css>background-attachment: fixed</code>’). We need to clarify when 2.493 + groups are created so we can have interoperable behavior. Ideally it would 2.494 + be a new spec or an extension of the spec that describes <a 2.495 + href="http://www.w3.org/TR/CSS21/zindex.html">stacking contexts</a>. 2.496 + 2.497 + <h3 id="csscompositingrules_SVG"><span class=secno>3.3. </span>Behavior 2.498 + specific to SVG</h3> 2.499 + 2.500 + <p> In SVG, every element must create a non-isolated group. 2.501 + 2.502 + <p class=note>This seems costly but implementations can optimize this by 2.503 + not treating elements with default arguments as groups. 2.504 + 2.505 + <p><br> 2.506 + <!-- SVG has the following <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">compositing model</a>: first any filter effect is applied, then any clipping, masking, blending and compositing --> 2.507 + 2.508 + <p class=issue> This SVG spec states that every element creates an ‘<code 2.509 + class=property>accumulating</code>’ group. In practice, few (no) 2.510 + browsers implemented this. We should update the SVG spec so it follows 2.511 + CSS' rules for grouping. 2.512 + 2.513 + <h3 id=csskeywords><span class=secno>3.4. </span>CSS Properties</h3> 2.514 + <!-- 2.515 +<h4 id="mix-composite">The <span class="prop-name">'mix-composite'</span> property</h4> 2.516 +<p> 2.517 +Defines the compositing mode that must be used on the area of an element.<br/> 2.518 +This behavior is described in more detail in <a href="#advancedcompositing">Advanced compositing features</a>.<br/> 2.519 +The description of the <span class="prop-name">'mix-composite'</span> property is 2.520 +as follows:</p> 2.521 + 2.522 +<div class="propdef"> 2.523 +<dl> 2.524 + <dt id='propdef-mix-composite'><span class='propdef-title prop-name'>'mix-composite'</span></dt> 2.525 + <dd> 2.526 + <table summary="mix-composite property" class="propinfo" cellspacing="0" 2.527 + cellpadding="0"> 2.528 + <tbody> 2.529 + <tr valign="baseline"> 2.530 + <td><em>Value:</em> </td> 2.531 + <td><a href="#ltcompositeareagt"><var><composite-area></var></a># </td> 2.532 + </tr> 2.533 + <tr valign="baseline"> 2.534 + <td><em>Initial:</em> </td> 2.535 + <td>source-over</td> 2.536 + </tr> 2.537 + <tr valign="baseline"> 2.538 + <td><em>Applies to:</em> </td> 2.539 + <td>All elements. In SVG, it applies to svg, g, use, image, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, and marker.</td> 2.540 + </tr> 2.541 + <tr valign="baseline"> 2.542 + <td><em>Inherited:</em> </td> 2.543 + <td>no</td> 2.544 + </tr> 2.545 + <tr valign="baseline"> 2.546 + <td><em>Percentages:</em> </td> 2.547 + <td>N/A</td> 2.548 + </tr> 2.549 + <tr valign="baseline"> 2.550 + <td><em>Media:</em> </td> 2.551 + <td>visual</td> 2.552 + </tr> 2.553 + <tr valign="baseline"> 2.554 + <td><em>Computed value:</em> </td> 2.555 + <td>same as the specified value</td> 2.556 + </tr> 2.557 + <tr valign="baseline"> 2.558 + <td><em>Animatable:</em> </td> 2.559 + <td>no</td> 2.560 + </tr> 2.561 + </tbody> 2.562 + </table> 2.563 + </dd> 2.564 +</dl> 2.565 +</div> 2.566 +<p>The syntax of the property of <var><composite-area></var> is given with:</p> 2.567 +<pre class="compositearea"><dfn id="ltcompositeareagt"><var><composite-area></var></dfn> = <a href="#ltareagt"><area></a>? <a href="#ltcompositegt"><composite-mode></a></pre> 2.568 + 2.569 + 2.570 +<p>The syntax of the property of <var><area></var> is given with:</p> 2.571 +<pre class="area"><dfn id="ltareagt"><var><area></var></dfn> = element | box-shadow | text-shadow | background | border | content</pre> 2.572 +<p>Values have the following meanings:</p> 2.573 + 2.574 + <dl> 2.575 + <dt><dfn id='area-element' title="''element'' value"> 2.576 + ‘<code class=css>element</code>’</dfn></dt> 2.577 + 2.578 + <dd>The area is the whole element, including shadows, background and content</dd> 2.579 + 2.580 + <dt><dfn id='area-box-shadow' title="''box-shadow'' value"> 2.581 + ‘<code class=css>box-shadow</code>’</dfn></dt> 2.582 + 2.583 + <dd>The area is the box shadow</dd> 2.584 + 2.585 + <dt><dfn id='area-text-shadow' title="''text-shadow'' value"> 2.586 + ‘<code class=css>text-shadow</code>’</dfn></dt> 2.587 + 2.588 + <dd>The area is the shadow of the text</dd> 2.589 + 2.590 + <dt><dfn id='area-background' title="''background'' value"> 2.591 + ‘<code class=css>background</code>’</dfn></dt> 2.592 + 2.593 + <dd>The area is the composited result of all the background images.</dd> 2.594 + 2.595 + <dt><dfn id='area-border' title="''border'' value"> 2.596 + ‘<code class=css>border</code>’</dfn></dt> 2.597 + 2.598 + <dd>The area is the composited result of all the borders.</dd> 2.599 + 2.600 + <dt><dfn id='area-content' title="''content'' value"> 2.601 + ‘<code class=css>content</code>’</dfn></dt> 2.602 + 2.603 + <dd>The area is the content of the element (such as the text).</dd> 2.604 + </dl> 2.605 + <p class="note">If <var><area></var> is omitted, <var>'<a href="#area-element">element</a>'</var> must be assumed. An area can only be set once in the CSS property; an attempt to list it more than once must be ignored.</p> 2.606 + <p class="note">In SVG, <var>'<a href="#area-element">element</a>'</var> will be used, regardless of what area is specified.</p> 2.607 + <p class="issue">We need to define more clearly what 'content' means.</p> 2.608 + 2.609 +<p>The syntax of the property of <var><composite-mode></var> is given with:</p> 2.610 +<pre class="composite"><dfn id="ltcompositegt"><var><composite-mode></var></dfn> = <a href="#porterduffcompositingoperators_clear">clear</a> | <a href="#porterduffcompositingoperators_src">copy</a> | <a href="#porterduffcompositingoperators_dst">destination</a> | <a href="#porterduffcompositingoperators_srcover">source-over</a> | <a href="#porterduffcompositingoperators_dstover">destination-over</a> | <a href="#porterduffcompositingoperators_srcin">source-in</a> | <a href="#porterduffcompositingoperators_dstin">destination-in</a> | <a href="#porterduffcompositingoperators_srcout">source-out</a> | <a href="#porterduffcompositingoperators_dstout">destination-out</a> | <a href="#porterduffcompositingoperators_srcatop">source-atop</a> | <a href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a href="#porterduffcompositingoperators_xor">xor</a> | <a href="#porterduffcompositingoperators_plus">lighter</a></pre> 2.611 + 2.612 +<p class="note">Applying a non-default compositing mode to the <var>'<a href="#area-element">element</a>'</var> area must establish a new stacking context.</p> 2.613 + 2.614 +<p class="note">Applying a non-default compositing mode to areas other than <var>'<a href="#area-element">element</a>'</var> must render those areas in an offscreen buffer first. This buffer will then be composited.</p> 2.615 + 2.616 +<p class="note">An area must always composite with <a href="#groupcompositingcliptoself">'clip-to-self'</a> set to 'true'.</p> 2.617 +--> 2.618 + 2.619 + <h4 id=mix-blend-mode><span class=secno>3.4.1. </span>The <span 2.620 + class=prop-name>‘<code class=property>mix-blend-mode</code>’</span> 2.621 + property</h4> 2.622 + 2.623 + <p> Defines the blend mode that must be used on an area of the element. The 2.624 + blend mode defines the formula that must be used to mix the colors with 2.625 + the backdrop.<br> 2.626 + This behavior is described in more detail in <a 2.627 + href="#blending">Blending</a>. 2.628 + 2.629 + <div class=propdef> 2.630 + <dl> 2.631 + <dt id=propdef-mix-blend-mode><span 2.632 + class="propdef-title prop-name">‘<code 2.633 + class=property>mix-blend-mode</code>’</span> 2.634 + 2.635 + <dd> 2.636 + <table cellpadding=0 cellspacing=0 class=propinfo 2.637 + summary="mix-blend-mode property"> 2.638 + <tbody> 2.639 + <tr valign=baseline> 2.640 + <td><em>Value:</em> 2.641 + 2.642 + <td><a href="#ltblendmodegt"><var><blend-mode></var></a># 2.643 + 2.644 + <tr valign=baseline> 2.645 + <td><em>Initial:</em> 2.646 + 2.647 + <td>normal 2.648 + 2.649 + <tr valign=baseline> 2.650 + <td><em>Applies to:</em> 2.651 + 2.652 + <td>All elements. In SVG, it applies to svg, g, use, image, path, 2.653 + rect, circle, ellipse, line, polyline, polygon, text, tspan, and 2.654 + marker. 2.655 + 2.656 + <tr valign=baseline> 2.657 + <td><em>Inherited:</em> 2.658 + 2.659 + <td>no 2.660 + 2.661 + <tr valign=baseline> 2.662 + <td><em>Percentages:</em> 2.663 + 2.664 + <td>N/A 2.665 + 2.666 + <tr valign=baseline> 2.667 + <td><em>Media:</em> 2.668 + 2.669 + <td>visual 2.670 + 2.671 + <tr valign=baseline> 2.672 + <td><em>Computed value:</em> 2.673 + 2.674 + <td>same as the specified value 2.675 + 2.676 + <tr valign=baseline> 2.677 + <td><em>Animatable:</em> 2.678 + 2.679 + <td>no 2.680 + </table> 2.681 + </dl> 2.682 + </div> 2.683 + <!-- 2.684 +<p>The syntax of the property of <var><blend-area></var> is given with:</p> 2.685 +<pre class="blendarea"><dfn id="ltblendareagt"><var><blend-area></var></dfn> = <a href="#ltareagt"><area></a>? <a href="#ltblendmodegt"><blend-mode></a></pre> 2.686 + 2.687 +<p>The syntax of the property of <var><area></var> is given with:</p> 2.688 +<pre class="area"><dfn id="ltareagt"><var><area></var></dfn> = element | box-shadow | text-shadow | background | border | content</pre> 2.689 +<p>Values have the following meanings:</p> 2.690 + 2.691 + <dl> 2.692 + <dt><dfn id='area-element' title="''element'' value"> 2.693 + ‘<code class=css>element</code>’</dfn></dt> 2.694 + 2.695 + <dd>The area is the whole element, including shadows, background and content</dd> 2.696 + 2.697 + <dt><dfn id='area-box-shadow' title="''box-shadow'' value"> 2.698 + ‘<code class=css>box-shadow</code>’</dfn></dt> 2.699 + 2.700 + <dd>The area is the box shadow</dd> 2.701 + 2.702 + <dt><dfn id='area-text-shadow' title="''text-shadow'' value"> 2.703 + ‘<code class=css>text-shadow</code>’</dfn></dt> 2.704 + 2.705 + <dd>The area is the shadow of the text</dd> 2.706 + 2.707 + <dt><dfn id='area-background' title="''background'' value"> 2.708 + ‘<code class=css>background</code>’</dfn></dt> 2.709 + 2.710 + <dd>The area is the composited result of all the background images.</dd> 2.711 + 2.712 + <dt><dfn id='area-border' title="''border'' value"> 2.713 + ‘<code class=css>border</code>’</dfn></dt> 2.714 + 2.715 + <dd>The area is the composited result of all the borders.</dd> 2.716 + 2.717 + <dt><dfn id='area-content' title="''content'' value"> 2.718 + ‘<code class=css>content</code>’</dfn></dt> 2.719 + 2.720 + <dd>The area is the content of the element (such as the text).</dd> 2.721 + </dl> 2.722 + <p class="note">If <var><area></var> is omitted, <var>'<a href="#area-element">element</a>'</var> must be assumed. An area can only be set once in the CSS property; an attempt to list it more than once must be ignored.</p> 2.723 + <p class="note">In SVG, <var>'<a href="#area-element">element</a>'</var> will be used, regardless of what area is specified.</p> 2.724 + <p class="issue">We need to define more clearly what 'content' means.</p> 2.725 +--> 2.726 + 2.727 + <p>The syntax of the property of <a 2.728 + href="#ltblendmodegt"><var><blend-mode></var></a> is given with: 2.729 + 2.730 + <pre class=blendmode><dfn 2.731 + id=ltblendmodegt><var><blend-mode></var></dfn> = <a 2.732 + href="#blendingnormal">normal</a> | <a 2.733 + href="#blendingmultiply">multiply</a> | <a 2.734 + href="#blendingscreen">screen</a> | <a 2.735 + href="#blendingoverlay">overlay</a> | <a 2.736 + href="#blendingdarken">darken</a> | <a 2.737 + href="#blendinglighten">lighten</a> | <a 2.738 + href="#blendingcolordodge">color-dodge</a> | <a 2.739 + href="#blendingcolorburn">color-burn</a> | <a 2.740 + href="#blendinghardlight">hard-light</a> | <a 2.741 + href="#blendingsoftlight">soft-light</a> | <a 2.742 + href="#blendingdifference">difference</a> | <a 2.743 + href="#blendingexclusion">exclusion</a> | <a 2.744 + href="#blendinghue">hue</a> | <a 2.745 + href="#blendingsaturation">saturation</a> | <a 2.746 + href="#blendingcolor">color</a> | <a 2.747 + href="#blendingluminosity">luminosity</a></pre> 2.748 + 2.749 + <p class=note>Applying a non-default blendmode to the element must 2.750 + establish a new stacking context. 2.751 + 2.752 + <p class=note>Applying a non-default blendmode to an area must render it to 2.753 + a group. This group will then be blended and composited. 2.754 + 2.755 + <h4 id=isolation><span class=secno>3.4.2. </span>The <span 2.756 + class=prop-name>‘<code class=property>isolation</code>’</span> 2.757 + property</h4> 2.758 + 2.759 + <p> Defines whether a group is isolated or not.<br> 2.760 + When a group is isolated, the group's backdrop must be replaced with 2.761 + transparent black.<br> 2.762 + Groups can be set to non-isolated with the ‘<code 2.763 + class=property>auto</code>’ keyword. However certain operations that 2.764 + cause the creation of stacking context (such as 3D transforms or a 2.765 + non-default blend mode on the ‘<code class=property>element</code>’ <a 2.766 + href="#ltareagt">area</a>) will cause a group to be isolated.<br> 2.767 + This behavior is described in more detail in <a 2.768 + href="#isolatedgroups">Isolated Gropus</a>. 2.769 + 2.770 + <div class=propdef> 2.771 + <dl> 2.772 + <dt id=propdef-isolation><span class="propdef-title prop-name">‘<code 2.773 + class=property>isolation</code>’</span> 2.774 + 2.775 + <dd> 2.776 + <table cellpadding=0 cellspacing=0 class=propinfo 2.777 + summary="isolation property"> 2.778 + <tbody> 2.779 + <tr valign=baseline> 2.780 + <td><em>Value:</em> 2.781 + 2.782 + <td><a href="#isolated-propid"><var><isolation-mode></var></a> 2.783 + 2.784 + <tr valign=baseline> 2.785 + <td><em>Initial:</em> 2.786 + 2.787 + <td>auto 2.788 + 2.789 + <tr valign=baseline> 2.790 + <td><em>Applies to:</em> 2.791 + 2.792 + <td>All HTML elements. In SVG, it applies to all container elements 2.793 + except <a 2.794 + href="http://www.w3.org/TR/SVG/masking.html#Masking">‘<code 2.795 + class=property>mask</code>’</a> 2.796 + 2.797 + <tr valign=baseline> 2.798 + <td><em>Inherited:</em> 2.799 + 2.800 + <td>no 2.801 + 2.802 + <tr valign=baseline> 2.803 + <td><em>Percentages:</em> 2.804 + 2.805 + <td>N/A 2.806 + 2.807 + <tr valign=baseline> 2.808 + <td><em>Media:</em> 2.809 + 2.810 + <td>visual 2.811 + 2.812 + <tr valign=baseline> 2.813 + <td><em>Computed value:</em> 2.814 + 2.815 + <td>same as the specified value 2.816 + 2.817 + <tr valign=baseline> 2.818 + <td><em>Animatable:</em> 2.819 + 2.820 + <td>no 2.821 + </table> 2.822 + </dl> 2.823 + </div> 2.824 + 2.825 + <p>The syntax of the property of <a 2.826 + href="#isolated-propid"><var><isolation-mode></var></a> is given 2.827 + with: 2.828 + 2.829 + <pre class=isolated><dfn 2.830 + id=isolated-propid><var><isolation-mode></var></dfn> = auto | isolate</pre> 2.831 + 2.832 + <p> In CSS, a background image or the content of an <img> must always 2.833 + be rendered into an isolated group.<br> 2.834 + For instance, if you link to an SVG file through the ‘<code 2.835 + class=property>img</code>’ tag, the artwork of that SVG will not blend 2.836 + with the backdrop of the content. 2.837 + 2.838 + <p> In SVG, <a 2.839 + href="http://www.w3.org/TR/SVG/masking.html#Masking">‘<code 2.840 + class=property>mask</code>’</a> always creates an isolated group. 2.841 + 2.842 + <p class=note>‘<code class=property>Isolation</code>’ is always applied 2.843 + to the ‘<code class=property>element</code>’ <a 2.844 + href="#ltareagt">area</a></p> 2.845 + <!-- 2.846 +<h4 id="knock-out">The <span class="prop-name">'knock-out'</span> property</h4> 2.847 +<p> 2.848 +Defines whether a group is a knock-out group.<br/> 2.849 +When a group is set to 'knock-out', the elements within the group must only composite and blend with elements outside that group. This effectively 'knocks out' any element from within the group that is already drawn. The end result is as if every shape composites with a 'clear' operation (with clip-to-self enabled) first before it blends and composites.<br/> 2.850 +When 'knock-out' is set to 'preserve', the group must not be a knock-out group and its elements composite normally.<br/> 2.851 +The behavior of this keyword is described in more detail in <a href="#knockoutgroups">Knockout Groups</a>. 2.852 + 2.853 +<div class="propdef"> 2.854 +<dl> 2.855 + <dt id='propdef-knock-out'><span class='propdef-title prop-name'>'knock-out'</span></dt> 2.856 + <dd> 2.857 + <table summary="knock-out property" class="propinfo" cellspacing="0" 2.858 + cellpadding="0"> 2.859 + <tbody> 2.860 + <tr valign="baseline"> 2.861 + <td><em>Value:</em> </td> 2.862 + <td><a href="#knockout-propid"><var><knock-out-mode></var></a></td> 2.863 + </tr> 2.864 + <tr valign="baseline"> 2.865 + <td><em>Initial:</em> </td> 2.866 + <td>preserve</td> 2.867 + </tr> 2.868 + <tr valign="baseline"> 2.869 + <td><em>Applies to:</em> </td> 2.870 + <td>All HTML elements. In SVG, it applies to all container elements except 'mask'</td> 2.871 + </tr> 2.872 + <tr valign="baseline"> 2.873 + <td><em>Inherited:</em> </td> 2.874 + <td>yes</td> 2.875 + </tr> 2.876 + <tr valign="baseline"> 2.877 + <td><em>Percentages:</em> </td> 2.878 + <td>N/A</td> 2.879 + </tr> 2.880 + <tr valign="baseline"> 2.881 + <td><em>Media:</em> </td> 2.882 + <td>visual</td> 2.883 + </tr> 2.884 + <tr valign="baseline"> 2.885 + <td><em>Computed value:</em> </td> 2.886 + <td>same as the specified value</td> 2.887 + </tr> 2.888 + <tr valign="baseline"> 2.889 + <td><em>Animatable:</em> </td> 2.890 + <td>no</td> 2.891 + </tr> 2.892 + </tbody> 2.893 + </table> 2.894 + </dd> 2.895 +</dl> 2.896 +</div> 2.897 +<p>The syntax of the property of <var><knock-out-mode></var> is given with:</p> 2.898 +<pre class="knockout-prop"><dfn id="knockout-propid"><var><knock-out-mode></var></dfn> = preserve | knock-out</pre> 2.899 +<p class="note">'Knock-out' is always applied to the area of the element</p> 2.900 + 2.901 +<h4 id="mix-shorthand">Compositing and blending shorthand: the <span class="prop-name">'mix'</span> property</h4> 2.902 +<p> 2.903 +The 'mix' property is a shorthand property for setting blending and compositing properties at the same place in the style sheet.<br/> 2.904 +Omitted values are set to their initial values. 2.905 +</p> 2.906 +<div class="propdef"> 2.907 +<dl> 2.908 + <dt id='propdef-mix'><span class='propdef-title prop-name'>'mix'</span></dt> 2.909 + <dd> 2.910 + <table summary="knock-out property" class="propinfo" cellspacing="0" 2.911 + cellpadding="0"> 2.912 + <tbody> 2.913 + <tr valign="baseline"> 2.914 + <td><em>Value:</em> </td> 2.915 + <td><a href="#ltmixareagt"><var><mix-area></var></a>#</td> 2.916 + </tr> 2.917 + <tr valign="baseline"> 2.918 + <td><em>Initial:</em> </td> 2.919 + <td>source-over</td> 2.920 + </tr> 2.921 + <tr valign="baseline"> 2.922 + <td><em>Applies to:</em> </td> 2.923 + <td>See individual properties</td> 2.924 + </tr> 2.925 + <tr valign="baseline"> 2.926 + <td><em>Inherited:</em> </td> 2.927 + <td>See individual properties</td> 2.928 + </tr> 2.929 + <tr valign="baseline"> 2.930 + <td><em>Percentages:</em> </td> 2.931 + <td>N/A</td> 2.932 + </tr> 2.933 + <tr valign="baseline"> 2.934 + <td><em>Media:</em> </td> 2.935 + <td>visual</td> 2.936 + </tr> 2.937 + <tr valign="baseline"> 2.938 + <td><em>Computed value:</em> </td> 2.939 + <td>same as the specified value</td> 2.940 + </tr> 2.941 + <tr valign="baseline"> 2.942 + <td><em>Animatable:</em> </td> 2.943 + <td>No</td> 2.944 + </tr> 2.945 + </tbody> 2.946 + </table> 2.947 + </dd> 2.948 +</dl> 2.949 +</div> 2.950 + 2.951 +<p>The syntax of the property of <var><mix-area></var> is given with:</p> 2.952 +<pre class="blendarea"><dfn id="ltmixareagt"><var><mix-area></var></dfn> = <a href="#ltareagt"><var><area></var></a>? [<a href="#ltblendmodegt"><var><blend-mode></var></a> || <a href="#ltcompositegt"><var><composite-mode></var></a> || <a href="#isolated-propid"><var><isolation-mode></var></a> || <a href="#knockout-propid"><var><knock-out-mode></var></a>]</pre> 2.953 +--> 2.954 + <!-- 2.955 +<h3 id="cssbackgroundsyntax">Specifying blending and compositing in the element background</h3> 2.956 +Defines how background images composite with each other.<br/> 2.957 +Background images must always composite with <a href="#groupcompositingcliptoself">'clip-to-self'</a> set to 'true'.<br/> 2.958 +</p> 2.959 +<p> 2.960 + The description of the <span class="prop-name">'background-composite'</span> property is 2.961 +as follows:</p> 2.962 + 2.963 +<div class="propdef"> 2.964 +<dl> 2.965 + <dt id='propdef-background-composite'><span class='propdef-title prop-name'>'background-composite'</span></dt> 2.966 + <dd> 2.967 + <table summary="background-composite property" class="propinfo" cellspacing="0" 2.968 + cellpadding="0"> 2.969 + <tbody> 2.970 + <tr valign="baseline"> 2.971 + <td><em>Value:</em> </td> 2.972 + <td> <a href="#ltcompositegt"><composite-mode></a># </td> 2.973 + </tr> 2.974 + <tr valign="baseline"> 2.975 + <td><em>Initial:</em> </td> 2.976 + <td>source-over</td> 2.977 + </tr> 2.978 + <tr valign="baseline"> 2.979 + <td><em>Applies to:</em> </td> 2.980 + <td>All HTML elements</span></td> 2.981 + </tr> 2.982 + <tr valign="baseline"> 2.983 + <td><em>Inherited:</em> </td> 2.984 + <td>no</td> 2.985 + </tr> 2.986 + <tr valign="baseline"> 2.987 + <td><em>Percentages:</em> </td> 2.988 + <td>N/A</td> 2.989 + </tr> 2.990 + <tr valign="baseline"> 2.991 + <td><em>Media:</em> </td> 2.992 + <td>visual</td> 2.993 + </tr> 2.994 + <tr valign="baseline"> 2.995 + <td><em>Computed value:</em> </td> 2.996 + <td>same as the specified value</td> 2.997 + </tr> 2.998 + <tr valign="baseline"> 2.999 + <td><em>Animatable:</em> </td> 2.1000 + <td>no</td> 2.1001 + </tr> 2.1002 + </tbody> 2.1003 + </table> 2.1004 + </dd> 2.1005 +</dl> 2.1006 +</div> 2.1007 +--> 2.1008 + 2.1009 + <h4 id=background-blend-mode><span class=secno>3.4.3. </span>The <span 2.1010 + class=prop-name>‘<code 2.1011 + class=property>background-blend-mode</code>’</span> property</h4> 2.1012 + 2.1013 + <p>Defines the blending mode of each background image. <br> 2.1014 + Each background image must blend with the element's background images that 2.1015 + are below it and the element's background color. Background image must not 2.1016 + blend with the content that is behind the element. <br> 2.1017 + The description of the <span class=prop-name>‘<code 2.1018 + class=property>background-blend-mode</code>’</span> property is as 2.1019 + follows: 2.1020 + 2.1021 + <div class=propdef> 2.1022 + <dl> 2.1023 + <dt id=propdef-mix-blend-mode-background><span 2.1024 + class="propdef-title prop-name">‘<code 2.1025 + class=property>background-blend-mode</code>’</span> 2.1026 + 2.1027 + <dd> 2.1028 + <table cellpadding=0 cellspacing=0 class=propinfo 2.1029 + summary="background-blend-mode property"> 2.1030 + <tbody> 2.1031 + <tr valign=baseline> 2.1032 + <td><em>Value:</em> 2.1033 + 2.1034 + <td> <a href="#ltblendmodegt"><blendmode></a># 2.1035 + 2.1036 + <tr valign=baseline> 2.1037 + <td><em>Initial:</em> 2.1038 + 2.1039 + <td>normal 2.1040 + 2.1041 + <tr valign=baseline> 2.1042 + <td><em>Applies to:</em> 2.1043 + 2.1044 + <td>All HTML elements 2.1045 + 2.1046 + <tr valign=baseline> 2.1047 + <td><em>Inherited:</em> 2.1048 + 2.1049 + <td>no 2.1050 + 2.1051 + <tr valign=baseline> 2.1052 + <td><em>Percentages:</em> 2.1053 + 2.1054 + <td>N/A 2.1055 + 2.1056 + <tr valign=baseline> 2.1057 + <td><em>Media:</em> 2.1058 + 2.1059 + <td>visual 2.1060 + 2.1061 + <tr valign=baseline> 2.1062 + <td><em>Computed value:</em> 2.1063 + 2.1064 + <td>same as the specified value 2.1065 + 2.1066 + <tr valign=baseline> 2.1067 + <td><em>Animatable:</em> 2.1068 + 2.1069 + <td>no 2.1070 + </table> 2.1071 + </dl> 2.1072 + </div> 2.1073 + 2.1074 + <p class=note>The <span class=prop-name>‘<code 2.1075 + class=property>background-blend-mode</code>’</span> list must apply to 2.1076 + images in reverse order. This means that the first element in the list 2.1077 + will apply to the image that is on top. If there are fewer items in the 2.1078 + list than there are background images, the remaining background images 2.1079 + must use the initial value. 2.1080 + 2.1081 + <h2 id=canvascompositingandblending><span class=secno>4. </span>Specifying 2.1082 + Compositing and Blending in Canvas 2D</h2> 2.1083 + 2.1084 + <p>The <a href="http://www.w3.org/TR/2dcontext">canvas 2d</a> context has 2.1085 + the <a 2.1086 + href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> 2.1087 + attribute that is used to set the current compositing and blending 2.1088 + operator. 2.1089 + 2.1090 + <p> <!-- 2.1091 +<p><a href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> takes the same arguments as the '<a href='#mix-shorthand'>mix</a>' shorthand property except that it doesn't support the <a href="#ltareagt"><area></a>. The 'isolation' and 'knock-out' values are ignored in a canvas 2d context. If a value is not specified, it is assumed to be the default.</p> 2.1092 +--> 2.1093 + 2.1094 + <p>Compositing and blending in canvas 2d must always done with <a 2.1095 + href="#groupcompositingcliptoself">‘<code 2.1096 + class=property>clip-to-self</code>’</a> assumed false. This means that a 2.1097 + compositing operation may affect the entire canvas and not just be limited 2.1098 + to the shape that is being composited. However, the <a 2.1099 + href="http://www.w3.org/TR/2dcontext/#clipping-region">clipping region</a> 2.1100 + will still be in effect and limit the affected area. 2.1101 + 2.1102 + <div class=propdef> 2.1103 + <dl> 2.1104 + <dt id=propdef-mix><span class="propdef-title prop-name">‘<code 2.1105 + class=property>globalCompositeOperation</code>’</span> 2.1106 + 2.1107 + <dd> 2.1108 + <table cellpadding=0 cellspacing=0 class=propinfo 2.1109 + summary="knock-out property"> 2.1110 + <tbody> 2.1111 + <tr valign=baseline> 2.1112 + <td><em>Value:</em> 2.1113 + 2.1114 + <td> <a href="#ltblendmodegt"><var><blend-mode></var></a> | <a 2.1115 + href="#ltcompositegt"><var><composite-mode></var></a> 2.1116 + <!--|| <a href="#isolated-propid"><var><isolation-mode></var></a> || <a href="#knockout-propid"><var><knock-out-mode></var></a>--> 2.1117 + 2.1118 + <tr valign=baseline> 2.1119 + <td><em>Initial:</em> 2.1120 + 2.1121 + <td>source-over 2.1122 + </table> 2.1123 + </dl> 2.1124 + </div> 2.1125 + 2.1126 + <p>The syntax of the property of <a 2.1127 + href="#ltcompositegt"><var><composite-mode></var></a> is given with: 2.1128 + 2.1129 + <pre class=composite><dfn 2.1130 + id=ltcompositegt><var><composite-mode></var></dfn> = <a 2.1131 + href="#porterduffcompositingoperators_clear">clear</a> | <a 2.1132 + href="#porterduffcompositingoperators_src">copy</a> | <a 2.1133 + href="#porterduffcompositingoperators_dst">destination</a> | <a 2.1134 + href="#porterduffcompositingoperators_srcover">source-over</a> | <a 2.1135 + href="#porterduffcompositingoperators_dstover">destination-over</a> | <a 2.1136 + href="#porterduffcompositingoperators_srcin">source-in</a> | <a 2.1137 + href="#porterduffcompositingoperators_dstin">destination-in</a> | <a 2.1138 + href="#porterduffcompositingoperators_srcout">source-out</a> | <a 2.1139 + href="#porterduffcompositingoperators_dstout">destination-out</a> | <a 2.1140 + href="#porterduffcompositingoperators_srcatop">source-atop</a> | <a 2.1141 + href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a 2.1142 + href="#porterduffcompositingoperators_xor">xor</a> | <a 2.1143 + href="#porterduffcompositingoperators_plus">lighter</a></pre> 2.1144 + 2.1145 + <h2 id=whatiscompositing><span class=secno>5. </span>Introduction to 2.1146 + compositing</h2> 2.1147 + 2.1148 + <p><em>This subsection is non-normative.</em><br> 2.1149 + Compositing is the combining of a graphic element with its backdrop. 2.1150 2.1151 <p> The figure below, gives a basic example of compositing. The graphic 2.1152 element, a ... in this case, is overlaid on top of the backdrop to produce 2.1153 @@ -626,7 +1307,7 @@ 2.1154 pixel. A value of 1 means that the pixel is fully opaque; the geometry 2.1155 completely overlaps the pixel. 2.1156 2.1157 - <h3 id=simplealphacompositing><span class=secno>1.2. </span>simple alpha 2.1158 + <h3 id=simplealphacompositing><span class=secno>5.1. </span>Simple alpha 2.1159 compositing</h3> 2.1160 2.1161 <p> The simple alpha compositing model used in previous versions of SVG 2.1162 @@ -643,10 +1324,10 @@ 2.1163 </pre> 2.1164 2.1165 <p>Where <br> 2.1166 - co: the pixel value after compositing<br> 2.1167 + co: the premultiplied pixel value after compositing<br> 2.1168 Cs: the color value of the source graphic element being composited<br> 2.1169 αs: the alpha value of the source graphic element being composited<br> 2.1170 - Cb: the pixel value of the <a href="#backdrop">backdrop</a><br> 2.1171 + Cb: the color value of the <a href="#backdrop">backdrop</a><br> 2.1172 αb: the alpha value of the <a href="#backdrop">backdrop</a><br> 2.1173 2.1174 <p class=note> All values are between 0 and 1 inclusive.<br> 2.1175 @@ -706,7 +1387,7 @@ 2.1176 Co = co / αo 2.1177 </pre> 2.1178 2.1179 - <h3 id=simplealphacompositingexamples><span class=secno>1.3. 2.1180 + <h3 id=simplealphacompositingexamples><span class=secno>5.2. 2.1181 </span>Examples of simple alpha compositing</h3> 2.1182 2.1183 <div class=example> 2.1184 @@ -841,10 +1522,11 @@ 2.1185 </pre> 2.1186 </div> 2.1187 2.1188 - <h2 id=generalformula><span class=secno>2. </span>General Formula for 2.1189 + <h2 id=generalformula><span class=secno>6. </span>General Formula for 2.1190 Compositing and Blending</h2> 2.1191 2.1192 - <p> The general formula for compositing and blending which allows for 2.1193 + <p><em>This subsection is non-normative.</em><br> 2.1194 + The general formula for compositing and blending which allows for 2.1195 selection of the compositing operator and blending function comprises two 2.1196 steps. The terms used in these functions will be described in detail in 2.1197 the following sections. 2.1198 @@ -870,13 +1552,14 @@ 2.1199 <strong>Fa</strong>: is defined by the Porter Duff operator in use<br> 2.1200 <strong>Fb</strong>: is defined by the Porter Duff operator in use<br> 2.1201 2.1202 - <h2 id=backdrop><span class=secno>3. </span>Backdrop calculation</h2> 2.1203 - 2.1204 - <p> The backdrop is the content behind the element and is what the element 2.1205 - is composited with. This means that the backdrop is the result of 2.1206 - compositing all previous elements. 2.1207 - 2.1208 - <h3 id=backdropexamples><span class=secno>3.1. </span>Examples of backdrop 2.1209 + <h2 id=backdrop><span class=secno>7. </span>Backdrop calculation</h2> 2.1210 + 2.1211 + <p><em>This subsection is non-normative.</em><br> 2.1212 + The backdrop is the content behind the element and is what the element is 2.1213 + composited with. This means that the backdrop is the result of compositing 2.1214 + all previous elements. 2.1215 + 2.1216 + <h3 id=backdropexamples><span class=secno>7.1. </span>Examples of backdrop 2.1217 calculation</h3> 2.1218 2.1219 <div class=example> 2.1220 @@ -899,20 +1582,20 @@ 2.1221 value of the backdrop shape is preserved when the backdrop is calculated. 2.1222 </div> 2.1223 2.1224 - <h2 id=groups><span class=secno>4. </span>Compositing Groups</h2> 2.1225 - 2.1226 - <p> Compositing groups allow more control over the interaction of 2.1227 - compositing with the backdrop. Groups can be used to specify how a 2.1228 - compositing effect within a group will interact with the content that is 2.1229 - already in the scene (the backdrop). 2.1230 + <h2 id=groups><span class=secno>8. </span>Compositing Groups</h2> 2.1231 + 2.1232 + <p><em>This subsection is non-normative.</em><br> 2.1233 + Compositing groups allow more control over the interaction of compositing 2.1234 + with the backdrop. Groups can be used to specify how a compositing effect 2.1235 + within a group will interact with the content that is already in the scene 2.1236 + (the backdrop). 2.1237 2.1238 <p> Compositing groups may be made up of any number of elements, and may 2.1239 contain other compositing groups. 2.1240 2.1241 <p> The default properties of a compositing group shall cause no visual 2.1242 - difference compared to no groups. See <a href="#groupinvariance">Group 2.1243 - Invariance</a>. The result of this is that single elements behave as if 2.1244 - they were in a group by themselves. 2.1245 + difference compared to having no group. See <a 2.1246 + href="#groupinvariance">Group Invariance</a>. 2.1247 2.1248 <p> A compositing group is rendered by first compositing the elements of 2.1249 the group onto the inital backdrop. The result of this is a single element 2.1250 @@ -923,8 +1606,8 @@ 2.1251 <dl> 2.1252 <dt id=initialbackdrop>initial backdrop 2.1253 2.1254 - <dd> The intial backdrop is the backdrop selected for compositing the 2.1255 - group's first element. This will be the same as the group backdrop in a 2.1256 + <dd> The intial backdrop is the backdrop used for compositing the group's 2.1257 + first element. This will be the same as the group backdrop in a 2.1258 non-isolated group, or a fully transparent backdrop for an isolated 2.1259 group. 2.1260 2.1261 @@ -935,20 +1618,23 @@ 2.1262 href="#knockoutgroups">knockout groups</a> changes this definition. 2.1263 </dl> 2.1264 2.1265 - <h3 id=groupinvariance><span class=secno>4.1. </span>Group invariance</h3> 2.1266 - 2.1267 - <p> An important behavior of simple alpha compositing is its group 2.1268 + <h3 id=groupinvariance><span class=secno>8.1. </span>Group invariance</h3> 2.1269 + 2.1270 + <p> An important property of simple alpha compositing is its group 2.1271 invariance. This behavior is preserved in the more complex model described 2.1272 in this specification. Adding or removing grouping with default attributes 2.1273 shall not show visual differences.<br> 2.1274 2.1275 <pre>so: A + B + C = A + (B + C) = (A + B) + C</pre> 2.1276 2.1277 - <p>When adding attributes to the group such as knockout, isolate, blending 2.1278 - modes other than normal or Porter Duff compositing operators other than 2.1279 - source-over, groups may no longer be invariant. 2.1280 - 2.1281 - <h3 id=isolatedgroups><span class=secno>4.2. </span>Isolated Groups</h3> 2.1282 + <p>When adding attributes to the group such as ‘<code 2.1283 + class=property>knockout</code>’, ‘<code 2.1284 + class=property>isolate</code>’, blending modes other than ‘<code 2.1285 + class=property>normal</code>’ or Porter Duff compositing operators other 2.1286 + than ‘<code class=property>source-over</code>’, groups may no longer 2.1287 + be invariant. 2.1288 + 2.1289 + <h3 id=isolatedgroups><span class=secno>8.2. </span>Isolated Groups</h3> 2.1290 2.1291 <p> Isolated groups are controlled with the <a 2.1292 href="#propdef-isolation">isolation</a> property.<br> 2.1293 @@ -965,7 +1651,7 @@ 2.1294 blending</a></code>’ for a description of the effect of isolated groups 2.1295 on blending. 2.1296 2.1297 - <h3 id=knockoutgroups><span class=secno>4.3. </span>Knockout Groups</h3> 2.1298 + <h3 id=knockoutgroups><span class=secno>8.3. </span>Knockout Groups</h3> 2.1299 2.1300 <p> In a knockout group, each individual element shall be composited with 2.1301 the initial backdrop rather than with the stack of preceeding elements in 2.1302 @@ -990,7 +1676,7 @@ 2.1303 ‘<code class=property>knock-out</code>’, each element within the group 2.1304 is only composited with the elements underneath the group. 2.1305 2.1306 - <h3 id=pagebackdrop><span class=secno>4.4. </span>The Page Group</h3> 2.1307 + <h3 id=pagebackdrop><span class=secno>8.4. </span>The Page Group</h3> 2.1308 2.1309 <p> The top level group is the page group. All other elements and groups 2.1310 are composited into this group. The page group is an <a 2.1311 @@ -999,10 +1685,10 @@ 2.1312 Agent. Typically this will be white with 100% opacity.<br> 2.1313 The page group may be used as an element in another graphical composition. 2.1314 2.1315 - <p> For example, <br> 2.1316 - an SVG file contains a red object at 50% opacity, <br> 2.1317 - The user agent composites the page group onto a white background with 100% 2.1318 + <p> For example, this is an SVG file that contains a red object at 50% 2.1319 opacity. <br> 2.1320 + The user agent will composite the page group onto a white background with 2.1321 + 100% opacity. <br> 2.1322 The results are as follows: 2.1323 2.1324 <pre> 2.1325 @@ -1013,18 +1699,19 @@ 2.1326 2.1327 <p>which is the color value ultimately displayed by the user agent. 2.1328 2.1329 - <h2 id=advancedcompositing><span class=secno>5. </span>Advanced compositing 2.1330 + <h2 id=advancedcompositing><span class=secno>9. </span>Advanced compositing 2.1331 features</h2> 2.1332 2.1333 - <p> <a href="#simplealphacompositing">Simple alpha compositing</a> uses the 2.1334 + <p><em>This subsection is non-normative.</em><br> 2.1335 + <a href="#simplealphacompositing">Simple alpha compositing</a> uses the 2.1336 source-over Porter Duff compositing operator. Additional compositing 2.1337 operators exist and may be specified with the <a 2.1338 href="#propdef-mix-composite">mix-composite property</a>. The additional 2.1339 compositing operators allow for more complex interactions between the 2.1340 shapes of elements being composited. The compositing operators are 2.1341 - described in <a href="#porterduffcompositingoperators">‘<code 2.1342 - class=css>The Porter Duff compositing operators</code>’</a>. The 2.1343 - operators that applies to an element or group is selected using the <a 2.1344 + described in the <a href="#porterduffcompositingoperators">Porter Duff 2.1345 + compositing operators</a>. The operators that applies to an element or 2.1346 + group is selected using the <a 2.1347 href="#propdef-mix-composite">mix-composite</a> property. 2.1348 2.1349 <p> Porter Duff compositing is based on a model of a pixel in which two 2.1350 @@ -1110,7 +1797,7 @@ 2.1351 2.1352 <p>Therefore, the area of each region is 25% in this example. 2.1353 2.1354 - <h3 id=porterduffcompositingoperators><span class=secno>5.1. </span>The 2.1355 + <h3 id=porterduffcompositingoperators><span class=secno>9.1. </span>The 2.1356 Porter Duff Compositing Operators</h3> 2.1357 2.1358 <p> The landmark 1984 paper [3] by Thomas Porter and Tom Duff, who worked 2.1359 @@ -1148,14 +1835,17 @@ 2.1360 co = αs x Fa x Cs + αb x Fb x Cb 2.1361 </pre> 2.1362 2.1363 - <p>Where: co is the output color pre-multiplied with the output alpha [0 <= 2.1364 - co <= 1] αs is the coverage of the source Fa is defined by the operator 2.1365 - and controls inclusion of the source Cs is the color of the source (not 2.1366 - multiplied by alpha) αb is the coverage of the destination Fb is defined 2.1367 - by the operator and controls inclusion of the destination Cb is the color 2.1368 - of the destination (not multiplied by alpha) 2.1369 - 2.1370 - <h4 id="porterduffcompositingoperators_clear"><span class=secno>5.1.1. 2.1371 + <p>Where:<br> 2.1372 + co is the output color pre-multiplied with the output alpha [0 <= co <= 2.1373 + 1]<br> 2.1374 + αs is the coverage of the source Fa is defined by the operator and 2.1375 + controls inclusion of the source Cs is the color of the source (not 2.1376 + multiplied by alpha)<br> 2.1377 + αb is the coverage of the destination Fb is defined by the operator and 2.1378 + controls inclusion of the destination Cb is the color of the destination 2.1379 + (not multiplied by alpha) 2.1380 + 2.1381 + <h4 id="porterduffcompositingoperators_clear"><span class=secno>9.1.1. 2.1382 </span>Clear</h4> 2.1383 2.1384 <p>No regions are enabled. 2.1385 @@ -1168,7 +1858,7 @@ 2.1386 αo = 0 2.1387 </pre> 2.1388 2.1389 - <h4 id="porterduffcompositingoperators_src"><span class=secno>5.1.2. 2.1390 + <h4 id="porterduffcompositingoperators_src"><span class=secno>9.1.2. 2.1391 </span>Copy</h4> 2.1392 2.1393 <p>Only the source will be present. 2.1394 @@ -1181,7 +1871,7 @@ 2.1395 αo = αs 2.1396 </pre> 2.1397 2.1398 - <h4 id="porterduffcompositingoperators_dst"><span class=secno>5.1.3. 2.1399 + <h4 id="porterduffcompositingoperators_dst"><span class=secno>9.1.3. 2.1400 </span>Destination</h4> 2.1401 2.1402 <p>Only the destination will be present. 2.1403 @@ -1194,7 +1884,7 @@ 2.1404 αo = αb 2.1405 </pre> 2.1406 2.1407 - <h4 id="porterduffcompositingoperators_srcover"><span class=secno>5.1.4. 2.1408 + <h4 id="porterduffcompositingoperators_srcover"><span class=secno>9.1.4. 2.1409 </span>Source Over</h4> 2.1410 2.1411 <p>Source is placed over the destination 2.1412 @@ -1208,7 +1898,7 @@ 2.1413 αo = αs + αb x (1 – αs) 2.1414 </pre> 2.1415 2.1416 - <h4 id="porterduffcompositingoperators_dstover"><span class=secno>5.1.5. 2.1417 + <h4 id="porterduffcompositingoperators_dstover"><span class=secno>9.1.5. 2.1418 </span>Destination Over</h4> 2.1419 2.1420 <p>Destination is placed over the source. 2.1421 @@ -1222,7 +1912,7 @@ 2.1422 αo = αs x (1 – αb) + αb 2.1423 </pre> 2.1424 2.1425 - <h4 id="porterduffcompositingoperators_srcin"><span class=secno>5.1.6. 2.1426 + <h4 id="porterduffcompositingoperators_srcin"><span class=secno>9.1.6. 2.1427 </span>Source In</h4> 2.1428 2.1429 <p><img alt="example of porter duff source in" 2.1430 @@ -1236,7 +1926,7 @@ 2.1431 αo = αs x αb 2.1432 </pre> 2.1433 2.1434 - <h4 id="porterduffcompositingoperators_dstin"><span class=secno>5.1.7. 2.1435 + <h4 id="porterduffcompositingoperators_dstin"><span class=secno>9.1.7. 2.1436 </span>Destination In</h4> 2.1437 2.1438 <p>Destination which overlaps the source, replaces the source. 2.1439 @@ -1250,7 +1940,7 @@ 2.1440 αo = αb x αs 2.1441 </pre> 2.1442 2.1443 - <h4 id="porterduffcompositingoperators_srcout"><span class=secno>5.1.8. 2.1444 + <h4 id="porterduffcompositingoperators_srcout"><span class=secno>9.1.8. 2.1445 </span>Source Out</h4> 2.1446 2.1447 <p>Source is placed, where it falls outside of the destination. 2.1448 @@ -1264,7 +1954,7 @@ 2.1449 αo = αs x (1 – αb) 2.1450 </pre> 2.1451 2.1452 - <h4 id="porterduffcompositingoperators_dstout"><span class=secno>5.1.9. 2.1453 + <h4 id="porterduffcompositingoperators_dstout"><span class=secno>9.1.9. 2.1454 </span>Destination Out</h4> 2.1455 2.1456 <p>Destination is placed, where it falls outside of the source. 2.1457 @@ -1278,7 +1968,7 @@ 2.1458 αo = αb x (1 – αs) 2.1459 </pre> 2.1460 2.1461 - <h4 id="porterduffcompositingoperators_srcatop"><span class=secno>5.1.10. 2.1462 + <h4 id="porterduffcompositingoperators_srcatop"><span class=secno>9.1.10. 2.1463 </span>Source Atop</h4> 2.1464 2.1465 <p>Source which overlaps the destination, replaces the destination. 2.1466 @@ -1293,7 +1983,7 @@ 2.1467 αo = αs x αb + αb x (1 – αs) 2.1468 </pre> 2.1469 2.1470 - <h4 id="porterduffcompositingoperators_dstatop"><span class=secno>5.1.11. 2.1471 + <h4 id="porterduffcompositingoperators_dstatop"><span class=secno>9.1.11. 2.1472 </span>Destination Atop</h4> 2.1473 2.1474 <p><img alt="example of porter duff destination atop" 2.1475 @@ -1308,7 +1998,7 @@ 2.1476 αo = αs x (1 - αb) + αb x αs 2.1477 </pre> 2.1478 2.1479 - <h4 id="porterduffcompositingoperators_xor"><span class=secno>5.1.12. 2.1480 + <h4 id="porterduffcompositingoperators_xor"><span class=secno>9.1.12. 2.1481 </span>XOR</h4> 2.1482 2.1483 <p>The non-overlapping regions of source and destination are combined. 2.1484 @@ -1321,7 +2011,7 @@ 2.1485 αo = αs x (1 - αb) + αb x (1 – αs) 2.1486 </pre> 2.1487 2.1488 - <h4 id="porterduffcompositingoperators_plus"><span class=secno>5.1.13. 2.1489 + <h4 id="porterduffcompositingoperators_plus"><span class=secno>9.1.13. 2.1490 </span>Lighter</h4> 2.1491 2.1492 <p>Display the sum of the source image and destination image. It is defined 2.1493 @@ -1334,25 +2024,25 @@ 2.1494 αo = αs + αb 2.1495 </pre> 2.1496 2.1497 - <h3 id=groupcompositing><span class=secno>5.2. </span>Group compositing 2.1498 + <h3 id=groupcompositing><span class=secno>9.2. </span>Group compositing 2.1499 behavior with Porter Duff modes</h3> 2.1500 2.1501 - <h4 id=groupcompositingisolation><span class=secno>5.2.1. </span>Isolated 2.1502 + <h4 id=groupcompositingisolation><span class=secno>9.2.1. </span>Isolated 2.1503 groups and Porter Duff modes</h4> 2.1504 2.1505 <p> When compositing the elements within an isolated group, the elements 2.1506 are composited over an empty (RGBA(0, 0, 0, 0)) initial backdrop. If the 2.1507 bottom element in the group uses a Porter Duff compositing operator which 2.1508 is dependent on the backdrop, such as <a 2.1509 - href="#porterduffcompositingoperators_dest">destination</a>, <a 2.1510 + href="#porterduffcompositingoperators_dst">destination</a>, <a 2.1511 href="#porterduffcompositingoperators_srcin">source-in</a>, <a 2.1512 - href="#porterduffcompositingoperators_destin">destination-in</a>, <a 2.1513 - href="#porterduffcompositingoperators_dest_out">destination-out</a> or <a 2.1514 + href="#porterduffcompositingoperators_dstin">destination-in</a>, <a 2.1515 + href="#porterduffcompositingoperators_dstout">destination-out</a> or <a 2.1516 href="#porterduffcompositingoperators_srcatop">source-atop</a>, then the 2.1517 result of the composite will be empty. Subsequent elements within the 2.1518 group are composited with the result of the first composite. 2.1519 2.1520 - <h4 id=groupcompositingknockout><span class=secno>5.2.2. </span>Knockout 2.1521 + <h4 id=groupcompositingknockout><span class=secno>9.2.2. </span>Knockout 2.1522 groups and Porter Duff modes</h4> 2.1523 2.1524 <p> Every element within a knock-out group is composited with the initial 2.1525 @@ -1372,7 +2062,7 @@ 2.1526 <div class=example><img alt="example of knockout with porter duff" 2.1527 src="examples/pd-knockout.png"></div> 2.1528 2.1529 - <h4 id=groupcompositingcliptoself><span class=secno>5.2.3. </span>Clip to 2.1530 + <h4 id=groupcompositingcliptoself><span class=secno>9.2.3. </span>Clip to 2.1531 self behavior</h4> 2.1532 2.1533 <p> When compositing, the areas of the composite that may be modified by 2.1534 @@ -1387,16 +2077,14 @@ 2.1535 <div class=figure><img alt="example of clip to self with porter duff" 2.1536 src="examples/clip-to-self.png"></div> 2.1537 2.1538 - <h2 id=blending><span class=secno>6. </span>Blending</h2> 2.1539 - 2.1540 - <p> Blending is the aspect of compositing that calculates the mixing of 2.1541 - colors where the source element and backdrop overlap. Blending takes the 2.1542 - colors of the source element and mixes them with the <a 2.1543 - href="#backdrop">backdrop</a> in areas where the source element and 2.1544 - backdrop overlap. Conceptually, the colors in the source element are 2.1545 - blended in place with the backdrop. After blending, the modified source 2.1546 - element is composited with the backdrop. In practice, this is usually all 2.1547 - performed in one step. 2.1548 + <h2 id=blending><span class=secno>10. </span>Blending</h2> 2.1549 + 2.1550 + <p><em>This subsection is non-normative.</em><br> 2.1551 + Blending is the aspect of compositing that calculates the mixing of colors 2.1552 + where the source element and <a href="#backdrop">backdrop</a> overlap.<br> 2.1553 + Conceptually, the colors in the source element are blended in place with 2.1554 + the backdrop. After blending, the modified source element is composited 2.1555 + with the backdrop. In practice, this is usually all performed in one step. 2.1556 2.1557 <p class=note>The blending calcualtions must not use pre-multiplied color 2.1558 values. 2.1559 @@ -1456,7 +2144,7 @@ 2.1560 = αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb 2.1561 </pre> 2.1562 2.1563 - <h3 id=blendingseparable><span class=secno>6.1. </span>Separable blend 2.1564 + <h3 id=blendingseparable><span class=secno>10.1. </span>Separable blend 2.1565 modes</h3> 2.1566 2.1567 <p> A blend mode is termed separable if each component of the result color 2.1568 @@ -1471,7 +2159,7 @@ 2.1569 href="#porterduffcompositingoperators_srcover">source-over</a> 2.1570 compositing. 2.1571 2.1572 - <h4 id=blendingnormal><span class=secno>6.1.1. </span>‘<code 2.1573 + <h4 id=blendingnormal><span class=secno>10.1.1. </span>‘<code 2.1574 class=property>normal</code>’ blend mode</h4> 2.1575 2.1576 <p> This is the default attribute which specifies no blending. The blending 2.1577 @@ -1483,7 +2171,7 @@ 2.1578 2.1579 <p><img alt="example of normal blending" src="examples/normal.png"> 2.1580 2.1581 - <h4 id=blendingmultiply><span class=secno>6.1.2. </span>‘<code 2.1582 + <h4 id=blendingmultiply><span class=secno>10.1.2. </span>‘<code 2.1583 class=property>multiply</code>’ blend mode</h4> 2.1584 2.1585 <p> The source color is multiplied by the destination color and replaces 2.1586 @@ -1499,7 +2187,7 @@ 2.1587 2.1588 <p><img alt="example of multiply blending" src="examples/multiply.png"> 2.1589 2.1590 - <h4 id=blendingscreen><span class=secno>6.1.3. </span>‘<code 2.1591 + <h4 id=blendingscreen><span class=secno>10.1.3. </span>‘<code 2.1592 class=property>screen</code>’ blend mode</h4> 2.1593 2.1594 <p> Multiplies the complements of the <a href="#backdrop">backdrop</a> and 2.1595 @@ -1518,7 +2206,7 @@ 2.1596 2.1597 <p><img alt="example of screen blending" src="examples/screen.png"> 2.1598 2.1599 - <h4 id=blendingoverlay><span class=secno>6.1.4. </span>‘<code 2.1600 + <h4 id=blendingoverlay><span class=secno>10.1.4. </span>‘<code 2.1601 class=property>overlay</code>’ blend mode</h4> 2.1602 2.1603 <p> Multiplies or screens the colors, depending on the <a 2.1604 @@ -1540,7 +2228,7 @@ 2.1605 2.1606 <p><img alt="example of overlay blending" src="examples/overlay.png"> 2.1607 2.1608 - <h4 id=blendingdarken><span class=secno>6.1.5. </span>‘<code 2.1609 + <h4 id=blendingdarken><span class=secno>10.1.5. </span>‘<code 2.1610 class=property>darken</code>’ blend mode</h4> 2.1611 2.1612 <p> Selects the darker of the <a href="#backdrop">backdrop</a> and source 2.1613 @@ -1555,7 +2243,7 @@ 2.1614 2.1615 <p><img alt="example of darken blending" src="examples/darken.png"> 2.1616 2.1617 - <h4 id=blendinglighten><span class=secno>6.1.6. </span>‘<code 2.1618 + <h4 id=blendinglighten><span class=secno>10.1.6. </span>‘<code 2.1619 class=property>lighten</code>’ blend mode</h4> 2.1620 2.1621 <p> Selects the lighter of the <a href="#backdrop">backdrop</a> and source 2.1622 @@ -1568,9 +2256,11 @@ 2.1623 B(Cb, Cs) = max(Cb, Cs) 2.1624 </pre> 2.1625 2.1626 + <p class=note>The result must be rounded down if it exceeds the range. 2.1627 + 2.1628 <p><img alt="example of lighten blending" src="examples/lighten.png"> 2.1629 2.1630 - <h4 id=blendingcolordodge><span class=secno>6.1.7. </span>‘<code 2.1631 + <h4 id=blendingcolordodge><span class=secno>10.1.7. </span>‘<code 2.1632 class=property>color-dodge</code>’ blend mode</h4> 2.1633 2.1634 <p> Brightens the <a href="#backdrop">backdrop</a> color to reflect the 2.1635 @@ -1579,8 +2269,7 @@ 2.1636 <pre> 2.1637 if(Cb == 0) 2.1638 B(Cb, Cs) = 0 2.1639 - else 2.1640 - if(Cs == 1) 2.1641 + else if(Cs == 1) 2.1642 B(Cb, Cs) = 1 2.1643 else 2.1644 B(Cb, Cs) = min(1, Cb / (1 - Cs)) 2.1645 @@ -1589,7 +2278,7 @@ 2.1646 <p><img alt="example of color dodge blending" 2.1647 src="examples/colordodge.png"> 2.1648 2.1649 - <h4 id=blendingcolorburn><span class=secno>6.1.8. </span>‘<code 2.1650 + <h4 id=blendingcolorburn><span class=secno>10.1.8. </span>‘<code 2.1651 class=property>color-burn</code>’ blend mode</h4> 2.1652 2.1653 <p> Darkens the <a href="#backdrop">backdrop</a> color to reflect the 2.1654 @@ -1598,8 +2287,7 @@ 2.1655 <pre> 2.1656 if(Cb == 1) 2.1657 B(Cb, Cs) = 1 2.1658 - else 2.1659 - if(Cs == 0) 2.1660 + else if(Cs == 0) 2.1661 B(Cb, Cs) = 0 2.1662 else 2.1663 B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs) 2.1664 @@ -1607,7 +2295,7 @@ 2.1665 2.1666 <p><img alt="example of color burn blending" src="examples/colorburn.png"> 2.1667 2.1668 - <h4 id=blendinghardlight><span class=secno>6.1.9. </span>‘<code 2.1669 + <h4 id=blendinghardlight><span class=secno>10.1.9. </span>‘<code 2.1670 class=property>hard-light</code>’ blend mode</h4> 2.1671 2.1672 <p> Multiplies or screens the colors, depending on the source color value. 2.1673 @@ -1626,7 +2314,7 @@ 2.1674 2.1675 <p><img alt="example of hard light blending" src="examples/hardlight.png"> 2.1676 2.1677 - <h4 id=blendingsoftlight><span class=secno>6.1.10. </span>‘<code 2.1678 + <h4 id=blendingsoftlight><span class=secno>10.1.10. </span>‘<code 2.1679 class=property>soft-light</code>’ blend mode</h4> 2.1680 2.1681 <p> Darkens or lightens the colors, depending on the source color value. 2.1682 @@ -1647,7 +2335,7 @@ 2.1683 2.1684 <p><img alt="example of soft light blending" src="examples/softlight.png"> 2.1685 2.1686 - <h4 id=blendingdifference><span class=secno>6.1.11. </span>‘<code 2.1687 + <h4 id=blendingdifference><span class=secno>10.1.11. </span>‘<code 2.1688 class=property>difference</code>’ blend mode</h4> 2.1689 2.1690 <p> Subtracts the darker of the two constituent colors from the lighter 2.1691 @@ -1662,7 +2350,7 @@ 2.1692 2.1693 <p><img alt="example of difference blending" src="examples/difference.png"> 2.1694 2.1695 - <h4 id=blendingexclusion><span class=secno>6.1.12. </span>‘<code 2.1696 + <h4 id=blendingexclusion><span class=secno>10.1.12. </span>‘<code 2.1697 class=property>exclusion</code>’ blend mode</h4> 2.1698 2.1699 <p> Produces an effect similar to that of the Difference mode but lower in 2.1700 @@ -1675,7 +2363,7 @@ 2.1701 2.1702 <p><img alt="example of exclusion blending" src="examples/exclusion.png"> 2.1703 2.1704 - <h3 id=blendingnonseparable><span class=secno>6.2. </span>Non-separable 2.1705 + <h3 id=blendingnonseparable><span class=secno>10.2. </span>Non-separable 2.1706 blend modes</h3> 2.1707 2.1708 <p> Nonseparable blend modes consider all color components in combination 2.1709 @@ -1730,7 +2418,7 @@ 2.1710 return C; 2.1711 </pre> 2.1712 2.1713 - <h4 id=blendinghue><span class=secno>6.2.1. </span>‘<code 2.1714 + <h4 id=blendinghue><span class=secno>10.2.1. </span>‘<code 2.1715 class=property>hue</code>’ blend mode</h4> 2.1716 2.1717 <p> Creates a color with the hue of the source color and the saturation and 2.1718 @@ -1742,7 +2430,7 @@ 2.1719 2.1720 <p><img alt="example of hue blending" src="examples/hue.png"> 2.1721 2.1722 - <h4 id=blendingsaturation><span class=secno>6.2.2. </span>‘<code 2.1723 + <h4 id=blendingsaturation><span class=secno>10.2.2. </span>‘<code 2.1724 class=property>saturation</code>’ blend mode</h4> 2.1725 2.1726 <p> Creates a color with the saturation of the source color and the hue and 2.1727 @@ -1756,7 +2444,7 @@ 2.1728 2.1729 <p><img alt="example of saturation blending" src="examples/saturation.png"> 2.1730 2.1731 - <h4 id=blendingcolor><span class=secno>6.2.3. </span>‘<code 2.1732 + <h4 id=blendingcolor><span class=secno>10.2.3. </span>‘<code 2.1733 class=property>color</code>’ blend mode</h4> 2.1734 2.1735 <p> Creates a color with the hue and saturation of the source color and the 2.1736 @@ -1770,7 +2458,7 @@ 2.1737 2.1738 <p><img alt="example of color blending" src="examples/color.png"> 2.1739 2.1740 - <h4 id=blendingluminosity><span class=secno>6.2.4. </span>‘<code 2.1741 + <h4 id=blendingluminosity><span class=secno>10.2.4. </span>‘<code 2.1742 class=property>luminosity</code>’ blend mode</h4> 2.1743 2.1744 <p> Creates a color with the luminosity of the source color and the hue and 2.1745 @@ -1783,7 +2471,7 @@ 2.1746 2.1747 <p><img alt="example of luminosity blending" src="examples/luminosity.png"> 2.1748 2.1749 - <h3 id=isolationblending><span class=secno>6.3. </span>Effect of group 2.1750 + <h3 id=isolationblending><span class=secno>10.3. </span>Effect of group 2.1751 isolation on blending</h3> 2.1752 2.1753 <p> In the following example, the elements used to construct the paper 2.1754 @@ -1805,767 +2493,7 @@ 2.1755 <div class=example><img alt="example of isolated group blending" 2.1756 src="examples/isolate_blend_example.png"></div> 2.1757 2.1758 - <h2 id=csscompositingandblending><span class=secno>7. </span>Specifying 2.1759 - Compositing and Blending in CSS</h2> 2.1760 - 2.1761 - <h3 id=compositingandblendingorder><span class=secno>7.1. </span>Order of 2.1762 - graphical operations</h3> 2.1763 - 2.1764 - <p>The compositing model must follow the <a 2.1765 - href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG 2.1766 - compositing</a> model: first any filter effect is applied, then any 2.1767 - clipping, masking, blending and compositing. 2.1768 - 2.1769 - <h3 id="csscompositingrules_CSS"><span class=secno>7.2. </span>Behavior 2.1770 - specific to CSS</h3> 2.1771 - 2.1772 - <p> If an element specifies non-default blending, compositing or <a 2.1773 - href="http://www.w3.org/TR/css3-color/#transparency">‘<code 2.1774 - class=property>opacity</code>’</a>, its <a 2.1775 - href="http://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> 2.1776 - and that of all of its children must revert to ‘<code 2.1777 - class=property>flat</code>’.<br> 2.1778 - The application of non-default blending or compositing to an <var>‘<code 2.1779 - class=css><a href="#area-element">element</a></code>’</var> must also 2.1780 - establishe a <a href="http://www.w3.org/TR/CSS21/zindex.html">stacking 2.1781 - context</a> the same way that CSS <a 2.1782 - href="http://www.w3.org/TR/css3-color/#transparency">‘<code 2.1783 - class=property>opacity</code>’</a> does. One of the consequences is that 2.1784 - elements with z-index must not honor the depth of elements outside of the 2.1785 - group.<br> 2.1786 - Everything in CSS that creates a <a 2.1787 - href="http://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be 2.1788 - considered a group. HTML elements themselves should not create groups. 2.1789 - 2.1790 - <p class=issue> This spec assumes that a stacking context creates an 2.1791 - offscreen buffer which is not always the case. We need to clarify what 2.1792 - stacking contexts create offscreen buffers or come up with another 2.1793 - description. 2.1794 - 2.1795 - <h3 id="csscompositingrules_SVG"><span class=secno>7.3. </span>Behavior 2.1796 - specific to SVG</h3> 2.1797 - 2.1798 - <p> In SVG, every element must create a group.<br> 2.1799 - This seems costly but implementations can optimize this by not treating 2.1800 - elements with default arguments as groups.<br> 2.1801 - The compositing model follows the <a 2.1802 - href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG 2.1803 - compositing</a> model: first any filter effect is applied, then any 2.1804 - clipping, masking, blending and compositing 2.1805 - 2.1806 - <p class=issue> This SVG spec states that every element creates an ‘<code 2.1807 - class=property>accumulating</code>’ group. In practice, few (no) 2.1808 - browsers implemented this. We should update the SVG spec so it follows 2.1809 - CSS' rules for stacking contexts/offscreen buffers. 2.1810 - 2.1811 - <h3 id=csscompositingkeyword><span class=secno>7.4. </span>Properties</h3> 2.1812 - 2.1813 - <h4 id=mix-composite><span class=secno>7.4.1. </span>The <span 2.1814 - class=prop-name>‘<code class=property>mix-composite</code>’</span> 2.1815 - property</h4> 2.1816 - 2.1817 - <p> Defines the compositing mode that must be used on the area of an 2.1818 - element.<br> 2.1819 - This behavior is described in more detail in <a 2.1820 - href="#advancedcompositing">Advanced compositing features</a>.<br> 2.1821 - The description of the <span class=prop-name>‘<code 2.1822 - class=property>mix-composite</code>’</span> property is as follows: 2.1823 - 2.1824 - <div class=propdef> 2.1825 - <dl> 2.1826 - <dt id=propdef-mix-composite><span 2.1827 - class="propdef-title prop-name">‘<code 2.1828 - class=property>mix-composite</code>’</span> 2.1829 - 2.1830 - <dd> 2.1831 - <table cellpadding=0 cellspacing=0 class=propinfo 2.1832 - summary="mix-composite property"> 2.1833 - <tbody> 2.1834 - <tr valign=baseline> 2.1835 - <td><em>Value:</em> 2.1836 - 2.1837 - <td><a 2.1838 - href="#ltcompositeareagt"><var><composite-area></var></a># 2.1839 - 2.1840 - <tr valign=baseline> 2.1841 - <td><em>Initial:</em> 2.1842 - 2.1843 - <td>source-over 2.1844 - 2.1845 - <tr valign=baseline> 2.1846 - <td><em>Applies to:</em> 2.1847 - 2.1848 - <td>All elements. In SVG, it applies to svg, g, use, image, path, 2.1849 - rect, circle, ellipse, line, polyline, polygon, text, tspan, and 2.1850 - marker. 2.1851 - 2.1852 - <tr valign=baseline> 2.1853 - <td><em>Inherited:</em> 2.1854 - 2.1855 - <td>no 2.1856 - 2.1857 - <tr valign=baseline> 2.1858 - <td><em>Percentages:</em> 2.1859 - 2.1860 - <td>N/A 2.1861 - 2.1862 - <tr valign=baseline> 2.1863 - <td><em>Media:</em> 2.1864 - 2.1865 - <td>visual 2.1866 - 2.1867 - <tr valign=baseline> 2.1868 - <td><em>Computed value:</em> 2.1869 - 2.1870 - <td>same as the specified value 2.1871 - 2.1872 - <tr valign=baseline> 2.1873 - <td><em>Animatable:</em> 2.1874 - 2.1875 - <td>no 2.1876 - </table> 2.1877 - </dl> 2.1878 - </div> 2.1879 - 2.1880 - <p>The syntax of the property of <a 2.1881 - href="#ltcompositeareagt"><var><composite-area></var></a> is given 2.1882 - with: 2.1883 - 2.1884 - <pre class=compositearea><dfn 2.1885 - id=ltcompositeareagt><var><composite-area></var></dfn> = <a 2.1886 - href="#ltareagt"><area></a>? <a 2.1887 - href="#ltcompositegt"><composite-mode></a></pre> 2.1888 - 2.1889 - <p>The syntax of the property of <a 2.1890 - href="#ltareagt"><var><area></var></a> is given with: 2.1891 - 2.1892 - <pre class=area><dfn 2.1893 - id=ltareagt><var><area></var></dfn> = element | box-shadow | text-shadow | background | border | content</pre> 2.1894 - 2.1895 - <p>Values have the following meanings: 2.1896 - 2.1897 - <dl> 2.1898 - <dt><dfn id=area-element title="''element'' value"> ‘<code 2.1899 - class=css>element</code>’</dfn> 2.1900 - 2.1901 - <dd>The area is the whole element, including shadows, background and 2.1902 - content 2.1903 - 2.1904 - <dt><dfn id=area-box-shadow title="''box-shadow'' value"> ‘<code 2.1905 - class=css>box-shadow</code>’</dfn> 2.1906 - 2.1907 - <dd>The area is the box shadow 2.1908 - 2.1909 - <dt><dfn id=area-text-shadow title="''text-shadow'' value"> ‘<code 2.1910 - class=css>text-shadow</code>’</dfn> 2.1911 - 2.1912 - <dd>The area is the shadow of the text 2.1913 - 2.1914 - <dt><dfn id=area-background title="''background'' value"> ‘<code 2.1915 - class=css>background</code>’</dfn> 2.1916 - 2.1917 - <dd>The area is the composited result of all the background images. 2.1918 - 2.1919 - <dt><dfn id=area-border title="''border'' value"> ‘<code 2.1920 - class=css>border</code>’</dfn> 2.1921 - 2.1922 - <dd>The area is the composited result of all the borders. 2.1923 - 2.1924 - <dt><dfn id=area-content title="''content'' value"> ‘<code 2.1925 - class=css>content</code>’</dfn> 2.1926 - 2.1927 - <dd>The area is the content of the element (such as the text). 2.1928 - </dl> 2.1929 - 2.1930 - <p class=note>If <a href="#ltareagt"><var><area></var></a> is 2.1931 - omitted, <var>‘<code class=css><a 2.1932 - href="#area-element">element</a></code>’</var> must be assumed. An area 2.1933 - can only be set once in the CSS property; an attempt to list it more than 2.1934 - once must be ignored. 2.1935 - 2.1936 - <p class=note>In SVG, <var>‘<code class=css><a 2.1937 - href="#area-element">element</a></code>’</var> will be used, regardless 2.1938 - of what area is specified. 2.1939 - 2.1940 - <p>The syntax of the property of <a 2.1941 - href="#ltcompositegt"><var><composite-mode></var></a> is given with: 2.1942 - 2.1943 - <pre class=composite><dfn 2.1944 - id=ltcompositegt><var><composite-mode></var></dfn> = <a 2.1945 - href="#porterduffcompositingoperators_clear">clear</a> | <a 2.1946 - href="#porterduffcompositingoperators_src">copy</a> | <a 2.1947 - href="#porterduffcompositingoperators_dst">destination</a> | <a 2.1948 - href="#porterduffcompositingoperators_srcover">source-over</a> | <a 2.1949 - href="#porterduffcompositingoperators_dstover">destination-over</a> | <a 2.1950 - href="#porterduffcompositingoperators_srcin">source-in</a> | <a 2.1951 - href="#porterduffcompositingoperators_dstin">destination-in</a> | <a 2.1952 - href="#porterduffcompositingoperators_srcout">source-out</a> | <a 2.1953 - href="#porterduffcompositingoperators_dstout">destination-out</a> | <a 2.1954 - href="#porterduffcompositingoperators_srcatop">source-atop</a> | <a 2.1955 - href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a 2.1956 - href="#porterduffcompositingoperators_xor">xor</a> | <a 2.1957 - href="#porterduffcompositingoperators_plus">lighter</a></pre> 2.1958 - 2.1959 - <p class=note>Applying a non-default compositing mode to the <var>‘<code 2.1960 - class=css><a href="#area-element">element</a></code>’</var> area must 2.1961 - establish a new stacking context. 2.1962 - 2.1963 - <p class=note>Applying a non-default compositing mode to areas other than 2.1964 - <var>‘<code class=css><a 2.1965 - href="#area-element">element</a></code>’</var> must render those areas 2.1966 - in an offscreen buffer first. This buffer will then be composited. 2.1967 - 2.1968 - <p class=note>An area must always composite with <a 2.1969 - href="#groupcompositingcliptoself">‘<code 2.1970 - class=property>clip-to-self</code>’</a> set to ‘<code 2.1971 - class=property>true</code>’. 2.1972 - 2.1973 - <h4 id=mix-blend-mode><span class=secno>7.4.2. </span>The <span 2.1974 - class=prop-name>‘<code class=property>mix-blend-mode</code>’</span> 2.1975 - property</h4> 2.1976 - 2.1977 - <p> Defines the blend mode that must be used on an area of the element. The 2.1978 - blend mode defines the formula that must be used to mix the colors with 2.1979 - the backdrop.<br> 2.1980 - This behavior is described in more detail in <a 2.1981 - href="#blending">Blending</a>. 2.1982 - 2.1983 - <div class=propdef> 2.1984 - <dl> 2.1985 - <dt id=propdef-mix-blend-mode><span 2.1986 - class="propdef-title prop-name">‘<code 2.1987 - class=property>mix-blend-mode</code>’</span> 2.1988 - 2.1989 - <dd> 2.1990 - <table cellpadding=0 cellspacing=0 class=propinfo 2.1991 - summary="mix-blend-mode property"> 2.1992 - <tbody> 2.1993 - <tr valign=baseline> 2.1994 - <td><em>Value:</em> 2.1995 - 2.1996 - <td><a href="#ltblendareagt"><var><blend-area></var></a># 2.1997 - 2.1998 - <tr valign=baseline> 2.1999 - <td><em>Initial:</em> 2.2000 - 2.2001 - <td>normal 2.2002 - 2.2003 - <tr valign=baseline> 2.2004 - <td><em>Applies to:</em> 2.2005 - 2.2006 - <td>All elements. In SVG, it applies to svg, g, use, image, path, 2.2007 - rect, circle, ellipse, line, polyline, polygon, text, tspan, and 2.2008 - marker. 2.2009 - 2.2010 - <tr valign=baseline> 2.2011 - <td><em>Inherited:</em> 2.2012 - 2.2013 - <td>no 2.2014 - 2.2015 - <tr valign=baseline> 2.2016 - <td><em>Percentages:</em> 2.2017 - 2.2018 - <td>N/A 2.2019 - 2.2020 - <tr valign=baseline> 2.2021 - <td><em>Media:</em> 2.2022 - 2.2023 - <td>visual 2.2024 - 2.2025 - <tr valign=baseline> 2.2026 - <td><em>Computed value:</em> 2.2027 - 2.2028 - <td>same as the specified value 2.2029 - 2.2030 - <tr valign=baseline> 2.2031 - <td><em>Animatable:</em> 2.2032 - 2.2033 - <td>no 2.2034 - </table> 2.2035 - </dl> 2.2036 - </div> 2.2037 - 2.2038 - <p>The syntax of the property of <a 2.2039 - href="#ltblendareagt"><var><blend-area></var></a> is given with: 2.2040 - 2.2041 - <pre class=blendarea><dfn 2.2042 - id=ltblendareagt><var><blend-area></var></dfn> = <a 2.2043 - href="#ltareagt"><area></a>? <a 2.2044 - href="#ltblendmodegt"><blend-mode></a></pre> 2.2045 - 2.2046 - <p>The syntax of the property of <a 2.2047 - href="#ltblendmodegt"><var><blend-mode></var></a> is given with: 2.2048 - 2.2049 - <pre class=blendmode><dfn 2.2050 - id=ltblendmodegt><var><blend-mode></var></dfn> = <a 2.2051 - href="#blendingnormal">normal</a> | <a 2.2052 - href="#blendingmultiply">multiply</a> | <a 2.2053 - href="#blendingscreen">screen</a> | <a 2.2054 - href="#blendingoverlay">overlay</a> | <a 2.2055 - href="#blendingdarken">darken</a> | <a 2.2056 - href="#blendinglighten">lighten</a> | <a 2.2057 - href="#blendingcolordodge">color-dodge</a> | <a 2.2058 - href="#blendingcolorburn">color-burn</a> | <a 2.2059 - href="#blendinghardlight">hard-light</a> | <a 2.2060 - href="#blendingsoftlight">soft-light</a> | <a 2.2061 - href="#blendingdifference">difference</a> | <a 2.2062 - href="#blendingexclusion">exclusion</a> | <a 2.2063 - href="#blendinghue">hue</a> | <a 2.2064 - href="#blendingsaturation">saturation</a> | <a 2.2065 - href="#blendingcolor">color</a> | <a 2.2066 - href="#blendingluminosity">luminosity</a></pre> 2.2067 - 2.2068 - <p class=note>Applying a non-default blendmode to the <var>‘<code 2.2069 - class=css><a href="#area-element">element</a></code>’</var> area must 2.2070 - establish a new stacking context. 2.2071 - 2.2072 - <p class=note>Applying a non-default blendmode to an area other than 2.2073 - <var>‘<code class=css><a 2.2074 - href="#area-element">element</a></code>’</var> must render those areas 2.2075 - in an offscreen buffer first. This buffer will then be blended and 2.2076 - composited. 2.2077 - 2.2078 - <h4 id=isolation><span class=secno>7.4.3. </span>The <span 2.2079 - class=prop-name>‘<code class=property>isolation</code>’</span> 2.2080 - property</h4> 2.2081 - 2.2082 - <p> Defines whether a group is isolated or not.<br> 2.2083 - When a group is isolated, the group's backdrop must be ignored and 2.2084 - replaced with transparent black.<br> 2.2085 - Groups can be set to non-isolated with the ‘<code 2.2086 - class=property>auto</code>’ keyword. However certain operations that 2.2087 - cause the creation of stacking context (such as 3D transforms) will still 2.2088 - cause a group to be isolated.<br> 2.2089 - This behavior is described in more detail in <a 2.2090 - href="#isolatedgroups">Isolated Gropus</a>. 2.2091 - 2.2092 - <div class=propdef> 2.2093 - <dl> 2.2094 - <dt id=propdef-isolation><span class="propdef-title prop-name">‘<code 2.2095 - class=property>isolation</code>’</span> 2.2096 - 2.2097 - <dd> 2.2098 - <table cellpadding=0 cellspacing=0 class=propinfo 2.2099 - summary="isolation property"> 2.2100 - <tbody> 2.2101 - <tr valign=baseline> 2.2102 - <td><em>Value:</em> 2.2103 - 2.2104 - <td><a href="#isolated-propid"><var><isolation-mode></var></a> 2.2105 - 2.2106 - <tr valign=baseline> 2.2107 - <td><em>Initial:</em> 2.2108 - 2.2109 - <td>auto 2.2110 - 2.2111 - <tr valign=baseline> 2.2112 - <td><em>Applies to:</em> 2.2113 - 2.2114 - <td>All HTML elements. In SVG, it applies to all container elements 2.2115 - except <a 2.2116 - href="http://www.w3.org/TR/SVG/masking.html#Masking">‘<code 2.2117 - class=property>mask</code>’</a> 2.2118 - 2.2119 - <tr valign=baseline> 2.2120 - <td><em>Inherited:</em> 2.2121 - 2.2122 - <td>no 2.2123 - 2.2124 - <tr valign=baseline> 2.2125 - <td><em>Percentages:</em> 2.2126 - 2.2127 - <td>N/A 2.2128 - 2.2129 - <tr valign=baseline> 2.2130 - <td><em>Media:</em> 2.2131 - 2.2132 - <td>visual 2.2133 - 2.2134 - <tr valign=baseline> 2.2135 - <td><em>Computed value:</em> 2.2136 - 2.2137 - <td>same as the specified value 2.2138 - 2.2139 - <tr valign=baseline> 2.2140 - <td><em>Animatable:</em> 2.2141 - 2.2142 - <td>no 2.2143 - </table> 2.2144 - </dl> 2.2145 - </div> 2.2146 - 2.2147 - <p>The syntax of the property of <a 2.2148 - href="#isolated-propid"><var><isolation-mode></var></a> is given 2.2149 - with: 2.2150 - 2.2151 - <pre class=isolated><dfn 2.2152 - id=isolated-propid><var><isolation-mode></var></dfn> = auto | isolate</pre> 2.2153 - 2.2154 - <p> In CSS, a background image or the content of an <img> must always 2.2155 - be rendered into an isolated group.<br> 2.2156 - For instance, if you link to an SVG file through the ‘<code 2.2157 - class=property>img</code>’ tag, the artwork of that SVG will not blend 2.2158 - with the backdrop of the content. 2.2159 - 2.2160 - <p> In SVG, <a 2.2161 - href="http://www.w3.org/TR/SVG/masking.html#Masking">‘<code 2.2162 - class=property>mask</code>’</a> always creates an isolated group. 2.2163 - 2.2164 - <p class=note>‘<code class=property>Isolation</code>’ is always applied 2.2165 - to the <a href="#ltareagt">area</a> of the element 2.2166 - 2.2167 - <h4 id=knock-out><span class=secno>7.4.4. </span>The <span 2.2168 - class=prop-name>‘<code class=property>knock-out</code>’</span> 2.2169 - property</h4> 2.2170 - 2.2171 - <p> Defines whether a group is a knock-out group.<br> 2.2172 - When a group is set to ‘<code class=property>knock-out</code>’, the 2.2173 - elements within the group must only composite and blend with elements 2.2174 - outside that group. This effectively ‘<code class=css>knocks 2.2175 - out</code>’ any element from within the group that is already drawn. The 2.2176 - end result is as if every shape composites with a ‘<code 2.2177 - class=property>clear</code>’ operation (with clip-to-self enabled) first 2.2178 - before it blends and composites.<br> 2.2179 - When ‘<code class=property>knock-out</code>’ is set to ‘<code 2.2180 - class=property>preserve</code>’, the group must not be a knock-out group 2.2181 - and its elements composite normally.<br> 2.2182 - The behavior of this keyword is described in more detail in <a 2.2183 - href="#knockoutgroups">Knockout Groups</a>. 2.2184 - 2.2185 - <div class=propdef> 2.2186 - <dl> 2.2187 - <dt id=propdef-knock-out><span class="propdef-title prop-name">‘<code 2.2188 - class=property>knock-out</code>’</span> 2.2189 - 2.2190 - <dd> 2.2191 - <table cellpadding=0 cellspacing=0 class=propinfo 2.2192 - summary="knock-out property"> 2.2193 - <tbody> 2.2194 - <tr valign=baseline> 2.2195 - <td><em>Value:</em> 2.2196 - 2.2197 - <td><a href="#knockout-propid"><var><knock-out-mode></var></a> 2.2198 - 2.2199 - <tr valign=baseline> 2.2200 - <td><em>Initial:</em> 2.2201 - 2.2202 - <td>preserve 2.2203 - 2.2204 - <tr valign=baseline> 2.2205 - <td><em>Applies to:</em> 2.2206 - 2.2207 - <td>All HTML elements. In SVG, it applies to all container elements 2.2208 - except ‘<code class=property>mask</code>’ 2.2209 - 2.2210 - <tr valign=baseline> 2.2211 - <td><em>Inherited:</em> 2.2212 - 2.2213 - <td>yes 2.2214 - 2.2215 - <tr valign=baseline> 2.2216 - <td><em>Percentages:</em> 2.2217 - 2.2218 - <td>N/A 2.2219 - 2.2220 - <tr valign=baseline> 2.2221 - <td><em>Media:</em> 2.2222 - 2.2223 - <td>visual 2.2224 - 2.2225 - <tr valign=baseline> 2.2226 - <td><em>Computed value:</em> 2.2227 - 2.2228 - <td>same as the specified value 2.2229 - 2.2230 - <tr valign=baseline> 2.2231 - <td><em>Animatable:</em> 2.2232 - 2.2233 - <td>no 2.2234 - </table> 2.2235 - </dl> 2.2236 - </div> 2.2237 - 2.2238 - <p>The syntax of the property of <a 2.2239 - href="#knockout-propid"><var><knock-out-mode></var></a> is given 2.2240 - with: 2.2241 - 2.2242 - <pre class=knockout-prop><dfn 2.2243 - id=knockout-propid><var><knock-out-mode></var></dfn> = preserve | knock-out</pre> 2.2244 - 2.2245 - <p class=note>‘<code class=property>Knock-out</code>’ is always applied 2.2246 - to the area of the element 2.2247 - 2.2248 - <h4 id=mix-shorthand><span class=secno>7.4.5. </span>Compositing and 2.2249 - blending shorthand: the <span class=prop-name>‘<code 2.2250 - class=property>mix</code>’</span> property</h4> 2.2251 - 2.2252 - <p> The ‘<code class=property>mix</code>’ property is a shorthand 2.2253 - property for setting blending and compositing properties at the same place 2.2254 - in the style sheet.<br> 2.2255 - Omitted values are set to their initial values. 2.2256 - 2.2257 - <div class=propdef> 2.2258 - <dl> 2.2259 - <dt id=propdef-mix><span class="propdef-title prop-name">‘<code 2.2260 - class=property>mix</code>’</span> 2.2261 - 2.2262 - <dd> 2.2263 - <table cellpadding=0 cellspacing=0 class=propinfo 2.2264 - summary="knock-out property"> 2.2265 - <tbody> 2.2266 - <tr valign=baseline> 2.2267 - <td><em>Value:</em> 2.2268 - 2.2269 - <td><a href="#ltmixareagt"><var><mixa-rea></var></a># 2.2270 - 2.2271 - <tr valign=baseline> 2.2272 - <td><em>Initial:</em> 2.2273 - 2.2274 - <td>source-over 2.2275 - 2.2276 - <tr valign=baseline> 2.2277 - <td><em>Applies to:</em> 2.2278 - 2.2279 - <td>See individual properties 2.2280 - 2.2281 - <tr valign=baseline> 2.2282 - <td><em>Inherited:</em> 2.2283 - 2.2284 - <td>See individual properties 2.2285 - 2.2286 - <tr valign=baseline> 2.2287 - <td><em>Percentages:</em> 2.2288 - 2.2289 - <td>N/A 2.2290 - 2.2291 - <tr valign=baseline> 2.2292 - <td><em>Media:</em> 2.2293 - 2.2294 - <td>visual 2.2295 - 2.2296 - <tr valign=baseline> 2.2297 - <td><em>Computed value:</em> 2.2298 - 2.2299 - <td>same as the specified value 2.2300 - 2.2301 - <tr valign=baseline> 2.2302 - <td><em>Animatable:</em> 2.2303 - 2.2304 - <td>No 2.2305 - </table> 2.2306 - </dl> 2.2307 - </div> 2.2308 - 2.2309 - <p>The syntax of the property of <var><mixa-rea></var> is given with: 2.2310 - 2.2311 - <pre class=blendarea><dfn 2.2312 - id=ltmixareagt><var><mix-area></var></dfn> = <a 2.2313 - href="#ltareagt"><var><area></var></a>? [<a 2.2314 - href="#ltblendmodegt"><var><blend-mode></var></a> || <a 2.2315 - href="#ltcompositegt"><var><composite-mode></var></a> || <a 2.2316 - href="#isolated-propid"><var><isolation-mode></var></a> || <a 2.2317 - href="#knockout-propid"><var><knock-out-mode></var></a>]</pre> 2.2318 - 2.2319 - <h3 id=cssbackgroundsyntax><span class=secno>7.5. </span>Specifying 2.2320 - blending and compositing in the element background</h3> 2.2321 - 2.2322 - <h4 id=background-composite><span class=secno>7.5.1. </span>The <span 2.2323 - class=prop-name>‘<code 2.2324 - class=property>background-composite</code>’</span> property</h4> 2.2325 - 2.2326 - <p><span class=prop-name>‘<code 2.2327 - class=property>background-composite</code>’</span> defines how 2.2328 - background images composite with each other.<br> 2.2329 - Background images must always composite with <a 2.2330 - href="#groupcompositingcliptoself">‘<code 2.2331 - class=property>clip-to-self</code>’</a> set to ‘<code 2.2332 - class=property>true</code>’.<br> 2.2333 - 2.2334 - <p> The description of the <span class=prop-name>‘<code 2.2335 - class=property>background-composite</code>’</span> property is as 2.2336 - follows: 2.2337 - 2.2338 - <div class=propdef> 2.2339 - <dl> 2.2340 - <dt id=propdef-background-composite><span 2.2341 - class="propdef-title prop-name">‘<code 2.2342 - class=property>background-composite</code>’</span> 2.2343 - 2.2344 - <dd> 2.2345 - <table cellpadding=0 cellspacing=0 class=propinfo 2.2346 - summary="background-composite property"> 2.2347 - <tbody> 2.2348 - <tr valign=baseline> 2.2349 - <td><em>Value:</em> 2.2350 - 2.2351 - <td> <a href="#ltcompositegt"><composite-mode></a># 2.2352 - 2.2353 - <tr valign=baseline> 2.2354 - <td><em>Initial:</em> 2.2355 - 2.2356 - <td>source-over 2.2357 - 2.2358 - <tr valign=baseline> 2.2359 - <td><em>Applies to:</em> 2.2360 - 2.2361 - <td>All HTML elements 2.2362 - 2.2363 - <tr valign=baseline> 2.2364 - <td><em>Inherited:</em> 2.2365 - 2.2366 - <td>no 2.2367 - 2.2368 - <tr valign=baseline> 2.2369 - <td><em>Percentages:</em> 2.2370 - 2.2371 - <td>N/A 2.2372 - 2.2373 - <tr valign=baseline> 2.2374 - <td><em>Media:</em> 2.2375 - 2.2376 - <td>visual 2.2377 - 2.2378 - <tr valign=baseline> 2.2379 - <td><em>Computed value:</em> 2.2380 - 2.2381 - <td>same as the specified value 2.2382 - 2.2383 - <tr valign=baseline> 2.2384 - <td><em>Animatable:</em> 2.2385 - 2.2386 - <td>no 2.2387 - </table> 2.2388 - </dl> 2.2389 - </div> 2.2390 - 2.2391 - <h4 id=background-blend-mode><span class=secno>7.5.2. </span>The <span 2.2392 - class=prop-name>‘<code 2.2393 - class=property>background-blend-mode</code>’</span> property</h4> 2.2394 - 2.2395 - <p>This attribute sets the blending mode of each background image and the 2.2396 - background color. <br> 2.2397 - Each background image will blend with the element's background and the 2.2398 - background images at a lower z-index. This must follow the <a 2.2399 - href="http://www.w3.org/TR/CSS21/zindex.html">CSS drawing model</a>. The 2.2400 - description of the <span class=prop-name>‘<code 2.2401 - class=property>background-blend-mode</code>’</span> property is as 2.2402 - follows: 2.2403 - 2.2404 - <div class=propdef> 2.2405 - <dl> 2.2406 - <dt id=propdef-mix-blend-mode-background><span 2.2407 - class="propdef-title prop-name">‘<code 2.2408 - class=property>background-blend-mode</code>’</span> 2.2409 - 2.2410 - <dd> 2.2411 - <table cellpadding=0 cellspacing=0 class=propinfo 2.2412 - summary="background-blend-mode property"> 2.2413 - <tbody> 2.2414 - <tr valign=baseline> 2.2415 - <td><em>Value:</em> 2.2416 - 2.2417 - <td> <a href="#ltblendmodegt"><blendmode></a># 2.2418 - 2.2419 - <tr valign=baseline> 2.2420 - <td><em>Initial:</em> 2.2421 - 2.2422 - <td>normal 2.2423 - 2.2424 - <tr valign=baseline> 2.2425 - <td><em>Applies to:</em> 2.2426 - 2.2427 - <td>All HTML elements 2.2428 - 2.2429 - <tr valign=baseline> 2.2430 - <td><em>Inherited:</em> 2.2431 - 2.2432 - <td>no 2.2433 - 2.2434 - <tr valign=baseline> 2.2435 - <td><em>Percentages:</em> 2.2436 - 2.2437 - <td>N/A 2.2438 - 2.2439 - <tr valign=baseline> 2.2440 - <td><em>Media:</em> 2.2441 - 2.2442 - <td>visual 2.2443 - 2.2444 - <tr valign=baseline> 2.2445 - <td><em>Computed value:</em> 2.2446 - 2.2447 - <td>same as the specified value 2.2448 - 2.2449 - <tr valign=baseline> 2.2450 - <td><em>Animatable:</em> 2.2451 - 2.2452 - <td>no 2.2453 - </table> 2.2454 - </dl> 2.2455 - </div> 2.2456 - 2.2457 - <p class=note>The <span class=prop-name>‘<code 2.2458 - class=property>background-blend-mode</code>’</span> list will apply to 2.2459 - images in reverse z-order. This means that the first element in the list 2.2460 - will apply to the image that is on top. The first element in the list that 2.2461 - doesn't correspond with a background image, will apply to the background 2.2462 - color. If there are fewer items in the list than there are background 2.2463 - images, the remaining background images will use the initial value. 2.2464 - 2.2465 - <h2 id=canvascompositingandblending><span class=secno>8. </span>Specifying 2.2466 - Compositing and Blending in Canvas 2D</h2> 2.2467 - 2.2468 - <p>The <a href="http://www.w3.org/TR/2dcontext">canvas 2d</a> context has 2.2469 - the <a 2.2470 - href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> 2.2471 - attribute that is used to set the current compositing and blending 2.2472 - operator. 2.2473 - 2.2474 - <p> 2.2475 - 2.2476 - <p><a 2.2477 - href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">globalCompositeOperation</a> 2.2478 - takes the same arguments as the ‘<code class=css><a 2.2479 - href="#mix-shorthand">mix</a></code>’ shorthand property except that it 2.2480 - doesn't support the <a href="#ltareagt"><area></a>. The ‘<code 2.2481 - class=property>isolation</code>’ and ‘<code 2.2482 - class=property>knock-out</code>’ values are ignored in a canvas 2d 2.2483 - context. If a value is not specified, it is assumed to be the default. 2.2484 - 2.2485 - <p>Compositing and blending in canvas 2d must always done with <a 2.2486 - href="#groupcompositingcliptoself">‘<code 2.2487 - class=property>clip-to-self</code>’</a> assumed false. This means that a 2.2488 - compositing operation may affect the entire canvas and not just be limited 2.2489 - to the shape that is being composited. However, the <a 2.2490 - href="http://www.w3.org/TR/2dcontext/#clipping-region">clipping region</a> 2.2491 - will still be in effect and limit the affected area. 2.2492 - 2.2493 - <div class=propdef> 2.2494 - <dl> 2.2495 - <dt id=propdef-mix><span class="propdef-title prop-name">‘<code 2.2496 - class=property>globalCompositeOperation</code>’</span> 2.2497 - 2.2498 - <dd> 2.2499 - <table cellpadding=0 cellspacing=0 class=propinfo 2.2500 - summary="knock-out property"> 2.2501 - <tbody> 2.2502 - <tr valign=baseline> 2.2503 - <td><em>Value:</em> 2.2504 - 2.2505 - <td> <a href="#ltblendmodegt"><var><blend-mode></var></a> || <a 2.2506 - href="#ltcompositegt"><var><composite-mode></var></a> || <a 2.2507 - href="#isolated-propid"><var><isolation-mode></var></a> || <a 2.2508 - href="#knockout-propid"><var><knock-out-mode></var></a> 2.2509 - 2.2510 - <tr valign=baseline> 2.2511 - <td><em>Initial:</em> 2.2512 - 2.2513 - <td>source-over 2.2514 - </table> 2.2515 - </dl> 2.2516 - </div> 2.2517 - 2.2518 - <h2 id=security><span class=secno>9. </span>Security issues with 2.2519 + <h2 id=security><span class=secno>11. </span>Security issues with 2.2520 compositing and blending</h2> 2.2521 2.2522 <p> It is important that the timing to the blending and compositing 2.2523 @@ -2582,9 +2510,129 @@ 2.2524 element being rendered, without ever having access to the content of the 2.2525 element. 2.2526 2.2527 - <h2 id=references1><span class=secno>10. </span>References</h2> 2.2528 - 2.2529 - <h3 id=normref><span class=secno>10.1. </span>Normative References</h3> 2.2530 + <h2 id=conformance><span class=secno>12. </span>Conformance</h2> 2.2531 + <!--begin-conformance--> 2.2532 + 2.2533 + <h3 class=no-ref id=conventions> Document conventions</h3> 2.2534 + 2.2535 + <p>Conformance requirements are expressed with a combination of descriptive 2.2536 + assertions and RFC 2119 terminology. The key words “MUST”, “MUST 2.2537 + NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, 2.2538 + “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the 2.2539 + normative parts of this document are to be interpreted as described in RFC 2.2540 + 2119. However, for readability, these words do not appear in all uppercase 2.2541 + letters in this specification. 2.2542 + 2.2543 + <p>All of the text of this specification is normative except sections 2.2544 + explicitly marked as non-normative, examples, and notes. <a 2.2545 + href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> 2.2546 + 2.2547 + <p>Examples in this specification are introduced with the words “for 2.2548 + example” or are set apart from the normative text with 2.2549 + <code>class="example"</code>, like this: 2.2550 + 2.2551 + <div class=example> 2.2552 + <p>This is an example of an informative example. 2.2553 + </div> 2.2554 + 2.2555 + <p>Informative notes begin with the word “Note” and are set apart from 2.2556 + the normative text with <code>class="note"</code>, like this: 2.2557 + 2.2558 + <p class=note>Note, this is an informative note. 2.2559 + 2.2560 + <h3 class=no-ref id=conformance-classes> Conformance classes</h3> 2.2561 + 2.2562 + <p>Conformance to this is defined for three conformance classes: 2.2563 + 2.2564 + <dl> 2.2565 + <dt><dfn id=style-sheet title="style sheet!!as conformance class">style 2.2566 + sheet</dfn> 2.2567 + 2.2568 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.2569 + style sheet</a>. 2.2570 + 2.2571 + <dt><dfn id=renderer>renderer</dfn> 2.2572 + 2.2573 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.2574 + that interprets the semantics of a style sheet and renders documents that 2.2575 + use them. 2.2576 + 2.2577 + <dt><dfn id=authoring-tool>authoring tool</dfn> 2.2578 + 2.2579 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.2580 + that writes a style sheet. 2.2581 + </dl> 2.2582 + 2.2583 + <p>A style sheet is conformant to this specification if all of its 2.2584 + statements that use syntax defined in this module are valid according to 2.2585 + the generic CSS grammar and the individual grammars of each feature 2.2586 + defined in this module. 2.2587 + 2.2588 + <p>A renderer is conformant to this specification if, in addition to 2.2589 + interpreting the style sheet as defined by the appropriate specifications, 2.2590 + it supports all the features defined by this specification by parsing them 2.2591 + correctly and rendering the document accordingly. However, the inability 2.2592 + of a UA to correctly render a document due to limitations of the device 2.2593 + does not make the UA non-conformant. (For example, a UA is not required to 2.2594 + render color on a monochrome monitor.) 2.2595 + 2.2596 + <p>An authoring tool is conformant to this specification if it writes style 2.2597 + sheets that are syntactically correct according to the generic CSS grammar 2.2598 + and the individual grammars of each feature in this module, and meet all 2.2599 + other conformance requirements of style sheets as described in this 2.2600 + module. 2.2601 + 2.2602 + <h3 class=no-ref id=partial> Partial implementations</h3> 2.2603 + 2.2604 + <p>So that authors can exploit the forward-compatible parsing rules to 2.2605 + assign fallback values, CSS renderers <strong>must</strong> treat as 2.2606 + invalid (and <a 2.2607 + href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as 2.2608 + appropriate</a>) any at-rules, properties, property values, keywords, and 2.2609 + other syntactic constructs for which they have no usable level of support. 2.2610 + In particular, user agents <strong>must not</strong> selectively ignore 2.2611 + unsupported component values and honor supported values in a single 2.2612 + multi-value property declaration: if any value is considered invalid (as 2.2613 + unsupported values must be), CSS requires that the entire declaration be 2.2614 + ignored. 2.2615 + 2.2616 + <h3 class=no-ref id=experimental> Experimental implementations</h3> 2.2617 + 2.2618 + <p>To avoid clashes with future CSS features, the CSS 2.1 specification 2.2619 + reserves a <a 2.2620 + href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.2621 + syntax</a> for proprietary and experimental extensions to CSS. 2.2622 + 2.2623 + <p>Prior to a specification reaching the Candidate Recommendation stage in 2.2624 + the W3C process, all implementations of a CSS feature are considered 2.2625 + experimental. The CSS Working Group recommends that implementations use a 2.2626 + vendor-prefixed syntax for such features, including those in W3C Working 2.2627 + Drafts. This avoids incompatibilities with future changes in the draft. 2.2628 + 2.2629 + <h3 class=no-ref id=testing> Non-experimental implementations</h3> 2.2630 + 2.2631 + <p>Once a specification reaches the Candidate Recommendation stage, 2.2632 + non-experimental implementations are possible, and implementors should 2.2633 + release an unprefixed implementation of any CR-level feature they can 2.2634 + demonstrate to be correctly implemented according to spec. 2.2635 + 2.2636 + <p>To establish and maintain the interoperability of CSS across 2.2637 + implementations, the CSS Working Group requests that non-experimental CSS 2.2638 + renderers submit an implementation report (and, if necessary, the 2.2639 + testcases used for that implementation report) to the W3C before releasing 2.2640 + an unprefixed implementation of any CSS features. Testcases submitted to 2.2641 + W3C are subject to review and correction by the CSS Working Group. 2.2642 + 2.2643 + <p>Further information on submitting testcases and implementation reports 2.2644 + can be found from on the CSS Working Group's website at <a 2.2645 + href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.2646 + Questions should be directed to the <a 2.2647 + href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.2648 + mailing list. <!--end-conformance--> 2.2649 + 2.2650 + <h2 id=references1><span class=secno>13. </span>References</h2> 2.2651 + 2.2652 + <h3 id=normref><span class=secno>13.1. </span>Normative References</h3> 2.2653 2.2654 <dl> 2.2655 <dt id=ref-CSS21><strong class=normref>[CSS21]</strong> 2.2656 @@ -2634,7 +2682,7 @@ 2.2657 <dd><strong>Filter Effects 1.0 Specification</strong>, TBD 2.2658 </dl> 2.2659 2.2660 - <h3 id=informref><span class=secno>10.2. </span>Informative References</h3> 2.2661 + <h3 id=informref><span class=secno>13.2. </span>Informative References</h3> 2.2662 2.2663 <dl> 2.2664 <dt id=ref-html5><strong class=informref>[HTML5]</strong>
