diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs index 7754e70e087..91b8cdd852e 100644 --- a/css-shapes-2/Overview.bs +++ b/css-shapes-2/Overview.bs @@ -18,6 +18,9 @@ spec:css-masking-1; type: value text: nonzero text: evenodd spec:css-shapes-1; type:property; text:shape-margin +spec:css-shapes-2; type:type; text:<uri> +spec:css-writing-modes-4; type:concept; text:physical +spec:css-writing-modes-4; type:concept; text:"writing mode" </pre> <style type="text/css"> @@ -165,6 +168,79 @@ Supported Shapes</h3> in the path string. For the initial direction follow SVG 1.1. </ul> + <dt> + <pre class=prod> + <dfn>shape()</dfn> = shape( [<<fill-rule>>]? from <<coordinate-pair>>, <<draw-command>>#) + </pre> + <dd dfn-type=value dfn-for="shape()"> + <ul> + <li> + The <<coordinate-pair>> represents the starting point for the first draw-command, + in physical coordinates. + <li> + The sequence of <dfn><<draw-command>></dfn>s represent commands 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><<draw-command>></dfn> = <<move-command>> | <<line-command>> | <<hv-line-command>> | + <<curve-command>> | <<smooth-command>> | <<arc-command>> | close + <dd> + Defines a single draw command, equivalent to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation">SVG draw command</a>. + <dt><dfn><<by-to>></dfn> = by | to + <dd> + Represents the reference from which offsets are computed in <<draw-command>>s. + When ''to'' is present, the coordinates are relative to the top-left origin of the reference box. + Otherwise ''by'' is present, the coordinates are relative to the end position of the previous command. + + Note: + <<percentage>> values are always computed relative to the reference box regardless of how offsets are computed. + <dd> + + <dt><dfn><<move-command>></dfn> = move <<by-to>> <<coordinate-pair>> + <dd> + Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands">moveto</a> command. + <dt><dfn><<line-command>></dfn> = line <<by-to>> <<coordinate-pair>> + <dd> + Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command. + If '''x''' or '''y''' are present instead of a <<length-percentage>>, the line will be horizontal or vertical, respectively. + <dt><dfn><<hv-line-command>></dfn> = [hline | vline] <<by-to>> <<length-percentage>> + <dd> + Corresponds to a horizontal or vertical <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands">lineto</a> command. + <dt><dfn><<curve-command>></dfn> = curve <<by-to>> <<coordinate-pair>> via <<coordinate-pair>>{1,2} + <dd> + Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">quadratic curve</a> command if one <<coordinate-pair>> is provided, + otherwise corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">cubic curve</a> command. + <dt><dfn><<smooth-command>></dfn> = smooth <<by-to>> <<coordinate-pair>> [via <<coordinate-pair>>]? + <dd> + Corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands">smooth cubic curve</a> command if a second <<coordinate-pair>> is provided, + otherwise corresponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands">smooth quadratic curve</a> command. + <dt><dfn><<arc-command>></dfn> = arc [<<by-to>> <<coordinate-pair>> <<arc-radius>> || <<arc-sweep>> || <<arc-large>> || <<angle>>] + <dd> + Corresponds to an <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">arc</a> command. + <dt><dfn><<arc-radius>></dfn> = of <<length-percentage>>{1, 2} + <dd> + Corresponds to the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">radius</a>. + If only one <<length-percentage>> is present, that value will be used for both '''rx''' and '''ry'''. + <dt><dfn><<arc-sweep>></dfn> = [cw | ccw]? + <dd> + If ''ccw'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">sweep</a> flag is set to 0. + If ''cw'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">sweep</a> flag is set to 1. + If it is not set, the automatic value is used. + <dt><dfn><<arc-large>></dfn> = [large | small]? + <dd> + If ''large'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">large</a> flag is set to 1. + If ''small'' is set, the arc's <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">large</a> flag is set to 0. + If it is not set, the automatic value is used. + <dt>close + <dd> + Corrsepponds to a <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand">closepath</a> command. </dl> <div class="issue-marker wrapper">