Intent to ship: support "basic shapes" for the CSS 'clip-path' property

[Jonathan Watt]

Summary:

Currently clip-path clipping requires a reference to an SVG
<clipPath> element which can be cumbersome for authors. We
intend to allow clip-path to specify basic shapes (circle,
ellipse, polygon) inline, for example:

style="clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"

Bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=1247229

Spec links:

https://drafts.fxtf.org/css-masking-1/#the-clip-path
https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape
https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes

Status in other browsers:

Chrome and Safari have supported basic shapes for at least a
couple of years (using the '-webkit-clip-path' property).

Live demo (animates between yellow star and red heart):

http://codepen.io/thebabydino/pen/RWvaZW

Note: the pref to enable this feature has only just been
flipped on mozilla-inbound so if you test with Nightly instead
of your own build you'll need to flip the pref
layout.css.clip-path-shapes.enabled to true yourself.

Jonathan

[Patrick Brosset]

For info, the following devtools bug has received some discussion related
to an "in-page" shapes editor:
https://bugzilla.mozilla.org/show_bug.cgi?id=1242029

> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform
>