[css-exclusions] add shape-padding illustration

Author: astearns

css3-exclusions/Exclusions.src.html

@@ -1678,7 +1678,11 @@ <h4 id="shape-margin-property">The 'shape-margin' property</h4>
 
     <div class="example">
         <p>A 'shape-margin' creating an offset 
-            from a circle shape. </p>
+            from a circlular shape-outside. 
+            The blue rectangles represent 
+            inline content affected 
+            by the shape created 
+            by the margin.</p>
         <img src="images/wrap-margin.png" 
             alt="Example of a shape-margin offset"/>
     </div>
@@ -1726,6 +1730,17 @@ <h4 id="shape-padding-property">The 'shape-padding' Property</h4>
             <td>the absolute length</td>
         </tr>
     </table>
+
+    <div class="example">
+        <p>A 'shape-padding' creating an offset 
+            from a circlular shape-inside. 
+            The light blue rectangles represent 
+            inline content affected 
+            by the shape created 
+            by the padding.</p>
+        <img src="images/shape-padding.png" 
+            alt="Example of a shape-padding offset"/>
+    </div>
     <!-- End section "shape-padding property" -->
 
     <div class="note">Note that the 'shape-padding' property only affects layout of content inside 

css3-exclusions/Overview.html

@@ -40,14 +40,14 @@
 
    <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 August 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 August 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
-    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120828/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120828/</a></dd>-->
+    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120830/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120830/</a></dd>-->
 
     <dt>Latest version:
 
@@ -2176,7 +2176,8 @@ <h4 id=shape-margin-property><span class=secno>4.4.4. </span>The ‘<a
   <div class=example>
    <p>A ‘<a href="#shape-margin"><code
     class=property>shape-margin</code></a>’ creating an offset from a
-    circle shape.</p>
+    circlular shape-outside. The blue rectangles represent inline content
+    affected by the shape created by the margin.</p>
    <img alt="Example of a shape-margin offset" src="images/wrap-margin.png"></div>
   <!-- End secion "shape-margin property" -->
 
@@ -2232,6 +2233,14 @@ <h4 id=shape-padding-property><span class=secno>4.4.5. </span>The ‘<a
 
      <td>the absolute length
   </table>
+
+  <div class=example>
+   <p>A ‘<a href="#shape-padding"><code
+    class=property>shape-padding</code></a>’ creating an offset from a
+    circlular shape-inside. The light blue rectangles represent inline
+    content affected by the shape created by the padding.</p>
+   <img alt="Example of a shape-padding offset"
+   src="images/shape-padding.png"></div>
   <!-- End section "shape-padding property" -->
 
   <div class=note>Note that the ‘<a href="#shape-padding"><code