[csswg-drafts] [css-shapes][css-masking] add rect() and/or square() as shapes for clip-path (#6843)

jsnkuhn has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes][css-masking] add rect() and/or square() as shapes for clip-path ==
If in the future `clip-path` could be used for image spriting (see #6807) a rect() and or square() shape function would be useful. Currently the options for this would be polygon(), inset() or path(). Path() and polygon() require a bit too much repetition of values to be developer friendly here. And inset() could be useful depending on the image being sprited but is dependent on the size of the image and is just not as straight forward as rect() or square() would be for this purpose. Taking cues from circle() and ellipse() we could just us values for size(s) and positioning in square()/rect(). This would also bring the shapes mostly in line with what is available in SVG.

```css
clip-path: square(32px at 32px 64px);

// path and polygon for comparison
clip-path: path("m32,64 h32 v32 h-32z"); 
clip-path: polygon(32px 64px, 64px 64px, 64px 96px, 32px 96px);
// inset() would be dependent on the image size

clip-path: rect(64px 128px at 10% 20%);
```
https://drafts.fxtf.org/css-masking-1/#the-clip-path

FYI, current spec does have a mention of "Postponed rectangle() to level 2" but nothing is as of yet writing out regarding it:
https://drafts.csswg.org/css-shapes/#20130620

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6843 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 29 November 2021 22:33:49 UTC