--- a/master/changes.html Mon Aug 06 15:45:25 2012 +0900
+++ b/master/changes.html Thu Aug 16 14:50:52 2012 +0900
@@ -121,8 +121,8 @@
<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>
- <li>Extended the <a>'mask property'</a> property to allow targetting content
- that is not wrapped in a <a>'mask element'</a> element.</li>
+ <li>Extended the <a>'mask property'</a> property to allow targetting a CSS
+ <a><image></a> or <a href="pservers.html">paint server</a> element.</li>
</ul>
<h3 id="filters">Filter Effects chapter</h3>
--- a/master/definitions.xml Mon Aug 06 15:45:25 2012 +0900
+++ b/master/definitions.xml Thu Aug 16 14:50:52 2012 +0900
@@ -1504,11 +1504,12 @@
<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='child-selector' href='types.html#DataTypeChildSelector'/>
<symbol name='coordinate' href='types.html#DataTypeCoordinate'/>
<symbol name='dasharray' href='painting.html#DataTypeDasharray'/>
<symbol name='frequency' href='types.html#DataTypeFrequency'/>
<symbol name='icccolor' href='types.html#DataTypeICCColor'/>
+ <symbol name='image' href='types.html#DataTypeImage'/>
<symbol name='integer' href='types.html#DataTypeInteger'/>
<symbol name='knockout-offset' href="painting.html#DataTypeKnockoutOffset"/>
<symbol name='knockout-shape' href="painting.html#DataTypeKnockoutShape"/>
@@ -1701,5 +1702,8 @@
<interface name='EmbeddingElement' href='http://www.w3.org/TR/Window/#embeddingelt'/>
<!-- ... terms .......................................................... -->
+ <term name='compound selector' href='http://dev.w3.org/csswg/selectors4/#compound'/>
+ <term name='compound selectors' href='http://dev.w3.org/csswg/selectors4/#compound'/>
+ <term name='tree order' href='http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order'/>
</definitions>
--- a/master/masking.html Mon Aug 06 15:45:25 2012 +0900
+++ b/master/masking.html Thu Aug 16 14:50:52 2012 +0900
@@ -92,6 +92,11 @@
<h2 id="ClippingPaths">Clipping paths</h2>
+<p class="note">
+Note that this section may be moved to a separate CSS Masking specification in
+a future draft.
+</p>
+
<p>The clipping path restricts the region to which paint can be
applied. Conceptually, any parts of the drawing that lie
outside of the region bounded by the currently active clipping
@@ -552,6 +557,11 @@
<h2 id="Masking">Masking</h2>
+<p class="note">
+Note that this section may be moved to a separate CSS Masking specification in
+a future draft.
+</p>
+
<p>In SVG, it is possible to specify another graphics element or file
to be used as an alpha mask for compositing the current object into the
background.</p>
@@ -559,9 +569,8 @@
<p>
A mask is applied using the <a>'mask property'</a> property.
The mask source may be defined using a <a>'mask element'</a> element.
-Alternatively, for many simple uses, the <a>'mask property'</a> property may
-refer directly to graphical elements or images to be used as the mask source
-content forgoing the need for an explicit <a>'mask element'</a> element.
+Alternatively, the <a>'mask property'</a> property may refer to a CSS image or
+SVG <a href="pservers.html">paint server</a>.
</p>
<p>
@@ -627,13 +636,15 @@
<dl>
<dt id="DataTypeMaskSource"><span class="prop-value"><mask-source></span> =</dt>
<dd>
- <a><funciri></a> | child | select(<a><compound-selector></a>)
+ <a><funciri></a> | <a><image></a> | child |
+ <a><child-selector></a>
</dd>
</dl>
-<div class="issue">
- We are currently investigating allowing a CSS 4 <image> here.
-</div>
+<p class="note">
+The ability for the <a>'mask property'</a> property to reference a child element
+without an ID reference, or a CSS <a><image></a> is new in SVG 2.
+</p>
<p>
The meaning of the different <a><mask-source></a> values is as follows:
@@ -641,19 +652,33 @@
<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 source.</dd>
+ <dd>An <a>IRI reference</a> to a <a>'mask element'</a> element or <a
+ href="pservers.html">paint server</a> element.</dd>
+ <dt><span class="prop-value"><a href="types.html#DataTypeImage"><image></a></span></dt>
+ <dd>A CSS image value used to defined the contents of the offscreen buffer
+ used for masking.
+ As per the definition of <a><image></a> this value may reference bitmap
+ images, SVG images, gradients and other graphical elements.
+ <p class="issue">
+ <a><image></a> overlaps with <a><funciri></a> and hence the
+ parsing for <span class="prop-value">url(...)</span> needs to be defined
+ (e.g. references to elements may only refer to <a>'mask element'</a>
+ elements or <a href="pservers.html">paint server</a> elements, whilst <span
+ class="prop-value">url(...)</span> values without a fragment identifier are
+ processed in usual fashion for CSS Images).
+ </p>
+ </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 source. It is equivalent to
<span class="prop-value">select(mask:last-of-type)</span>.</dd>
- <dt><span class="prop-value">select (<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 specifying the
- element to use as the mask source.
- As a result, only children of the target element may be used for the mask
- source.
- </dd>
+ <dt><span class="prop-value"><a href="types.html#DataTypeChildSelector"><child-selector></a></span></dt>
+ <dd>A comma-separated list of <a>compound selectors</a> scoped at the element
+ to which the <a>'mask property'</a> property applied.
+ The first matching element in <a>tree order</a> (as defined in [<a
+ href="refs.html#ref-DOM4">DOM4</a>]) as a result of evaluating the list of
+ selectors is taken as the mask source.
+ If there are no matching elements the mask source is invalid.</dd>
</dl>
<p>
@@ -709,9 +734,8 @@
<p>
The content and behavior of a mask can be defined using a <a>'mask element'</a>
-element.
-Alternatively, for many simple uses, the <a>'mask property'</a> property can
-refer directly to a graphics element or file to use as the mask source.
+element, a <a href="pservers.html">paint server</a> element, or a CSS
+<a><image></a> value.
</p>
<h4 id="MaskValues">Calculating mask values</h4>
@@ -948,139 +972,40 @@
on the <a>'mask element'</a> element or any of its ancestors is set to
<span class="prop-value">none</span>.</p>
-<h4 id="DirectMaskSource">Directly referencing a mask source</h4>
+<h4 id="SVGPaintServer">Using an SVG paint server as a mask source</h4>
<p class="note">
-The ability to reference non-<a>'mask element'</a> content is new in SVG 2.
-</p>
-
-<p>
-In some cases the <a>'mask element'</a> element used to wrap mask source content
-is superfluous and it is more convenient to directly refer to the content to be
-used as a mask source instead.
-For example, when the the mask source is a raster image applied only once it is
-more convenient to refer directly to the image than first wrapping it in
-a <a>'mask element'</a> element.
-</p>
-
-<p>
-Besides a <a>'mask element'</a> element, the <a>'mask property'</a> property may
-refer the following types of mask source content:
-</p>
-
-<ul>
- <li>a <a href="pservers.html">paint server</a> element,</li>
- <li>any other element that is permitted as a child of the <a>'mask
- element'</a> element,</li>
- <li>an <a>'svg'</a> element or external SVG document,</li>
- <li>any raster image file supported by the <a>'image'</a> element.</li>
-</ul>
-
-<p class="issue">
- The ability to directly target other SVG elements may be replaced by use of
- CSS 4 Images Values and the <code>element()</code> syntax to achieve the same
- effect.
+The ability to reference paint servers with the <a>'mask property'</a> property
+is new in SVG 2.
</p>
<p>
-The effect of referring directly to content as a mask source depends on the
-type of the source content.
+Besides an SVG <a>'mask element'</a> element, the 'mask' property may
+also refer to an SVG <a href="pservers.html">paint server</a> element such as
+a <a>'linearGradient'</a> element or <a>'pattern'</a> element.
+When the mask source is an SVG paint server, the effect is as if the following
+steps were performed:
</p>
-<dl>
- <dt>
- When the mask source content is a <a href="pservers.html">paint
- server</a> element,
- </dt>
- <dd>
- <p>
- The effect is as if the following steps were performed:
- </p>
- <ol>
- <li>Create a new <a>'mask element'</a> element as a sibling of the
- paint server element.</li>
- <li>Let the <a>'maskUnits'</a> attribute be <span
- class="attr-value">'userSpaceOnUse'</span>.</li>
- <li>Let the dimensions of the mask
- (<a>'x'</a>, <a>'y'</a>, <a>'width'</a>, and <a>'height'</a>)
- match the dimensions of the <a>decorated bounding box</a> of the mask
- target.</li>
- <li>Let the <a>'maskContentUnits'</a> attribute be <span
- class="attr-value">'objectBoundingBox'</span>.</li>
- <li>Create a new <a>'rect'</a> element as a child of the newly
- created <a>'mask element'</a> element.</li>
- <li>Let both the width and the height of the <a>'rect'</a> element be
- <span class="attr-value">'100%'</span>.</li>
- <li>Let the <a>'fill'</a> property of the <a>'rect'</a> element
- refer to the paint server element.</li>
- <li>Use the newly created <a>'mask element'</a> as the mask source.</li>
- </ol>
- </dd>
- <dt>
- When the mask source content is any other permitted SVG element
- (including an SVG element in an external document),
- </dt>
- <dd>
- <p>
- The effect is as if the following steps were performed:
- </p>
- <ol>
- <li>Create a new <a>'mask element'</a> element as a sibling of the
- source element.</li>
- <li>Let the <a>'maskUnits'</a> attribute be <span
- class="attr-value">'userSpaceOnUse'</span>.</li>
- <li>Let the dimensions of the mask
- (<a>'x'</a>, <a>'y'</a>, <a>'width'</a>, and <a>'height'</a>)
- match the dimensions of the <a>decorated bounding box</a> of the mask
- target.</li>
- <li>Deep clone the source element and append it as a child of the newly
- created <a>'mask element'</a> element.</li>
- <li>Use the newly created <a>'mask element'</a> as the mask source.</li>
- </ol>
- <p>
- One important result of this procedure is that the rendering of the
- source content is unaffected by being referenced as a mask source.
- </p>
- </dd>
- <dt>
- When the mask source content is an external image resource (e.g. a raster
- image file or an external SVG document),
- </dt>
- <dd>
- The image is rendered into the mask buffer at 0,0 in the current user
- coordinate space in place at the time when the <a>'mask property'</a>
- property is applied.
- The dimensions of the image is established by following the
- <a href="http://www.w3.org/TR/css3-images/#object-negotiation">
- CSS⇋Object Negotation algorithm</a> defined in
- [<a href="refs.html#ref-CSS3IMAGES">CSS3IMAGES</a>].
- The dimensions of the mask are set to match the dimensions of the image.
- </dd>
- <dt>
- Otherwise,
- </dt>
- <dd>
- The type of source content is unsupported and the <a>'mask property'</a>
- property is considered to have an unsupported value.
- </dd>
-</dl>
-
-<p>
-Despite the ability to refer to mask source content directly, the <a>'mask
-element'</a> element still has many uses including the following:
-</p>
-
-<ul>
- <li>To prevent the mask source content from rendering</li>
- <li>To specify the bounds of the masking region</li>
- <li>To make the coordinate system of the mask source content relative to the
- bounds of the mask target (by setting
- <a>'maskContentUnits'</a> to
- <span class="attr-value">'objectBoundingBox'</span>)
- </li>
- <li>To add a level of semantic richness to the document by differentiating
- mask source content from other graphical content</li>
-</ul>
+<ol>
+ <li>Create a new <a>'mask element'</a> element as a sibling of the
+ paint server element.</li>
+ <li>Let the <a>'mask/maskUnits'</a> attribute be <span
+ class="attr-value">'userSpaceOnUse'</span>.</li>
+ <li>Let the dimensions of the mask
+ (<a>'mask/x'</a>, <a>'mask/y'</a>, <a>'mask/width'</a>,
+ and <a>'mask/height'</a>) match the dimensions of the <a>decorated
+ bounding box</a> of the mask target.</li>
+ <li>Let the <a>'mask/maskContentUnits'</a> attribute be <span
+ class="attr-value">'objectBoundingBox'</span>.</li>
+ <li>Create a new <a>'rect'</a> element as a child of the newly
+ created <a>'mask element'</a> element.</li>
+ <li>Let both the width and the height of the <a>'rect'</a> element be
+ <span class="attr-value">'100%'</span>.</li>
+ <li>Let the <a>'fill'</a> property of the <a>'rect'</a> element
+ refer to the paint server element.</li>
+ <li>Use the newly created <a>'mask element'</a> as the mask source.</li>
+</ol>
</edit:with>
--- a/master/types.html Mon Aug 06 15:45:25 2012 +0900
+++ b/master/types.html Thu Aug 16 14:50:52 2012 +0900
@@ -348,13 +348,16 @@
are represented using DOM interface <a>SVGColor</a>.</p>
</dd>
- <dt id='DataTypeCompoundSelector'><compound-selector></dt>
+ <dt id='DataTypeChildSelector'><child-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>A comma-separated list of <a>compound selectors</a>.
+ When used, the scope in which the selectors are evaluated is also
+ defined.
+ Typically only the first matching element in <a>tree order</a> (as
+ defined in [<a href="refs.html#ref-DOM4">DOM4</a>]) as a result of
+ evaluating the list of selectors is used.
</p>
+ <pre>child-selector ::= select(<a>compound selector</a>#)</pre>
</dd>
<dt id='DataTypeCoordinate'><coordinate></dt>
@@ -411,6 +414,14 @@
<a>SVGICCColor</a>.</p>
</dd>
+ <dt id='DataTypeImage'><image></dt>
+ <dd>
+ <p>
+ An image source (including gradients) as defined by CSS Level 4 Image
+ Values ([<a href='refs.html#ref-CSS4IMAGES'>CSS4IMAGES</a>], section 4.3).
+ </p>
+ </dd>
+
<dt id='DataTypeInteger'><integer></dt>
<dd>
<p>An <integer> is specified as an optional sign character ("+" or