- A shape with no extent will create
- a
float area with no extent.
- Because
wrapping only considers the
float area,
- either shape below applied to a float
- will allow inline content
- to flow through all of the float's box.
+ A shape that does not enclose any area
+ still has edges that contribute to the
float area.
+ This inset shape is a vertical line positioned
+ at the midpoint of the reference box.
+ This midpoint edge is used as the edge
+ of the float area for wrapping content.
- shape-outside: inset(50% 50% 50% 50%);
- shape-outside: inset(150% 150% 0% 0%);
-
-
+ shape-outside: inset(0% 50% 0% 50%);
+
+
+ If inset values add up to more than the width,
+ [[css-backgrounds-3#corner-overlap]] rules are used to determine
+ the edges of the rectangle.
+ This shape results in a vertical edge
+ 25% from the left side of the reference box.
+
+ shape-outside: inset(0% 150% 50% 0%);
+
+
+ If the shape is only a horizontal line,
+ then it is an empty float area and has no effect on wrapping.
+ Note that in this example shape-margin must be 0px
+ (otherwise the line would expand to enclose an area).
+
+ shape-outside: inset(50% 0% 0% 50%);
+ shape-margin: 0px;
+
@@ -350,9 +366,11 @@ Supported Shapes
A pair of insets in either dimension
that add up to more than the used dimension
(such as left and right insets of 75% apiece)
- define a shape enclosing no area.
- For this specification,
- this results in an
empty float area.
+ use the [[css-backgrounds-3#corner-overlap]] rules
+ to proportionally reduce the inset effect to 100%.
+ This will result in a shape edge positioned
+ within the reference box
+ (at 50%, in the case of two 75% inset values).
circle() =
@@ -365,9 +383,6 @@ Supported Shapes
r, the radius
of the circle.
Negative values are invalid.
- A radius of zero defines a shape
- enclosing no area,
- which results in an empty float area.
A percentage value here
is resolved from the used width and height
of the reference box as
@@ -393,9 +408,6 @@ Supported Shapes
of the ellipse,
in that order.
Negative values for either radius are invalid.
- If either radius is zero this defines a shape
- enclosing no area,
- which results in an empty float area.
Percentage values here are resolved
against the used width (for the rx value)
and the used height (for the ry value)
@@ -433,13 +445,6 @@ Supported Shapes
by connecting the last vertex
with the first vertex of the list.
- At least three vertices are required
- to define a polygon with an area.
- This means that (for this specification)
- polygons with less than three vertices
- (or with three or more vertices
- arranged to enclose no area)
- result in an empty float area.
path() =
path( [<<'fill-rule'>>,]? <> )
@@ -660,7 +665,7 @@ Shapes from Image
is greater than the 'shape-image-threshold' value.
The absence of any pixels with an alpha value
greater than the specified threshold
- results in an empty float area.
+ results in an empty float area that will not affect wrapping.
If the 'shape-image-threshold' is not specified,
the initial value to be considered is 0.0.
@@ -993,16 +998,17 @@ Expanding a Shape: the 'shape-margin' property
that includes all the points
that are the 'shape-margin' distance outward
in the perpendicular direction
- from a point on the underlying shape.
+ from a point on the underlying shape.
+ This includes any edge or line sections
+ from the underlying shape.
Note that at points where
a perpendicular is not defined
- (e.g. sharp points)
+ (e.g. sharp points or line ends)
take all points
on the circle centered at the point
and with a radius of 'shape-margin'.
This property takes only non-negative values.
-
Name: shape-margin
Value: <>
@@ -1076,6 +1082,8 @@ Expanding a Shape: the 'shape-margin' property
Acknowledgments
This specification is made possible by input from
+ Tab Atkins Jr.,
+ Amelia Bellamy-Royds,
Andrei Bucur,
Alexandru Chiculita,
Boris Chiou,
@@ -1102,6 +1110,7 @@ Acknowledgments
Peter Sorotokin,
Bear Travis,
Eugene Veselov,
+ Brad Werth,
Stephen Zilles
and the CSS Working Group members.
@@ -1117,6 +1126,7 @@ Since March 20th
Added handling of negative margins for margin-box
Added clarifications to shape-margin examples
Added margin=0 case for margin-box shape
+ Changed rules about degenerate shapes to use shape edges
diff --git a/css-shapes-1/issues-cr-20141015.txt b/css-shapes-1/issues-cr-20141015.txt
index 79e7831e79b..5892b39a557 100644
--- a/css-shapes-1/issues-cr-20141015.txt
+++ b/css-shapes-1/issues-cr-20141015.txt
@@ -73,9 +73,9 @@ Response: https://github.com/w3c/csswg-drafts/issues/1271#issuecomment-542407652
Closed: Invalid
----
Issue 11.
-Summary:
-From:
-Comment:
-Response:
-Closed:
+Summary: [css-shapes-1] Degenerate polygons with positive shape-margin
+From: Brad Werth
+Comment: https://github.com/w3c/csswg-drafts/issues/2375
+Response: https://github.com/w3c/csswg-drafts/issues/2375#issuecomment-407819143
+Closed: Accepted