[css-backgrounds] background-clip: content-box with scrollbar #11169
Description
https://drafts.csswg.org/css-backgrounds/#background-clip
border-box
The background is painted within (clipped to) the border box.padding-box
The background is painted within (clipped to) the padding box.content-box
The background is painted within (clipped to) the content box.
This doesn't seem to be the case in any browser:
<!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 |
|---|---|---|
 |
 |
 |
- 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-boxclips to the border box shrunken by the border widths, not to the padding box.background-clip: content-boxclips to the border box shrunken by the border widths and padding, not to the content box.