w3c
diff --git a/‎css-shapes/Overview.html‎
Lines changed: 85 additions & 41 deletions b/‎css-shapes/Overview.html‎
Lines changed: 85 additions & 41 deletions
@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Shapes Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-09-10 name=dcterms.date>
+  <meta content=2013-09-12 name=dcterms.date>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -51,7 +51,7 @@
 
    <h1 id=css-shapes-module>CSS Shapes Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 September
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 September
     2013</h2>
 
    <dl>
@@ -261,10 +261,20 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
 
   <h2 id=definitions><span class=secno>2. </span>Definitions</h2>
 
+  <p><dfn id=wrap>Wrap</dfn>
+
+  <p> This specification uses the term ‘<a href="#wrap"><code
+   class=property>wrap</code></a>’ to refer to flowing content around the
+   sides of a float area. Content wraps around the right side of a
+   left-floated box, and content wraps around the left side of a
+   right-floated box. Line boxes next to a float are shortened as necessary
+   to avoid intersections with the float area.
+
   <p><dfn id=float-area>Float area</dfn>
 
-  <p> The area used for wrapping content around a float element. By default,
-   the float area is the float element's <a
+  <p> The area used for wrapping (or flowing) content around a float element.
+   The rules for float behavior use the sides of the float area to determine
+   where content flows. By default, the float area is the float element's <a
    href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
    This specification's ‘<a href="#shape-outside"><code
    class=property>shape-outside</code></a>’ property can be used to define
@@ -348,8 +358,9 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
 
   <div class=example>
    <p> A shape with no extent will create a <a href="#float-area">float
-    area</a> with no extent. The shape below applied to a left float will
-    allow inline content to flow through the float's box.
+    area</a> with no extent. Because wrapping only considers the float area,
+    the shape below applied to a left float will allow inline content to flow
+    through all of the float's box.
 
 
@@ -358,11 +369,27 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
 </code></pre>
   </div>
 
+  <div class=example>
+   <p> A shape-outside can create open areas on both the left and right of a
+    float area. Content still wraps only on one side of a float in this case.
+    In the picture, the shape is rendered in blue, and the content area
+    outside the shape in mauve.
+
+   <p>
+
+   <pre><code class=css>
+      shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);
+</code></pre>
+   <img alt="Wrapping around right side of a left-float float area"
+   class=singleImgExample src="images/float-side-example.png"></div>
+
   <div class=example>
    <p> The following styling creates a shape much smaller than the float's
     content area, and adds a margin-top to the float. In the picture, the
-    shape is rendered in blue, the content area in mauve, and the margin area
-    in yellow. The inline content only wraps around the shape.
+    shape is rendered in blue, the content area outside the shape in mauve,
+    and the margin area of the float box in yellow. The inline content only
+    wraps around the shape, and otherwise overlays the rest of the float
+    margin box.
 
    <pre><code class=html>
 .float-left {
@@ -376,7 +403,8 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
    <img alt="Adding margin-top to a float with a small shape-outside"
    class=singleImgExample src="images/float-margin-example.png">
    <p> The next picture shows a possible result if two of these floats were
-    stacked next to each other.</p>
+    stacked next to each other. Note that the floats are positioned using
+    their margin boxes, not the float area.</p>
    <img alt="Stacking two floats with a small shape-outside"
    class=singleImgExample src="images/stacked-float-example.png"></div>
 
@@ -417,8 +445,8 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
    <dd>
     <ul>
      <li> The first four values represent <strong>x, y, width</strong> and
-      <strong>height</strong>. They define the bounding box of the rectangle.
-      Negative values for width and height are invalid.
+      <strong>height</strong> of the rectangle. Negative values for width and
+      height are invalid.
 
      <li> The last two optional values represent <strong> rx</strong> and
       <strong>ry</strong>. For rounded rectangles they define the x-axis
@@ -434,9 +462,9 @@ <h4 id=supported-basic-shapes><span class=secno>3.2.1. </span>Supported
    <dd>
     <ul>
      <li> The first four values represent the <strong>top, right,
-      bottom</strong> and <strong>left</strong> insets that define the
-      bounding box of the inset rectangle. Negative values for any of these
-      insets are invalid.
+      bottom</strong> and <strong>left</strong> offsets from the content
+      rectangle inward that define the positions of the edges of the inset
+      rectangle. Negative values for any of these insets are invalid.
 
      <li> The last two optional values represent <strong> rx</strong> and
       <strong>ry</strong>. For rounded inset rectangles they define the
@@ -572,9 +600,7 @@ <h3 id=shapes-from-image><span class=secno>3.3. </span>Shapes from Image</h3>
 
    <p>The image defines its <a href="#float-area">float area</a> through the
     ‘<a href="#shape-outside"><code
-    class=property>shape-outside</code></a>’ property and specifies a value
-    of 35 pixels for the ‘<a href="#shape-margin"><code
-    class=property>shape-margin</code></a>’ property.
+    class=property>shape-outside</code></a>’ property.
 
    <pre><code class=html>
 &lt;p&gt;
@@ -585,47 +611,37 @@ <h3 id=shapes-from-image><span class=secno>3.3. </span>Shapes from Image</h3>
 &lt;style&gt;
   #CSSlogo {
     float: left;
-    shape-outside: url("CSS-logo1s.png");
+    shape-outside: attr(src url);
     shape-image-threshold: 0.1;
-    shape-margin: 35px;
   }
 &lt;/style&gt;</code></pre>
 
-   <p>The image needs two references to the image because this example uses
-    the same image
-
-   <ol>
-    <li>to render it
-
-    <li>as a shape defining the <a href="#float-area">float area</a> of the
-     image
-   </ol>
+   <p>The shape-outside property re-uses the url from the src attribute of
+    the img element.
 
    <p>It is perfectly possible to display an image and use a different image
     for its <a href="#float-area">float area</a>.
 
    <p>In the figure below, the alpha-channel threshold is represented by the
-    dotted line around the CSS logo and the 35px shape-margin is visible
-    between that line and the edges of each individual line of the paragraph.
+    dotted line around the CSS logo.
 
    <p>It's then possible to affect where the lines of the paragraph start in
     three ways:
 
    <ol>
-    <li>Changing the value of the ‘<a href="#shape-margin"><code
-     class=property>shape-margin</code></a>’ property
+    <li>Modifying the alpha channel in the image
 
     <li>Changing the value of the ‘<a href="#shape-image-threshold"><code
      class=property>shape-image-threshold</code></a>’ property
 
-    <li>Modifying the alpha channel in the image
+    <li>Changing the value of the ‘<a href="#shape-margin"><code
+     class=property>shape-margin</code></a>’ property (see example 8)
    </ol>
 
    <div class=figure> <img
-    alt="A float shape around an image using its alpha-channel with a 35 pixels shape-margin"
+    alt="A float shape around an image using its alpha-channel"
     src="images/shape-outside-image.png" width="70%">
-    <p class=caption>A float shape around an image using its alpha-channel
-     with a 35 pixels shape-margin
+    <p class=caption>A float shape around an image using its alpha-channel.
    </div>
   </div>
   <!-- End section "Shapes from image" -->
@@ -795,8 +811,9 @@ <h4 id=shape-image-threshold-property><span class=secno>3.4.2. </span>The
    <dt><dfn id=ltalphavaluegt
     title="'shape-image-threshold'!!'&lt;alphavalue&gt;'">&lt;alphavalue&gt;</dfn>
 
-   <dd> A &lt;number&gt; value used to set the threshold used for extracting
-    a shape from an image. Any values outside the range 0.0 (fully
+   <dd> A &lt;number&gt; value that sets the threshold used for extracting a
+    shape from an image. The shape is defined by the pixels whose alpha value
     is greater than the threshold. Any values outside the range 0.0 (fully
     transparent) to 1.0 (fully opaque) will be clamped to this range.
   </dl>
   <!-- End section "The shape-image-threshold property" -->
@@ -808,9 +825,13 @@ <h4 id=shape-margin-property><span class=secno>3.4.3. </span>The ‘<a
 
   <p> The ‘<a href="#shape-margin"><code
    class=property>shape-margin</code></a>’ property adds a margin to a
-   shape-outside. This defines a new shape where every point is the specified
-   distance from the shape-outside. This property takes on positive values
-   only.
+   shape-outside. This defines a new shape that is the smallest contour (in
+   the shrink-wrap sense) that includes all the points that are the
+   shape-margin distance outward in the perpendicular direction from a point
+   on the underlying shape. Note that at points where a perpendicular is not
+   defined (e.g. sharp points) take all points on the circle centered at the
+   point and with a radius of shape-margin. This property takes only
+   non-negative values.
 
   <table class=propdef>
    <tbody>
@@ -861,6 +882,24 @@ <h4 id=shape-margin-property><span class=secno>3.4.3. </span>The ‘<a
     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/shape-margin.png"></div>
+
+  <div class=example>
+   <p>If shape-margin is added to the CSS logo from example 6, the line boxes
+    wrapping around the shape are shortened further.
+
+   <pre><code class=html>
+  #CSSlogo {
+    shape-margin: 35px;
+  }
+</code></pre>
+
+   <div class=figure> <img
+    alt="A float shape around an image using its alpha-channel with a 35 pixels shape-margin"
+    src="images/shape-outside-image-with-margin.png" width="70%">
+    <p class=caption>A float shape around an image using its alpha-channel
+     with a 35 pixels shape-margin
+   </div>
+  </div>
   <!-- End secion "shape-margin property" -->
   <!-- End section "Shapes" -->
 
@@ -1130,6 +1169,8 @@ <h2 class=no-num id=index>Index</h2>
      <li>as conformance class, <a href="#style-sheet"
       title="section 4."><strong>4.</strong></a>
     </ul>
+
+   <li>Wrap, <a href="#wrap" title="section 2."><strong>2.</strong></a>
   </ul>
   <!--end-index-->
 
@@ -1240,6 +1281,9 @@ <h3 class=no-num id=since-june-20th-2013>Since <a
    <li>Change float positioning to be unaffected by shape-outside
 
    <li>Shapes on floats clipped to float's margin box
+
+   <li>Inline content constrained to at least the float's farthest margin
+    edge
   </ul>
 
   <h3 class=no-num id=since-may-3rd-2012>Since <a