Update mask property to allow referencing child elements without IDs and specifying the mask type.
--- 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><funciri> | none</td>
+ <td>[ <a><mask-source></a> [ luminance | alpha | auto ]? ]
+ | none </td>
</tr>
<tr>
<th>Initial:</th>
@@ -822,25 +823,84 @@
</tr>
<tr>
<th>Computed value:</th>
- <td>as specified, but with <a><funciri></a> values made absolute</td>
+ <td>A <a><mask-source></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"><mask-source></span> =</dt>
+ <dd>
+ <a><funciri></a> | child | element(<a><compound-selector></a>)
+ </dd>
+</dl>
+
+<p>
+The meaning of the different <a><mask-source></a> values is as follows:
+</p>
<dl>
<dt><span class="prop-value"><a href="types.html#DataTypeFuncIRI"><funciri></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"><compound-selector></a>)</span></dt>
+ <dd>A <a><compound-selector></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><mask-source></a> is provided, a mask type may also be specified.
+If a <a><mask-source></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><mask-source></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'><compound-selector></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'><coordinate></dt>
<dd>