http://lists.w3.org/Archives/Public/www-style/2013Mar/0228.html
authorDirk Schulze <dschulze@adobe.com>
Wed, 13 Mar 2013 13:16:38 -0700
changeset 746f0bee7474714
parent 745 2fc7c7ead9f9
child 747 6546f6ccd054
http://lists.w3.org/Archives/Public/www-style/2013Mar/0228.html
masking/ChangeLog
masking/Masking.src.html
masking/index.html
     1.1 --- a/masking/ChangeLog	Tue Mar 12 14:00:02 2013 +0900
     1.2 +++ b/masking/ChangeLog	Wed Mar 13 13:16:38 2013 -0700
     1.3 @@ -1,3 +1,7 @@
     1.4 +2013-03-13  Dirk Schulze  <dschulze@adobe.com>
     1.5 +	Incorporate feedback from fantasai.
     1.6 +	http://lists.w3.org/Archives/Public/www-style/2013Mar/0228.html
     1.7 +
     1.8  2013-03-12  Dirk Schulze  <dschulze@adobe.com>
     1.9  	Add conformance section.
    1.10  
     2.1 --- a/masking/Masking.src.html	Tue Mar 12 14:00:02 2013 +0900
     2.2 +++ b/masking/Masking.src.html	Wed Mar 13 13:16:38 2013 -0700
     2.3 @@ -144,8 +144,89 @@
     2.4    context</a>.
     2.5  </p>
     2.6  
     2.7 +<h2 id="values">Values</h2>
     2.8 +
     2.9  <p>
    2.10 -  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:
    2.11 +  This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition
    2.12 +  conventions</a> from [[!CSS21]]. Value types not defined in this specification are defined in CSS Values and Units Module Level 3 [[!CSS3VAL]].
    2.13 +</p>
    2.14 +
    2.15 +<p>
    2.16 +  In addition to the property-specific values listed in their definitions, all properties defined in this specification
    2.17 +  also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their
    2.18 +  property value. For readability it has not been repeated explicitly.
    2.19 +</p>
    2.20 +
    2.21 +<h2 id="terminology">Terminology</h2>
    2.22 +
    2.23 +<p>
    2.24 +  When used in this specification, terms have the meanings assigned in this section.
    2.25 +</p>
    2.26 +
    2.27 +<dl>
    2.28 +<dt id="TermClientBoundingRect"><dfn>bounding client rect</dfn></dt>
    2.29 +<dd>
    2.30 +  <p>
    2.31 +    The union of all border boxes for the element that has an associated CSS layout box and is not
    2.32 +    in the <code>http://www.w3.org/2000/svg</code> namespace and its descendant elements. Or the
    2.33 +    object bounding box [[!SVG11]], if the element does not have
    2.34 +    an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code> namespace
    2.35 +    (See <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
    2.36 +    [[CSSOM-VIEW]]).
    2.37 +  </p>
    2.38 +</dd>
    2.39 +<dt id="TermLocalCoordinateSystem"><dfn>local coordinate system</dfn></dt>
    2.40 +<dt id="TermUserCoordinateSystem"><dfn>user coordinate system</dfn></dt>
    2.41 +<dd>
    2.42 +  <p>
    2.43 +    In general, a coordinate system defines locations and distances on the current
    2.44 +    canvas. The current local coordinate system (also user coordinate system) is the
    2.45 +    coordinate system that is currently active and which is used to define how
    2.46 +    coordinates and lengths are located and computed, respectively, on the current
    2.47 +    canvas [[CSS3-TRANSFORMS]].
    2.48 +  </p>
    2.49 +  <p>
    2.50 +    For elements that have an associated CSS layout box, the current user coordinate system has its origin at
    2.51 +    the top-left corner of the <span class="term">bounding client rect</span> and one unit equals one CSS pixel.
    2.52 +    The viewport for resolving percentage values is defined by the width and height of the
    2.53 +    <span class="term">bounding client rect</span>.
    2.54 +  </p>
    2.55 +  <p>
    2.56 +    If the element does not have an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code>
    2.57 +    namespace, the current local coordinate system has its origin at the top-left corner of the element's
    2.58 +    nearest viewport.
    2.59 +  </p>
    2.60 +</dd>
    2.61 +<dt id="TermObjectBoundingBoxUnits"><dfn>object bounding box units</dfn></dt>
    2.62 +<dd>
    2.63 +  The <span class="term">bounding client rect</span> defines the coordinate system in which to resolve values, as
    2.64 +  defined in <a>object bounding box units</a> [[!SVG11]].
    2.65 +</dd>
    2.66 +<dt id="TermMask"><dfn>mask</dfn></dt>
    2.67 +<dd>
    2.68 +  An off-screen image which has been initialized to transparent
    2.69 +  black.
    2.70 +  The graphical object to which the mask is applied
    2.71 +  will be painted onto the background through the
    2.72 +  mask, thus completely or partially masking out parts of the graphical
    2.73 +  object.
    2.74 +</dd>
    2.75 +<dt id="TermMaskSource"><dfn>mask source</dfn></dt>
    2.76 +<dd>
    2.77 +  A mask defined by a <a>'mask element'</a> element.
    2.78 +</dd>
    2.79 +<dt id="TermClippingPath">clipping path</dt>
    2.80 +<dd>
    2.81 +  A combination of the SVG elements <a>'path'</a>, <a>'text'</a>
    2.82 +  and <a>basic shapes</a> which serve as the
    2.83 +  outline of a (in the absence of anti-aliasing) 1-bit <a href="#TermMask">mask</a>,
    2.84 +  where everything on the "inside" of the outline is allowed to
    2.85 +  show through but everything on the outside is masked out. See 'clip-path'.
    2.86 +</dd>
    2.87 +</dl>
    2.88 +
    2.89 +<p>
    2.90 +  Definitions of CSS properties and values in this specification are analogous to definitions in CSS Backgrounds and Borders [[!CSS3BG]]. To avoid redundancy, this specification relies on descriptions and definitions of CSS Backgrounds and Borders. The following terms in CSS Backgrounds and Borders have the following meaning in this specification:
    2.91  </p>
    2.92  
    2.93  <table class="data" id="term-matching">
    2.94 @@ -183,97 +264,6 @@
    2.95    </tbody>
    2.96  </table>
    2.97  
    2.98 -<p>
    2.99 -  Some property and element definitions in this specification require an SVG 1.1 implementation [[!SVG11]]. UAs without
   2.100 -  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
   2.101 -  support for SVG, the 'mask' and 'clip-path' properties must neither support references to
   2.102 -  <a>'mask element'</a> elements nor to <a>'clipPath element'</a> elements.
   2.103 -</p>
   2.104 -
   2.105 -<h2 id="values">Values</h2>
   2.106 -
   2.107 -<p>
   2.108 -  This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition
   2.109 -  conventions</a> from [[!CSS21]]. Value types not defined in this specification are defined in CSS Values and Units Module Level 3 [[!CSS3VAL]].
   2.110 -</p>
   2.111 -
   2.112 -<p>
   2.113 -  In addition to the property-specific values listed in their definitions, all properties defined in this specification
   2.114 -  also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their
   2.115 -  property value. For readability it has not been repeated explicitly.
   2.116 -</p>
   2.117 -
   2.118 -<h2 id="definitions">Definitions</h2>
   2.119 -
   2.120 -<p>
   2.121 -  When used in this specification, terms have the meanings assigned in this section.
   2.122 -</p>
   2.123 -
   2.124 -<dl>
   2.125 -<dt id="TermClientBoundingRect"><dfn>bounding client rect</dfn></dt>
   2.126 -<dd>
   2.127 -  <p>
   2.128 -    The union of all border boxes for the element that has an associated CSS layout box and is not
   2.129 -    in the <code>http://www.w3.org/2000/svg</code> namespace and its descendant elements. Or the
   2.130 -    object bounding box [[!SVG11]], if the element does not have
   2.131 -    an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code> namespace
   2.132 -    (See <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
   2.133 -    [[CSSOM-VIEW]]).
   2.134 -  </p>
   2.135 -</dd>
   2.136 -<dt id="TermLocalCoordinateSystem"><dfn>local coordinate system</dfn></dt>
   2.137 -<dd>
   2.138 -  <p>
   2.139 -    In general, a coordinate system defines locations and distances on the current
   2.140 -    canvas. The current local coordinate system (also user coordinate system) is the
   2.141 -    coordinate system that is currently active and which is used to define how
   2.142 -    coordinates and lengths are located and computed, respectively, on the current
   2.143 -    canvas [[CSS3-TRANSFORMS]].
   2.144 -  </p>
   2.145 -  <p>
   2.146 -    For elements that have an associated CSS layout box, the current user coordinate system has its origin at
   2.147 -    the top-left corner of the <span class="term">bounding client rect</span> and one unit equals one CSS pixel.
   2.148 -    The viewport for resolving percentage values is defined by the width and height of the
   2.149 -    <span class="term">bounding client rect</span>.
   2.150 -  </p>
   2.151 -  <p>
   2.152 -    If the element does not have an associated CSS layout box and is in the <code>http://www.w3.org/2000/svg</code>
   2.153 -    namespace, the current local coordinate system has its origin at the top-left corner of the element's
   2.154 -    nearest viewport.
   2.155 -  </p>
   2.156 -</dd>
   2.157 -<dt id="TermUserCoordinateSystem"><dfn>user coordinate system</dfn></dt>
   2.158 -<dd>
   2.159 -  The term <var>user coordinate system</var> is equivalent to the term <var>local coordinate system</var>.
   2.160 -</dd>
   2.161 -<dt id="TermObjectBoundingBoxUnits"><dfn>object bounding box units</dfn></dt>
   2.162 -<dd>
   2.163 -  The <span class="term">bounding client rect</span> defines the coordinate system in which to resolve values, as
   2.164 -  defined in <a>object bounding box units</a> [[!SVG11]].
   2.165 -</dd>
   2.166 -<dt id="TermMask"><dfn>mask</dfn></dt>
   2.167 -<dd>
   2.168 -  An off-screen image which has been initialized to transparent
   2.169 -  black.
   2.170 -  The graphical object to which the mask is applied
   2.171 -  will be painted onto the background through the
   2.172 -  mask, thus completely or partially masking out parts of the graphical
   2.173 -  object.
   2.174 -</dd>
   2.175 -<dt id="TermMaskSource"><dfn>mask source</dfn></dt>
   2.176 -<dd>
   2.177 -  A mask defined by a <a>'mask element'</a> element.
   2.178 -</dd>
   2.179 -<dt id="TermClippingPath">clipping path</dt>
   2.180 -<dd>
   2.181 -  A combination of the SVG elements <a>'path'</a>, <a>'text'</a>
   2.182 -  and <a>basic shapes</a> which serve as the
   2.183 -  outline of a (in the absence of anti-aliasing) 1-bit <a href="#TermMask">mask</a>,
   2.184 -  where everything on the "inside" of the outline is allowed to
   2.185 -  show through but everything on the outside is masked out. See 'clip-path'.
   2.186 -</dd>
   2.187 -</dl>
   2.188 -
   2.189  <h2>The Mask Rendering Model</h2>
   2.190  
   2.191  <p>
   2.192 @@ -618,7 +608,7 @@
   2.193  Where
   2.194  <pre class=prod><dfn><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
   2.195  
   2.196 -<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.
   2.197 +<p>See <a href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling Images: the 'background-repeat' property</a> [[!CSS3BG]] for the definitions of the property values.
   2.198  
   2.199  <div class=example>
   2.200    <p style="display:none">Example(s):
   2.201 @@ -691,7 +681,7 @@
   2.202    [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
   2.203  ]</pre>
   2.204  
   2.205 -<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.
   2.206 +<p>See <a href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning Images: the 'background-position' property</a> [[!CSS3BG]] for the definitions of the property values.
   2.207  
   2.208  <div class="example">
   2.209    <p>In the example below, the (single) image is placed in the lower-right
   2.210 @@ -891,7 +881,7 @@
   2.211  
   2.212  <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>
   2.213  
   2.214 -<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.
   2.215 +<p>See <a href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing Images: the ‘background-size’ property</a> [[!CSS3BG]] for the definitions of the property values.
   2.216  
   2.217  <p>See the section <a href="#layering">“Layering multiple mask
   2.218  images”</a> for how 'mask-size' interacts with other
   2.219 @@ -1232,7 +1222,7 @@
   2.220  The middle image part is discarded (treated as fully transparent black)
   2.221  unless the ''fill'' keyword is present.
   2.222  
   2.223 -<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.
   2.224 +<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 definitions of the property values.
   2.225  
   2.226  <h3 id="the-mask-box-image-width">The 'mask-box-image-width' property</h3>
   2.227  
   2.228 @@ -1270,7 +1260,7 @@
   2.229  <em>mask box image area</em>. This is an area whose boundaries
   2.230  by default correspond to the mask box, see 'mask-box-image-outset'.
   2.231  
   2.232 -<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.
   2.233 +<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 definitions of the property values.
   2.234  
   2.235  <p class=note>
   2.236    Note that for SVG elements without an associated layout box the 'border-width'
   2.237 @@ -1359,7 +1349,7 @@
   2.238  to the horizontal sides, the second to the vertical ones.
   2.239  If the second keyword is absent, it is assumed to be the same as the first.
   2.240  
   2.241 -<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.
   2.242 +<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 definitions of the property values.
   2.243  
   2.244  <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>.
   2.245  
   2.246 @@ -1947,6 +1937,15 @@
   2.247  
   2.248  <h2>Conformance</h2>
   2.249  
   2.250 +<h3 class="no-ref">Conformance to CSS Background and Borders</h3>
   2.251 +
   2.252 +<p>
   2.253 +  Some property and element definitions in this specification require an SVG 1.1 implementation [[!SVG11]]. UAs without
   2.254 +  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
   2.255 +  support for SVG, the 'mask' and 'clip-path' properties must neither support references to
   2.256 +  <a>'mask element'</a> elements nor to <a>'clipPath element'</a> elements.
   2.257 +</p>
   2.258 +
   2.259  <!--conformance-->
   2.260  
   2.261  <h2 class=no-num id="references">
     3.1 --- a/masking/index.html	Tue Mar 12 14:00:02 2013 +0900
     3.2 +++ b/masking/index.html	Wed Mar 13 13:16:38 2013 -0700
     3.3 @@ -11,7 +11,7 @@
     3.4     rel=dcterms.rights>
     3.5    <meta content="CSS Masking" name=dcterms.title>
     3.6    <meta content=text name=dcterms.type>
     3.7 -  <meta content=2013-03-12 name=dcterms.issued>
     3.8 +  <meta content=2013-03-13 name=dcterms.issued>
     3.9    <meta
    3.10     content="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html"
    3.11     name=dcterms.creator>
    3.12 @@ -34,14 +34,14 @@
    3.13  
    3.14     <h1>CSS Masking</h1>
    3.15  
    3.16 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 March 2013</h2>
    3.17 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 March 2013</h2>
    3.18  
    3.19     <dl>
    3.20      <dt>This version:
    3.21  
    3.22      <dd><a
    3.23       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>
    3.24 -     <!--http://www.w3.org/TR/2013/WD-css-masking-20130312/-->
    3.25 +     <!--http://www.w3.org/TR/2013/WD-css-masking-20130313/-->
    3.26  
    3.27      <dt>Latest version:
    3.28  
    3.29 @@ -153,7 +153,7 @@
    3.30  
    3.31     <li><a href="#values"><span class=secno>3. </span>Values</a>
    3.32  
    3.33 -   <li><a href="#definitions"><span class=secno>4. </span>Definitions</a>
    3.34 +   <li><a href="#terminology"><span class=secno>4. </span>Terminology</a>
    3.35  
    3.36     <li><a href="#the-mask-rendering-model"><span class=secno>5. </span>The
    3.37      Mask Rendering Model</a>
    3.38 @@ -265,6 +265,11 @@
    3.39      </ul>
    3.40  
    3.41     <li><a href="#conformance"><span class=secno>11. </span>Conformance</a>
    3.42 +    <ul class=toc>
    3.43 +     <li class=no-ref><a
    3.44 +      href="#conformance-to-css-background-and-border"><span
    3.45 +      class=secno>11.1. </span>Conformance to CSS Background and Borders</a>
    3.46 +    </ul>
    3.47  
    3.48     <li class=no-num><a href="#references"> References</a>
    3.49      <ul class=toc>
    3.50 @@ -339,71 +344,6 @@
    3.51     of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
    3.52     title="Visual formatting model">stacking context</a>.
    3.53  
    3.54 -  <p> Definitions of CSS properties and values in this specification comply
    3.55 -   with defintions in CSS Backgrounds and Borders <a href="#CSS3BG"
    3.56 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
    3.57 -   specification relies on descriptions and definitions of CSS Backgrounds
    3.58 -   and Borders. Every reference will be marked clearly. The following terms
    3.59 -   in CSS Backgrounds and Borders have the following meaning in this
    3.60 -   specification:
    3.61 -
    3.62 -  <table class=data id=term-matching>
    3.63 -   <thead>
    3.64 -    <tr>
    3.65 -     <th>Term in <a href="#CSS3BG"
    3.66 -      rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
    3.67 -
    3.68 -     <th>Term in CSS Masking
    3.69 -
    3.70 -   <tbody>
    3.71 -    <tr>
    3.72 -     <th>background images
    3.73 -
    3.74 -     <td>mask images
    3.75 -
    3.76 -    <tr>
    3.77 -     <th>background painting area
    3.78 -
    3.79 -     <td>mask painting area
    3.80 -
    3.81 -    <tr>
    3.82 -     <th>background-size
    3.83 -
    3.84 -     <td>mask-size
    3.85 -
    3.86 -    <tr>
    3.87 -     <th>background-position
    3.88 -
    3.89 -     <td>mask-position
    3.90 -
    3.91 -    <tr>
    3.92 -     <th>background positioning area
    3.93 -
    3.94 -     <td>mask positioning area
    3.95 -
    3.96 -    <tr>
    3.97 -     <th>border image area
    3.98 -
    3.99 -     <td>mask box image area
   3.100 -  </table>
   3.101 -
   3.102 -  <p> Some property and element definitions in this specification require an
   3.103 -   SVG 1.1 implementation <a href="#SVG11"
   3.104 -   rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
   3.105 -   must not implement any of the following properties and elements: ‘<a
   3.106 -   href="#mask-type"><code class=property>mask-type</code></a>’, ‘<a
   3.107 -   href="#clip-rule"><code class=property>clip-rule</code></a>’, <a
   3.108 -   class=element-name href="#ClipPathElement">‘<code
   3.109 -   class=property>clipPath</code>’</a> element, <a class=element-name
   3.110 -   href="#MaskElement">‘<code class=property>mask</code>’</a> element.
   3.111 -   For UAs without support for SVG, the ‘<a href="#mask"><code
   3.112 -   class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
   3.113 -   class=property>clip-path</code></a>’ properties must neither support
   3.114 -   references to <a class=element-name href="#MaskElement">‘<code
   3.115 -   class=property>mask</code>’</a> elements nor to <a class=element-name
   3.116 -   href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
   3.117 -   elements.
   3.118 -
   3.119    <h2 id=values><span class=secno>3. </span>Values</h2>
   3.120  
   3.121    <p> This specification follows the <a
   3.122 @@ -420,7 +360,7 @@
   3.123     keyword as their property value. For readability it has not been repeated
   3.124     explicitly.
   3.125  
   3.126 -  <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
   3.127 +  <h2 id=terminology><span class=secno>4. </span>Terminology</h2>
   3.128  
   3.129    <p> When used in this specification, terms have the meanings assigned in
   3.130     this section.
   3.131 @@ -443,6 +383,9 @@
   3.132     <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
   3.133      coordinate system</dfn>
   3.134  
   3.135 +   <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
   3.136 +    coordinate system</dfn>
   3.137 +
   3.138     <dd>
   3.139      <p> In general, a coordinate system defines locations and distances on
   3.140       the current canvas. The current local coordinate system (also user
   3.141 @@ -463,13 +406,6 @@
   3.142       coordinate system has its origin at the top-left corner of the element's
   3.143       nearest viewport.
   3.144  
   3.145 -   <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
   3.146 -    coordinate system</dfn>
   3.147 -
   3.148 -   <dd> The term <a href="#user-coordinate-system"><var>user coordinate
   3.149 -    system</var></a> is equivalent to the term <a
   3.150 -    href="#local-coordinate-system"><var>local coordinate system</var></a>.
   3.151 -
   3.152     <dt id=TermObjectBoundingBoxUnits><dfn id=object-bounding-box-units>object
   3.153      bounding box units</dfn>
   3.154  
   3.155 @@ -507,6 +443,53 @@
   3.156      class=property>clip-path</code></a>’.
   3.157    </dl>
   3.158  
   3.159 +  <p> Definitions of CSS properties and values in this specification are
   3.160 +   analogous to definitions in CSS Backgrounds and Borders <a href="#CSS3BG"
   3.161 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
   3.162 +   specification relies on descriptions and definitions of CSS Backgrounds
   3.163 +   and Borders. The following terms in CSS Backgrounds and Borders have the
   3.164 +   following meaning in this specification:
   3.165 +
   3.166 +  <table class=data id=term-matching>
   3.167 +   <thead>
   3.168 +    <tr>
   3.169 +     <th>Term in <a href="#CSS3BG"
   3.170 +      rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
   3.171 +
   3.172 +     <th>Term in CSS Masking
   3.173 +
   3.174 +   <tbody>
   3.175 +    <tr>
   3.176 +     <th>background images
   3.177 +
   3.178 +     <td>mask images
   3.179 +
   3.180 +    <tr>
   3.181 +     <th>background painting area
   3.182 +
   3.183 +     <td>mask painting area
   3.184 +
   3.185 +    <tr>
   3.186 +     <th>background-size
   3.187 +
   3.188 +     <td>mask-size
   3.189 +
   3.190 +    <tr>
   3.191 +     <th>background-position
   3.192 +
   3.193 +     <td>mask-position
   3.194 +
   3.195 +    <tr>
   3.196 +     <th>background positioning area
   3.197 +
   3.198 +     <td>mask positioning area
   3.199 +
   3.200 +    <tr>
   3.201 +     <th>border image area
   3.202 +
   3.203 +     <td>mask box image area
   3.204 +  </table>
   3.205 +
   3.206    <h2 id=the-mask-rendering-model><span class=secno>5. </span>The Mask
   3.207     Rendering Model</h2>
   3.208  
   3.209 @@ -1013,7 +996,7 @@
   3.210     href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling
   3.211     Images: the ‘<code class=property>background-repeat</code>’
   3.212     property</a> <a href="#CSS3BG"
   3.213 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
   3.214 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
   3.215     property values.
   3.216  
   3.217    <div class=example>
   3.218 @@ -1125,7 +1108,7 @@
   3.219     href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning
   3.220     Images: the ‘<code class=property>background-position</code>’
   3.221     property</a> <a href="#CSS3BG"
   3.222 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
   3.223 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
   3.224     property values.
   3.225  
   3.226    <div class=example>
   3.227 @@ -1436,7 +1419,7 @@
   3.228    <p>See <a
   3.229     href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing
   3.230     Images: the ‘background-size’ property</a> <a href="#CSS3BG"
   3.231 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
   3.232 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
   3.233     property values.
   3.234  
   3.235    <p>See the section <a href="#layering">“Layering multiple mask
   3.236 @@ -2302,7 +2285,7 @@
   3.237     href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image
   3.238     Slicing: the ‘<code class=property>border-image-slice</code>’
   3.239     property</a> <a href="#CSS3BG"
   3.240 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
   3.241 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
   3.242     property values.
   3.243  
   3.244    <h3 id=the-mask-box-image-width><span class=secno>7.3. </span>The ‘<a
   3.245 @@ -2372,7 +2355,7 @@
   3.246    <p>See <a
   3.247     href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing
   3.248     Areas: the ‘border-image-width’ property</a> <a href="#CSS3BG"
   3.249 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
   3.250 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
   3.251     property values.
   3.252  
   3.253    <p class=note> Note that for SVG elements without an associated layout box
   3.254 @@ -2518,7 +2501,7 @@
   3.255     href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image
   3.256     Tiling: the ‘<code class=property>border-image-repeat</code>’
   3.257     property</a> <a href="#CSS3BG"
   3.258 -   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
   3.259 +   rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
   3.260     property values.
   3.261  
   3.262    <p>The exact process for scaling and tiling the mask box image parts is
   3.263 @@ -3621,6 +3604,26 @@
   3.264    </dl>
   3.265  
   3.266    <h2 id=conformance><span class=secno>11. </span>Conformance</h2>
   3.267 +
   3.268 +  <h3 class=no-ref id=conformance-to-css-background-and-border><span
   3.269 +   class=secno>11.1. </span>Conformance to CSS Background and Borders</h3>
   3.270 +
   3.271 +  <p> Some property and element definitions in this specification require an
   3.272 +   SVG 1.1 implementation <a href="#SVG11"
   3.273 +   rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
   3.274 +   must not implement any of the following properties and elements: ‘<a
   3.275 +   href="#mask-type"><code class=property>mask-type</code></a>’, ‘<a
   3.276 +   href="#clip-rule"><code class=property>clip-rule</code></a>’, <a
   3.277 +   class=element-name href="#ClipPathElement">‘<code
   3.278 +   class=property>clipPath</code>’</a> element, <a class=element-name
   3.279 +   href="#MaskElement">‘<code class=property>mask</code>’</a> element.
   3.280 +   For UAs without support for SVG, the ‘<a href="#mask"><code
   3.281 +   class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
   3.282 +   class=property>clip-path</code></a>’ properties must neither support
   3.283 +   references to <a class=element-name href="#MaskElement">‘<code
   3.284 +   class=property>mask</code>’</a> elements nor to <a class=element-name
   3.285 +   href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
   3.286 +   elements.</p>
   3.287    <!--begin-conformance-->
   3.288  
   3.289    <h3 class=no-ref id=conventions> Document conventions</h3>
   3.290 @@ -3898,7 +3901,7 @@
   3.291      href="#alpha" title="section 6.2."><strong>6.2.</strong></a>
   3.292  
   3.293     <li>authoring tool, <a href="#authoring-tool"
   3.294 -    title="section 11."><strong>11.</strong></a>
   3.295 +    title="section 11.1."><strong>11.1.</strong></a>
   3.296  
   3.297     <li>‘<a href="#auto"><code class=css>auto</code></a>’, <a href="#auto"
   3.298      title="section 6.2."><strong>6.2.</strong></a>
   3.299 @@ -4087,7 +4090,7 @@
   3.300      href="#ltpositiongt" title="section 6.4."><strong>6.4.</strong></a>
   3.301  
   3.302     <li>renderer, <a href="#renderer"
   3.303 -    title="section 11."><strong>11.</strong></a>
   3.304 +    title="section 11.1."><strong>11.1.</strong></a>
   3.305  
   3.306     <li><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>, <a
   3.307      href="#ltrepeat-stylegt" title="section 6.3."><strong>6.3.</strong></a>
   3.308 @@ -4104,7 +4107,7 @@
   3.309     <li>style sheet
   3.310      <ul>
   3.311       <li>as conformance class, <a href="#style-sheet"
   3.312 -      title="section 11."><strong>11.</strong></a>
   3.313 +      title="section 11.1."><strong>11.1.</strong></a>
   3.314      </ul>
   3.315  
   3.316     <li>&lt;top&gt;, <a href="#lttopgt"