Skip to content

Commit

Permalink
initial take on allowing degenerate shapes
Browse files Browse the repository at this point in the history
  • Loading branch information
astearns committed Oct 25, 2019
1 parent 28c12c2 commit d7d8239
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 38 deletions.
76 changes: 43 additions & 33 deletions css-shapes-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -153,9 +153,9 @@ Relation to the box model and float behavior</h2>
A reduced <a>float area</a> may have no effect
on some line boxes
that would normally be affected by the float.
An <dfn>empty float area</dfn>
(where the shape encloses no area)
has no effect on line boxes.
If a shape does not enclose any area,
the shape’s edges are still used
to define the <a>float area</a>.

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

<div class="example">

A shape with no extent will create
a <a>float area</a> with no extent.
Because <a>wrapping</a> only considers the <a>float area</a>,
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 <a>float area</a>.

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.
<pre><code>
shape-outside: inset(50% 50% 50% 50%);
shape-outside: inset(150% 150% 0% 0%);
</code>
</pre>
shape-outside: inset(0% 50% 0% 50%);
</code></pre>

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.
<pre><code>
shape-outside: inset(0% 150% 50% 0%);
</code></pre>

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).
<pre><code>
shape-outside: inset(50% 0% 0% 50%);
shape-margin: 0px;
</code></pre>
</div>

<div class="example">
Expand Down Expand Up @@ -350,9 +366,11 @@ Supported Shapes</h3>
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 <a>empty float area</a>.
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).

</dd>
<dt><dfn>circle()</dfn> =
Expand All @@ -365,9 +383,6 @@ Supported Shapes</h3>
<strong>r</strong>, the radius
of the circle.
Negative values are invalid.
A radius of zero defines a shape
enclosing no area,
which results in an <a>empty float area</a>.
A percentage value here
is resolved from the used width and height
of the <a>reference box</a> as <br>
Expand All @@ -393,9 +408,6 @@ Supported Shapes</h3>
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 <a>empty float area</a>.
Percentage values here are resolved
against the used width (for the rx value)
and the used height (for the ry value)
Expand Down Expand Up @@ -433,13 +445,6 @@ Supported Shapes</h3>
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 <a>empty float area</a>.
</dd>
<dt><dfn>path()</dfn> =
path( [<<'fill-rule'>>,]? <<string>> )
Expand Down Expand Up @@ -660,7 +665,7 @@ Shapes from Image</h2>
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 <a>empty float area</a>.
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.

Expand Down Expand Up @@ -993,16 +998,17 @@ Expanding a Shape: the 'shape-margin' property</h3>
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.


<pre class='propdef'>
Name: shape-margin
Value: <<length-percentage>>
Expand Down Expand Up @@ -1076,6 +1082,8 @@ Expanding a Shape: the 'shape-margin' property</h3>
Acknowledgments</h2>

This specification is made possible by input from
Tab Atkins Jr.,
Amelia Bellamy-Royds,
Andrei Bucur,
Alexandru Chiculita,
Boris Chiou,
Expand All @@ -1102,6 +1110,7 @@ Acknowledgments</h2>
Peter Sorotokin,
Bear Travis,
Eugene Veselov,
Brad Werth,
Stephen Zilles
and the CSS Working Group members.

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

<h3 class="no-num" id="20140211">
Expand Down
10 changes: 5 additions & 5 deletions css-shapes-1/issues-cr-20141015.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit d7d8239

Please sign in to comment.