Update mask property to allow referencing child elements without IDs and specifying the mask type.
authorBrian Birtles <birtles@gmail.com>
Tue, 31 Jul 2012 15:59:28 +0900
changeset 214 7babd18cad0b
parent 213 4bd90b528091
child 215 759b43f83e79
Update mask property to allow referencing child elements without IDs and specifying the mask type.
master/changes.html
master/definitions.xml
master/masking.html
master/refs.html
master/types.html
--- a/master/changes.html	Sun Jul 29 15:37:51 2012 +1000
+++ b/master/changes.html	Tue Jul 31 15:59:28 2012 +0900
@@ -105,6 +105,7 @@
 
 <ul>
   <li>Added the <a>'mask/maskType'</a> attribute to the <a>'mask element'</a> element.</li>
+  <li>Extended the <a>'mask property'</a> property to allow targetting child elements and specifying the mask type.</li>
 </ul>
 
 <h3 id="filters">Filter Effects chapter</h3>
--- a/master/definitions.xml	Sun Jul 29 15:37:51 2012 +1000
+++ b/master/definitions.xml	Tue Jul 31 15:59:28 2012 +0900
@@ -1511,6 +1511,7 @@
   <symbol name='anything' href='types.html#DataTypeAnything'/>
   <symbol name='author-ident' href='http://dev.w3.org/csswg/css3-values/#identifiers'/>
   <symbol name='color' href='types.html#DataTypeColor'/>
+  <symbol name='compound-selector' href='types.html#DataTypeCompoundSelector'/>
   <symbol name='coordinate' href='types.html#DataTypeCoordinate'/>
   <symbol name='dasharray' href='painting.html#DataTypeDasharray'/>
   <symbol name='frequency' href='types.html#DataTypeFrequency'/>
@@ -1522,6 +1523,7 @@
   <symbol name='list' href='types.html#DataTypeList'/>
   <symbol name='list-of-family-names' href='types.html#DataTypeListOfFamilyNames'/>
   <symbol name='list-of-strings' href='types.html#DataTypeListOfStrings'/>
+  <symbol name='mask-source' href='masking.html#DataTypeMaskSource'/>
   <symbol name="name" href="types.html#DataTypeName"></symbol>
   <symbol name='number' href='types.html#DataTypeNumber'/>
   <symbol name='number-optional-number' href='types.html#DataTypeNumberOptionalNumber'/>
--- a/master/masking.html	Sun Jul 29 15:37:51 2012 +1000
+++ b/master/masking.html	Tue Jul 31 15:59:28 2012 +0900
@@ -537,9 +537,7 @@
 
 <h2 id="Masking">Masking</h2>
 
-<edit:with element='mask'>
-
-<p id="MaskElement">In SVG, you can specify that any other graphics
+<p>In SVG, you can specify that any other graphics
 object or <a>'g'</a> element can be used as an alpha mask for
 compositing the current object into the background.</p>
 
@@ -550,17 +548,6 @@
 <a>container elements</a> such as
 a <a>'g'</a>.</p>
 
-<p>It is an error if the <a>'mask property'</a> property references a
-non-existent object or if the referenced object is not a <a>'mask element'</a>
-element (see <a href="implnote.html#ErrorProcessing">Error Processing</a>).</p>
-
-<p class="annotation">
-<a href="https://www.w3.org/Graphics/SVG/WG/track/actions/3256">ACTION-3256</a>
-will investigate lifting the above restriction, i.e. allowing the <a>'mask
-property'</a> property to target arbitrary graphics objects without the <a>'mask
-element'</a> element wrapper.
-</p>
-
 <p>The effect is as if the child elements of the <a>'mask element'</a> are
 rendered into an offscreen image which has been initialized to transparent
 black. Any graphical object which uses/references the given
@@ -568,42 +555,48 @@
 mask, thus completely or partially masking out parts of the graphical
 object.</p>
 
-<p>The procedure for calculating the mask value is determined by the
-<a>'maskType'</a> attribute.
-If the <a>'maskType'</a> is <span class="attr-value">'luminance'</span> then the
-mask value at a given point is computed from the color channel values and alpha
-channel value.
-If the <a>'maskType'</a> is <span class="attr-value">'alpha'</span> then the
-mask value is computed from the alpha channel value only, the color channels do
-not contribute to the mask value.</p>
-
-<p>If the <a>'maskType'</a> is <span class="attr-value">'luminance'</span>, the
-procedure for calculating the mask value at a given point is as follows.
-First, compute a luminance value from the color channel values.</p>
+<h3 id="MaskValues">Calculating mask values</h3>
 
-<ul>
-  <li>
-  If the computed value of <a>'color-interpolation'</a> on the <a>'mask
-element'</a> element is <span class="attr-value">linearRGB</span>, convert the
-original image color values (potentially in the sRGB color space) to the linear
-RGB color space (see <a
-  href="painting.html#RenderingProperties">Rendering properties</a>).
-  </li>
-  <li>Then, using non-premultiplied RGB color values, apply the
-  luminance-to-alpha coefficients (as defined in the <a>'feColorMatrix'</a>
-  filter primitive) to convert the RGB color values to luminance
-  values.
-  </li>
-</ul>
+<p>
+A mask source may be interpreted using one of two different methods with regards
+to calculating the mask values that will be multiplied with the target alpha
+values.
+</p>
 
-<p>Finally, multiply the computed luminance value by the corresponding alpha
-value to produce the mask value.</p>
+<p>
+The first and simplest method of calculating the mask values is to use the alpha
+channel of the mask source.
+In this case the mask value at a given point is simply the value of the alpha channel at that point.
+The color channels do not contribute to the mask value.
+</p>
 
-<p>If the <a>'maskType'</a> is <span class="attr-value">'alpha'</span>, the mask
-value at a given point is simply the value of the alpha channel at that
-point.</p>
+<p>
+The second method of calculating the mask values is to use the luminance of the mask source.
+In this case the mask value at a given point is computed from the color channel values and alpha channel value using the following procedure.
+</p>
 
-<p>Regardless of the value of <a>'maskType'</a>, the procedure for calculating
+<ol>
+<li>Compute a luminance value from the color channel values.
+  <ul>
+    <li>
+    If the computed value of <a>'color-interpolation'</a> on the <a>'mask
+  element'</a> element is <span class="attr-value">linearRGB</span>, convert the
+  original image color values (potentially in the sRGB color space) to the linear
+  RGB color space (see <a
+    href="painting.html#RenderingProperties">Rendering properties</a>).
+    </li>
+    <li>Then, using non-premultiplied RGB color values, apply the
+    luminance-to-alpha coefficients (as defined in the <a>'feColorMatrix'</a>
+    filter primitive) to convert the RGB color values to luminance
+    values.
+    </li>
+  </ul>
+</li>
+<li>Multiply the computed luminance value by the corresponding alpha
+value to produce the mask value.</li>
+</ol>
+
+<p>Regardless of the method used, the procedure for calculating
 mask values assumes the content of the mask is a four-channel RGBA graphics
 object.
 For other types of graphics objects, special handling is required as
@@ -636,6 +629,10 @@
 
 <edit:example href='images/masking/mask01.svg' name='mask01' description='blue text masked with gradient against red background' image='yes' link='yes'/>
 
+<h3 id="MaskElement">The <span class="element-name">'mask'</span> element</h3>
+
+<edit:with element='mask'>
+
 <edit:elementsummary name='mask'/>
 
     <div class="adef-list">
@@ -701,9 +698,10 @@
         "<em>luminance</em> | <em>alpha</em>"</dt>
         <dd>
          Defines the procedure used for calculating mask values from the
-        contents of the mask as described in <a href="#Masking">Masking</a>.
+        contents of the mask as described in <a href="#MaskValues">Calculating
+        mask values</a>.
         <br />
-         If attribute <a>'maskType'</a> is not specified,
+        If attribute <a>'maskType'</a> is not specified,
         then the effect is as if a value of <span
         class="attr-value">'luminance'</span> were
         specified.<br />
@@ -711,9 +709,9 @@
         href="animate.html#Animatable">Animatable</a>:
         yes.</span>
         <div class="annotation">
-          Although authors will generally find <span
-          class="attr-value">'alpha'</span> more useful, the default value is
-          <span class="attr-value">'luminance'</span> to provide backwards
+          Although authors may find <span class="attr-value">'alpha'</span> more
+          intuitive, the default value is <span
+          class="attr-value">'luminance'</span> to provide backwards
           compatibility with SVG 1.1.
         </div>
         </dd>
@@ -789,7 +787,9 @@
 on the <a>'mask element'</a> element or any of its ancestors is set to
 <span class="prop-value">none</span>.</p>
 
-<p>The following is a description of the <a>'mask property'</a> property.</p>
+</edit:with>
+
+<h3 id="mask-property">The <span class="property">'mask'</span> property</h3>
 
 <table class="propdef">
   <tr>
@@ -798,7 +798,8 @@
   </tr>
   <tr>
     <th>Value:</th>
-    <td>&lt;funciri&gt; | none</td>
+    <td>[ <a>&lt;mask-source&gt;</a> [ luminance | alpha | auto ]? ]
+        | none </td>
   </tr>
   <tr>
     <th>Initial:</th>
@@ -822,25 +823,84 @@
   </tr>
   <tr>
     <th>Computed&#160;value:</th>
-    <td>as specified, but with <a>&lt;funciri&gt;</a> values made absolute</td>
+    <td>A <a>&lt;mask-source&gt;</a> followed by a mask type
+      (one of <span class="prop-value">luminance</span>,
+              <span class="prop-value">alpha</span>, or
+              <span class="prop-value">auto</span>),
+        or otherwise the keyword <span class="prop-value">none</span>.</td>
   </tr>
   <tr>
     <th><a>Animatable</a>:</th>
     <td>yes</td>
   </tr>
 </table>
+<p>Where:</p>
+<dl>
+  <dt id="DataTypeMaskSource"><span class="prop-value">&lt;mask-source&gt;</span> =</dt>
+  <dd>
+    <a>&lt;funciri&gt;</a> | child | element(<a>&lt;compound-selector&gt;</a>)
+  </dd>
+</dl>
+
+<p>
+The meaning of the different <a>&lt;mask-source&gt;</a> values is as follows:
+</p>
 
 <dl>
   <dt><span class="prop-value"><a href="types.html#DataTypeFuncIRI">&lt;funciri&gt;</a></span></dt>
   <dd>An <a>IRI reference</a> to another graphical object which will be used
   as the mask.</dd>
+  <dt><span class="prop-value">child</span></dt>
+  <dd>A keyword to indicate that the last child <a>'mask element'</a>
+  element should be used as the mask. It is equivalent to
+  <span class="prop-value">element(mask:last-of-type)</span>.</dd>
+  <dt><span class="prop-value">element (<a href="types.html#DataTypeCompoundSelector">&lt;compound-selector&gt;</a>)</span></dt>
+  <dd>A <a>&lt;compound-selector&gt;</a> scoped at the element to which the
+    <span class="property">'mask'</span> property is applied.
+    As a result, only children of the element may be used for the mask source.
+  </dd>
 </dl>
 
-<p class="issue">Even though this says "another graphical object",
-text in an earlier section says that <a>'mask property'</a> can
-only reference a <a>'mask element'</a> element.</p>
+<p>
+If a <a>&lt;mask-source&gt;</a> is provided, a mask type may also be specified.
+If a <a>&lt;mask-source&gt;</a> is provided without a mask type, the value <span class="prop-value">auto</span> is used.
+</p>
 
-</edit:with>
+<p>
+If a mask type other than <span class="prop-value">auto</span> is specified
+and the <a>&lt;mask-source&gt;</a> refers to a <a>'mask element'</a> element
+with a <a>'mask/maskType'</a> attribute, the mask type specified on the <a>'mask
+property'</a> property takes precedence.
+</p>
+
+<p>The possible values for the mask type are as follows:</p>
+
+<dl>
+  <dt><span class="prop-value">luminance</span></dt>
+  <dd>
+  Indicates the luminance values of the mask source should be used as the mask
+  values as described in <a href="#MaskValues">Calculating mask values</a>.
+  </dd>
+  <dt><span class="prop-value">alpha</span></dt>
+  <dd>
+  Indicates the alpha values of the mask source should be used as the mask
+  values as described in <a href="#MaskValues">Calculating mask values</a>.
+  </dd>
+  <dt><span class="prop-value">auto</span></dt>
+  <dd>
+  If the mask source is a <a>'mask element'</a> element, the type of mask is
+  determined by the <a>'mask/maskType'</a> attribute on the <a>'mask
+  element'</a> element.
+  Otherwise, the alpha values of the mask source should be used as the 
+  mask values as described in <a href="#MaskValues">Calculating mask values</a>.
+  </dd>
+</dl>
+
+<p>
+  The <a href="intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a>
+  for the <span class="property">'mask'</span> property is <span
+  class="prop-value">'none'</span>.
+</p>
 
 <div class="ready-for-wg-review">
 <h2 id="ObjectAndGroupOpacityProperties">Object and group opacity: the
--- a/master/refs.html	Sun Jul 29 15:37:51 2012 +1000
+++ b/master/refs.html	Tue Jul 31 15:59:28 2012 +0900
@@ -83,6 +83,16 @@
     http://www.w3.org/TR/css3-ui/.
   </dd>
 
+  <dt id="ref-CSS4IMAGES" class="normref">[CSS4IMAGES]</dt>
+  <dd>
+    <cite class="w3cwd"><a href="http://dev.w3.org/csswg/css4-images/">CSS Image
+        Values and Replaced Content Module Level 4</a></cite>,
+    E. Etemad, T. Atkins, eds.
+    World Wide Web Consortium, 21 July 2012.
+    <br/>The <a href="http://www.w3.org/TR/css4-images/">latest edition of CSS4 Images</a> is available at
+    http://www.w3.org/TR/css4-images/.
+  </dd>
+
   <dt id="ref-CSSTRANSFORMS" class="normref">[CSS3TRANSFORMS]</dt>
   <dd>
     <cite class="w3cwd"><a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120403/">CSS Transforms</a></cite>,
--- a/master/types.html	Sun Jul 29 15:37:51 2012 +1000
+++ b/master/types.html	Tue Jul 31 15:59:28 2012 +0900
@@ -347,6 +347,15 @@
     SVG's extension to color, including the ability to specify ICC-based colors,
     are represented using DOM interface <a>SVGColor</a>.</p>
   </dd>
+
+  <dt id='DataTypeCompoundSelector'>&lt;compound-selector&gt;</dt>
+  <dd>
+    <p class="note">
+      This will be defined in CSS Level 4 Image Values
+      ([<a href='refs.html#ref-CSS4IMAGES'>CSS4IMAGES</a>], section 4.3).
+      It is essentially a CSS selector without whitespace.
+    </p>
+  </dd>
   
   <dt id='DataTypeCoordinate'>&lt;coordinate&gt;</dt>
   <dd>