Re: [csswg-drafts] [css-backgrounds] background-clip: border-area (#9456)

The CSS Working Group just discussed `[css-backgrounds] background-clip: border-area`, and agreed to the following:

* `RESOLVED: add background-clip: border-area`

<details><summary>The full IRC log of that discussion</summary>
&lt;emilio> lea: There's a bunch of examples in the thread<br>
&lt;emilio> ... happy to find more if the use cases are not obvious to everybody<br>
&lt;emilio> ... use case is image border but without the border-image scaling, they want a continuous border<br>
&lt;emilio> ... looks like a background image that is clipped only for the border-area<br>
&lt;emilio> ... even though it's not conceptually the best way to do it it seems straight-forward<br>
&lt;emilio> ... proposal is background-clip: border-box area<br>
&lt;emilio> ... which clips to border-box - padding-box<br>
&lt;emilio> ... a better decomposition might be allowing other substraction<br>
&lt;fantasai> +1 to adding border-area to background-clip, this seems straightforward and useful<br>
&lt;emilio> ... but since this is the only use case this seems simpler<br>
&lt;emilio> q+<br>
&lt;astearns> ack emilio<br>
&lt;iank_> q+<br>
&lt;dholbert> emilio (IRC): this is kind of a clip, but an outside clip with an inside clip... seems fine.<br>
&lt;dholbert> emilio (IRC): I'm curious if you've found a use-case with a semitransparent background<br>
&lt;dholbert> lea (IRC): I think it can be conceivable to have a semitransparent bg overlaid on another bg<br>
&lt;dholbert> lea (IRC): or even have it on the outside, and clip the bg to padding-box<br>
&lt;lea> q+ just remembered another design decision to make (clip to border-style or not?)<br>
&lt;dholbert> emilio (IRC): I'm looking at an example with oriol. There's a way to do this if you just draw a solid background on the same element<br>
&lt;lea> q+<br>
&lt;dholbert> emilio (IRC): seems fine to do this. thinking about use-cases for translucent elements.<br>
&lt;dholbert> emilio (IRC): Presumably this wouldn't interfere with border-image?<br>
&lt;dholbert> fantasai (IRC): it'd be underneath<br>
&lt;dholbert> emilio (IRC): seems fine I think<br>
&lt;astearns> ack iank_<br>
&lt;emilio> iank_: What happens with scrollable areas?<br>
&lt;emilio> fantasai: same that happens with backgrounds, it's just a background<br>
&lt;emilio> ... it's clipping out the entire padding area<br>
&lt;schenney> q+<br>
&lt;emilio> ... so you're only drawing the background inside the border area<br>
&lt;astearns> ack lea<br>
&lt;emilio> lea: one thing I'm not sure about is clipping border-box - padding-box<br>
&lt;emilio> ... not sure if we have use cases for other boxes<br>
&lt;emilio> ... someone pointed out that you can use a solid background over the padding box<br>
&lt;astearns> ack dbaron<br>
&lt;emilio> ... but that is not quite general because it might not be a solid color<br>
&lt;emilio> dbaron: I just want to clarify that this is clipping to border-area but it's not affected by border-style<br>
&lt;dbaron> dashed/dotted/double<br>
&lt;emilio> lea: yes, we might get use cases for that but this proposal covers most use cases<br>
&lt;astearns> ack schenney<br>
&lt;emilio> schenney: re. scrolling backgrounds, what about background-position: fixed?w<br>
&lt;emilio> s/w//<br>
&lt;emilio> lea: I think fixed is fixed to the viewport, local is what you are pointing out<br>
&lt;emilio> ... it'd move like it does now<br>
&lt;emilio> schenney: in the local area you don't want to clip necessarily to the padding box<br>
&lt;iank_> q+<br>
&lt;astearns> ack fantasai<br>
&lt;emilio> fantasai: you'd use a repeating pattern and you're painting that on the border box and subtracting the padding box<br>
&lt;astearns> ack iank_<br>
&lt;emilio> schenney: not sure what'd happen, and I know Chromium's background code very well<br>
&lt;emilio> iank_: one thing to consider is interaction with table parts<br>
&lt;emilio> ... what does border collapsing mean with this feature, columns<br>
&lt;emilio> fantasai: I think that falls down from the definitions we already have<br>
&lt;astearns> seems like we should have specified how borders work in all these cases<br>
&lt;emilio> ... there's a border-box we paint into and a padding-box we paint into<br>
&lt;emilio> ... might be that we don't paint anything if they are the same<br>
&lt;emilio> iank_: as long as the spec is clear<br>
&lt;emilio> fantasai: if it's unclear it's unclear about everything that already exists<br>
&lt;emilio> iank_: might be worth mentioning in an out about the expected interaction<br>
&lt;emilio> ... so that they explicitly think about this case<br>
&lt;emilio> florian: even better with test-cases<br>
&lt;emilio> iank_: sure, both!<br>
&lt;emilio> nicole: seems weird to think when a border starts with collapsing<br>
&lt;fantasai> If you paint `background: url(red-swatch) border-box, url(blue-swatch) padding-box`, the part that's red is the part we're proposing to clip to<br>
&lt;emilio> fantasai: I implemented something and got ripped out IIRC, I think right now there's no border<br>
&lt;fantasai> s/no border/no border area for internal table elements/<br>
&lt;emilio> astearns: so proposal is to add a border-area background-clip<br>
&lt;emilio> lea: this is nothing new, it uses existing concepts<br>
&lt;fantasai> s/table elements/table elements in collapsed borders mode/<br>
&lt;emilio> schenney: the result would be the result of background-clip: border-box - background-clip: padding-box right?<br>
&lt;emilio> ... that makes the impl very clear<br>
&lt;emilio> lea: there's an example in IRC from fantasai where that explains<br>
&lt;emilio> RESOLVED: add background-clip: border-area<br>
&lt;lea> 🎉<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9456#issuecomment-1944470563 using your GitHub account


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

Received on Wednesday, 14 February 2024 19:38:08 UTC