Re: [csswg-drafts] [css-masking] Find a way for clip-path to play nicely with borders and filters (#5881)

> Namely, a [CSS shape](https://drafts.csswg.org/css-shapes/).

Yes, but including `<basic-shape>`, `<shape-box>`, and `<image>`.

The CR of Shapes is here:

https://www.w3.org/TR/css-shapes/#typedef-basic-shape

and it could use `<clip-source>` too from Clip Path:

https://www.w3.org/TR/css-masking-1/#typedef-clip-source

> Interesting, I like the direction. I originally thought you'd need to use CSS variables for them to be the same. I wonder though, why could border-path be a reference value, and not shape-outside or clip-path? (i.e.. why `clip-path: border-path` and not `border-path: clip-path`)? What makes that one the "root" path?

It just felt like `border-path` would mostly subsume using `clip-path` as a separate property, and it wouldn’t really be needed much anymore, unless someone wanted to see a clipped border or something. Thus, people would set the path in `border-path`, and other properties, including `border`, `overflow`, `clip-path`, and `margin` would adapt to intuitive expectations, where `border`, `overflow`, and `margin` would be used in super-familiar ways, but for a shape that isn’t necessarily a (potentially round-cornered) rectangle. So, you wouldn’t need to need to use `clip-path` by itself much anymore, and you wouldn’t want circular references for what the shape is (both properties saying to get the shape from the other one). You would still need `clip-rule` to affect a path that was imported into `border-path`. 
 
For `shape-outside`, I think you still might want some other shape besides the one set by border-path, so that should be where you make that choice. It didn’t seem like much would be gained by going the other way, other than possible circular references again. So, let the path of the border shape be the reference. 

> I also wonder how it should interact with `border-radius`.

I’d say it mostly shouldn’t. You either use the box and it’s sides and (possibly rounded) corners for the shape, or you create some other shape. Suppose you have `border-path: padding-box inset(12px)` and `border-radius: 30px`. Then your shape would still be a rounded rectangle, with 18px corner radii. 


-- 
GitHub Notification of comment by bradkemper
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5881#issuecomment-1176614560 using your GitHub account


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

Received on Wednesday, 6 July 2022 19:37:21 UTC