Merge pull request w3c#381 from Manishearth/bikeshedify

Use bikeshed links for blend modes

Author: dirkschulze

compositing-2/Overview.bs

@@ -18,6 +18,15 @@ Abstract: <ul><li>additional Porter Duff compositing operators</li><li>advanced
 Abstract: In addition, this specification will define CSS properties for blending and group isolation and the properties of the {{globalCompositeOperation}} attribute.
 </pre>
 
+
+<pre class="link-defaults">
+spec: css2;
+    type: dfn; text: stacking context
+spec: css-cascade-3
+    type: dfn; text: inherit
+spec: css-position-3;
+    type: dfn; text: containing block
+</pre>
 <style type="text/css">
 a[data-link-type=element]::before,span[data-link-type=element]::before {
   content: '<';
@@ -41,10 +50,9 @@ Each section of this document is normative unless otherwise specified.
 
 This specification defines a set of CSS properties that affect the visual rendering of elements to which
 those properties are applied; these effects are applied after elements have been sized and positioned according
-to the <a href="https://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a>
-from [[!CSS21]]. Some values of these properties result in the creation of a
-<a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block" title="Visual formatting model">containing block</a>,
-and/or the creation of a <a spec="css21">stacking context</a>.
+to the [[css2#visual-model-intro|Visual formatting model]]. Some values of these properties result in the creation of a
+[=containing block=],
+and/or the creation of a [=stacking context=].
 
 The 'background-blend-mode' property also builds upon the properties defined in the <a href="https://www.w3.org/TR/css3-background/#placement" title="Backgrounds and Borders">CSS  Backgrounds and Borders</a> module [[!CSS3BG]].
 
@@ -55,16 +63,15 @@ This module also extends the
 
 <h3 id="values">Values</h3>
 
-This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
-definition conventions</a> from [[!CSS21]]. Value types not defined in
+This specification follows the [[css2#property-defs|CSS property
+definition conventions]]. Value types not defined in
 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS
 modules may expand the definitions of these value types: for example [[!CSS3COLOR]],
 when combined with this module, expands the definition of the &lt;color>
 value type as used in this specification.
 
 In addition to the property-specific values listed in their definitions,
-all properties defined in this specification also accept the <a
-href="https://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
+all properties defined in this specification also accept the [=inherit=]
 keyword as their property value. For readability it has not been repeated
 explicitly.
 
@@ -76,11 +83,11 @@ The compositing model must follow the <a href="https://www.w3.org/TR/SVG11/rende
 <h3 id="csscompositingrules_CSS">Behavior specific to HTML</h3>
 <!-- <p>
 If an element specifies non-default blending or <a href="https://www.w3.org/TR/css3-color/#transparency">'opacity'</a>, its <a href="https://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> [[CSS3-TRANSFORMS]] and that of all of its children must revert to 'flat'.<br>
-The application of blending other than 'normal' to an element must also establish a <a spec="css21">stacking context</a> [[!CSS21]] the same way that CSS <a href="https://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> -->
+The application of blending other than 'normal' to an element must also establish a [=stacking context=] the same way that CSS <a href="https://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> -->
 
-Everything in CSS that creates a <a href="https://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be considered an <a href="#isolatedgroups">‘isolated’ group</a>. HTML elements themselves should not create groups.
+Everything in CSS that creates a [=stacking context=] must be considered an <a href="#isolatedgroups">‘isolated’ group</a>. HTML elements themselves should not create groups.
 
-An element that has blending applied, must blend with all the underlying content of the <a spec="css21">stacking context</a> [[!CSS21]] that that element belongs to.
+An element that has blending applied, must blend with all the underlying content of the [=stacking context=] that that element belongs to.
 
 <h3 id="csscompositingrules_SVG">Behavior specific to SVG</h3>
 
@@ -123,7 +130,7 @@ The syntax of the property of <<blend-mode>> is given with:
   <a value>color-burn</a> | <a value>hard-light</a> | <a value>soft-light</a> | <a value>difference</a> | <a value>exclusion</a> | <a value>hue</a> |
   <a value>saturation</a> | <a value>color</a> | <a value>luminosity</a></pre>
 
-Note: Applying a blendmode other than <a value>normal</a> to the element must establish a new <a spec="css21">stacking context</a> [[!CSS21]]. This group must then be blended and composited with the <a spec="css21">stacking context</a> that contains the element.
+Note: Applying a blendmode other than <a value>normal</a> to the element must establish a new [=stacking context=]. This group must then be blended and composited with the [=stacking context=] that contains the element.
 
 <div class="example">
 <p>Given the following sample markup:</p>
@@ -246,7 +253,7 @@ Text with a blend overlay on top of an image.
 In SVG, this defines whether an element is isolated or not.<br>
 For CSS, setting 'isolation' to ''isolation/isolate'' will turn the element into a stacking context.
 
-By default, elements use the ''isolation/auto'' keyword which implies that they are not isolated. However operations that cause the creation of stacking context [[!CSS21]] must cause a group to be isolated. These operations are described in <a href="#csscompositingrules_CSS">'behavior specific to HTML'</a> and <a href="#csscompositingrules_SVG">'behavior specific to SVG'</a>.
+By default, elements use the ''isolation/auto'' keyword which implies that they are not isolated. However operations that cause the creation of [=stacking context=] must cause a group to be isolated. These operations are described in <a href="#csscompositingrules_CSS">'behavior specific to HTML'</a> and <a href="#csscompositingrules_SVG">'behavior specific to SVG'</a>.
 
 <pre class='propdef'>
 Name: isolation
@@ -352,7 +359,7 @@ This property takes the following value:
 
 The syntax of the property of <<composite-mode>> is given with:
 
-<pre class="compositemode prod"><dfn id="compositemode">&lt;composite-mode></dfn> = <a href="#porterduffcompositingoperators_clear">clear</a> | <a href="#porterduffcompositingoperators_src">copy</a> | <a href="#porterduffcompositingoperators_srcover">source-over</a> | <a href="#porterduffcompositingoperators_dstover">destination-over</a> | <a href="#porterduffcompositingoperators_srcin">source-in</a> | <br><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> | <br><a href="#porterduffcompositingoperators_dstatop">destination-atop</a> | <a href="#porterduffcompositingoperators_xor">xor</a> | <a href="#porterduffcompositingoperators_plus">lighter</a> | <a href="#porterduffcompositingoperators_plus_darker">plus-darker</a> | <a href="#porterduffcompositingoperators_plus_lighter">plus-lighter</a></pre>
+<pre class="compositemode prod"><dfn id="compositemode">&lt;composite-mode></dfn> = <a>clear</a> | <a>copy</a> | <a>source-over</a> | <a>destination-over</a> | <a>source-in</a> | <br><a>destination-in</a> | <a>source-out</a> | <a>destination-out</a> | <a>source-atop</a> | <br><a>destination-atop</a> | <a>xor</a> | <a>lighter</a> | <a>plus-darker</a> | <a>plus-lighter</a></pre>
 
 <h2 id="whatiscompositing">Introduction to compositing</h2>
 
@@ -723,7 +730,7 @@ which is the color value ultimately displayed by the UA.
 -->
 <h2 id="advancedcompositing">Advanced compositing features</h2>
 
-<a href="#simplealphacompositing">Simple alpha compositing</a> uses the <a href="#porterduffcompositingoperators_srcover">source-over</a> Porter Duff compositing operator. <!-- Additional compositing operators exist and may be specified with the <a href="#propdef-mix-composite">mix-composite property</a>.
+<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>.
 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>.
 The operators that applies to an element or group is selected using the <a href="#propdef-mix-composite">mix-composite</a> property.-->
 
@@ -816,7 +823,7 @@ Where:
 
 <h4 id="porterduffcompositingoperators_clear">Clear</h4>
 
-No regions are enabled.
+With the <dfn>clear</dfn> compositing operator, no regions are enabled.
 
 <div class="figure">
 <img src="examples/PD_clr.svg" alt="example of porter duff clear"/>
@@ -828,7 +835,7 @@ No regions are enabled.
     αo = 0
 </pre>
 <h4 id="porterduffcompositingoperators_src">Copy</h4>
-<p>Only the source will be present.</p>
+With the <dfn>copy</dfn> compositing operator, only the source will be present.
 <div class="figure">
 <img src="examples/PD_src.svg" alt="example of porter duff copy"/>
 <p class="caption"></p>
@@ -841,7 +848,7 @@ No regions are enabled.
 
 <h4 id="porterduffcompositingoperators_dst">Destination</h4>
 
-Only the destination will be present.
+With the <dfn>destination</dfn> compositing operator, only the destination will be present.
 
 <div class="figure">
 <img src="examples/PD_dst.svg" alt="example of porter duff destination"/>
@@ -855,7 +862,7 @@ Only the destination will be present.
 
 <h4 id="porterduffcompositingoperators_srcover">Source Over</h4>
 
-Source is placed over the destination.
+With the <dfn>source-over</dfn> compositing operator, the source is placed over the destination.
 
 <div class="figure">
 <img src="examples/PD_src-over.svg" alt="example of porter duff source over"/>
@@ -868,7 +875,7 @@ Source is placed over the destination.
 </pre>
 <h4 id="porterduffcompositingoperators_dstover">Destination Over</h4>
 
-Destination is placed over the source.
+With the <dfn>destination-over</dfn> compositing operator, Destination is placed over the source.
 
 <div class="figure">
 <img src="examples/PD_dst-over.svg" alt="example of porter duff destination over"/>
@@ -882,7 +889,7 @@ Destination is placed over the source.
 
 <h4 id="porterduffcompositingoperators_srcin">Source In</h4>
 
-The source that overlaps the destination, replaces the destination.
+With the <dfn>source-in</dfn> compositing operator, the parts of the source that overlap with the desitnation are placed.
 
 <div class="figure">
 <img src="examples/PD_src-in.svg" alt="example of porter duff source in"/>
@@ -895,7 +902,7 @@ The source that overlaps the destination, replaces the destination.
 </pre>
 
 <h4 id="porterduffcompositingoperators_dstin">Destination In</h4>
-Destination which overlaps the source, replaces the source.
+With the <dfn>destination-in</dfn> compositing operator, the parts of the destination that overlap with the source are placed.
 
 <div class="figure">
 <img src="examples/PD_dst-in.svg" alt="example of porter duff destination in "/>
@@ -909,7 +916,7 @@ Destination which overlaps the source, replaces the source.
 
 <h4 id="porterduffcompositingoperators_srcout">Source Out</h4>
 
-Source is placed, where it falls outside of the destination.
+With the <dfn>source-out</dfn> compositing operator, the parts of the source that fall outside of the destination are placed.
 
 <div class="figure">
 <img src="examples/PD_src-out.svg" alt="example of porter duff source out"/>
@@ -923,7 +930,7 @@ Source is placed, where it falls outside of the destination.
 
 <h4 id="porterduffcompositingoperators_dstout">Destination Out</h4>
 
-Destination is placed, where it falls outside of the source.
+With the <dfn>destination-out</dfn> compositing operator, the parts of the destination that fall outside of the source are placed.
 
 <div class="figure">
 <img src="examples/PD_dst-out.svg" alt="example of porter duff destination out"/>
@@ -937,7 +944,7 @@ Destination is placed, where it falls outside of the source.
 
 <h4 id="porterduffcompositingoperators_srcatop">Source Atop</h4>
 
-Source which overlaps the destination, replaces the destination. Destination is placed elsewhere.
+With the <dfn>source-atop</dfn> compositing operator, the parts of the source which overlap the destination replace the destination. The destination is placed everywhere else.
 
 <div class="figure">
 <img src="examples/PD_src-atop.svg" alt="example of porter duff source atop"/>
@@ -951,7 +958,7 @@ Source which overlaps the destination, replaces the destination. Destination is
 
 <h4 id="porterduffcompositingoperators_dstatop">Destination Atop</h4>
 
-Destination which overlaps the source replaces the source. Source is placed elsewhere.
+With the <dfn>destination-atop</dfn> compositing operator, the parts of the destination which overlaps the source replace the source. The source is placed everywhere else.
 
 <div class="figure">
 <img src="examples/PD_dst-atop.svg" alt="example of porter duff destination atop"/>
@@ -965,7 +972,7 @@ Destination which overlaps the source replaces the source. Source is placed else
 
 <h4 id="porterduffcompositingoperators_xor">XOR</h4>
 
-The non-overlapping regions of source and destination are combined.
+With the <dfn>xor</dfn> compositing operator, the non-overlapping regions of source and destination are combined.
 
 <div class="figure">
 <img src="examples/PD_xor.svg" alt="example of porter duff xor"/>
@@ -978,7 +985,7 @@ The non-overlapping regions of source and destination are combined.
 </pre>
 
 <h4 id="porterduffcompositingoperators_plus">Lighter</h4>
-Display the sum of the source image and destination image. It is defined in the Porter Duff paper as the ''plus'' operator [[PORTERDUFF]].
+With the <dfn>lighter</dfn> compositing operator, the sum of the source image and destination image is displayed. It is defined in the Porter Duff paper as the ''plus'' operator [[PORTERDUFF]].
 
 <pre>
     Fa = 1; Fb = 1
@@ -987,13 +994,18 @@ Display the sum of the source image and destination image. It is defined in the
 </pre>
 
 <h4 id="porterduffcompositingoperators_plus_darker">Plus-darker</h4>
+
+With the <dfn>plus-darker</dfn> compositing operator, the following steps are performed:
 <pre>
     Fa = 1; Fb = 1
     co = max(0, 1 - αs x Cs + 1 - αb x Cb);
     αo = max(0, 1 - αs + 1 - αb);
 </pre>
 
 <h4 id="porterduffcompositingoperators_plus_lighter">Plus-lighter</h4>
+
+With the <dfn>plus-lighter</dfn> compositing operator, the following steps are performed:
+
 <pre>
     Fa = 1; Fb = 1
     co = min(1, αs x Cs + αb x Cb);
@@ -1003,18 +1015,15 @@ Display the sum of the source image and destination image. It is defined in the
 <h3 id="groupcompositing">Group compositing behavior with Porter Duff modes</h3>
 <!--<h4 id="groupcompositingisolation">Isolated groups and Porter Duff modes</h4>-->
 
-When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator
-which is dependent on the backdrop, such as <a href="#porterduffcompositingoperators_dst">destination</a>, <a href="#porterduffcompositingoperators_srcin">source-in</a>,
-<a href="#porterduffcompositingoperators_dstin">destination-in</a>, <a href="#porterduffcompositingoperators_dstout">destination-out</a> or <a href="#porterduffcompositingoperators_srcatop">source-atop</a>,
-then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.
+When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator which is dependent on the backdrop, such as [=destination=], [=source-in=], [=destination-in=], [=destination-out=], or [=source-atop=], then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.
 
 <!--
 <h4 id="groupcompositingknockout">Knockout groups and Porter Duff modes</h4>
 <p>
 Every element within a knock-out group is composited with the initial backdrop.
 This means, that for every element within the group, the backdrop for the compositing of that element, is the initial backdrop.
 </p><p>
-In the example below, the elements within the group (the circle and the square) are composited using the <a href="#porterduffcompositingoperators_srcatop">source-atop</a> operator, with only the hexagon.
+In the example below, the elements within the group (the circle and the square) are composited using the [=source-atop=] operator, with only the hexagon.
 This has the effect of "knocking out" the circle, where it is overlapped by the square.<br>
 Additionally, because the source-atop Porter Duff operator is used, the source shape (either the square or the circle) is only placed where the backdrop exists (the backdrop being the hexagon for both compositing operations within the group).
 <div class="example"><img src="examples/pd-knockout.png" alt="example of knockout with porter duff"/></div>
@@ -1103,7 +1112,7 @@ now substitute the result of blending for Cs:
 A blend mode is termed separable if each component of the result color is completely determined by the corresponding components of the constituent <a>backdrop</a> and source colors — that is, if the mixing formula is applied <strong>separately</strong> to each set of corresponding components.
 
 Each of the following blend modes will apply the blending function B(Cb, Cs) on each of the color components.
-For simplicity, all the examples in this chapter use <a href="#porterduffcompositingoperators_srcover">source-over</a> compositing.
+For simplicity, all the examples in this chapter use [=source-over=] compositing.
 
 <h4 id="blendingnormal"><dfn dfn-type="value" dfn-for="<blend-mode>">normal</dfn> blend mode</h4>