[css-shapes] remove furthest margin constraint

Author: astearns

css-shapes/Overview.html

@@ -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-07-19 name=dcterms.date>
+  <meta content=2013-09-10 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,8 @@
 
    <h1 id=css-shapes-module>CSS Shapes Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 July 2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 September
+    2013</h2>
 
    <dl>
     <dt>This version:
@@ -100,10 +101,11 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 July 2013</h2>
      …</var></kbd>” (<a
      href="http://lists.w3.org/Archives/Public/www-style/"
      rel=discussion>archives</a>)
-     
-     <dt>Test Suite:</dt>
-     <dd><a href="http://test.csswg.org/suites/css3-shapes/nightly-unstable/">http://test.csswg.org/suites/css3-regions/nightly-unstable/</a></dd>
-     
+
+    <dt>Test Suite:
+
+    <dd><a
+     href="http://test.csswg.org/suites/css3-shapes/nightly-unstable/">http://test.csswg.org/suites/css3-regions/nightly-unstable/</a>
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
@@ -293,12 +295,8 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
   <p> When a shape is used to define a <a href="#float-area">float area</a>,
    the shape is clipped to the float's margin box. In other words, a shape
    can only ever reduce a <a href="#float-area">float area</a>, not increase
-   it. When a shape reduces a <a href="#float-area">float area</a> such that
-   a line box that would be normally be affected by the float would not
-   intersect the <a href="#float-area">float area</a> at all, the available
-   space for the line box is constrained by the farthest margin edge of the
-   float. For a left float this would be the left margin edge, and for a
-   right float this would be the right margin edge.
+   it. A reduced float area may have no effect on some line boxes that would
+   normally be affected by the float.
 
   <div class=example>
    <p> In the following example the left and right floating <code
@@ -351,8 +349,7 @@ <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, but the line boxes
-    will be constrained by the float's left margin edge.
+    allow inline content to flow through the float's box.
 
    <p>
 
@@ -380,7 +377,7 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>3.1.
    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>
-   <img alt="Stacking two floats to show far margin edge constraint"
+   <img alt="Stacking two floats with a small shape-outside"
    class=singleImgExample src="images/stacked-float-example.png"></div>
 
   <h3 id=basic-shapes-from-svg-syntax><span class=secno>3.2. </span>Basic
@@ -1030,20 +1027,19 @@ <h3 class=no-num id=normative-references>Normative references</h3>
    <dt id=CSS3VAL>[CSS3VAL]
 
    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
-    href="http://www.w3.org/TR/2013/CR-css3-values-20130404/"><cite>CSS
-    Values and Units Module Level 3.</cite></a> 4 April 2013. W3C Candidate
+    href="http://www.w3.org/TR/2013/CR-css3-values-20130730/"><cite>CSS
+    Values and Units Module Level 3.</cite></a> 30 July 2013. W3C Candidate
     Recommendation. (Work in progress.) URL: <a
-    href="http://www.w3.org/TR/2013/CR-css3-values-20130404/">http://www.w3.org/TR/2013/CR-css3-values-20130404/</a>
+    href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a>
    </dd>
    <!---->
 
    <dt id=HTML5>[HTML5]
 
-   <dd>Ian Hickson. <a
-    href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
-    17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
-    <a
-    href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
+   <dd>Robin Berjon; et al. <a
+    href="http://www.w3.org/TR/2013/CR-html5-20130806/"><cite>HTML5.</cite></a>
+    6 August 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a
+    href="http://www.w3.org/TR/2013/CR-html5-20130806/">http://www.w3.org/TR/2013/CR-html5-20130806/</a>
    </dd>
    <!---->
 
@@ -1244,9 +1240,6 @@ <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

css-shapes/Overview.src.html

@@ -171,20 +171,9 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
       a shape can only ever reduce 
       a <span>float area</span>, 
       not increase it. 
-      When a shape reduces 
-      a <span>float area</span> such that 
-      a line box that would be normally 
-      be affected by the float 
-      would not intersect 
-      the <span>float area</span> at all, 
-      the available space 
-      for the line box is constrained 
-      by the farthest margin edge 
-      of the float. 
-      For a left float this would be 
-      the left margin edge, 
-      and for a right float this would be 
-      the right margin edge.
+      A reduced float area may have no effect 
+      on some line boxes 
+      that would normally be affected by the float. 
     </p> 
 
       <div class="example">
@@ -245,10 +234,7 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
           a <span>float area</span> with no extent. 
           The shape below applied to a left float 
           will allow inline content 
-          to flow through the float's box, 
-          but the line boxes 
-          will be constrained 
-          by the float's left margin edge.
+          to flow through the float's box.
         <p>
 <pre><code class="css">
       shape-outside: rectangle(0,0,0%,0%);
@@ -273,7 +259,7 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
         <p>
           The next picture shows a possible result if two of these floats were stacked next to each other.
         </p>
-        <img class="singleImgExample" src="images/stacked-float-example.png" alt="Stacking two floats to show far margin edge constraint"/>
+        <img class="singleImgExample" src="images/stacked-float-example.png" alt="Stacking two floats with a small shape-outside"/>
       </div>
 
       <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
@@ -781,7 +767,6 @@ <h3 class="no-num" >Since <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-201
           <li>Change initial value of shape-image-threshold to 0.0</li>
           <li>Change float positioning to be unaffected by shape-outside</li>
           <li>Shapes on floats clipped to float's margin box</li>
-          <li>Inline content constrained to at least the float's farthest margin edge</li>
       </ul>
 
       <h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>

css-shapes/examples/float-margin-example.html

@@ -40,6 +40,6 @@
   <div class="margin-area"></div>
   <div class="content-area"></div>
   <div class="shape"></div>
-  <p>Inline content will flow through the margins of a float with shape-outside. If the shape-outside does not fill the content box, inline content will flow through those areas as well. Line lengths are only constrained by the shape and the far margin edge.</p>
+  <p>Inline content can flow through the margins of a float with shape-outside. If the shape-outside does not fill the content box, inline content will flow through those areas as well. Line lengths are only constrained by the portion of the shape that fits in the margin box.</p>
 </body>
 </html>

css-shapes/examples/stacked-float-example.html

@@ -6,15 +6,15 @@
   <!-- lots of hacks to get this to work with the old shape positioning -->
   <style>
     body {
-      width: 300px;
+      width: 250px;
     }
     .shape {
       float: left;
       width: 100px;
-      height: 120px;
+      height: 50px;
       background-color: lightblue;
-      -webkit-shape-outside: polygon(1px 0px, 1px 70px, 50px 120px, 0px 120px);
-      -webkit-clip-path: polygon(0px 0px, 0px 70px, 50px 120px, 0px 120px);
+      -webkit-shape-outside: polygon(0px 0px, 50px 50px, 0px 50px);
+      -webkit-clip-path: polygon(0px 0px, 50px 50px, 0px 50px);
     }
     p {
       margin: 0;
@@ -35,12 +35,19 @@
       z-index: -1;
     }
     .first {
-      -webkit-shape-outside: polygon(1px 0px, 1px 70px, 50px 119px, 100px 120px, 0px 120px);
-      -webkit-clip-path: polygon(0px 0px, 0px 70px, 50px 120px, 0px 120px);      
+      height: 120px;
+      -webkit-shape-outside: polygon(0px 70px, 50px 120px, 0px 120px);
+      -webkit-clip-path: polygon(0px 70px, 50px 120px, 0px 120px);      
     }
     .second {
       left: 108px;
     }
+    .second.margin-area {
+      top: 28px;
+    }
+    .second.content-area {
+      top: 48px;
+    }
   </style>
 </head>
 <body lang="en">
@@ -49,7 +56,6 @@
   <div class="second margin-area"></div>
   <div class="second content-area"></div>
   <div class="first shape"></div>
-  <div class="shape"></div>
-  <p>When floats with shapes are stacked, the far margin edge constraint keeps inline content from interacting with more than one float area per side.</p>
+  <p>When floats with shapes are stacked, the margin box is used for the stacking. Other inline content is only constrained by the shapes themselves and will run through the open content area and <div class="shape"></div> margins outside the shape.</p>
 </body>
 </html>