Skip to content

Commit 48a86bb

Browse files
astearnsastearns
committed
[css-exclusions] fix shape-inside overflow
1 parent 4f427e4 commit 48a86bb

6 files changed

Lines changed: 96 additions & 228 deletions

File tree

‎css-exclusions/Exclusions.src.html‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1660,34 +1660,16 @@ <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
16601660
<p class="caption">Effect of shape-inside on inline content.</p>
16611661
</div>
16621662

1663-
<p>Overflow content can overlap
1664-
the after edge of a wrapping area,
1665-
and overflow content can be displayed
1666-
below that edge.
1667-
When content overflows in the block direction,
1668-
the last line in the wrapping area determines its width(s)
1669-
by finding the minimum shape width(s)
1670-
in the remaining wrapping area
1671-
between the line's before edge
1672-
and the after edge of the wrapping area.
1673-
This can result
1674-
in the line intersecting the wrapping area's after edge,
1675-
or a zero-width line
1676-
if (for instance) the wrapping area's after edge
1677-
is a continuous curve.
1678-
In degenerate cases,
1679-
there may be no content
1680-
that fits inside the wrapping area.
1681-
Further overflow is laid out
1682-
below the after edge
1683-
of the wrapping area
1684-
as if the wrapping context
1685-
did not apply.</p>
1663+
<p>Overflow content avoids
1664+
the exclusion area added
1665+
by 'shape-inside' and 'shape-padding'
1666+
(as well as any other exclusion areas
1667+
in the element's wrapping context).</p>
16861668

16871669
<div class='figure'>
16881670
<img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/>
16891671
<img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/>
1690-
<p class="caption">Overflow interacting with the after edge of wrapping contexts defined by 'shape-inside' and 'shape-padding'.</p>
1672+
<p class="caption">Overflow interacting with exclusion areas defined by 'shape-inside' and 'shape-padding'.</p>
16911673
</div>
16921674

16931675
<!-- End section "The shape-inside property" -->
@@ -1975,6 +1957,7 @@ <h2 class="no-num" id="change-log">Change Log</h2>
19751957

19761958
<h3 class="no-num" >Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
19771959
<ul>
1960+
<li>Changed shape-inside overflow diagrams to show exclusion behavior</li>
19781961
<li>Changed shape-inside to contribute to the wrapping context</li>
19791962
<li>Defined exclusion edges relative to wrapping content's writing mode</li>
19801963
<li>Made use of start, end, before and after consistent</li>

‎css-exclusions/Overview.html‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2112,24 +2112,19 @@ <h4 id=shape-inside-property><span class=secno>4.4.2. </span>The ‘<a
21122112
<p class=caption>Effect of shape-inside on inline content.
21132113
</div>
21142114

2115-
<p>Overflow content can overlap the after edge of a wrapping area, and
2116-
overflow content can be displayed below that edge. When content overflows
2117-
in the block direction, the last line in the wrapping area determines its
2118-
width(s) by finding the minimum shape width(s) in the remaining wrapping
2119-
area between the line's before edge and the after edge of the wrapping
2120-
area. This can result in the line intersecting the wrapping area's after
2121-
edge, or a zero-width line if (for instance) the wrapping area's after
2122-
edge is a continuous curve. In degenerate cases, there may be no content
2123-
that fits inside the wrapping area. Further overflow is laid out below the
2124-
after edge of the wrapping area as if the wrapping context did not apply.
2115+
<p>Overflow content avoids the exclusion area added by ‘<a
2116+
href="#shape-inside"><code class=property>shape-inside</code></a>’ and
2117+
‘<a href="#shape-padding"><code
2118+
class=property>shape-padding</code></a>’ (as well as any other exclusion
2119+
areas in the element's wrapping context).
21252120

21262121
<div class=figure> <img alt="Overflow interacting with rounded rect"
21272122
src="images/rounded-rect-overflow.png"
21282123
style="display:inline-block;vertical-align:top"> <img
21292124
alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png"
21302125
style="display:inline-block;vertical-align:top">
2131-
<p class=caption>Overflow interacting with the after edge of wrapping
2132-
contexts defined by ‘<a href="#shape-inside"><code
2126+
<p class=caption>Overflow interacting with exclusion areas defined by
2127+
‘<a href="#shape-inside"><code
21332128
class=property>shape-inside</code></a>’ and ‘<a
21342129
href="#shape-padding"><code class=property>shape-padding</code></a>’.
21352130
</div>
@@ -2927,6 +2922,8 @@ <h3 class=no-num id=since-may-3rd-2012>Since <a
29272922
2012</a></h3>
29282923

29292924
<ul>
2925+
<li>Changed shape-inside overflow diagrams to show exclusion behavior
2926+
29302927
<li>Changed shape-inside to contribute to the wrapping context
29312928

29322929
<li>Defined exclusion edges relative to wrapping content's writing mode

‎css-exclusions/images/ellipse-overflow.graffle‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -51,43 +51,6 @@
5151
<integer>8</integer>
5252
<key>GraphicsList</key>
5353
<array>
54-
<dict>
55-
<key>Bounds</key>
56-
<string>{{144.00001239776611, 75}, {288, 216}}</string>
57-
<key>Class</key>
58-
<string>ShapedGraphic</string>
59-
<key>ID</key>
60-
<integer>1</integer>
61-
<key>Shape</key>
62-
<string>Rectangle</string>
63-
<key>Style</key>
64-
<dict>
65-
<key>fill</key>
66-
<dict>
67-
<key>Draws</key>
68-
<string>NO</string>
69-
</dict>
70-
<key>shadow</key>
71-
<dict>
72-
<key>Draws</key>
73-
<string>NO</string>
74-
</dict>
75-
<key>stroke</key>
76-
<dict>
77-
<key>Color</key>
78-
<dict>
79-
<key>b</key>
80-
<string>0.336538</string>
81-
<key>g</key>
82-
<string>0.692383</string>
83-
<key>r</key>
84-
<string>0.371516</string>
85-
</dict>
86-
<key>Width</key>
87-
<real>2</real>
88-
</dict>
89-
</dict>
90-
</dict>
9154
<dict>
9255
<key>Bounds</key>
9356
<string>{{169.19999408721924, 95.925125122070312}, {237.59999084472656, 166.64974975585938}}</string>
@@ -614,7 +577,7 @@
614577
</dict>
615578
<dict>
616579
<key>Bounds</key>
617-
<string>{{144.00004291534424, 284.75}, {288, 28.75}}</string>
580+
<string>{{144.00004291534424, 320.75}, {288, 28.75}}</string>
618581
<key>Class</key>
619582
<string>ShapedGraphic</string>
620583
<key>FontInfo</key>
@@ -726,7 +689,7 @@
726689
</dict>
727690
<dict>
728691
<key>Bounds</key>
729-
<string>{{144.00004291534424, 256}, {287.99996948242188, 28.75}}</string>
692+
<string>{{144.00004291534424, 292}, {287.99996948242188, 28.75}}</string>
730693
<key>Class</key>
731694
<string>ShapedGraphic</string>
732695
<key>FontInfo</key>
@@ -836,6 +799,43 @@
836799
<key>TextRelativeArea</key>
837800
<string>{{0.10000000000000001, 0.14999999999999999}, {0.80000000000000004, 0.69999999999999996}}</string>
838801
</dict>
802+
<dict>
803+
<key>Bounds</key>
804+
<string>{{144.00001239776611, 75}, {288, 216}}</string>
805+
<key>Class</key>
806+
<string>ShapedGraphic</string>
807+
<key>ID</key>
808+
<integer>1</integer>
809+
<key>Shape</key>
810+
<string>Rectangle</string>
811+
<key>Style</key>
812+
<dict>
813+
<key>fill</key>
814+
<dict>
815+
<key>Draws</key>
816+
<string>NO</string>
817+
</dict>
818+
<key>shadow</key>
819+
<dict>
820+
<key>Draws</key>
821+
<string>NO</string>
822+
</dict>
823+
<key>stroke</key>
824+
<dict>
825+
<key>Color</key>
826+
<dict>
827+
<key>b</key>
828+
<string>0.336538</string>
829+
<key>g</key>
830+
<string>0.692383</string>
831+
<key>r</key>
832+
<string>0.371516</string>
833+
</dict>
834+
<key>Width</key>
835+
<real>2</real>
836+
</dict>
837+
</dict>
838+
</dict>
839839
</array>
840840
<key>GridInfo</key>
841841
<dict/>
@@ -884,7 +884,7 @@
884884
<key>MasterSheets</key>
885885
<array/>
886886
<key>ModificationDate</key>
887-
<string>2012-10-19 18:39:21 +0000</string>
887+
<string>2013-04-04 22:49:02 +0000</string>
888888
<key>Modifier</key>
889889
<string>Alan Stearns</string>
890890
<key>NotesVisible</key>

‎css-exclusions/images/ellipse-overflow.png‎

241 Bytes
Loading

0 commit comments

Comments
 (0)