drafts: masking/Masking.src.html@59236286d848 (annotated)

masking/Masking.src.html@59236286d848 (annotated)

masking/Masking.src.html

Sun, 10 Mar 2013 19:35:27 -0700

author: Dirk Schulze <dschulze@adobe.com>
date: Sun, 10 Mar 2013 19:35:27 -0700
changeset 734: 59236286d848
parent 731: fd09b94a3a4d
child 741: cd0593275768
permissions: -rw-r--r--

Incorporate feedback from Liam R E Quin.

 <!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN'
   'http://www.w3.org/TR/html4/strict.dtd'>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>CSS Masking</title>
   <link rel=contents href="#contents">
   <link rel=index href="#index">
   <link rel="stylesheet" type="text/css" href="default.css">
   <link rel="stylesheet" type="text/css"
         href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
   <script defer=defer
     src="http://test.csswg.org/harness/annotate.js#CSS-MASKING_DEV"
     type="text/javascript"></script>
 </head>
 <div class="head">
 <!--logo-->
 <h1>CSS Masking</h1>
 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
 <dl>
   <dt>This version:
     <dd><a href="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html">http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html</a>
     <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/-->
   <dt>Latest version:
     <dd><a href="http://www.w3.org/TR/css-masking/">[LATEST]</a>
   <dt>Editor's draft:
     <dd><a href="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html">http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html</a>
   <dt>Editors:
   <dd class="vcard">
     <span class="fn">Dirk Schulze</span>,
     <span class="org">Adobe Systems</span>,
     <span class="email">dschulze@adobe.com</span>
   </dd>
   <dd class="vcard">
     <span class="fn">Brian Birtles</span>,
     <span class="org">Mozilla Japan</span>,
     <span class="email">bbirtles@mozilla.com</span>
   </dd>
   <dd class="vcard">
     <span class="fn"><a href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a></span>,
     <span class="org">Google, Inc.</span>
   </dd>
 </dl>
 <!--copyright-->
 <hr title="Separator for header">
 </div>
 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 <p>
   CSS Masking provides two means for partially or fully hiding portions of
   visual elements: masking and clipping.
 </p>
 <p>
   Masking describes how to use another graphical element or image as a luminance
   or alpha mask.
   Typically, rendering an element via CSS or SVG can conceptually described as if the element,
   including its children, are drawn into a buffer and then that buffer is composited
   into the element's parent.
   Luminance and alpha masks influence the transparency of this buffer before the
   compositing stage.
 </p>
 <p>
   Clipping describes the visible region of visual elements.
   The region can be described by using certain SVG graphics elements or basic
   shapes.
   Anything outside of this region is not rendered.
 </p>
 <h2 class="no-num no-toc" id="status">Status of this document</h2>
 <!--status-->
 <h2 class="no-num no-toc" id="contents">
 Table of contents</h2>
 <!--toc-->
 <h2 id="intro">
   Introduction
 </h2>
 <p>
   With CSS Masking it is possible to specify another graphics element, shape or file
   to be used as clipping region or an luminance or alpha mask for compositing the current object into the
   background.
 </p>
 <p>
   A mask is applied using the 'mask', 'mask-image' or 'mask-box-image' properties.
   The mask source may be defined using a <a>'mask element'</a> element referenced
   by the 'mask' property.
   Alternatively, for many simple uses, the 'mask-image' property may
   refer directly to graphical elements or images to be used as mask
   forgoing the need for an explicit <a>'mask element'</a> element. The
   'mask' property is also a shorthand for other masking properties.
   'mask-box-image' splits a mask image into 9 pieces. The pieces may be sliced,
   scaled and stretched in various ways to fit the size of the mask image area.
 </p>
 <p>
   The effect of applying a mask is as if the mask images or mask source elements are
   rendered into an off-screen image which has been initialized to transparent
   black.
   The graphical object to which the mask is applied
   will be painted onto the background through the
   mask, thus completely or partially masking out parts of the graphical
   object.
 </p>
 <p>
   Clipping defines a visible region of a visual element. The region can be specified with SVG <a>graphics element</a> or
   basic shapes. Everything outside of a region does not get rendered.
 </p>
 <div class="example">
   <div class=figure>
     <img src="images/luminance-mask.svg" width="655px" height="260px" alt="Example Mask">
     <p class=caption>
       A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape
       (right).
     </p>
   </div>
 </div>
 <h2 id="placement">Module interactions</h2>
 <p>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="http://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="http://www.w3.org/TR/CSS2/visuren.html#containing-block" title="Visual formatting model">containing block</a>,
   and/or the creation of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index" title="Visual formatting model">stacking
   context</a>.
 </p>
 <p>
   Definitions of CSS properties and values in this specification comply with defintions in CSS Backgrounds and Borders [[!CSS3BG]]. To avoid redundancy, this specification relies on descriptions and definitions of CSS Backgrounds and Borders. Every reference will be marked clearly. The following terms in CSS Backgrounds and Borders have the following meaning in this specification:
 </p>
 <table class="data" id="term-matching">
   <thead>
     <tr>
       <th>Term in [[!CSS3BG]]
       <th>Term in CSS Masking
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>background images
       <td>mask images
     </tr>
     <tr>
       <th>background painting area
       <td>mask painting area
     </tr>
     <tr>
       <th>background-size
       <td>mask-size
     </tr>
     <tr>
       <th>background-position
       <td>mask-position
     </tr>
     <tr>
       <th>background positioning area
       <td>mask positioning area
     </tr>
     <tr>
       <th>border image area
       <td>mask box image area
     </tr>
   </tbody>
 </table>
 <p>
   Some property and element definitions in this specification require an SVG 1.1 implementation [[!SVG11]]. UAs without
   support for SVG must not implement any of the following properties and elements: 'mask-type', 'clip-rule', <a>'clipPath element'</a> element, <a>'mask element'</a> element. For UAs without
   support for SVG, the 'mask' and 'clip-path' properties must neither support references to
   <a>'mask element'</a> elements nor to <a>'clipPath element'</a> elements.
 </p>
 <h2 id="values">Values</h2>
 <p>
   This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition
   conventions</a> from [[!CSS21]]. Value types not defined in this specification are defined in CSS Values and Units Module Level 3 [[!CSS3VAL]].
 </p>
 <p>
   In addition to the property-specific values listed in their definitions, all properties defined in this specification
   also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their
   property value. For readability it has not been repeated explicitly.
 </p>
 <h2 id="definitions">Definitions</h2>
 <p>
   When used in this specification, terms have the meanings assigned in this section.
 </p>
 <dl>
 <dt id="TermClientBoundingRect"><dfn>bounding client rect</dfn></dt>
 <dd>
   <p>
     The union of all border boxes for the element that has an associated CSS layout box and is not
     in the <code>http://www.w3.org/2000/svg</code> namespace and its descendant elements. Or the
     object bounding box [[!SVG11]], if the element does not have
     an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code> namespace
     (See <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
     [[CSSOM-VIEW]]).
   </p>
 </dd>
 <dt id="TermLocalCoordinateSystem"><dfn>local coordinate system</dfn></dt>
 <dd>
   <p>
     In general, a coordinate system defines locations and distances on the current
     canvas. The current local coordinate system (also user coordinate system) is the
     coordinate system that is currently active and which is used to define how
     coordinates and lengths are located and computed, respectively, on the current
     canvas [[CSS3-TRANSFORMS]].
   </p>
   <p>
     For elements that have an associated CSS layout box, the current user coordinate system has its origin at
     the top-left corner of the <span class="term">bounding client rect</span> and one unit equals one CSS pixel.
     The viewport for resolving percentage values is defined by the width and height of the
     <span class="term">bounding client rect</span>.
   </p>
   <p>
     If the element does not have an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code>
     namespace, the current local coordinate system has its origin at the top-left corner of the element's
     nearest viewport.
   </p>
 </dd>
 <dt id="TermUserCoordinateSystem"><dfn>user coordinate system</dfn></dt>
 <dd>
   The term <var>user coordinate system</var> is equivalent to the term <var>local coordinate system</var>.
 </dd>
 <dt id="TermObjectBoundingBoxUnits"><dfn>object bounding box units</dfn></dt>
 <dd>
   The <span class="term">bounding client rect</span> defines the coordinate system in which to resolve values, as
   defined in <a>object bounding box units</a> [[!SVG11]].
 </dd>
 <dt id="TermMask"><dfn>mask</dfn></dt>
 <dd>
   An off-screen image which has been initialized to transparent
   black.
   The graphical object to which the mask is applied
   will be painted onto the background through the
   mask, thus completely or partially masking out parts of the graphical
   object.
 </dd>
 <dt id="TermMaskSource"><dfn>mask source</dfn></dt>
 <dd>
   A mask defined by a <a>'mask element'</a> element.
 </dd>
 <dt id="TermClippingPath">clipping path</dt>
 <dd>
   A combination of the SVG elements <a>'path'</a>, <a>'text'</a>
   and <a>basic shapes</a> which serve as the
   outline of a (in the absence of anti-aliasing) 1-bit <a href="#TermMask">mask</a>,
   where everything on the "inside" of the outline is allowed to
   show through but everything on the outside is masked out. See 'clip-path'.
 </dd>
 </dl>
 <h2>The Mask Rendering Model</h2>
 <p>
   The application of the 'clip-path', 'mask' or 'mask-image' properties to an element formatted with the CSS box model
   establishes a stacking context in the same way that CSS 'opacity' does, and all the element's descendants are rendered
   together as a group with the masking applied to the group as a whole.
 </p>
 <p>
   The 'mask' and 'mask-image' properties have no effect on the geometry of any element's CSS boxes.
 </p>
 <p>
   The compositing model follows the SVG compositing model [[!SVG11]]: first any filter effect is applied, then any
   clipping, masking and opacity. These effects all apply after any other CSS effects such as 'border'. As per SVG, the
   application of 'mask' or 'mask-image' has no effect on hit-testing.
 </p>
 <h3 id="layering">Layering Multiple Mask Images</h3>
 <p>The mask of a box can have multiple <span
 class=index>layers</span>. The number
 of layers is determined by the number of comma-separated values in the
 'mask-image' property. Note that a value of 'none' still creates
 a layer.
 See <a href="http://www.w3.org/TR/css3-background/#layering">Layering Multiple Background Images</a> [[!CSS3BG]].
 <p>The first layer is the layer closest to the user,
 the next one is painted behind the first, and so on. All mask images
 are transformed to alpha masks (if necessary) and combined by compositing
 on the <a href="#TermMask">mask</a>.
 <h3 id="MaskValues">Calculating mask values</h3>
 <p>
 A mask 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>
 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>
   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>
 <ol>
 <li>Compute a luminance value from the color channel values.
   <ul>
     <li>
     If the computed value of 'color-interpolation' on the <a>'mask element'</a> element is 'linearRGB', convert the
   original image color values (potentially in the sRGB color space) to the linear
   RGB color space.
     </li>
     <li>Then, using non-premultiplied RGB color values, apply the
     luminance-to-alpha coefficients (as defined in the <a>'feColorMatrix'</a>
     filter primitive [[!SVG11]]) 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
 follows.</p>
 <p>For a three-channel RGB graphics object that is used in a mask (e.g.,
 when referencing a three-channel image file), the effect is as if the object
 were converted into a four-channel RGBA image with the alpha channel
 uniformly set to 1.</p>
 <p>For a single-channel image that is used in a mask (e.g., when
 referencing a single-channel grayscale image file), the effect is as if the
 object were converted into a four-channel RGBA image, where the single
 channel from the referenced object is used to compute the three color
 channels and the alpha channel is uniformly set to 1.</p>
 <p class="note">Note that when
 referencing a grayscale image file, the transfer curve relating the
 encoded grayscale values to linear light values must be taken into
 account when computing the color channels.</p>
 <p class="note">Note that SVG <a>graphics elements</a> (e.g., <a>'circle'</a> or <a>'text'</a>)
 are all treated as four-channel RGBA images for the purposes
 of masking operations.</p>
 <p>The effect of a mask is identical to what would have happened if
 there were no mask but instead the alpha channel of the given object
 were multiplied with the mask's resulting mask values.</p>
 <h2 id="masking">Mask</h2>
 <h3 id="the-mask-image">The 'mask-image' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-image</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;mask-reference&gt;</var>
     <tr>
       <th>Initial:
       <td>none
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>N/A
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>as specified, but with URIs made absolute
     <tr>
       <th>Animatable:
       <td>no
 </table>
 <p>This property sets the mask image(s) or the mask source of an element. Images
 are drawn with the first specified one on top (closest to the user)
 and each subsequent image behind the previous one.
 Where:
 <pre class=prod><var><dfn>&lt;mask-reference&gt;</dfn></var> = <var>&lt;mask-image&gt;</var># | <var>&lt;mask-element&gt;</var></pre>
 <pre class=prod><var><dfn>&lt;mask-image&gt;</dfn></var> = <var>&lt;image&gt;</var> | none </pre>
 <pre class=prod><var><dfn>&lt;mask-element&gt;</dfn></var> = <var>&lt;url&gt;</var> | <var>child</var> | <var>&lt;child-selector&gt;</var></pre>
 <pre class=prod><dfn>&lt;child-selector&gt;</dfn> = select(<var>&lt;compound-selector&gt;</var>#)</pre>
 <p class="note">A <var>&lt;mask-element&gt;</var> can just be specified as a single value and can not contibute to a list of <var>&lt;mask-reference&gt;</var> values. Otherwise the specified value of the property is invalid. (See examples below.)</p>
 <dl>
   <dt>
     <dfn>'&lt;url&gt;'</dfn>
   </dt>
   <dd>
     A URL reference to a <a>'mask element'</a> element (for example ''url(commonmasks.svg#mask)'') or an <var>&lt;image&gt;</var>.
   </dd>
   <dt>''child''</dt>
   <dd>
     A keyword to indicate that the last direct sibling <a>'mask element'</a>
     element of the element the 'mask-image' property is applied should be used as the mask source. It is equivalent to
     ''select(mask:last-of-type)''.</dd>
   <dt>'&lt;child-selector&gt;'</dt>
   <dd>
     A comma-separated list of <a>compound selector</a>s scoped at the element to
     which the 'mask-image' property is applied.
     The first matching element in <a>tree order</a> (as defined in [[!DOM]]) 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>
   <dt><dfn>'&lt;compound-selector&gt;'</dfn></dt>
   <dd>
     A <a>compound selector</a> as defined in [[!SELECTORS4]].
   <dd>
   <dt><dfn>&lt;image&gt;</dfn></dt>
   <dd>
     A 2D image. (See [[!CSS3-IMAGES]].)
   </dd>
   <dt><dfn>''none''</dfn></dt>
   <dd>
     A value of ''none'' counts as an image layer but does not mask the element.
   </dd>
 </dl>
 <p class="note">If the URI in the ''url()'' function has a fragment identifier, the <var>&lt;mask-reference&gt;</var> is treated as <var>&lt;mask-element&gt;</var>, otherwise as <var>&lt;mask-image&gt;</var>.</p>
 <p>An invalid or non-existent mask source is ignored and no masking is applied.</p>
 <p>A mask image that is empty (zero width or zero height), that fails to
 download, is non-existent, or that cannot be displayed (e.g. because it is not
 in a supported image format) is ignored. No masking is applied.
 <p>See the section <a href="#layering">“Layering multiple mask
 images”</a> for how 'mask-image' interacts with other
 comma-separated mask properties to form each mask image
 layer.
 <div class="example">
 <p>Some examples specifying mask images:</p>
 <pre>
 body { mask-image: linear-gradient(black 0%, transparent 100%) }
 p { mask-image: none }
 div { mask-image: url(tl.png), url(tr.png) }
 </pre>
 <p>Some examples of a specified mask source:</p>
 <pre>
 img { mask-image: url(#mask) }
 span { mask-image: url(resources.svg#mask2) }
 </pre>
 <p>Examples of <i>invalid</i> mask source usages:</p>
 <pre>
 p { mask-image: url(#mask), url(tl.png) }
 img { mask-image: url(#mask), url(resources.svg#mask2) }
 </pre>
 <p>A <var>&lt;mask-element&gt;</var> value that is either used together with another <var>&lt;mask-element&gt;</var> value or an <var>&lt;mask-image&gt;</var> value makes the whole specified 'mask-image' value list invalid.
 </div>
 <h3 id="the-mask-source-type">The 'mask-source-type' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-source-type</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;source-type&gt;</var>#
     <tr>
       <th>Initial:
       <td>auto
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>N/A
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>as specified
     <tr>
       <th>Animatable:
       <td>no
 </table>
 <p>The 'mask-source-type' property indicates whether the <var>&lt;mask-reference&gt;</var>
 is treated as luminance mask or alpha mask. (See <a href="#MaskValues">Calculating mask values</a>.)</p>
 <pre class=prod><dfn><var>&lt;source-type&gt;</var></dfn> = alpha | luminance | auto</pre>
 <p>Values have the following meanings:
 <dl>
   <dt><dfn>''alpha''</dfn></dt>
   <dd>
     A value of ''alpha'' indicates that the alpha values of the mask
     image should be used as the mask values.
     See <a href="#MaskValues">Calculating mask values</a>.</p>
   </dd>
   <dt><dfn>''luminance''</dfn></dt>
   <dd>
     A value of ''luminance'' indicates that the luminance values of the mask
     image should be used as the mask values.
     See <a href="#MaskValues">Calculating mask values</a>.</p>
   </dd>
   <dt><dfn>''auto''</dfn></dt>
   <dd>
     <p>
       If the <var>&lt;mask-reference&gt;</var> of the 'mask-image' property is of type <var>&lt;mask-image&gt;</var> the luminance values of the mask
       image should be used as the mask values.
     <p>
       If the <var>&lt;mask-reference&gt;</var> of the 'mask-image' property is of type <var>&lt;mask-element&gt;</var> the alpha values of the mask
       image should be used as the mask values.
   </dd>
 </dl>
 <div class="example">
   <p>
     In the following example, the 'mask-type' property sets the mask type value for the <a>'mask element'</a> element to
     ''alpha''. The 'mask-image' property has a reference to this <a>'mask element'</a> element and the 'mask-source-type' property has a value of ''luminance''. The 'mask-source-type' property will override the definition of 'mask-type' to ''luminance''.
 <pre>
 &lt;mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox"&gt;
   &lt;radialGradient id="radialFill"&gt;
     &lt;stop stop-color="white" offset="0"/&gt;
     &lt;stop stop-color="black" offset="1"/&gt;
   &lt;/radialGradient&gt;
   &lt;circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/&gt;
 &lt;/mask&gt;
 &lt;style&gt;
   rect {
     mask-image: url(#SVGMask);
     mask-source-type: luminance;
   }
 &lt;/style&gt;
 &lt;rect width="200" height="200" fill="green"/&gt;
 </pre>
 </div>
 <h3 id="the-mask-repeat">The 'mask-repeat' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-repeat</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;repeat-style&gt;</var>#
     <tr>
       <th>Initial:
       <td>repeat
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>N/A
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>A list, each item consisting of:
         two keywords, one per dimension
     <tr>
       <th>Animatable:
       <td>no
 </table>
 <p>Specifies how mask images are tiled after they have been
 <a href="#the-mask-size">sized</a> and <a href="#the-mask-position">positioned</a>.
 Where
 <pre class=prod><dfn><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
 <p>See <a href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling Images: the 'background-repeat' property</a> [[!CSS3BG]] for the defintions of the property values.
 <div class=example>
   <p style="display:none">Example(s):
   <pre>
 body {
   background-color: blue;
   mask-image: url(dot-mask.png) luminance;
   mask-repeat: space;
 }
 </pre>
   <div class=figure>
     <p><img src="images/mask-repeat.svg" alt="Image of an element with a dotted mask." width="240" style="border: solid black 1px;">
     <p class=caption>The effect of 'space': the mask image of a dot is
     tiled to cover the whole <span class=index>mask painting area</span> and the mask images are equally
     spaced.
   </div>
 </div>
 <p>See the section <a href="#layering">“Layering multiple mask
 images”</a> for how 'mask-repeat' interacts with other
 comma-separated mask properties to form each mask image
 layer.
 <h3 id="the-mask-position">The 'mask-position' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-position</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;position&gt;</var>#
     <tr>
       <th>Initial:
       <td>0% 0%
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>refer to size of <span class=index>mask painting area</span> <em>minus</em> size of mask image; see text
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>A list, each item consisting of:
         two keywords representing the origin and two offsets from that
         origin, each given as an absolute length (if given a &lt;length&gt;),
         otherwise as a percentage.
     <tr>
       <th>Animatable:
       <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable list</a> of <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple list</a> of <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
 </table>
 <p>Where
 <pre class=prod><dfn><var>&lt;position&gt;</var></dfn> = [
   [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 |
   [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
   [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 |
   [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
   [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
 ]</pre>
 <p>See <a href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning Images: the 'background-position' property</a> [[!CSS3BG]] for the defintions of the property values.
 <div class="example">
   <p>In the example below, the (single) image is placed in the lower-right
   corner of the viewport.
   <pre>
 body {
   mask-image: url("logo.png");
   mask-position: 100% 100%;
   mask-repeat: no-repeat;
 }
 </pre>
 </div>
 <div class=example>
 <p>Mask positions can also be relative to other corners than the
 top left. E.g., the following puts the background image 10px from the
 bottom and 3em from the right:
 <pre>mask-position: right 3em bottom 10px</pre>
 </div>
 <p>See the section <a href="#layering">“Layering multiple mask
 images”</a> for how 'mask-position' interacts with other
 comma-separated mask properties to form each mask image
 layer.
 <h3 id="the-mask-clip">The 'mask-clip' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-clip</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;clip-box&gt;</var>#
     <tr>
       <th>Initial:
       <td>border-box
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>N/A
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>as specified
     <tr>
       <th>Animatable:
       <td>no
 </table>
 <p>Determines the <dfn id="mask-painting-area">mask painting area</dfn>,
 which determines the area that is affected by the mask. The painted content
 of an element may be resricted to this area.
 The syntax of the property is given with
 <pre class=prod><dfn><var>&lt;clip-box&gt;</var></dfn> = <var>&lt;box&gt;</var> | no-clip</pre>
 <pre class=prod><dfn><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
 <p>Values have the following meanings:
 <dl>
   <dt><dfn title="''border-box''!!'mask-clip' value">
       ''border-box''</dfn></dt>
   <dd>The painted content is rectricted to (clipped to) the
     <span>border box</span> respectively <span>painting box</span> for objects without associated layout box.
   <dt><dfn title="''padding-box''!!'mask-clip' value">
       ''padding-box''</dfn></dt>
   <dd>The painted content is rectricted to (clipped to) the
     <span>padding box.</span>
   <dt><dfn title="''content-box''!!'mask-clip' value">
       ''content-box''</dfn></dt>
   <dd>The painted content is rectricted to (clipped to) the
     <span>content box</span> respectively <span>object bounding box</span> [[!SVG11]] for objects without associated layout box.
   <dt><dfn title="''no-clip''!!'mask-clip' value">
       ''no-clip''</dfn></dt>
   <dd>The painted content is not restricted (not clipped). The <span>mask painting area</span> is set to
     the <span>bounding client rect</span>.
 </dl>
 <p class="note">Note that there is no corresponding box for
 ''padding-box'' on objects without associated layout box
 and ''content-box'' is choosen instead.</p>
 <p>See the section <a href="#layering">“Layering multiple mask
 images”</a> for how 'mask-clip' interacts with other
 comma-separated mask properties to form each mask image
 layer.
 <h3 id="the-mask-origin">The 'mask-origin' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-origin</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;box&gt;</var>#
     <tr>
       <th>Initial:
       <td>padding-box
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>N/A
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>as specified
     <tr>
       <th>Animatable:
       <td>no
 </table>
 <p>For elements rendered as a single box, specifies the
 <dfn id="mask-positioning-area">mask positioning area</dfn>.
 For elements rendered as multiple boxes (e.g., inline boxes on several
 lines, boxes on several pages) specifies which boxes 'box-decoration-break'
 operates on to determine the mask positioning area(s).
 <dl>
   <dt><dfn title="''padding-box''!!'mask-origin' value">
       ''padding-box''</dfn>
   <dd>The position is relative to the padding box. (For single boxes
     ''0 0'' is the upper left corner of the padding edge,
     ''100% 100%'' is the lower right corner.)
   <dt><dfn title="''border-box''!!'mask-origin' value">
       ''border-box''</dfn>
   <dd>The position is relative to the border box respectively <span>painting box</span> for objects without associated layout box.
   <dt><dfn>''content-box''</dfn>
   <dd>The position is relative to the content box respectively object bounding box [[!SVG11]] for objects without associated layout box.
 </dl>
 <p class="note">Note that there is no corresponding box for
 ''padding-box'' on objects without associated layout box
 and ''content-box'' is choosen instead.</p>
 <p class="note">Note that if 'mask-clip' is ''padding-box'',
 'mask-origin' is ''border-box'', 'mask-position' is
 ''top left'' (the initial value), and the element has a
 non-zero border, then the top and left of the mask image will be
 clipped.
 <p>See the section <a href="#layering">“Layering multiple mask
 images”</a> for how 'mask-origin' interacts with other
 comma-separated mask properties to form each mask image
 layer.
 <h3 id="the-mask-size">The 'mask-size' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-size</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td><var>&lt;mask-size&gt;</var>#
     <tr>
       <th>Initial:
       <td>auto
     <tr>
       <th>Applies to:
       <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>see text
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>as specified, but with lengths made absolute
     <tr>
       <th>Animatable:
       <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable list</a> of <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple list</a> of <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
       (<span class="note">This means keyword values are not animatable.</span>)
 </table>
 <p>Specifies the size of the mask images. Where
 <pre class=prod><dfn><var>&lt;mask-size&gt;</var></dfn> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
 <p>See <a href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing Images: the ‘background-size’ property</a> [[!CSS3BG]] for the defintions of the property values.
 <p>See the section <a href="#layering">“Layering multiple mask
 images”</a> for how 'mask-size' interacts with other
 comma-separated mask properties to form each mask image
 layer.
 <h3 id="mask-property">The 'mask' property</h3>
 <table class="propdef">
   <tr>
     <th>Name:</th>
     <td><dfn id="MaskProperty">mask</dfn></td>
   </tr>
   <tr>
     <th>Value:</th>
     <td><var>&lt;mask-layer&gt;</var>#</td>
   </tr>
   <tr>
     <th>Initial:</th>
     <td>see individual properties</td>
   </tr>
   <tr>
     <th>Applies to:</th>
     <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a></td>
   </tr>
   <tr>
     <th>Inherited:</th>
     <td>no</td>
   </tr>
   <tr>
     <th>Percentages:</th>
     <td>see individual properties</td>
   </tr>
   <tr>
     <th>Media:</th>
     <td>visual</td>
   </tr>
   <tr>
     <th>Computed&#160;value:</th>
     <td>see individual properties</td>
   </tr>
   <tr>
     <th>Animatable:</th>
     <td>see individual properties</td>
   </tr>
 </table>
 <p>Where</p>
 <pre class=prod><dfn>&lt;mask-layer&gt;</dfn> = <var>&lt;mask-reference&gt;</var> <var>&lt;source-type&gt;</var>? || <var>&lt;position&gt;</var> [ / <var>&lt;mask-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;box&gt;</var> || <var>&lt;clip-box&gt;</var></pre>
 <p>
   If one <var>&lt;box&gt;</var> value is present then it sets both 'mask-origin' and 'mask-clip' to that value. If two <var>&lt;box&gt;</var> values are present, then the first sets 'mask-origin' and the second 'mask-clip'.
 <p class="note">
   Note that the properties 'mask-image', 'mask-repeat', 'mask-position', 'mask-clip', 'mask-origin' and
   'mask-size' have no affect on <a>'mask element'</a> elements.
 </p>
 <h3 id="the-mask-type">The 'mask-type' property</h3>
 <table class="propdef">
     <tr>
       <th>Name:
       <td><dfn>mask-type</dfn>
     <tr>
       <th><a href="#values">Value</a>:
       <td>luminance | alpha
     <tr>
       <th>Initial:
       <td>luminance
     <tr>
       <th>Applies to:
       <td><a>'mask element'</a> elements
     <tr>
       <th>Inherited:
       <td>no
     <tr>
       <th>Percentages:
       <td>N/A
     <tr>
       <th>Media:
       <td>visual
     <tr>
       <th>Computed value:
       <td>as specified
     <tr>
       <th>Animatable:
       <td>no
 </table>
 <p>The 'mask-type' property defines whether the content of the
 <a>'mask element'</a> is treated as as luminance mask or alpha mask, as
 described in <a href="#MaskValues">Calculating mask values</a>.</p>
 <p>Values have the following meanings:
 <dl>
   <dt>''luminance''</dt>
   <dd>Indicates that the luminance values of the mask should be used.</dd>
   <dt>''alpha''</dt>
   <dd>Indicates that the alpha values of the mask should be used.</dd>
 </dl>
 <p>The 'mask-type' property is a presentation attribute for SVG elements.</p>
 <h3 id="MaskElement">The <span class="element-name">'mask'</span> element</h3>
 <!--elementsummary mask-->
     <div class="adef-list">
       <p><em>Attribute definitions:</em></p>
       <dl>
         <dt id="MaskElementMaskUnitsAttribute"><span
         class="adef">maskUnits</span> = "<em>userSpaceOnUse</em> |
         <em>objectBoundingBox</em>"</dt>
         <dd>Defines the coordinate system for attributes
         <a>'mask/x'</a>, <a>'mask/y'</a>, <a>'mask/width'</a> and <a>'mask/height'</a>.<br />
          If <span
         class="attr-value">maskUnits="userSpaceOnUse"</span>,
         <a>'mask/x'</a>, <a>'mask/y'</a>, <a>'mask/width'</a> and <a>'mask/height'</a>
         represent values in the current user coordinate system in place at
         the time when the <a>'mask element'</a>
         element is referenced (i.e., the user coordinate system for
         the element referencing the <a>'mask element'</a> element via the
         'mask' property).<br />
          If <span
         class="attr-value">maskUnits="objectBoundingBox"</span>,
         <a>'mask/x'</a>, <a>'mask/y'</a>, <a>'mask/width'</a> and <a>'mask/height'</a>
         represent fractions or percentages of the bounding box of
         the element to which the mask is applied. (See <span class="term">object bounding box
         units</span>.)<br />
          If attribute <a>'mask/maskUnits'</a> is
         not specified, then the effect is as if a value of <span
         class="attr-value">'objectBoundingBox'</span> were
         specified.<br />
          <span class="anim-target">Animatable:
         yes.</span></dd>
         <dt id="MaskElementMaskContentUnitsAttribute"><span
         class="adef">maskContentUnits</span> =
         "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
         <dd>Defines the coordinate system for the contents of the
         <a>'mask element'</a>.<br />
          If <span
         class="attr-value">maskContentUnits="userSpaceOnUse"</span>,
         the user coordinate system for the contents of the
         <a>'mask element'</a> element is the current
         user coordinate system in place at the time when the
         <a>'mask element'</a> element is referenced
         (i.e., the user coordinate system for the element
         referencing the <a>'mask element'</a>
         element via the 'mask'
         property).<br />
          If <span
         class="attr-value">maskContentUnits="objectBoundingBox"</span>,
         the user coordinate system for the contents of the <a>'mask element'</a> is established using the
         bounding box of the element to which the mask is applied.
         (See <span class="term">object bounding box
         units</span>.)<br />
          If attribute <a>'maskContentUnits'</a> is not specified,
         then the effect is as if a value of <span
         class="attr-value">'userSpaceOnUse'</span> were
         specified.<br />
          <span class="anim-target">Animatable:
         yes.</span></dd>
         <dt id="MaskElementXAttribute"><span
         class="adef">x</span> = "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"</dt>
         <dd>The x-axis coordinate of one corner of the rectangle
         for the largest possible offscreen buffer.
         If the attribute is not specified but at least one of the attributes <a>'mask/y'</a>,
         <a>'mask/width'</a> or <a>'mask/height'</a> are specified, the effect is as if a
         value of <span class='attr-value'>'-10%'</span> were specified.<br />
          <span class="anim-target">Animatable:
         yes.</span></dd>
         <dt id="MaskElementYAttribute"><span
         class="adef">y</span> = "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"</dt>
         <dd>The y-axis coordinate of one corner of the rectangle
         for the largest possible offscreen buffer.<br />
         If the attribute is not specified but at least one of the attributes <a>'mask/x'</a>,
         <a>'mask/width'</a> or <a>'mask/height'</a> are specified, the effect is as if a
         value of <span class='attr-value'>'-10%'</span> were specified.<br />
         <span class="anim-target">Animatable:
         yes.</span></dd>
         <dt id="MaskElementWidthAttribute"><span
         class="adef">width</span> = "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"</dt>
         <dd>The width of the largest possible offscreen buffer.
         A negative value or a value of zero disables rendering of the element.<br />
         If the attribute is not specified but at least one of the attributes <a>'mask/x'</a>,
         <a>'mask/y'</a> or <a>'mask/height'</a> are specified, the effect is as if a
         value of <span class='attr-value'>'120%'</span> were specified.<br />
          <span class="anim-target">Animatable:
         yes.</span></dd>
         <dt id="MaskElementHeightAttribute"><span
         class="adef">height</span> = "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"</dt>
         <dd>The height of the largest possible offscreen
         buffer.<br />
         A negative value or a value of zero disables rendering of the element.<br />
         If the attribute is not specified but at least one of the attributes <a>'mask/x'</a>,
         <a>'mask/y'</a> or <a>'mask/width'</a> are specified, the effect is as if a
         value of <span class='attr-value'>'120%'</span> were specified.<br />
          <span class="anim-target">Animatable:
         yes.</span></dd>
       </dl>
     </div>
 <p>If at least one of the attributes <a>'mask/x'</a>,
 <a>'mask/y'</a>, <a>'mask/width'</a> or <a>'mask/height'</a> are specified,
 the given object and the rectangle defined by
 <a>'mask/x'</a>, <a>'mask/y'</a>, <a>'mask/width'</a> and <a>'mask/height'</a>
 establish a current clipping path. The rendered content of the mask must be clipped
 by this current clipping path.<p/>
 <p>CSS properties inherit into the
 <a>'mask element'</a> element from its ancestors; properties do <em>not</em>
 inherit from the element referencing the <a>'mask element'</a> element.</p>
 <p><a>'mask element'</a> elements are never rendered directly; their only
 usage is as something that can be referenced using the 'mask'
 property. The 'opacity', 'filter' and 'display' properties do not apply to the
 <a>'mask element'</a> element; thus, <a>'mask element'</a> elements are not
 directly rendered even if the 'display' property is set to a value
 other than 'none', and <a>'mask element'</a>
 elements are available for referencing even when the 'display' property
 on the <a>'mask element'</a> element or any of its ancestors is set to
 <span class="prop-value">none</span>.</p>
 <h2>Mask Box Image</h2>
 <p>
   With 'mask-box-image' a mask can be split into nine pieces: four corners, four
   edges and the middle piece as demonstrated in the figure below.
 </p>
 <div class=figure>
   <img src="images/mask-box-image-mask.svg" alt="pieces of a mask box image" width="240">
   <p class=caption>
     Pieces of a mask box image.
   </p>
 </div>
 <p>
   These pieces may be sliced, scaled and stretched in various ways to fit the size of the <span class=index>mask image area</span>. The usage of 'mask-box-image' corresponds to the 'border-image' property of CSS Background and Borders [[!CSS3BG]].
 </p>
 <div class=example>
   <p>
     The mask image in the following example is split into four corners with
     dimensions of 75 pixels, four edges and the middle piece that is stretched
     and scaled.
   </p>
   <div class=figure>
     <img src="images/mask-box-image.svg" alt="Example for 'mask-box-image'" width="720" height="240">
     <p class=caption>
       Example for 'mask-box-image'. The object on the left is the object to mask. The second image is the alpha mask and
       the last image the masked object.
     </p>
   </div>
   <pre>
 div {
   background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
   mask-box-image-slice: 25 fill;
   mask-box-image-repeat: stretch;
   mask-box-image-source: url(mask.png);
 }</pre>
 </div>
 <h3 id="the-mask-box-image-source">The 'mask-box-image-source' property</h3>
 <table class=propdef>
   <tr>
     <th>Name:
     <td><dfn>mask-box-image-source</dfn>
   <tr>
     <th><a href="#values">Value</a>:
     <td><var>&lt;mask-image&gt;</var>
   <tr>
     <th>Initial:
     <td>none
   <tr>
     <th>Applies to:
     <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>.
   <tr>
     <th>Inherited:
     <td>no
   <tr>
     <th>Percentages:
     <td>N/A
   <tr>
     <th>Media:
     <td>visual
   <tr>
     <th>Computed value:
     <td>''none'' or the image with its URI made absolute
   <tr>
     <th>Animatable:
     <td>no
 </table>
 <p>Specifies an image to be used as mask. If the value is ''none'' or if the image cannot be displayed
 (or the property doesn't apply), the content won't get masked.
 <h3 id="the-mask-box-image-slice">The 'mask-box-image-slice' property</h3>
 <table class=propdef>
   <tr>
     <th>Name:
     <td><dfn>mask-box-image-slice</dfn>
   <tr>
     <th><a href="#values">Value</a>:
     <td>[<var>&lt;number&gt;</var> | <var>&lt;percentage&gt;</var>]{1,4} &amp;&amp; fill?
   <tr>
     <th>Initial:
     <td>0 fill
   <tr>
     <th>Applies to:
     <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>.
   <tr>
     <th>Inherited:
     <td>no
   <tr>
     <th>Percentages:
     <td>refer to size of the mask image
   <tr>
     <th>Media:
     <td>visual
   <tr>
     <th>Computed value:
     <td>as specified
   <tr>
     <th>Animatable:
     <td>no
 </table>
 <p>This property specifies inward offsets from the top, right, bottom,
 and left edges of the mask image, dividing it into nine regions: four corners,
 four edges and a middle.
 The middle image part is discarded (treated as fully transparent black)
 unless the ''fill'' keyword is present.
 <p>See <a href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image Slicing: the 'border-image-slice' property</a> [[!CSS3BG]] for the defintions of the property values.
 <h3 id="the-mask-box-image-width">The 'mask-box-image-width' property</h3>
 <table class=propdef>
   <tr>
     <th>Name:
     <td><dfn>mask-box-image-width</dfn>
   <tr>
     <th><a href="#values">Value</a>:
     <td>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | <var>&lt;number&gt;</var> | auto ]{1,4}
   <tr>
     <th>Initial:
     <td>auto
   <tr>
     <th>Applies to:
     <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>.
   <tr>
     <th>Inherited:
     <td>no
   <tr>
     <th>Percentages:
     <td>relative to width/height of the <em>mask box image area</em>
   <tr>
     <th>Media:
     <td>visual
   <tr>
     <th>Computed value:
     <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
   <tr>
     <th>Animatable:
     <td>no
 </table>
 <p>The mask image is drawn inside an area called the
 <em>mask box image area</em>. This is an area whose boundaries
 by default correspond to the mask box, see 'mask-box-image-outset'.
 <p>See <a href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing Areas: the ‘border-image-width’ property</a> [[!CSS3BG]] for the defintions of the property values.
 <p class=note>
   Note that for SVG elements without an associated layout box the 'border-width'
   is considered to be ''0''.
 </p>
 <h3 id="the-mask-box-image-outset">The 'mask-box-image-outset' property</h3>
 <table class=propdef>
   <tr>
     <th>Name:
     <td><dfn>mask-box-image-outset</dfn>
   <tr>
     <th><a href="#values">Value</a>:
     <td>[ <var>&lt;length&gt;</var> | <var>&lt;number&gt;</var> ]{1,4}
   <tr>
     <th>Initial:
     <td>0
   <tr>
     <th>Applies to:
     <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>.
   <tr>
     <th>Inherited:
     <td>no
   <tr>
     <th>Percentages:
     <td>N/A
   <tr>
     <th>Media:
     <td>visual
   <tr>
     <th>Computed value:
     <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
   <tr>
     <th>Animatable:
     <td>no
 </table>
 <p>The values specify the amount by which the <dfn>mask box image
 area</dfn> extends beyond the border box.
 If it has four values, they set the outsets on the top, right, bottom and
 left sides in that order. If the left is missing, it is the same as the right;
 if the bottom is missing, it is the same as the top; if the right is missing,
 it is the same as the top.
 <p>As with 'mask-box-image-width', a &lt;number&gt; represents a multiple of the
 corresponding 'border-width'.
 Negative values are not allowed for any of the 'mask-box-image-outset' values.
 <p class=note>Note that for SVG elements without associated layout box the 'border-width' is considered to be ''0''.</p>
 <h3 id="the-mask-box-image-repeat">The 'mask-box-image-repeat' property</h3>
 <table class=propdef>
   <tr>
     <th>Name:
     <td><dfn>mask-box-image-repeat</dfn>
   <tr>
     <th><a href="#values">Value</a>:
     <td>[ stretch | repeat | round | space ]{1,2}
   <tr>
     <th>Initial:
     <td>stretch
   <tr>
     <th>Applies to:
     <td>All elements. In SVG, it applies to <a>container elements</a> and <a>graphics elements</a>.
   <tr>
     <th>Inherited:
     <td>no
   <tr>
     <th>Percentages:
     <td>N/A
   <tr>
     <th>Media:
     <td>visual
   <tr>
     <th>Computed value:
     <td>as specified
   <tr>
     <th>Animatable:
     <td>no
 </table>
 <p>This property specifies how the images for the sides and the middle
 part of the mask image are scaled and tiled. The first keyword applies
 to the horizontal sides, the second to the vertical ones.
 If the second keyword is absent, it is assumed to be the same as the first.
 <p>See <a href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image Tiling: the 'border-image-repeat' property</a> [[!CSS3BG]] for the defintions of the property values.
 <p>The exact process for scaling and tiling the mask box image parts is given in the section <a href="#masking-with-the-mask-box-image">Masking with the mask-box-image</a>.
 <h3 id="the-mask-box-image">The 'mask-box-image' property</h3>
 <table class=propdef>
   <tr>
     <th>Name:
     <td><dfn>mask-box-image</dfn>
   <tr>
     <th><a href="#values">Value</a>:
     <td>   <var>&lt;'mask-box-image-source'&gt;</var>
         || <var>&lt;'mask-box-image-slice'&gt;</var>
            [ / <var>&lt;'mask-box-image-width'&gt;</var> |
              / <var>&lt;'mask-box-image-width'&gt;</var>? / <var>&lt;'mask-box-image-outset'&gt;</var> ]?
         || <var>&lt;'mask-box-image-repeat'&gt;</var>
   <tr>
     <th>Initial:
     <td>See individual properties
   <tr>
     <th>Applies to:
     <td>See individual properties
   <tr>
     <th>Inherited:
     <td>no
   <tr>
     <th>Percentages:
     <td>N/A
   <tr>
     <th>Media:
     <td>visual
   <tr>
     <th>Computed value:
     <td>See individual properties
   <tr>
     <th>Animatable:
     <td>See individual properties
 </table>
 <p>This is a shorthand property for setting 'mask-box-image-source',
 'mask-box-image-slice', 'mask-box-image-width', 'mask-box-image-outset' and
 'mask-box-image-repeat'. Omitted values are set to their initial values.
 <h3 id="masking-with-the-mask-box-image">Masking with the mask-box-image</h3>
 <p>
   After the mask-box-image given by 'mask-box-image-source' is sliced by
   the 'mask-box-image-slice' values, the resulting nine images are scaled,
   positioned, and tiled into their corresponding mask image regions
   in four steps as described in the section <a href="http://www.w3.org/TR/css3-background/#border-image-process">Drawing the Border Image</a> [[!CSS3BG]].
 <h2>Clipping paths</h2>
 <p>
   The clipping path restricts the region to which paint can be applied, the
   so-called clipping region.
   Conceptually, any parts of the drawing that lie outside of this region are not
   drawn.
   This includes any content, background, borders, text decoration, outline and
   visible scrolling mechanism of the element to which the clipping path is
   applied, and those of its descendants.
 </p>
 <p>
   An element's ancestors may also clip portions of their content (e.g., via
   their own 'clip' or 'clip-path' properties and/or if their 'overflow' property
   is not ''visible'').
   What is rendered is the cumulative intersection.
 </p>
 <p>
   If the clipping region exceeds the bounds of the UA's document window, content may be clipped to that window by the
   native operating environment.
 </p>
 <h3 id="the-clip-path">The 'clip-path' property</h3>
 <table class="propdef">
   <tr>
     <th>Name:</th>
     <td><dfn>clip-path</dfn></td>
   </tr>
   <tr>
     <th>Value:</th>
     <td><var>&lt;shape&gt;</var> | <var>&lt;clip-source&gt;</var> | none</td>
   </tr>
   <tr>
     <th>Initial:</th>
     <td>none</td>
   </tr>
   <tr>
     <th>Applies to:</th>
     <td>All elements. SVG <a>container elements</a>, <a>graphics elements</a>
     and <a>'clipPath'</a></td>
   </tr>
   <tr>
     <th>Inherited:</th>
     <td>no</td>
   </tr>
   <tr>
     <th>Percentages:</th>
     <td>as specified</td>
   </tr>
   <tr>
     <th>Media:</th>
     <td>visual</td>
   </tr>
   <tr>
     <th>Computed value:</th>
     <td>as specified, but with <var>&lt;url&gt;</var> values made absolute</td>
   </tr>
   <tr>
     <th>Animatable:</th>
     <td>See <a href="http://dev.w3.org/csswg/css3-exclusions/#shape-inside">'shape-inside'</a> and <a href="http://dev.w3.org/csswg/css3-exclusions/#shape-outside">'shape-outside'</a> [[!CSS3-EXCLUSIONS]]</td>
   </tr>
 </table>
 <pre class=prod><dfn>&lt;clip-source&gt;</dfn> = <var>&lt;url&gt;</var> | <var>child</var> | <var>&lt;child-selector&gt;</var>
 </pre>
 <dl>
   <dt>
     <dfn>'&lt;shape&gt;'</dfn>
   </dt>
   <dd>
     A basic shape function as defined in CSS3 Exclusions. The origin of clipping shapes is on the top left of the <span
     class=index>bounding client rect</span>. Percentage values are resolved against the
     <span class=index>bounding client rect</span> width and height. (See [[!CSS3-EXCLUSIONS]].)
   </dd>
   <dt>''child''</dt>
   <dd>
     A keyword to indicate that the last direct sibling <a>'clipPath element'</a>
     element of the element the 'clip-path' property is applied should be used as the clip source. It is equivalent to
     ''select(clipPath:last-of-type)''.</dd>
   <dt>'&lt;child-selector&gt;'</dt>
   <dd>
     A comma-separated list of <a>compound selector</a>s scoped at the element to
     which the 'clip-path' property is applied.
     The first matching element in <a>tree order</a> (as defined in [[!DOM]]) as
     a result of evaluating the list of selectors is taken as the clip source.
     If there are no matching elements the clip source is invalid.
   </dd>
 </dl>
 <h3 id="the-clip-rule">The 'clip-rule' property</h3>
 <table class="propdef">
   <tr>
     <th>Name:</th>
     <td><dfn>clip-rule</dfn></td>
   </tr>
   <tr>
     <th>Value:</th>
     <td>nonzero | evenodd</td>
   </tr>
   <tr>
     <th>Initial:</th>
     <td>nonzero</td>
   </tr>
   <tr>
     <th>Applies to:</th>
     <td><a>graphics elements</a> within a <a>'clipPath'</a> element</td>
   </tr>
   <tr>
     <th>Inherited:</th>
     <td>yes</td>
   </tr>
   <tr>
     <th>Percentages:</th>
     <td>N/A</td>
   </tr>
   <tr>
     <th>Media:</th>
     <td>visual</td>
   </tr>
   <tr>
     <th>Computed&#160;value:</th>
     <td>as specified</td>
   </tr>
   <tr>
     <th>Animatable:</th>
     <td>no</td>
   </tr>
 </table>
 <dl>
   <dt><dfn>''nonzero''</dfn></dt>
   <dd>See description of <a>'fill-rule'</a> property [[SVG11]].</dd>
   <dt><dfn>''evenodd''</dfn></dt>
   <dd>See description of <a>'fill-rule'</a> property [[SVG11]].</dd>
 </dl>
 <p>The 'clip-rule' property only applies to graphics elements that are
 contained within a <a>'clipPath'</a> element.
 <div class=example>
 The following fragment of code
 will cause an evenodd clipping rule to be applied to the clipping path because
 'clip-rule' is specified on the <a>'path'</a> element that defines the
 clipping shape:</p>
 <pre>
 &lt;g clip-rule="nonzero"&gt;
   &lt;clipPath id="MyClip"&gt;
     &lt;path d="..." clip-rule="evenodd" /&gt;
   &lt;/clipPath&gt;
   &lt;rect clip-path="url(#MyClip)" ... /&gt;
 &lt;/g&gt;
 </pre>
 <p>whereas the following fragment of code will <em>not</em> cause an
 evenodd clipping rule to be applied because the 'clip-rule' is
 specified on the referencing element, not on the object defining the
 clipping shape:</p>
 <pre>
 &lt;g clip-rule="nonzero"&gt;
   &lt;clipPath id="MyClip"&gt;
     &lt;path d="..." /&gt;
   &lt;/clipPath&gt;
   &lt;rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /&gt;
 &lt;/g&gt;
 </pre>
 </div>
 <h3 id="clip-property">The 'clip' property</h3>
 <table class="propdef">
   <tr>
     <th>Name:</th>
     <td><dfn id="ClipProperty">clip</dfn></td>
   </tr>
   <tr>
     <th>Value:</th>
     <td><var>&lt;shape&gt;</var> | auto</td>
   </tr>
   <tr>
     <th>Initial:</th>
     <td>see individual properties</td>
   </tr>
   <tr>
     <th>Applies to:</th>
     <td>Absolutely positioned elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements which
       establish a new viewport</a>, <a>'pattern element'</a> elements and <a>'marker element'</a> elements.</td>
   </tr>
   <tr>
     <th>Inherited:</th>
     <td>no</td>
   </tr>
   <tr>
     <th>Percentages:</th>
     <td>N/A</td>
   </tr>
   <tr>
     <th>Media:</th>
     <td>visual</td>
   </tr>
   <tr>
     <th>Computed&#160;value:</th>
     <td>as specified</td>
   </tr>
   <tr>
     <th>Animatable:</th>
     <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a></td>
   </tr>
 </table>
 <p class=note>With this specification the 'clip' property is deprecated. Authors are encouraged to use the 'clip-path' property instead.
   UAs must support the 'clip' property.
 </p>
 <p>
   The 'clip' property applies only to absolutely positioned elements. In SVG, it applies to
   <a href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements which establish a new viewport</a>,
   <a>'pattern element'</a> elements and <a>'marker element'</a> elements</td>. Values have the following meanings:
 </p>
 <dl>
   <dt>''auto''</dt>
   <dd>The element does not clip.</dd>
   <dt><var>&lt;shape&gt;</var></dt>
   <dd>
     <p>
       In CSS 2.1, the only valid &lt;shape&gt; value is: rect(<var>&lt;top&gt;</var>, <var>&lt;right&gt;</var>,
       <var>&lt;bottom&gt;</var>, <var>&lt;left&gt;</var>) where <var>&lt;top&gt;</var> and <var>&lt;bottom&gt;</var>
       specify offsets from the top border edge of the box, and <var>&lt;right&gt;</var>, and <var>&lt;left&gt;</var>
       specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents
       must support separation with commas, but may also support separation without commas (but not a combination), because
       a previous revision of this specification was ambiguous in this respect.
     </p>
     <p><dfn>&lt;top&gt;</dfn>,
       <dfn>&lt;right&gt;</dfn>, <dfn>&lt;bottom&gt;</dfn>, and <dfn>&lt;left&gt;</dfn> may either have a
       <var>&lt;length&gt;</var> value or ''auto''. Negative lengths are permitted. The value ''auto'' means that a given
       edge of the clipping region will be the same as the edge of the element's generated border box (i.e., ''auto'' means
       the same as ''0'' for <var>&lt;top&gt;</var> and <var>&lt;left&gt;</var>, the same as the used value of the height
       plus the sum of vertical padding and border widths for <var>&lt;bottom&gt;</var>, and the same as the used value of the width
       plus the sum of the horizontal padding and border widths for <var>&lt;right&gt;</var>, such that four 'auto' values result in
       the clipping region being the same as the element's border box).
     </p>
     <p>
       When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when
       <var>&lt;left&gt;</var> and <var>&lt;right&gt;</var> have the same value (or <var>&lt;top&gt;</var> and
       <var>&lt;bottom&gt;</var> have the same value), and conversely that no pixels within the element's border box
       remain hidden when these values are ''auto''.
     </p>
   </dd>
 </dl>
 <div class="example">
   <p>
     Example: The following two rules:
   </p>
   <pre><code>
 p#one { clip: rect(5px, 40px, 45px, 5px); }
 p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
   <p>
     and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by
     the dashed lines in the following illustrations:
   </p>
   <div class=figure>
     <img src="images/clip.png" width="292" height="577" alt="Values for rect shape">
     <p class=caption>This diagram illustrates two block boxes, one above the other, with rectangular clipping regions of
       different dimensions. (See <a href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long description</a>.)
   </div>
 </div>
 <h3 id="ClipPathElement">The <a>'clipPath element'</a> element</h3>
 <!--elementsummary clipPath-->
 <div class="adef-list">
   <p><em>Attribute definitions:</em></p>
   <dl>
     <dt id="ClipPathElementClipPathUnitsAttribute"><span
     class="adef">clipPathUnits</span> =
     "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
     <dd>Defines the coordinate system for the contents of the
     <a>'clipPath'</a>.<br />
      If <span class="attr-value">clipPathUnits="userSpaceOnUse"</span>,
     the contents of the <a>'clipPath'</a> represent values in
     the current user coordinate system in place at the time
     when the <a>'clipPath'</a>
     element is referenced (i.e., the user coordinate system for
     the element referencing the <a>'clipPath'</a> element via the
     <a>'clip-path'</a> property).<br />
      If <span class="attr-value">clipPathUnits="objectBoundingBox"</span>,
     then the user coordinate system for the contents of the
     <a>'clipPath'</a> element is established using the bounding box of
     the element to which the clipping path is applied (see <span class=index>object bounding box
     units</span>).<br />
      If attribute <a>'clipPathUnits'</a>
     is not specified, then the effect is as if a value of <span
     class="attr-value">'userSpaceOnUse'</span> were
     specified.<br />
      <span class="anim-target">Animatable:
     yes.</span></dd>
   </dl>
 </div>
 <p>CSS properties inherit into the
 <a>'clipPath'</a> element from its ancestors; properties do <em>not</em>
 inherit from the element referencing the <a>'clipPath'</a> element.</p>
 <p><a>'clipPath'</a> elements are never rendered directly; their only usage is
 as something that can be referenced using the <a>'clip-path'</a> property. The
 <a>'display'</a> property does not apply to the <a>'clipPath'</a> element;
 thus, <a>'clipPath'</a> elements are not directly rendered even if the
 'display' property is set to a value other than
 <span class="prop-value">none</span>, and <a>'clipPath'</a> elements are
 available for referencing even when the <a>'display'</a> property on the
 <a>'clipPath'</a> element or any of its ancestors is set to
 <span class="prop-value">none</span>.</p>
 <p>A <a>'clipPath'</a> element can contain <a>'path'</a> elements,
 <a>'text'</a> elements, <a>basic shapes</a> (such as
 <a>'circle'</a>) or a <a>'use'</a> element. If a <a>'use'</a> element is a
 child of a <a>'clipPath'</a> element, it must directly reference
 <a>'path'</a>, <a>'text'</a> or <a>basic shapes</a> elements.
 Indirect references are an error and the <a>'clipPath'</a> element must be
 ignored.</p>
 <p>The raw geometry of each child element exclusive of rendering properties
 such as 'fill', 'stroke', 'stroke-width' within a
 <a>'clipPath'</a> conceptually defines a 1-bit mask (with the possible
 exception of anti-aliasing along the edge of the geometry) which represents
 the silhouette of the graphics associated with that element. Anything outside
 the outline of the object is masked out. If a child element is
 made invisible by 'display' or 'visibility' it does not contribute
 to the clipping path. When the <a>'clipPath'</a> element
 contains multiple child elements, the silhouettes of the child elements are
 logically OR'd together to create a single silhouette which is then used to
 restrict the region onto which paint can be applied. Thus, a point is inside
 the clipping path if it is inside any of the children of the
 <a>'clipPath'</a>.</p>
 <p>For a given graphics element, the actual clipping path used
 will be the intersection of the clipping path specified by its
 'clip-path' property (if any) with any clipping paths on its
 ancestors, as specified by the 'clip-path' property on the
 elements
 which establish a new viewport. (See [[SVG11]])</p>
 <p>A couple of additions:</p>
 <ul>
   <li>The <a>'clipPath'</a> element itself and its child elements do
   <em>not</em> inherit clipping paths from the ancestors of the
   <a>'clipPath'</a> element.</li>
   <li>The <a>'clipPath'</a> element or any of its children can specify
   property 'clip-path'.<br /> If a valid 'clip-path' reference
   is placed on a <a>'clipPath'</a> element, the resulting clipping path is the
   intersection of the contents of the <a>'clipPath'</a> element with the
   referenced clipping path.<br />
   If a valid 'clip-path' reference is placed on one of the children of
   a <a>'clipPath'</a> element, then the given child element is clipped by the
   referenced clipping path before OR'ing the silhouette of the child element
   with the silhouettes of the other child elements.</li>
   <li>An empty clipping path will completely clip away the element that had the
   'clip-path' property applied.</li>
 </ul>
 <h3 id="clipPath-geometry">Clipping paths, geometry, and pointer events</h3>
 <p>A clipping path is conceptually equivalent to a custom viewport for
 the referencing element.  Thus, it affects the rendering of an element,
 but not the element's inherent geometry. The <span class=index>bounding client rect</span> of a clipped
 element (that is, an element which references a <a>'clipPath'</a>
 element via a 'clip-path' property, or a child of the
 referencing element) must remain the same as if it were not clipped.</p>
 <p>By default, <a>pointer events</a>
 must not be dispatched on the clipped (non-visible) regions of a shape.  For
 example, a circle with a radius of 10 which is clipped to a circle with a radius
 of 5 will not receive <span class="event-name">'click'</span> events outside the
 smaller radius. Later versions of this specification may define new properties to enable
 fine-grained control over the interactions between hit testing and clipping.</p>
 <h2 id="security">Security</h2>
 <h3 id="origin-restrictions">Origin Restrictions</h3>
 <p>
   External references to resources like <a>'mask element'</a> or <a>'clipPath element'</a>
   must not violate the same origin restrictions [[!CORS]].
 </p>
 <p>This restriction includes:</p>
 <ul>
   <li>Any images, either as content or via styling, that are not exposed with CORS</li>
   <li>Any tainted canvas</li>
   <li>Any cross-origin content referenced by ''xlink:href'' or &lt;use&gt;</li>
 </ul>
 <p>
   If content falls under this restriction, the resource must be rejected. The element is
   drawn as if the resource was not specified (i.e. the 'clip-path' or 'mask' property were
   set to ''none'').
 </p>
 <h2 id="DOMInterfaces">DOM interfaces</h2>
 <h3 id="InterfaceSVGClipPathElement">Interface SVGClipPathElement</h3>
 <p>The <a>SVGClipPathElement</a> interface corresponds to the <a>'clipPath'</a> element.</p>
 <pre class="idl">interface <b>SVGClipPathElement</b> : <a>SVGElement</a> {
   readonly attribute <a>SVGAnimatedEnumeration</a> <a href="#SVGClipPathElement__clipPathUnits">clipPathUnits</a>;
   readonly attribute <a>SVGAnimatedTransformList</a> <a href="#SVGClipPathElement__transform">transform</a>;
 };
 <a>SVGClipPathElement</a> implements <a>SVGUnitTypes</a>;</pre>
 <dl class="interface">
 <dt class="attributes-header">Attributes:</dt>
 <dd>
 <dl class="attributes">
 <dt id="SVGClipPathElement__clipPathUnits" class="attribute first-child"><b>clipPathUnits</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedEnumeration</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'clipPathUnits'</a> on the given
 <a>'clipPath'</a> element.  Takes one of the constants defined in
 <a>SVGUnitTypes</a>.
 </div>
 </dd>
 <dt id="SVGClipPathElement__transform" class="attribute first-child"><b>transform</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedTransformList</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'transform'</a> on the given element.
 </div>
 </dd>
 </dl>
 </dd>
 </dl>
 <h3 id="InterfaceSVGMaskElement">Interface SVGMaskElement</h3>
 <p>The <a>SVGMaskElement</a> interface corresponds to the <a>'mask element'</a> element.</p>
 <pre class="idl">interface <b>SVGMaskElement</b> : <a>SVGElement</a> {
   readonly attribute <a>SVGAnimatedEnumeration</a> <a href="#SVGMaskElement__maskUnits">maskUnits</a>;
   readonly attribute <a>SVGAnimatedEnumeration</a> <a href="#SVGMaskElement__maskContentUnits">maskContentUnits</a>;
   readonly attribute <a>SVGAnimatedLength</a> <a href="#SVGMaskElement__x">x</a>;
   readonly attribute <a>SVGAnimatedLength</a> <a href="#SVGMaskElement__y">y</a>;
   readonly attribute <a>SVGAnimatedLength</a> <a href="#SVGMaskElement__width">width</a>;
   readonly attribute <a>SVGAnimatedLength</a> <a href="#SVGMaskElement__height">height</a>;
 };
 <a>SVGMaskElement</a> implements <a>SVGUnitTypes</a>;</pre>
 <dl class="interface">
 </dd>
 <dt class="attributes-header">Attributes:</dt>
 <dd>
 <dl class="attributes">
 <dt id="SVGMaskElement__maskUnits" class="attribute first-child"><b>maskUnits</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedEnumeration</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'maskUnits'</a> on the given
 <a>'mask element'</a> element.  Takes one of the constants defined in
 <a>SVGUnitTypes</a>.
 </div>
 </dd>
 <dt id="SVGMaskElement__maskContentUnits" class="attribute"><b>maskContentUnits</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedEnumeration</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'maskContentUnits'</a> on the given
 <a>'mask element'</a> element.  Takes one of the constants defined in
 <a>SVGUnitTypes</a>.
 </div>
 </dd>
 <dt id="SVGMaskElement__x" class="attribute"><b>x</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedLength</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'mask/x'</a> on the given <a>'mask element'</a>
 element.
 </div>
 </dd>
 <dt id="SVGMaskElement__y" class="attribute"><b>y</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedLength</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'mask/y'</a> on the given <a>'mask element'</a>
 element.
 </div>
 </dd>
 <dt id="SVGMaskElement__width" class="attribute"><b>width</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedLength</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'mask/width'</a> on the given
 <a>'mask element'</a> element.
 </div>
 </dd>
 <dt id="SVGMaskElement__height" class="attribute"><b>height</b><span class="idl-type-parenthetical"> (readonly <a>SVGAnimatedLength</a>)</span></dt>
 <dd class="attribute">
 <div>
 Corresponds to attribute <a>'mask/height'</a> on the given
 <a>'mask element'</a> element.
 </div>
 </dd>
 </dl>
 </dd>
 </dl>
 <h2 id="conformance">
 Conformance</h2>
 <h3 id="conventions">
 Document conventions</h3>
   <p>Conformance requirements are expressed with a combination of
   descriptive assertions and RFC 2119 terminology. The key words “MUST”,
   “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
   “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
   document are to be interpreted as described in RFC 2119.
   However, for readability, these words do not appear in all uppercase
   letters in this specification.
   <p>All of the text of this specification is normative except sections
   explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
   <p>Examples in this specification are introduced with the words “for example”
   or are set apart from the normative text with <code>class="example"</code>,
   like this:
   <div class="example">
     <p>This is an example of an informative example.</p>
   </div>
   <p>Informative notes begin with the word “Note” and are set apart from the
   normative text with <code>class="note"</code>, like this:
   <p class="note">Note, this is an informative note.</p>
 <h3 id="conformance-classes">
 Conformance classes</h3>
   <p>Conformance to CSS Masking
   is defined for three conformance classes:
   <dl>
     <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
       style sheet</a>.
     <dt><dfn>renderer</dfn></dt>
       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
       that interprets the semantics of a style sheet and renders
       documents that use them.
     <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
       that writes a style sheet.
   </dl>
   <p>A style sheet is conformant to CSS Masking
   if all of its statements that use syntax defined in this module are valid
   according to the generic CSS grammar and the individual grammars of each
   feature defined in this module.
   <p>A renderer is conformant to CSS Masking
   if, in addition to interpreting the style sheet as defined by the
   appropriate specifications, it supports all the features defined
   by CSS Masking by parsing them correctly
   and rendering the document accordingly. However, the inability of a
   UA to correctly render a document due to limitations of the device
   does not make the UA non-conformant. (For example, a UA is not
   required to render color on a monochrome monitor.)
   <p>An authoring tool is conformant to CSS Masking
   if it writes style sheets that are syntactically correct according to the
   generic CSS grammar and the individual grammars of each feature in
   this module, and meet all other conformance requirements of style sheets
   as described in this module.
 <h3 id="partial">
 Partial implementations</h3>
   <p>So that authors can exploit the forward-compatible parsing rules to
   assign fallback values, CSS renderers <strong>must</strong>
   treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
   as appropriate</a>) any at-rules, properties, property values, keywords,
   and other syntactic constructs for which they have no usable level of
   support. In particular, user agents <strong>must not</strong> selectively
   ignore unsupported component values and honor supported values in a single
   multi-value property declaration: if any value is considered invalid
   (as unsupported values must be), CSS requires that the entire declaration
   be ignored.</p>
 <h3 id="experimental">
 Experimental implementations</h3>
   <p>To avoid clashes with future CSS features, the CSS2.1 specification
   reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   syntax</a> for proprietary and experimental extensions to CSS.
   <p>Prior to a specification reaching the Candidate Recommendation stage
   in the W3C process, all implementations of a CSS feature are considered
   experimental. The CSS Working Group recommends that implementations
   use a vendor-prefixed syntax for such features, including those in
   W3C Working Drafts. This avoids incompatibilities with future changes
   in the draft.
   </p>
 <h3 id="testing">
 Non-experimental implementations</h3>
   <p>Once a specification reaches the Candidate Recommendation stage,
   non-experimental implementations are possible, and implementors should
   release an unprefixed implementation of any CR-level feature they
   can demonstrate to be correctly implemented according to spec.
   <p>To establish and maintain the interoperability of CSS across
   implementations, the CSS Working Group requests that non-experimental
   CSS renderers submit an implementation report (and, if necessary, the
   testcases used for that implementation report) to the W3C before
   releasing an unprefixed implementation of any CSS features. Testcases
   submitted to W3C are subject to review and correction by the CSS
   Working Group.
   <p>Further information on submitting testcases and implementation reports
   can be found from on the CSS Working Group's website at
   <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   Questions should be directed to the
   <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   mailing list.
 <h2 class=no-num id="references">
 References</h2>
 <h3 class="no-num" id="normative-references">
 Normative references</h3>
 <!--normative-->
 <dl>
   <dt id="ref-svg2"><strong class="normref">[SVG2]</strong></dt>
     <dd>
       Cameron McCormack; et al. <a href="http://www.w3.org/TR/2012/WD-SVG2-20120828/"><cite>Scalable
       Vector Graphics (SVG) 2</cite>.</a> 28 August 2012. W3C Working Draft. (Work in progress.) URL:
       <a href="http://www.w3.org/TR/2012/WD-SVG2-20120828/">http://www.w3.org/TR/2012/WD-SVG2-20120828/</a>
     </dd>
 </dl>
 <h3 class="no-num" id="other-references">
 Other references</h3>
 <!--informative-->
 <h2 class="no-num" id="index">
 Index</h2>
 <!--index-->
 <h2 class="no-num" id="property-index">
 Property index</h2>
 <!-- properties -->
 </body>
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:
 mode: sgml
 sgml-declaration:"~/SGML/HTML4.decl"
 sgml-default-doctype-name:"html"
 sgml-minimize-attributes:t
 sgml-nofill-elements:("pre" "style" "br")
 sgml-live-element-indicator:t
 sgml-omittag:nil
 sgml-shorttag:nil
 sgml-namecase-general:t
 sgml-general-insert-case:lower
 sgml-always-quote-attributes:t
 sgml-indent-step:nil
 sgml-indent-data:t
 sgml-parent-document:nil
 sgml-exposed-tags:nil
 sgml-local-catalogs:nil
 sgml-local-ecat-files:nil
 End:
 -->

Mercurial > drafts / annotate

masking/Masking.src.html@59236286d848 (annotated)

masking/Masking.src.html