Re: [css-masking] clip-path: path()

IIRC no change in CSS Masking is required. Alan Stearns added the path() function to CSS Shapes[1]. And CSS Masking references basic shape from this specification.

Simon, from a specification point of view you should be covered. As Amelia said, don’t forget the fill-rule.

Greetings,
Dirk

[1] https://drafts.csswg.org/css-shapes-2/#basic-shape-functions



On Oct 16, 2015, at 12:37 AM, Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com<mailto:amelia.bellamy.royds@gmail.com>> wrote:

The spec that has already adopted `path(/*SVG path notation*/)` is the CSS Motion Path module.  Wording here: https://drafts.fxtf.org/motion-1/#funcdef-path


path()<https://drafts.fxtf.org/motion-1/#funcdef-path> = path([ <fill-rule><http://dev.w3.org/csswg/css-shapes-1/#typedef-fill-rule> ,]? <string><http://dev.w3.org/csswg/css-values-3/#string-value>)
The <string><http://dev.w3.org/csswg/css-values-3/#string-value> represents an SVG Path data string. The path data string must be conform to the grammar and parsing rules of SVG 1.1 [SVG11]<https://drafts.fxtf.org/motion-1/#biblio-svg11>. The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1 [SVG11]<https://drafts.fxtf.org/motion-1/#biblio-svg11>.
<fill-rule><http://dev.w3.org/csswg/css-shapes-1/#typedef-fill-rule> - The filling rule used to determine the interior of the path. See fill-rule<https://svgwg.org/svg2-draft/painting.html#FillRuleProperty> property in SVG for details. Possible values are nonzero<http://dev.w3.org/fxtf/masking/#valuedef-nonzero> or evenodd<http://dev.w3.org/fxtf/masking/#valuedef-evenodd>. Default value when omitted is nonzero<http://dev.w3.org/fxtf/masking/#valuedef-nonzero>.

I know many authors would be happy to see this adopted for clip-path and shape-outside/-inside.

Amelia

On 15 October 2015 at 15:31, Tab Atkins Jr. <jackalmage@gmail.com<mailto:jackalmage@gmail.com>> wrote:
On Wed, Oct 14, 2015 at 9:10 PM, Simon Fraser <smfr@me.com<mailto:smfr@me.com>> wrote:
> I would like the clip-path: property[1] to actually support bezier paths (as
> a naive interpretation of the property name would have you expect).
>
> The syntax would be a path function with an SVG-style path as a string, for
> example:
>
> clip-path: path("M10 10 H 90 V 90 H 10 L 10 10”);
>
> The units wold be interpreted as CSS pixel units, relative to the origin of
> the geometry box. Paths would be animatable, following the same rules as
> SVG.
>
> I have a work-in-progress patch to add support for this to WebKit[2].
>
> Simon
>
> [1] https://drafts.fxtf.org/masking/#the-clip-path

> [2] https://bugs.webkit.org/show_bug.cgi?id=149996


+1.  We've discussed this already (maybe for other properties; shapes
or motion-path, probably?), and path(<string>) is the simplest way to
get arbitrary paths into CSS.

~TJ