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

Mon, 01 Oct 2012 13:27:44 -0700

author
Alan Stearns <stearns@adobe.com>
date
Mon, 01 Oct 2012 13:27:44 -0700
changeset 6803
9d57ffc5916f
parent 6802
0d2a6c814dd1
child 6804
78521a5a6107

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

css3-exclusions/Exclusions.src.html file | annotate | diff | comparison | revisions
css3-exclusions/Overview.html file | annotate | diff | comparison | revisions
css3-exclusions/images/ellipse-overflow.graffle file | annotate | diff | comparison | revisions
css3-exclusions/images/ellipse-overflow.png file | annotate | diff | comparison | revisions
     1.1 --- a/css3-exclusions/Exclusions.src.html	Mon Oct 01 12:17:55 2012 +0800
     1.2 +++ b/css3-exclusions/Exclusions.src.html	Mon Oct 01 13:27:44 2012 -0700
     1.3 @@ -1487,13 +1487,6 @@
     1.4            <p class="short-desc">Should we revisit the decision to not allow SVG path syntax in the shape-inside, shape-outside properties</p>
     1.5        </div>  
     1.6      </div>
     1.7 -
     1.8 -    <div class="issue-marker" data-bug_id="16460" data-bug_status="NEW">
     1.9 -      <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
    1.10 -      <div class="issue-details">
    1.11 -          <p class="short-desc">Specify overflow behavior for shape-inside</p>
    1.12 -      </div>  
    1.13 -    </div>
    1.14  </div>
    1.15  
    1.16      <p>The values of this property have the following meanings:</p>
    1.17 @@ -1537,6 +1530,30 @@
    1.18          <img alt="Content flowing with and without a shape-inside" src="images/shape-inside-content.png"/>
    1.19          <p class="caption">Effect of shape-inside on inline content.</p>
    1.20      </div>
    1.21 +
    1.22 +    <p>Overflow content can overlap 
    1.23 +        the bottom edge of a shape-inside, 
    1.24 +        and overflow content can be displayed 
    1.25 +        below the content area defined by shape-inside. 
    1.26 +        When content overflows in the block direction, 
    1.27 +        the last line in the content area determines its width(s) 
    1.28 +        by finding the minimum shape width(s) 
    1.29 +        in the remaining area 
    1.30 +        between the line's top edge 
    1.31 +        and the shape's bottom edge. 
    1.32 +        This can result 
    1.33 +        in the line intersecting the shape's bottom edge, 
    1.34 +        or a zero-width line 
    1.35 +        if (for instance) the shape's bottom edge 
    1.36 +        is a continuous curve. 
    1.37 +        Further overflow is laid out 
    1.38 +        as if the shape-inside was set to 'auto'.</p>
    1.39 +
    1.40 +    <div class='figure'>
    1.41 +            <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/>
    1.42 +            <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/>
    1.43 +        <p class="caption">Overflow interacting with the bottom edge of shapes.</p>
    1.44 +    </div>
    1.45          
    1.46      <!-- End section "The shape-inside property" -->
    1.47      <h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4>
     2.1 --- a/css3-exclusions/Overview.html	Mon Oct 01 12:17:55 2012 +0800
     2.2 +++ b/css3-exclusions/Overview.html	Mon Oct 01 13:27:44 2012 -0700
     2.3 @@ -10,10 +10,10 @@
     2.4    <link href="http://purl.org/dc/terms/" rel=schema.DC>
     2.5    <meta content="CSS Exclusions and Shapes Module Level 3" name=DC.title>
     2.6    <meta content=text name=DC.type>
     2.7 -  <meta content=2012-09-13 name=DC.issued>
     2.8 +  <meta content=2012-10-01 name=DC.issued>
     2.9    <meta content="http://dev.w3.org/csswg/css3-exclusions/" name=DC.creator>
    2.10    <meta content=W3C name=DC.publisher>
    2.11 -  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20120913/"
    2.12 +  <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20121001/"
    2.13     name=DC.identifier>
    2.14    <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    2.15     rel=DC.rights>
    2.16 @@ -50,15 +50,14 @@
    2.17  
    2.18     <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
    2.19  
    2.20 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 September
    2.21 -    2012</h2>
    2.22 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 October 2012</h2>
    2.23  
    2.24     <dl>
    2.25      <dt>This version:
    2.26  
    2.27      <dd><a
    2.28       href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
    2.29 -    <!--<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>-->
    2.30 +    <!--<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>-->
    2.31  
    2.32      <dt>Latest version:
    2.33  
    2.34 @@ -1953,14 +1952,6 @@
    2.35        syntax in the shape-inside, shape-outside properties
    2.36      </div>
    2.37     </div>
    2.38 -
    2.39 -   <div class=issue-marker data-bug_id=16460 data-bug_status=NEW> <a
    2.40 -    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
    2.41 -
    2.42 -    <div class=issue-details>
    2.43 -     <p class=short-desc>Specify overflow behavior for shape-inside
    2.44 -    </div>
    2.45 -   </div>
    2.46    </div>
    2.47  
    2.48    <p>The values of this property have the following meanings:
    2.49 @@ -2017,6 +2008,24 @@
    2.50     src="images/shape-inside-content.png">
    2.51     <p class=caption>Effect of shape-inside on inline content.
    2.52    </div>
    2.53 +
    2.54 +  <p>Overflow content can overlap the bottom edge of a shape-inside, and
    2.55 +   overflow content can be displayed below the content area defined by
    2.56 +   shape-inside. When content overflows in the block direction, the last line
    2.57 +   in the content area determines its width(s) by finding the minimum shape
    2.58 +   width(s) in the remaining area between the line's top edge and the shape's
    2.59 +   bottom edge. This can result in the line intersecting the shape's bottom
    2.60 +   edge, or a zero-width line if (for instance) the shape's bottom edge is a
    2.61 +   continuous curve. Further overflow is laid out as if the shape-inside was
    2.62 +   set to ‘<code class=property>auto</code>’.
    2.63 +
    2.64 +  <div class=figure> <img alt="Overflow interacting with rounded rect"
    2.65 +   src="images/rounded-rect-overflow.png"
    2.66 +   style="display:inline-block;vertical-align:top"> <img
    2.67 +   alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png"
    2.68 +   style="display:inline-block;vertical-align:top">
    2.69 +   <p class=caption>Overflow interacting with the bottom edge of shapes.
    2.70 +  </div>
    2.71    <!-- End section "The shape-inside property" -->
    2.72  
    2.73    <h4 id=shape-image-threshold-property><span class=secno>4.4.3. </span>The
     3.1 --- a/css3-exclusions/images/ellipse-overflow.graffle	Mon Oct 01 12:17:55 2012 +0800
     3.2 +++ b/css3-exclusions/images/ellipse-overflow.graffle	Mon Oct 01 13:27:44 2012 -0700
     3.3 @@ -680,7 +680,7 @@
     3.4  		</dict>
     3.5  		<dict>
     3.6  			<key>Bounds</key>
     3.7 -			<string>{{224, 256}, {124.00000762939453, 28.75}}</string>
     3.8 +			<string>{{144.00004291534424, 256}, {287.99996948242188, 28.75}}</string>
     3.9  			<key>Class</key>
    3.10  			<string>ShapedGraphic</string>
    3.11  			<key>FontInfo</key>
    3.12 @@ -838,7 +838,7 @@
    3.13  	<key>MasterSheets</key>
    3.14  	<array/>
    3.15  	<key>ModificationDate</key>
    3.16 -	<string>2012-09-28 00:12:28 +0000</string>
    3.17 +	<string>2012-10-01 20:14:45 +0000</string>
    3.18  	<key>Modifier</key>
    3.19  	<string>Alan Stearns</string>
    3.20  	<key>NotesVisible</key>
     4.1 Binary file css3-exclusions/images/ellipse-overflow.png has changed

mercurial