[css-masking] should `mask-border` be `border-box-mask`?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read the CSS Masking specification's mask-borders section and the CSS Borders 4 border-clip section first. Compare their intended behavior with the linked -webkit-mask-box-image demo, then determine whether the naming or specification needs clarification; done means reaching and recording a resolved direction for the open design question.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100