Add note to shape-margin and its examples

Author: astearns

css-shapes-1/Overview.bs

@@ -8,9 +8,9 @@ Group: csswg
 TR: https://www.w3.org/TR/css-shapes/
 ED: https://drafts.csswg.org/css-shapes/
 Previous Version: http://www.w3.org/TR/2014/CR-css-shapes-1-20140320/
-Editor: Vincent Hardy, Adobe Systems, Inc., vhardy@adobe.com
 Editor: Rossen Atanassov, Microsoft Corporation, ratan@microsoft.com, w3cid 49885
-Editor: Alan Stearns, Adobe Systems, Inc., stearns@adobe.com, w3cid 46659
+Editor: Alan Stearns, Adobe, stearns@adobe.com, w3cid 46659
+Former Editor: Vincent Hardy
 Abstract: CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to <a>wrap</a> around the circle shape instead of the float's bounding box.
 Link Defaults: css2 (property) margin
 </pre>
@@ -1020,13 +1020,22 @@ Expanding a Shape: the 'shape-margin' property</h3>
 			Sets the margin of the shape to the specified value.
 	</dl>
 
+	Note: Adding a shape-margin does NOT allow a float area 
+	to extend outside a float's margin box. 
+	Extra margin may need to be applied 
+	along with shape-margin to avoid clipping.
+
 	<div class="example">
 
-		A 'shape-margin' creating an offset from a polygonal 'shape-outside'. The lighter blue area shows the shape in a 100x100px float, and the darker blue area shows the 10px offset.
+		A 'shape-margin' creating an offset from a polygonal 'shape-outside'. 
+		The lighter blue area shows the shape in a 100x100px float, 
+		and the darker blue area shows the 10px offset.
 
 		<pre>
 			<code>
 				.float {
+				    width: 100px;
+				    height: 100px;
 					shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
 					shape-margin: 10px;
 				}
@@ -1042,10 +1051,16 @@ Expanding a Shape: the 'shape-margin' property</h3>
 		to the CSS logo from example 6,
 		the line boxes <a>wrapping</a>
 		around the shape are shortened further.
+		In case the image’s alpha channel 
+		runs up to the right edge of the image, 
+		some extra margin-right should be applied 
+		to ensure the shape is not clipped by the margin box.
+
 		<pre>
 			<code>
 				#CSSlogo {
 					shape-margin: 35px;
+					margin-right: 35px;
 				}
 			</code>
 		</pre>
@@ -1063,6 +1078,8 @@ Acknowledgments</h2>
 	This specification is made possible by input from
 	Andrei Bucur,
 	Alexandru Chiculita,
+	Boris Chiou,
+	Emilio Cobos Álvarez,
 	Elika Etemad,
 	Arron Eicholz,
 	Sylvain Galineau,
@@ -1071,13 +1088,17 @@ Acknowledgments</h2>
 	Zoltan Horvath,
 	Chris Jones,
 	Bem Jones-Bey,
+	Ian Kilpatrick,
+	Ting-Yu Lin,
+	Eric Meyer,
 	Marcus Mielke,
 	Alex Mogilevsky,
 	Hans Muller,
 	Mihnea Ovidenie,
 	Virgil Palanciuc,
 	Robert Sanderson,
 	Dirk Schulze,
+	Jen Simmons,
 	Peter Sorotokin,
 	Bear Travis,
 	Eugene Veselov,
@@ -1094,6 +1115,7 @@ Since <a href="https://www.w3.org/TR/2014/CR-css-shapes-1-20140320/">March 20th
 		<li>Clarified empty circles and ellipses for <a href="https://github.com/w3c/csswg-drafts/issues/850">issue #850</a></li>
 		<li>Moved path() back from level 2</li>
 		<li>Added handling of negative margins for margin-box</li>
+		<li>Added clarifications to shape-margin examples</li>
 	</ul>
 
 <h3 class="no-num" id="20140211">

css-shapes-1/issues-cr-20141015.txt

@@ -6,8 +6,8 @@ Issue 1.
 Summary:  [css-shapes] Shapes, margin clipping, and misleading examples
 From:     Eric Meyer
 Comment:  https://lists.w3.org/Archives/Public/www-style/2015Oct/0136.html
-Response: 
-Closed:   
+Response: https://lists.w3.org/Archives/Public/www-style/2015Oct/0168.html
+Closed:   Accepted
 ----
 Issue 2.
 Summary:  [css-shapes] Add a note that a circle with a radius of 0 defines an empty area