[css-exclusions] Specify overflow behavior for shape-inside

Author: astearns

css3-exclusions/Exclusions.src.html

@@ -1487,13 +1487,6 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
           <p class="short-desc">Should we revisit the decision to not allow SVG path syntax in the shape-inside, shape-outside properties</p>
       </div>  
     </div>
-
-    <div class="issue-marker" data-bug_id="16460" data-bug_status="NEW">
-      <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
-      <div class="issue-details">
-          <p class="short-desc">Specify overflow behavior for shape-inside</p>
-      </div>  
-    </div>
 </div>
 
     <p>The values of this property have the following meanings:</p>
@@ -1537,6 +1530,30 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
         <img alt="Content flowing with and without a shape-inside" src="images/shape-inside-content.png"/>
         <p class="caption">Effect of shape-inside on inline content.</p>
     </div>
+
+    <p>Overflow content can overlap 
+        the bottom edge of a shape-inside, 
+        and overflow content can be displayed 
+        below the content area defined by shape-inside. 
+        When content overflows in the block direction, 
+        the last line in the content area determines its width(s) 
+        by finding the minimum shape width(s) 
+        in the remaining area 
+        between the line's top edge 
+        and the shape's bottom edge. 
+        This can result 
+        in the line intersecting the shape's bottom edge, 
+        or a zero-width line 
+        if (for instance) the shape's bottom edge 
+        is a continuous curve. 
+        Further overflow is laid out 
+        as if the shape-inside was set to 'auto'.</p>
+
+    <div class='figure'>
+            <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/>
+            <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/>
+        <p class="caption">Overflow interacting with the bottom edge of shapes.</p>
+    </div>
 
     <!-- End section "The shape-inside property" -->
     <h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4>

css3-exclusions/Overview.html

@@ -10,10 +10,10 @@
   <link href="http://purl.org/dc/terms/" rel=schema.DC>
   <meta content="CSS Exclusions and Shapes Module Level 3" name=DC.title>
   <meta content=text name=DC.type>
-  <meta content=2012-09-13 name=DC.issued>
+  <meta content=2012-10-01 name=DC.issued>
   <meta content="http://dev.w3.org/csswg/css3-exclusions/" name=DC.creator>
   <meta content=W3C name=DC.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20120913/"
+  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/"
    name=DC.identifier>
   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=DC.rights>
@@ -50,15 +50,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 13 September
-    2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 October 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-20120913/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120913/</a></dd>-->
+    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/">http://www.w3.org/TR/2012/WD-css3-exclusions-20121001/</a></dd>-->
 
     <dt>Latest version:
 
@@ -1953,14 +1952,6 @@ <h4 id=shape-inside-property><span class=secno>4.4.2. </span>The ‘<a
       syntax in the shape-inside, shape-outside properties
     </div>
    </div>
-
-   <div class=issue-marker data-bug_id=16460 data-bug_status=NEW> <a
-    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
-
-    <div class=issue-details>
-     <p class=short-desc>Specify overflow behavior for shape-inside
-    </div>
-   </div>
   </div>
 
   <p>The values of this property have the following meanings:
@@ -2017,6 +2008,24 @@ <h4 id=shape-inside-property><span class=secno>4.4.2. </span>The ‘<a
    src="images/shape-inside-content.png">
    <p class=caption>Effect of shape-inside on inline content.
   </div>
+
+  <p>Overflow content can overlap the bottom edge of a shape-inside, and
+   overflow content can be displayed below the content area defined by
+   shape-inside. When content overflows in the block direction, the last line
+   in the content area determines its width(s) by finding the minimum shape
+   width(s) in the remaining area between the line's top edge and the shape's
+   bottom edge. This can result in the line intersecting the shape's bottom
+   edge, or a zero-width line if (for instance) the shape's bottom edge is a
+   continuous curve. Further overflow is laid out as if the shape-inside was
+   set to ‘<code class=property>auto</code>’.
+
+  <div class=figure> <img alt="Overflow interacting with rounded rect"
+   src="images/rounded-rect-overflow.png"
+   style="display:inline-block;vertical-align:top"> <img
+   alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png"
+   style="display:inline-block;vertical-align:top">
+   <p class=caption>Overflow interacting with the bottom edge of shapes.
+  </div>
   <!-- End section "The shape-inside property" -->
 
   <h4 id=shape-image-threshold-property><span class=secno>4.4.3. </span>The

css3-exclusions/images/ellipse-overflow.graffle

@@ -680,7 +680,7 @@
 		</dict>
 		<dict>
 			<key>Bounds</key>
-			<string>{{224, 256}, {124.00000762939453, 28.75}}</string>
+			<string>{{144.00004291534424, 256}, {287.99996948242188, 28.75}}</string>
 			<key>Class</key>
 			<string>ShapedGraphic</string>
 			<key>FontInfo</key>
@@ -838,7 +838,7 @@
 	<key>MasterSheets</key>
 	<array/>
 	<key>ModificationDate</key>
-	<string>2012-09-28 00:12:28 +0000</string>
+	<string>2012-10-01 20:14:45 +0000</string>
 	<key>Modifier</key>
 	<string>Alan Stearns</string>
 	<key>NotesVisible</key>