[css-background] Try to fix spread definition per <http://lists.w3.org/Archives/Public/www-style/2012Sep/0173.html>

--HG--
extra : rebase_source : e5c1837d11d11d5efcd44202a24a5810f24f7b1a

Author: fantasai

css-backgrounds/Overview.html

@@ -12,7 +12,7 @@
   <meta content="CSS Backgrounds and Borders Module Level 3"
    name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-07-25 name=dcterms.date>
+  <meta content=2013-11-11 name=dcterms.date>
   <meta content="Bert Bos" name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Brad Kemper" name=dcterms.creator>
@@ -42,12 +42,12 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 July 2013</h2>
+   <h2 class="no-num no-toc">Editor's Draft 11 November 2013</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!-- <a href="http://www.w3.org/TR/2013/CR-css3-background-20130725/">http://dev.w3.org/csswg/css3-background/</a> -->
+    <dd><!-- <a href="http://www.w3.org/TR/2013/CR-css3-background-20131111/">http://dev.w3.org/csswg/css3-background/</a> -->
      <a
      href="http://dev.w3.org/csswg/css3-background/">http://dev.w3.org/csswg/css3-background/</a>
 
@@ -123,9 +123,9 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
    href="#document">documents</a> (such as HTML and XML) on screen, on paper,
    in speech, etc. This draft contains the features of CSS level 3 relating
    to borders and backgrounds. It includes and extends the functionality of
-   CSS level 2 <a href="#CSS21"
+   CSS level 2 <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS level 1
-   <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main
+   <a href="#ref-CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main
    extensions compared to level 2 are borders consisting of images, boxes
    with multiple backgrounds, boxes with rounded corners and boxes with
    shadows.
@@ -393,20 +393,20 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
 
   <p>When elements are rendered according to the <a
    href="http://www.w3.org/TR/CSS21/box.html">CSS box model</a> <a
-   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, each element
-   is either not displayed at all, or formatted as one or more rectangular
-   boxes. Each box has a rectangular content area, a band of padding around
-   the content, a border around the padding, and a margin outside the border.
-   (The margin may actually be negative, but margins have no influence on the
-   background and border.)
+   href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, each
+   element is either not displayed at all, or formatted as one or more
+   rectangular boxes. Each box has a rectangular content area, a band of
+   padding around the content, a border around the padding, and a margin
+   outside the border. (The margin may actually be negative, but margins have
+   no influence on the background and border.)
 
   <div class=figure>
    <p><img
     alt="Diagram of a typical box, showing the   content, padding, border and margin areas"
     src=box>
 
    <p class=caption>The various areas and edges of a typical box. (This
-    diagram is explained in the CSS2.1 Box Model chapter <a href="#CSS21"
+    diagram is explained in the CSS2.1 Box Model chapter <a href="#ref-CSS21"
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.)
   </div>
 
@@ -426,20 +426,20 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
   <p>The relative stacking order of backgrounds, borders, and shadows is
    given in this module. For how these layers interact with other rendered
    content, see Appendix E “Elaborate description of Stacking Contexts”
-   in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+   in <a href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
   <h2 id=values><span class=secno>2. </span> Values and Interactions</h2>
 
   <p>This specification follows the <a
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
-   definition conventions</a> from <a href="#CSS21"
+   definition conventions</a> from <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
   <h3 id=placement><span class=secno>2.1. </span> Module Interactions</h3>
 
   <p>This module replaces and extends the background and border features
-   defined in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
-   sections 8.5 and 14.2.
+   defined in <a href="#ref-CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections 8.5 and 14.2.
 
   <p>All properties in this module apply to the <a
    href="http://www.w3.org/TR/CSS21/selector.html#first-letter"><code>::first-letter</code></a>
@@ -451,7 +451,7 @@ <h3 id=placement><span class=secno>2.1. </span> Module Interactions</h3>
    class=property>box-shadow</code></a>’ properties to
    <code>::first-line</code>. The UA must not apply the <a
    href="#borders">border-color/style/width properties</a> to
-   <code>::first-line</code>. <a href="#CSS21"
+   <code>::first-line</code>. <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
   <h3 id=value-types><span class=secno>2.2. </span> Value Types</h3>
@@ -460,12 +460,12 @@ <h3 id=value-types><span class=secno>2.2. </span> Value Types</h3>
    defined by this specification as <code class=prod><a
    href="#image"><var>&lt;image&gt;</var></a> =
    <var>&lt;uri&gt;</var></code>. Other value types are defined in CSS
-   Level 2 Revision 1 <a href="#CSS21"
+   Level 2 Revision 1 <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may expand
-   the definitions of these value types: for example <a href="#CSS3COLOR"
+   the definitions of these value types: for example <a href="#ref-CSS3COLOR"
    rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, when combined with
    this module, expands the definition of the &lt;color&gt; value type as
-   used in this specification. Similarly, <a href="#CSS3-IMAGES"
+   used in this specification. Similarly, <a href="#ref-CSS3-IMAGES"
    rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>, when combined
    with this module, expands the definition of <a
    href="#image"><var>&lt;image&gt;</var></a> as used in this
@@ -485,7 +485,7 @@ <h3 id=animations><span class=secno>2.3. </span>Animated Values</h3>
    styles. (The section <a
    href="http://www.w3.org/TR/css3-transitions/#animatable-types">“Animation
    of property types”</a> of the <cite>CSS Transitions module</cite> <a
-   href="#CSS3-TRANSITIONS"
+   href="#ref-CSS3-TRANSITIONS"
    rel=biblioentry>[CSS3-TRANSITIONS]<!--{{CSS3-TRANSITIONS}}--></a> is
    expected to define how different kinds of values are interpolated during a
    transition.) In anticipation of that, this module includes a line
@@ -705,7 +705,7 @@ <h3 id=the-background-image><span class=secno>3.3. </span>Image Sources:
   <p>For accessibility reasons, authors should not use background images as
    the sole method of conveying important information. See <a
    href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F3">Web Content
-   Accessibility Guideline F3</a> <a href="#WCAG20"
+   Accessibility Guideline F3</a> <a href="#ref-WCAG20"
    rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a>. Images are not accessible
    in non-graphical presentations, and background images specifically might
    be turned off in high-contrast display modes.
@@ -1005,7 +1005,7 @@ <h3 id=the-background-attachment><span class=secno>3.5. </span>Affixing
     therefore replicated on every page. <span class=note>Note that there is
     only one viewport per view. Even if an element has a scrolling mechanism
     (see the ‘<code class=property>overflow</code>’ property <a
-    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a ‘<a
+    href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a ‘<a
     href="#fixed0"><code class=css>fixed</code></a>’ background doesn't
     move with the element.</span>
 
@@ -1409,7 +1409,7 @@ <h3 id=the-background-clip><span class=secno>3.7. </span>Painting Area: the
 
   <p class=note>Note that the background is always drawn <em>behind</em> the
    border, if any. See “Elaborate description of Stacking Contexts” in <a
-   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+   href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
   <p>See the section <a href="#layering">“Layering multiple background
    images”</a> for how ‘<a href="#background-clip"><code
@@ -1502,7 +1502,7 @@ <h3 id=the-background-origin><span class=secno>3.8. </span>Positioning
    property has no effect: in this case the background positioning area is
    the <a
    href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial
-   containing block</a> <a href="#CSS21"
+   containing block</a> <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
   <p class=note>Note that if ‘<a href="#background-clip"><code
@@ -1991,9 +1991,9 @@ <h3 id=special-backgrounds><span class=secno>3.11. </span> Backgrounds of
    the used value of its background is transparent.
 
   <p>For documents whose root element is an HTML <code class=html>HTML</code>
-   element <a href="#HTML401"
+   element <a href="#ref-HTML401"
    rel=biblioentry>[HTML401]<!--{{!HTML401}}--></a> or an XHTML <code
-   class=html>html</code> element <a href="#XHTML11"
+   class=html>html</code> element <a href="#ref-XHTML11"
    rel=biblioentry>[XHTML11]<!--{{!XHTML11}}--></a>: if the computed value of
    ‘<a href="#background-image"><code
    class=property>background-image</code></a>’ on the root element is
@@ -2033,7 +2033,7 @@ <h3 id=special-backgrounds><span class=secno>3.11. </span> Backgrounds of
 
   <p>The ‘<code class=css>::first-line</code>’ pseudo-element is like an
    inline-level element for the purposes of the background (see
-   section 5.12.1 of <a href="#CSS21"
+   section 5.12.1 of <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). That means, e.g., that in a
    left-justified first line, the background does not necessarily extend all
    the way to the right margin.
@@ -2297,7 +2297,7 @@ <h3 id=the-border-style><span class=secno>4.2. </span>Line Patterns: the
 
    <dd> Same as ‘<code class=property>none</code>’, but has different
     behavior in the border conflict resolution rules for border-collapsed
-    tables <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+    tables <a href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
    <dt><dfn id=dotted>‘<code class=css>dotted</code>’</dfn>
 
@@ -2335,7 +2335,7 @@ <h3 id=the-border-style><span class=secno>4.2. </span>Line Patterns: the
     the canvas. Treated as ‘<a href="#ridge"><code
     class=property>ridge</code></a>’ in the <a
     href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">collapsing
-    border model</a>. <a href="#CSS21"
+    border model</a>. <a href="#ref-CSS21"
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
    <dt><dfn id=outset>‘<code class=css>outset</code>’</dfn>
@@ -2344,7 +2344,7 @@ <h3 id=the-border-style><span class=secno>4.2. </span>Line Patterns: the
     the canvas. Treated as ‘<a href="#groove"><code
     class=property>groove</code></a>’ in the <a
     href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">collapsing
-    border model</a>. <a href="#CSS21"
+    border model</a>. <a href="#ref-CSS21"
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   </dl>
 
@@ -3807,7 +3807,7 @@ <h3 id=border-image-tables><span class=secno>6.8. </span>Effect on Tables</h3>
    how the image border interacts with the borders of cells, rows and row
    groups at the edges of the table (see <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#border-conflict-resolution">border
-   conflict resolution</a> in <a href="#CSS21"
+   conflict resolution</a> in <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>).
 
   <p>It is expected that a future specification will define the rendering. It
@@ -3956,7 +3956,7 @@ <h3 id=the-box-decoration-break><span class=secno>7.1. </span>Drawing at
    edge. (Note in particular that neither the element's own ‘<code
    class=property>direction</code>’ nor its containing block's ‘<code
    class=property>direction</code>’ is used.) See <a
-   href="#CSS3-WRITING-MODES"
+   href="#ref-CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{CSS3-WRITING-MODES}}--></a>.
 
   <p>UAs may also apply ‘<a href="#box-decoration-break"><code
@@ -4080,15 +4080,19 @@ <h3 id=the-box-shadow><span class=secno>7.2. </span>Drop Shadows: the ‘<a
    href="#border-image"><code class=property>border-image</code></a>’ does
    not affect the shape of the box-shadow.
 
-  <p>If a spread distance is defined, the shadow is expanded outward or
-   contracted inward by an operation equivalent to <span class=issue><a
-   href="http://www.w3.org/mid/20120908033132.GA29768@crum.dbaron.org">THIS
-   NEEDS FIXING</a></span> For corners with a zero border-radius, however,
-   the corner must remain sharp—the operation is equivalent to scaling the
-   shadow shape. In any case, the effective width and height of the shadowed
-   shape is floored at zero. (A zero-sized shadowed shape would cause an
-   outer shadow to disappear, and an inner shadow to cover the entire
-   padding-box.)
+  <p>If a spread distance is defined, the shadow is expanded outward (for
+   normal shadows) or contracted inward (for ‘<a href="#inset"><code
+   class=css>inset</code></a>’ shadows) by the spread distance in the
+   direction normal to the original shadow perimeter. Alternatively, the UA
+   may approximate the transformed shadow perimeter shape by outsetting
+   (insetting, for inner shadows) the shadow's straight edges by the spread
+   distance and increasing (decreasing, for inner shadows) and flooring at
+   zero the corner radii by the same amount. For corners with a zero
+   border-radius, however, the corner must remain sharp—the operation is
+   equivalent to scaling the shadow shape. In any case, the effective width
+   and height of the shadowed shape is floored at zero. (A zero-sized
+   shadowed shape would cause an outer shadow to disappear, and an inner
+   shadow to cover the entire padding-box.)
 
   <p>A non-zero blur distance indicates that the resulting shadow should be
    blurred, such as by a Gaussian filter. The exact algorithm is not defined;
@@ -4260,7 +4264,7 @@ <h3 id=glossary><span class=secno>8.1. </span>Glossary</h3>
 
    <dd>
     <p>A tree-structured document with elements and attributes, such as an
-     SGML or XML document <a href="#XML11"
+     SGML or XML document <a href="#ref-XML11"
      rel=biblioentry>[XML11]<!--{{XML11}}--></a>.
 
    <dt><dfn id=style-sheet>style sheet</dfn>
@@ -4280,7 +4284,7 @@ <h3 id=conformance><span class=secno>8.2. </span>Conformance</h3>
    2119. However, for readability, these words do not appear in all uppercase
    letters in this specification. All of the text of this specification is
    normative except sections explicitly marked as non-normative, examples,
-   and notes. <a href="#RFC2119"
+   and notes. <a href="#ref-RFC2119"
    rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
 
   <p>Examples in this specification are introduced with the words “for
@@ -4336,7 +4340,7 @@ <h3 id=conformance><span class=secno>8.2. </span>Conformance</h3>
   <h3 id=levels><span class=secno>8.3. </span>Levels</h3>
 
   <p><em>This section is informative.</em> CSS has different levels of
-   features, each a subset of the other. (See <a href="#CSS-2010"
+   features, each a subset of the other. (See <a href="#ref-CSS-2010"
    rel=biblioentry>[CSS-2010]<!--{{CSS-2010}}--></a> for a full explanation.)
    The lists below describe which features from this specification are in
    each level.
@@ -4797,7 +4801,7 @@ <h3 class=no-num id=normative-references> Normative References</h3>
    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
-   <dt id=CSS21>[CSS21]
+   <dt id=ref-CSS21>[CSS21]
 
    <dd>Bert Bos; et al. <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
@@ -4807,7 +4811,7 @@ <h3 class=no-num id=normative-references> Normative References</h3>
    </dd>
    <!---->
 
-   <dt id=HTML401>[HTML401]
+   <dt id=ref-HTML401>[HTML401]
 
    <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
     href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
@@ -4816,7 +4820,7 @@ <h3 class=no-num id=normative-references> Normative References</h3>
    </dd>
    <!---->
 
-   <dt id=RFC2119>[RFC2119]
+   <dt id=ref-RFC2119>[RFC2119]
 
    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
@@ -4825,7 +4829,7 @@ <h3 class=no-num id=normative-references> Normative References</h3>
    </dd>
    <!---->
 
-   <dt id=XHTML11>[XHTML11]
+   <dt id=ref-XHTML11>[XHTML11]
 
    <dd>Murray Altheim; Shane McCarron. <a
     href="http://www.w3.org/TR/2001/REC-xhtml11-20010531"><cite>XHTML™ 1.1
@@ -4844,7 +4848,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
-   <dt id=CSS-2010>[CSS-2010]
+   <dt id=ref-CSS-2010>[CSS-2010]
 
    <dd>Elika J. Etemad. <a
     href="http://www.w3.org/TR/2011/NOTE-css-2010-20110512/"><cite>Cascading
@@ -4854,7 +4858,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=CSS1>[CSS1]
+   <dt id=ref-CSS1>[CSS1]
 
    <dd>Håkon Wium Lie; Bert Bos. <a
     href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
@@ -4864,7 +4868,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=CSS3-IMAGES>[CSS3-IMAGES]
+   <dt id=ref-CSS3-IMAGES>[CSS3-IMAGES]
 
    <dd>Elika J. Etemad; Tab Atkins Jr. <a
     href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
@@ -4874,7 +4878,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]
+   <dt id=ref-CSS3-TRANSITIONS>[CSS3-TRANSITIONS]
 
    <dd>Dean Jackson; et al. <a
     href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/"><cite>CSS
@@ -4884,7 +4888,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
+   <dt id=ref-CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
 
    <dd>Elika J. Etemad; Koji Ishii. <a
     href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
@@ -4894,7 +4898,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=CSS3COLOR>[CSS3COLOR]
+   <dt id=ref-CSS3COLOR>[CSS3COLOR]
 
    <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
     href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
@@ -4903,7 +4907,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=WCAG20>[WCAG20]
+   <dt id=ref-WCAG20>[WCAG20]
 
    <dd>Ben Caldwell; et al. <a
     href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content
@@ -4913,7 +4917,7 @@ <h3 class=no-num id=other-references> Other References</h3>
    </dd>
    <!---->
 
-   <dt id=XML11>[XML11]
+   <dt id=ref-XML11>[XML11]
 
    <dd>Eve Maler; et al. <a
     href="http://www.w3.org/TR/2006/REC-xml11-20060816"><cite>Extensible