Hi, I would like to implement the <basic-shape> functions as part of the ‘clip-path’ property including the reference boxes. Basic shapes functions are: circle(), ellipse(), inset() and polygon().
Examples: clip-path: circle(100px at center); /* draws a circle in the middle of a box */ clip-path: ellipse(closest-side at left 20% top 20px) /* an ellipse at the topish / leftish side of a box with a radius that reaches the closest side of the box */ clip-path: polygon(10% 10%, 50% 90%, 90% 10%) /* a triangle defined by the 3 coordinate pairs */ clip-path: ellipse() border-box; /* an ellipse in the center of a box with radii touching the sides of the reference box (here the border-box of the element) */ clip-path: url(#clipping); /* this is supported already and part of SVG */ Specification: <basic-shape> functions are defined in CSS Shapes Level 1 (currently in CR) [1][2]. The behavior of basic shapes and reference boxes is defined in CSS Masking Level 1 (currently in CR) [3][4]. Bug tracker: I track the implementation status in the bug report #1072894 [5] Support: <basic-shape>s and reference boxes are supported in WebKit with the prefixed clip-path property. Once issues with <clipPath> referencing are fixed, this will replace the unprefixed clip-path property. Blink supports <basic-shape>s but doesn’t support reference boxes yet. There is a general agreement to implement 'clip-path' as specified and content authors are excited about the changes as well. Greetings, Dirk [1] http://dev.w3.org/csswg/css-shapes-1/#typedef-basic-shape [2] http://www.w3.org/TR/2014/CR-css-shapes-1-20140320/ [3] http://dev.w3.org/fxtf/css-masking-1/#the-clip-path [4] http://www.w3.org/TR/2014/CR-css-masking-1-20140826/ [5] https://bugzilla.mozilla.org/show_bug.cgi?id=1072894 _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
