[csswg-drafts] [css-masking] should `mask-border` be `border-box-mask`? (#9352)

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

== [css-masking] should `mask-border` be `border-box-mask`? ==
Was playing around with `mask-border` and it isn't what I expected it would be. It seems that the `mask-border` goes through the border _and_ the background layer behind it. I was expecting a property called `mask-border` to just mask the border itself.

https://drafts.fxtf.org/css-masking/#mask-borders

I'm aware that this demo is using the `-webkit-mask-box-image` implementation and it might just be an issue with that?:
https://codepen.io/jsnkuhn/pen/ExGZWqM

There is a similar property spec-ed called `border-clip` (css-borders-4) that appears to only clip the border as I would expect.
https://drafts.csswg.org/css-borders-4/#border-clip

It seems that the intention of what's spec-ed for `mask-border` is to use the 9-sliced image to make sure the corners of the mask don't stretch and distort. This is definitely useful but maybe the -webkit `border-box-mask` name is better for this. 

Or possibly something like:
`mask-image-source-slice`
`mask-image-slice`

FYI, css masking is on Interop 2023 (https://wpt.fyi/interop-2023) not entirely sure if `mask-border` is included though. I'm guessing unpre-fixing the webkit syntax might be on vendors radar even if there aren't any tests for `mask-border`

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


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

Received on Wednesday, 13 September 2023 12:32:48 UTC