[csswg-drafts] [css-backgrounds] `background-clip` with scrollbar (#11169)

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

== [css-backgrounds] `background-clip` with scrollbar ==
https://drafts.csswg.org/css-backgrounds/#background-clip

> - `border-box`
>     The background is painted within (clipped to) the [border box](https://drafts.csswg.org/css-box-4/#border-box). 
> - `padding-box`
>     The background is painted within (clipped to) the [padding box](https://drafts.csswg.org/css-box-4/#padding-box). 
> - `content-box`
>     The background is painted within (clipped to) the [content box](https://drafts.csswg.org/css-box-4/#content-box).

This doesn't seem to be the case in any browser:

```html
<!DOCTYPE html>
<style>
#target::-webkit-scrollbar {
  background: rgba(0, 255, 255, 0.5);
  width: 12px;
  height: 12px;
}
#target {
  scrollbar-color: rgba(0, 255, 255, 0.5) rgba(0, 255, 255, 0.5);
  display: flex;
  overflow: scroll;
  width: 100px;
  height: 100px;
  border: 15px solid rgba(0, 0, 0, 0.5);
  padding: 25px;
  background: repeating-linear-gradient(-45deg, orange 0 10px, transparent 10px 20px) content-box,
              repeating-linear-gradient(45deg, magenta 0 10px, transparent 10px 20px) padding-box;
}
#content {
  flex-grow: 1;
  background: repeating-linear-gradient(45deg, lime 0 10px, transparent 10px 20px);
}
</style>
<div id="target">
  <div id="content"></div>
</div>
```

I'm using `::webkit-scrollbar` and `widget.gtk.overlay-scrollbars.enabled=false` to force classic scrollbars.

| Gecko | Blink | WebKit |
| - | - | - |
| ![](https://github.com/user-attachments/assets/7a2e1449-fd32-4e17-836a-c8138bddf815) | ![image](https://github.com/user-attachments/assets/40662ff0-9581-40ee-8220-d85eaf2c59c9) | ![image](https://github.com/user-attachments/assets/77c5fea9-14c5-4f64-92d5-f7a6e9bbdc13) |

 - Lime: actual content box
 - Orange: `background-clip: content-box`
 - Magenta: `background-clip: padding-box`
 - Semitransparent cyan: scrollbars
- Semitransparent black: borders

So there seems to be interoperability that:
 - `background-clip: padding-box` clips to the border box shrunken by the border widths, not to the padding box.
 - `background-clip: content-box` clips to the border box shrunken by the border widths and padding, not to the content box.

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


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

Received on Friday, 8 November 2024 11:58:15 UTC