Skip to content

Commit

Permalink
Add a draw() shape syntax, which accepts shape-segments equivalent to
Browse files Browse the repository at this point in the history
SVG path segments.

Fixes #5674
  • Loading branch information
noamr committed Nov 10, 2020
1 parent 8ca0c84 commit 67fcc4a
Showing 1 changed file with 78 additions and 4 deletions.
82 changes: 78 additions & 4 deletions css-shapes-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -449,7 +449,7 @@ Supported Shapes</h3>

</dd>
<dt><dfn>path()</dfn> =
path( [<<'fill-rule'>>,]? <<string>> )
path( [<<'fill-rule'>>,]? <<string>>)
</dt>
<dd dfn-type=value dfn-for="path()">
<ul>
Expand Down Expand Up @@ -480,11 +480,33 @@ Supported Shapes</h3>
if it is not present in the string
for properties that require a closed loop
(such as 'shape-outside' and 'clip-path').
<dt><dfn>draw()</dfn> =
draw( [<<'fill-rule'>>,]? from <<coordinate-pair>>, <<draw-segment>>#])
</dt>
<dd dfn-type=value dfn-for="shape()">
<ul>
<li>
<<'fill-rule'>> -
The filling rule used
to determine the interior
of the path.
See <a href="https://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property
in SVG for details.
Possible values are ''nonzero''
or ''evenodd''.
Default value when omitted is ''nonzero''.
<li>
The <<coordinate-pair>> represents the initial point of the path.
<li>
The sequence of <dfn><<draw-segment>></dfn>s represent segments of an <a href="https://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path</a>.
</ul>
</dl>

The arguments not defined above are defined as follows:

<dl>
<dt><dfn><<coordinate-pair>></dfn> = <<length-percentage>>{2}
<dd>Defines a pair of coordinates x & y.
<dt><dfn><<shape-radius>></dfn> = <<length-percentage>> | closest-side | farthest-side
<dd>
Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.
Expand Down Expand Up @@ -512,10 +534,62 @@ Supported Shapes</h3>
this is the farthest side
in the radius dimension.
</ul>
</dl>
<dt><dfn><<draw-segment>></dfn> = <<move-segment>> | <<line-segment>> | <<perpendicular-line-segment>> |
<<curve-segment>> | <<smooth-segment>> | <<arc-segment>> | close
<dd>
Defines a single path segment. Every path segment corresponds to an SVG path segment.
<dt><dfn><<segment-offset-reference>></dfn> = to | by
<dd>
Represents the reference from which offsets are computed in <<draw-segment>>s.
When ''to'' is present, the coordinates are relative to the top-left origin of the <a>reference box</a>.
Otherwise ''by'' is present, the coordinates are relative to the end position of the previous segment.

Note:
<<percentage>> values are always computed relative to the <a>reference box</a>, regardless of how offsets are computed.
<dd>

<h3 id='basic-shape-computed-values'>
Computed Values of Basic Shapes</h3>
<dt><dfn><<move-segment>></dfn> = move <<segment-offset-reference>> <<coordinate-pair>>
<dd>
Corresponds to a <a href="">moveto</a> segment.
<dt><dfn><<line-segment>></dfn> = line <<segment-offset-reference>> <<coordinate-pair>>
<dd>
Corresponds to a <a href="">lineto</a> segment.
<dt><dfn><<perpendicular-line-segment>></dfn> = [horizontal|vertical] <<segment-offset-reference>> <<length-percentage>>
<dd>
Corresponds to a <a href="">horizontal</a> or <a href="">vertical</a> segment.
<dt><dfn><<curve-segment>></dfn> = curve <<segment-offset-reference>> <<coordinate-pair>> via <<coordinate-pair>>{1,2}
<dd>
Corresponds to a <a href="">quadratic curve</a> segment if one <<coordinate-pair>> is provided,
otherwise corresponds to a <a href="">cubic curve</a> segment.
<dt><dfn><<smooth-segment>></dfn> = smooth <<segment-offset-reference>> <<coordinate-pair>> [via <<coordinate-pair>>]?
<dd>
Corresponds to a <a href="">smooth cubic curve</a> segment if a <<coordinate-pair>> is provided,
otherwise corresponds to a <a href="">smooth quadratic curve</a> segment.
<dt><dfn><<arc-segment>></dfn> = arc <<segment-offset-reference>> <<coordinate-pair>> [[radius <<length-percentage>>{1,2}] && <<arc-large>> && <<arc-sweep>> && <<angle>>?]
<dd>
Corresponds to an <a href="">arc</a> segment, with a given radius, x-axis rotation <<angle>>, <a href="">large</a> and <a href="">sweep</a> flags.
<dt><dfn><<arc-large>></dfn> = [large | small]?
<dd>
If ''small'' is set, the arc's <a href="">large</a> flag is set to 0.
If ''large'' is set, the arc's <a href="">large</a> flag is set to 1.
If it is not set, the automatic value is used.
<dt><dfn><<arc-sweep>></dfn> = [cw | ccw]?
<dd>
If ''ccw'' is set, the arc's <a href="">sweep</a> flag is set to 0.
If ''cw'' is set, the arc's <a href="">sweep</a> flag is set to 1.
If it is not set, the automatic value is used.
<dt>close
<dd>
Corrsepponds to a <a href="">closepath</a> segment.
</dl>
<h3 id='basic-shape-computed-values'>Closing paths</h3>
For ''path()'' and ''draw()'' shapes, the UA must close the derived path
with an implicit closepath command ("z" or "Z")
if it is not present in the path segments or string
for properties that require a closed loop
(such as 'shape-outside' and 'clip-path').

<h3 id='basic-shape-computed-values'>Computed Values of Basic Shapes</h3>

The values in a <<basic-shape>> function are computed as specified, with these exceptions:

Expand Down

0 comments on commit 67fcc4a

Please sign in to comment.