Skip to content

Commit d7d8239

Browse files
committed
initial take on allowing degenerate shapes
1 parent 28c12c2 commit d7d8239

File tree

2 files changed

+48
-38
lines changed

2 files changed

+48
-38
lines changed

css-shapes-1/Overview.bs

+43-33
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,9 @@ Relation to the box model and float behavior</h2>
153153
A reduced <a>float area</a> may have no effect
154154
on some line boxes
155155
that would normally be affected by the float.
156-
An <dfn>empty float area</dfn>
157-
(where the shape encloses no area)
158-
has no effect on line boxes.
156+
If a shape does not enclose any area,
157+
the shape’s edges are still used
158+
to define the <a>float area</a>.
159159

160160
A <a>float area</a> defined by a shape
161161
may reduce the normal <a>float area</a> on all sides,
@@ -223,18 +223,34 @@ Relation to the box model and float behavior</h2>
223223

224224
<div class="example">
225225

226-
A shape with no extent will create
227-
a <a>float area</a> with no extent.
228-
Because <a>wrapping</a> only considers the <a>float area</a>,
229-
either shape below applied to a float
230-
will allow inline content
231-
to flow through all of the float's box.
226+
A shape that does not enclose any area
227+
still has edges that contribute to the <a>float area</a>.
232228

229+
This inset shape is a vertical line positioned
230+
at the midpoint of the reference box.
231+
This midpoint edge is used as the edge
232+
of the float area for wrapping content.
233233
<pre><code>
234-
shape-outside: inset(50% 50% 50% 50%);
235-
shape-outside: inset(150% 150% 0% 0%);
236-
</code>
237-
</pre>
234+
shape-outside: inset(0% 50% 0% 50%);
235+
</code></pre>
236+
237+
If inset values add up to more than the width,
238+
[[css-backgrounds-3#corner-overlap]] rules are used to determine
239+
the edges of the rectangle.
240+
This shape results in a vertical edge
241+
25% from the left side of the reference box.
242+
<pre><code>
243+
shape-outside: inset(0% 150% 50% 0%);
244+
</code></pre>
245+
246+
If the shape is only a horizontal line,
247+
then it is an empty float area and has no effect on wrapping.
248+
Note that in this example shape-margin must be 0px
249+
(otherwise the line would expand to enclose an area).
250+
<pre><code>
251+
shape-outside: inset(50% 0% 0% 50%);
252+
shape-margin: 0px;
253+
</code></pre>
238254
</div>
239255

240256
<div class="example">
@@ -350,9 +366,11 @@ Supported Shapes</h3>
350366
A pair of insets in either dimension
351367
that add up to more than the used dimension
352368
(such as left and right insets of 75% apiece)
353-
define a shape enclosing no area.
354-
For this specification,
355-
this results in an <a>empty float area</a>.
369+
use the [[css-backgrounds-3#corner-overlap]] rules
370+
to proportionally reduce the inset effect to 100%.
371+
This will result in a shape edge positioned
372+
within the reference box
373+
(at 50%, in the case of two 75% inset values).
356374

357375
</dd>
358376
<dt><dfn>circle()</dfn> =
@@ -365,9 +383,6 @@ Supported Shapes</h3>
365383
<strong>r</strong>, the radius
366384
of the circle.
367385
Negative values are invalid.
368-
A radius of zero defines a shape
369-
enclosing no area,
370-
which results in an <a>empty float area</a>.
371386
A percentage value here
372387
is resolved from the used width and height
373388
of the <a>reference box</a> as <br>
@@ -393,9 +408,6 @@ Supported Shapes</h3>
393408
of the ellipse,
394409
in that order.
395410
Negative values for either radius are invalid.
396-
If either radius is zero this defines a shape
397-
enclosing no area,
398-
which results in an <a>empty float area</a>.
399411
Percentage values here are resolved
400412
against the used width (for the rx value)
401413
and the used height (for the ry value)
@@ -433,13 +445,6 @@ Supported Shapes</h3>
433445
by connecting the last vertex
434446
with the first vertex of the list.
435447

436-
At least three vertices are required
437-
to define a polygon with an area.
438-
This means that (for this specification)
439-
polygons with less than three vertices
440-
(or with three or more vertices
441-
arranged to enclose no area)
442-
result in an <a>empty float area</a>.
443448
</dd>
444449
<dt><dfn>path()</dfn> =
445450
path( [<<'fill-rule'>>,]? <<string>> )
@@ -660,7 +665,7 @@ Shapes from Image</h2>
660665
is greater than the 'shape-image-threshold' value.
661666
The absence of any pixels with an alpha value
662667
greater than the specified threshold
663-
results in an <a>empty float area</a>.
668+
results in an empty float area that will not affect wrapping.
664669
If the 'shape-image-threshold' is not specified,
665670
the initial value to be considered is 0.0.
666671

@@ -993,16 +998,17 @@ Expanding a Shape: the 'shape-margin' property</h3>
993998
that includes all the points
994999
that are the 'shape-margin' distance outward
9951000
in the perpendicular direction
996-
from a point on the underlying shape.
1001+
from a point on the underlying shape.
1002+
This includes any edge or line sections
1003+
from the underlying shape.
9971004
Note that at points where
9981005
a perpendicular is not defined
999-
(e.g. sharp points)
1006+
(e.g. sharp points or line ends)
10001007
take all points
10011008
on the circle centered at the point
10021009
and with a radius of 'shape-margin'.
10031010
This property takes only non-negative values.
10041011

1005-
10061012
<pre class='propdef'>
10071013
Name: shape-margin
10081014
Value: <<length-percentage>>
@@ -1076,6 +1082,8 @@ Expanding a Shape: the 'shape-margin' property</h3>
10761082
Acknowledgments</h2>
10771083

10781084
This specification is made possible by input from
1085+
Tab Atkins Jr.,
1086+
Amelia Bellamy-Royds,
10791087
Andrei Bucur,
10801088
Alexandru Chiculita,
10811089
Boris Chiou,
@@ -1102,6 +1110,7 @@ Acknowledgments</h2>
11021110
Peter Sorotokin,
11031111
Bear Travis,
11041112
Eugene Veselov,
1113+
Brad Werth,
11051114
Stephen Zilles
11061115
and the CSS Working Group members.
11071116

@@ -1117,6 +1126,7 @@ Since <a href="https://www.w3.org/TR/2014/CR-css-shapes-1-20140320/">March 20th
11171126
<li>Added handling of negative margins for margin-box</li>
11181127
<li>Added clarifications to shape-margin examples</li>
11191128
<li>Added margin=0 case for margin-box shape</li>
1129+
<li>Changed rules about degenerate shapes to use shape edges</li>
11201130
</ul>
11211131

11221132
<h3 class="no-num" id="20140211">

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ Response: https://github.com/w3c/csswg-drafts/issues/1271#issuecomment-542407652
7373
Closed: Invalid
7474
----
7575
Issue 11.
76-
Summary:
77-
From:
78-
Comment:
79-
Response:
80-
Closed:
76+
Summary: [css-shapes-1] Degenerate polygons with positive shape-margin
77+
From: Brad Werth
78+
Comment: https://github.com/w3c/csswg-drafts/issues/2375
79+
Response: https://github.com/w3c/csswg-drafts/issues/2375#issuecomment-407819143
80+
Closed: Accepted
8181

0 commit comments

Comments
 (0)