Remove box-shadow for discussion so the rest of the draft can progress to CR. We can add it back once it's ready, or shift it into another module.

Author: fantasai

css3-background/Overview.html

@@ -137,10 +137,9 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
    indicate an error in one or both specs.</strong>
 
   <p>The following features are at-risk and may be dropped at the end of the
-   CR period if there has not been enough interest from implementors: inner
-   shadows for &lsquo;<code class=property><a
-   href="#box-shadow">box-shadow</a></code>&rsquo;, &lsquo;<code
-   class=property><a href="#box-break">box-break</a></code>&rsquo;.
+   CR period if there has not been enough interest from implementors:
+   &lsquo;<code class=property><a
+   href="#box-break">box-break</a></code>&rsquo;.
 
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
@@ -309,9 +308,9 @@ <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
 
   <p>The properties of this module deal with the decoration of the border
    area and with the background of the content, padding and border areas.
-   Additionally the box may be given a "drop-shadow" effect with the
-   &lsquo;<code class=property><a
-   href="#box-shadow">box-shadow</a></code>&rsquo; property.
+   <!-- Additionally the box may be given a "drop-shadow" effect with the
+'box-shadow' property. -->
+   
 
   <p>If an element is broken into multiple boxes, &lsquo;<code
    class=property><a href="#box-break">box-break</a></code>&rsquo; defines
@@ -3410,19 +3409,19 @@ <h3 id=the-box-break><span class=secno>6.1 </span>The &lsquo;<code
 
    <dd>Each box is independently wrapped with the border and padding. The
     &lsquo;<code class=property><a
-    href="#border-radius">border-radius</a></code>&rsquo;, &lsquo;<code
-    class=property><a href="#border-image">border-image</a></code>&rsquo;,
-    and &lsquo;<code class=property><a
-    href="#box-shadow">box-shadow</a></code>&rsquo;, if any, are applied to
-    each box independently. The background is drawn independently in each box
-    of the element. A no-repeat background image will thus be rendered once
-    in each box of the element.
+    href="#border-radius">border-radius</a></code>&rsquo; and &lsquo;<code
+    class=property><a href="#border-image">border-image</a></code>&rsquo;
+    <!--, and 'box-shadow', if any, --> are applied to each box
+    independently. The background is drawn independently in each box of the
+    element. A no-repeat background image will thus be rendered once in each
+    box of the element.
 
    <dt><dfn id=continous>continous</dfn>
 
    <dd>
-    <p>No border and no padding are inserted at the break. No box-shadow is
-     drawn at the broken edge; &lsquo;<code class=property><a
+    <p>No border and no padding are inserted at the break. <!-- No box-shadow
+    is drawn at the broken edge; -->
+     &lsquo;<code class=property><a
      href="#border-radius">border-radius</a></code>&rsquo; has no effect at
      its corners; and the &lsquo;<code class=property><a
      href="#border-image">border-image</a></code>&rsquo; is rendered for the
@@ -3475,265 +3474,12 @@ <h3 id=the-box-break><span class=secno>6.1 </span>The &lsquo;<code
    class=css>direction: ltr</code>&rsquo; will break on the left side.
 
   <h3 id=the-box-shadow><span class=secno>6.2 </span>The &lsquo;<code
-   class=property><a href="#box-shadow">box-shadow</a></code>&rsquo; property</h3>
-
-  <table class=propdef>
-   <tbody>
-    <tr>
-     <th>Name:
-
-     <td><dfn id=box-shadow>box-shadow</dfn>
-
-    <tr>
-     <th>Value:
-
-     <td>none | <var><a href="#ltshadowgt">&lt;shadow&gt;</a></var> [ ,
-      <var><a href="#ltshadowgt">&lt;shadow&gt;</a></var> ]*
-
-    <tr>
-     <th>Initial:
-
-     <td>none
-
-    <tr>
-     <th>Applies to:
+   class=property>box-shadow</code>&rsquo; property</h3>
 
-     <td>all elements
-
-    <tr>
-     <th>Inherited:
-
-     <td>no
-
-    <tr>
-     <th>Percentages:
-
-     <td>N/A
-
-    <tr>
-     <th>Media:
-
-     <td>visual
-
-    <tr>
-     <th>Computed value:
-
-     <td>any &lt;length&gt; made absolute; any color computed; otherwise as
-      specified
-  </table>
-
-  <p>The &lsquo;<code class=property><a
-   href="#box-shadow">box-shadow</a></code>&rsquo; property attaches one or
-   more drop-shadows to the box. The property is a comma-separated list of
-   shadows, each specified by 2-4 length values, an optional color, and an
-   optional &lsquo;<code class=css><a href="#inset">inset</a></code>&rsquo;
-   keyword. Omitted lengths are 0, omitted colors are a UA-chosen color.
-
-  <p>Where
-
-  <pre class=prod>
-<dfn id=ltshadowgt><var>&lt;shadow&gt;</var></dfn> = inset? &amp;&amp; [ <var>&lt;length&gt;</var>{2,4} &amp;&amp; <var><a href="#ltcolorgt">&lt;color&gt;</a></var>? ]</pre>
-
-  <p>The components of each <var><a
-   href="#ltshadowgt">&lt;shadow&gt;</a></var> are interpreted as follows:
-
-  <ul>
-   <li>The first length is the horizontal offset of the shadow. A positive
-    value draws a shadow that is offset to the right of the box, a negative
-    length to the left.
-
-   <li>The second length is the vertical offset. A positive value offsets the
-    shadow down, a negative one up.
-
-   <li>The third length is a blur radius. Negative values are not allowed. If
-    it is 0, the shadow is sharp, otherwise the larger the value, the more
-    the shadow is blurred. The exact algorithm is not specified.
-
-   <li>The fourth length is a spread radius. Positive values cause the shadow
-    to grow in all directions by the specified radius. Negative values cause
-    the shadow to shrink. The shadow should not change shape when a spread
-    radius is applied: sharp corners should remain sharp.
-
-   <li>The color is the color of the shadow.
-
-   <li>The &lsquo;<code class=css><a href="#inset">inset</a></code>&rsquo;
-    keyword, if present, changes the drop shadow from an outer shadow (one
-    that shadows the box onto the canvas, as if it were lifted above the
-    canvas) to an inner shadow (one that shadows the canvas onto the box, as
-    if the box were cut out of the canvas and shifted behind it).
-  </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.
-
-  <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.
-
-  <p>If the box has a nonzero <span class=property>&lsquo;<code
-   class=property><a
-   href="#border-radius">border-radius</a></code>&rsquo;</span>, the shadow
-   is rounded in the same way.
-
-  <div class=issue>
-   <p><strong>This is still <a
-    href="http://lists.w3.org/Archives/Public/www-style/2009Jul/0120.html">under
-    discussion</a>. Please send comments to www-style.</strong></p>
-
-   <p>However, if the box has a border-image, the shadows drawn differently:
-    they are masked by the border-image instead of the border area as
-    follows.
-
-   <ul>
-    <li>For an outer shadow, the shadow is created by assuming that the
-     padding box is opaque, and then combining that with the border-image to
-     create an alpha-channel mask for the shadow. Spread values are
-     interpreted as increasing the size of the padding box and causing the
-     border-image mask to be resized accordingly. The resulting shadow is
-     only drawn outside the boundaries of the padding box.
-
-    <li>For an inner shadow, the shadow is created by assuming that
-     everything outside the border box is opaque, and then combining that
-     with the border-image to create an alpha-channel mask for the shadow.
-     Spread values are interpreted as decreasing the size of the border box
-     and causing the border-image mask to be resized accordingly. The
-     resulting shadow is only drawn inside the boundaries of the border box.
-   </ul>
-
-   <p>If the UA is unable to create shadows that respect the transparent and
-    partially-transparent aspects of the border-image, it must not create a
-    shadow at all. The UA <em>may</em> ignore spread values when drawing
-    shadows for a border-image.</p>
-  </div>
-
-  <p>If an element has multiple boxes, all of them get drop shadows, but
-   shadows are only drawn where borders would also be drawn, see &lsquo;<code
-   class=property><a href="#box-break">box-break</a></code>&rsquo;.
-
-  <p>The shadow effects are applied front-to-back: the first shadow is on top
-   and the others are layered behind. Shadows do not influence layout and may
-   overlap other boxes or their shadows. In terms of stacking contexts and
-   the painting order, the outer shadows of an element are drawn immediately
-   below the background of that element, and the inner shadows of an element
-   are drawn immediately above the background of that element (below the
-   borders and border image, if any).
-
-  <p>Shadows never affect layout, and do not trigger scrolling or increase
-   the size of the scrollable area.
-
-  <div class=example>
-   <p>Below are some examples of an orange box with a blue border being being
-    given a drop shadow.</p>
-
-   <table class=data id=box-shadow-samples>
-    <tbody>
-     <tr>
-      <th scope=rowgroup>
-       <pre><code><!--
-     -->border:5px solid blue;
-<!-- -->background-color:orange;
-<!-- -->width: 144px;
-<!-- -->height: 144px;<!--
-   --></code></pre>
-
-      <th>
-       <pre><code>border-radius: 20px;</code></pre>
-
-      <th>
-       <pre><code>border-radius: 0;</code></pre>
-
-     <tr>
-      <th>
-       <pre><code><!--
-     -->box-shadow:
-<!-- -->  rgba(0,0,0,0.4)
-<!-- -->  10px 10px;<!--
-   --></code></pre>
-
-      <td> <img alt="A round-cornered box with a light gray shadow the same
-       shape as the border box offset 10px to the right and 10px down from
-       directly underneath the box." height=175 src=shadow-outer-round.png
-       width=175>
-
-      <td> <img alt="A square-cornered box with a light gray shadow the same
-       shape as the border box offset 10px to the right and 10px down from
-       directly underneath the box." height=175 src=shadow-outer-square.png
-       width=175>
-
-     <tr>
-      <th>
-       <pre><code><!--
-     -->box-shadow:
-<!-- -->  rgba(0,0,0,0.4)
-<!-- -->  10px 10px
-<!-- -->  inset<!--
-   --></code></pre>
-
-      <td> <img alt="A round-cornered box with a light gray shadow the
-       inverse shape of the padding box filling 10px in from the top and left
-       edges (just inside the border)." height=175 src=shadow-inner-round.png
-       width=175>
-
-      <td> <img alt="A square-cornered box with a light gray shadow the
-       inverse shape of the padding box filling 10px in from the top and left
-       edges (just inside the border)." height=175
-       src=shadow-inner-square.png width=175>
-
-     <tr>
-      <th>
-       <pre><code><!--
-     -->box-shadow:
-<!-- -->  rgba(0,0,0,0.4)
-<!-- -->  10px 10px 0
-<!-- -->  10px /* spread */<!--
-   --></code></pre>
-
-      <td> <img alt="A round-cornered box with a light gray shadow the same
-       shape as the box but 20px taller and wider and offset so that the top
-       and left edges of the shadow are directly underneath the top and left
-       edges of the box." height=175 src=shadow-outer-spread-round.png
-       width=175>
-
-      <td> <img alt="A square-cornered box with a light gray shadow the same
-       shape as the box but 20px taller and wider and offset so that the top
-       and left edges of the shadow are directly underneath the top and left
-       edges of the box." height=175 src=shadow-outer-spread-square.png
-       width=175>
-
-     <tr>
-      <th>
-       <pre><code><!--
-     -->box-shadow:
-<!-- -->  rgba(0,0,0,0.4)
-<!-- -->  10px 10px 0
-<!-- -->  10px /* spread */
-<!-- -->  inset<!--
-   --></code></pre>
-
-      <td> <img alt="A round-cornered box with a light gray shadow the
-       inverse shape of the box but 20px narrower and shorter filling 20px in
-       from the top and left edges (just inside the border)." height=175
-       src=shadow-inner-spread-round.png width=175>
-
-      <td> <img alt="A round-cornered box with a light gray shadow the
-       inverse shape of the box but 20px narrower and shorter filling 20px in
-       from the top and left edges (just inside the border)." height=175
-       src=shadow-inner-spread-square.png width=175>
-   </table>
-  </div>
-
-  <p>The &lsquo;<code class=css><a
-   href="#box-shadow">box-shadow</a></code>&rsquo; property applies to the
-   &lsquo;<code class=css>::first-letter</code>&rsquo; pseudo-element, but
-   not the &lsquo;<code class=css>::first-line</code>&rsquo; pseudo-element.
-   Outer shadows have no effect on internal table elements in the collapsing
-   border model. If a shadow is defined for single border edge in the
-   collapsing border model has multiple border thicknesses (e.g. an outer
-   shadow on a table where one row has thicker borders than the others, or an
-   inner shadow on a rowspanning table cell that adjoins cells with different
-   border thicknesses), the exact position and rendering of its shadows are
-   undefined.
+  <p class=note>This module previously defined a &lsquo;<code
+   class=property>box-shadow</code>&rsquo; property. This feature has been
+   removed from this module for further discussion, and should reappear in
+   another CSS module in the future.
 
   <h2 id=definitions><span class=secno>7 </span>Definitions</h2>
 
@@ -4610,21 +4356,6 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>N/A
 
-     <td>visual
-
-    <tr valign=baseline>
-     <td><a class=property href="#box-shadow">box-shadow</a>
-
-     <td>none | &lt;shadow&gt; [ , &lt;shadow&gt; ]*
-
-     <td>none
-
-     <td>all elements
-
-     <td>no
-
-     <td>N/A
-
      <td>visual
   </table>
   <!--end-properties-->
@@ -4812,9 +4543,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>box-break, <a href="#box-break"
     title=box-break><strong>6.1</strong></a>
 
-   <li>box-shadow, <a href="#box-shadow"
-    title=box-shadow><strong>6.2</strong></a>
-
    <li>center, <a href="#position-center"
     title=center><strong>3.6</strong></a>
 
@@ -4903,9 +4631,6 @@ <h2 class=no-num id=index>Index</h2>
     title=round><strong>3.4</strong></a>, <a href="#round-round"
     title=round><strong>3.4</strong></a>
 
-   <li><var><a href="#ltshadowgt">&lt;shadow&gt;</a></var>, <a
-    href="#ltshadowgt" title="&lt;shadow&gt;"><strong>6.2</strong></a>
-
    <li>solid, <a href="#solid" title=solid><strong>4.2</strong></a>
 
    <li>space, <a href="#border-image-space"