Make definitions of spread and blur radii more compatible with actual blur and spread operations

Author: fantasai

css3-background/Overview.html

@@ -22,14 +22,14 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 10 June
+   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 12 June
     2010</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2010/WD-css3-background-20100610">http://www.w3.org/TR/2010/WD-css3-background-20100610</a>
+     href="http://www.w3.org/TR/2010/WD-css3-background-20100612">http://www.w3.org/TR/2010/WD-css3-background-20100612</a>
      <!--<a href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>-->
 
 
@@ -3724,11 +3724,11 @@ <h3 id=the-box-shadow><span class=secno>6.2. </span>The &lsquo;<a
     the blur radius is zero, the shadow's edge is sharp. Otherwise, the
     larger the value, the more the shadow's edge is blurred. See below.
 
-   <li>The fourth length is a spread. Positive values cause the shadow shape
-    to expand in all directions by the specified radius. Negative values
-    cause the shadow shape to contract. See below. <span class=note>Note that
-    for inner shadows, expanding the shadow (creating more shadow area) means
-    contracting the shadow's perimeter shape.</span>
+   <li>The fourth length is a spread radius. Positive values cause the shadow
+    shape to expand in all directions by the specified radius. Negative
+    values cause the shadow shape to contract. See below. <span
+    class=note>Note that for inner shadows, expanding the shadow (creating
+    more shadow area) means contracting the shadow's perimeter shape.</span>
 
    <li>The color is the color of the shadow.
 
@@ -3740,12 +3740,12 @@ <h3 id=the-box-shadow><span class=secno>6.2. </span>The &lsquo;<a
   </ul>
 
   <p>An outer box-shadow casts a shadow as if the border-box of the element
-   were opaque. The shadow is drawn outside the border edge only: it is not
-   drawn inside the border-box of the element.
+   were opaque. The shadow is drawn outside the border edge only: it is
+   clipped inside the border-box of the element.
 
   <p>An inner box-shadow casts a shadow as if everything outside the padding
    edge were opaque. The inner shadow is drawn inside the padding edge only:
-   it is not drawn outside the padding box of the element.
+   it is clipped outside the padding box of the element.
 
   <p>If the box has a nonzero <span class=property>&lsquo;<a
    href="#border-radius"><code
@@ -3754,24 +3754,32 @@ <h3 id=the-box-shadow><span class=secno>6.2. </span>The &lsquo;<a
    class=property>border-image</code></a>&rsquo; does not affect the shape of
    the box-shadow.
 
-  <p>If a spread is defined, the shadow is expanded by an outward outset of
-   the specified amount normal to the original shadow perimeter. For corners
-   with a zero border-radius (i.e. where the normal is not defined), the
-   corner remains sharp&#8212;the operation is equivalent to scaling the
-   shadow shape. 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. In
-   either case, the effective width and height of the shadow shape is floored
-   at zero. (A zero-sized shadow shape would cause an outer shadow to
-   disappear, and an inner shadow to cover the entire padding-box.)
-
-  <p>The blur radius is perpendicular to and centered on the shadow's edge
-   and defines a gradient color transition ranging from the full shadow color
+  <p>If a spread radius is defined, the shadow is expanded outward by an
+   operation equivalent to applying the absolute value of the spread radius
+   to a blur operation as defined below and thresholding the result such for
+   a positive spread radius all non-transparent pixels are given the full
+   shadow color and for a negative spread radius all non-opaque pixels are
+   made transparent. The UA may approximate this operation by taking an
+   outward outset of the specified amount 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.
+   (The UA may even combine these methods, using one method for outer shadows
+   and another for inner ones.) For corners with a zero border-radius,
+   however, the corner must remain sharp&#8212;the operation is equivalent to
+   scaling the shadow shape. In any case, the effective width and height of
+   the shadow shape is floored at zero. (A zero-sized shadow shape would
+   cause an outer shadow to disappear, and an inner shadow to cover the
+   entire padding-box.)
+
+  <p>A positive blur radius indicates that the resulting shadow should be
+   blurred, such as by a Gaussian filter. The exact algorithm is not defined;
+   however for a long, straight shadow edge, this should create a color
+   transition the length of the blur radius that is perpendicular to and
+   centered on the shadow's edge, and that ranges from the full shadow color
    at the radius endpoint inside the shadow to fully transparent at the
-   endpoint outside it. <span class=issue>Is this the correct definition for
-   blur radius? Also, is there a better term for it?</span> The exact
-   algorithm for the blur transition is not specified.
+   endpoint outside it.
 
   <div class=example>
    <p>The example below demonstrates the effects of spread and blur on the

css3-background/Overview.src.html

@@ -2692,7 +2692,7 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
   Otherwise, the larger the value, the more the shadow's edge is
   blurred. See below.
 
-  <li>The fourth length is a spread. Positive values cause
+  <li>The fourth length is a spread radius. Positive values cause
   the shadow shape to expand in all directions by the specified
   radius. Negative values cause the shadow shape to contract.
   See below.
@@ -2711,36 +2711,43 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
 
 <p>An outer box-shadow casts a shadow as if the border-box of the element
 were opaque. The shadow is drawn outside the border edge only: it is
-not drawn inside the border-box of the element.
+clipped inside the border-box of the element.
 
 <p>An inner box-shadow casts a shadow as if everything outside the padding
 edge were opaque. The inner shadow is drawn inside the padding edge only:
-it is not drawn outside the padding box of the element.
+it is clipped outside the padding box of the element.
 
 <p>If the box has a nonzero <span class="property">'border-radius'</span>,
 the shadow shape is rounded in the same way. The 'border-image' does not
 affect the shape of the box-shadow.
 
-<p>If a spread is defined, the shadow is expanded by an outward
-outset of the specified amount normal to the original shadow perimeter.
-For corners with a zero border-radius (i.e. where the normal is not
-defined), the corner remains sharp&#8212;the operation is equivalent to
-scaling the shadow shape.
-The UA may approximate the transformed shadow perimeter shape by
+<p>If a spread radius is defined, the shadow is expanded outward by an
+operation equivalent to applying the absolute value of the spread radius
+to a blur operation as defined below and thresholding the result such
+for a positive spread radius all non-transparent pixels are given the
+full shadow color and for a negative spread radius all non-opaque pixels
+are made transparent.
+The UA may approximate this operation by taking an outward outset of the
+specified amount 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. In either
-case, the effective width and height of the shadow shape is floored
-at zero. (A zero-sized shadow shape would cause an outer shadow to
-disappear, and an inner shadow to cover the entire padding-box.)
-
-<p>The blur radius is perpendicular to and centered on the shadow's
-edge and defines a gradient color transition ranging from the full
-shadow color at the radius endpoint inside the shadow to
-fully transparent at the endpoint outside it. <span class="issue">Is
-this the correct definition for blur radius? Also, is there a better
-term for it?</span>
-The exact algorithm for the blur transition is not specified. 
+and flooring at zero the corner radii by the same amount. (The UA may
+even combine these methods, using one method for outer shadows and
+another for inner ones.)
+For corners with a zero border-radius, however, the corner must remain
+sharp&#8212;the operation is equivalent to scaling the shadow shape.
+In any case, the effective width and height of the shadow shape is
+floored at zero. (A zero-sized shadow shape would cause an outer shadow
+to disappear, and an inner shadow to cover the entire padding-box.)
+
+<p>A positive blur radius indicates that the resulting shadow should
+be blurred, such as by a Gaussian filter. The exact algorithm is not
+defined; however for a long, straight shadow edge, this should create
+a color transition the length of the blur radius that is perpendicular
+to and centered on the shadow's edge, and that ranges from the full
+shadow color at the radius endpoint inside the shadow to fully
+transparent at the endpoint outside it.
 
 <div class="example">
 <p>The example below demonstrates the effects of spread and blur