<style>
#scroller {
    background: gray local content-box;
    border: 10px solid rgba(0, 255, 0, 0.5);
    overflow: scroll;
    padding: 10px;
    width: 200px;
    height: 200px;
}

.child {
    width: 30px;
    height: 30px;
    padding: 10px;
    border: 10px solid green;
    background: green content-box;
}

.spacer {
    height: 300px;
}
</style>
<!-- When the #scroller is composited, its local attached background will be
    drawn into the composited layer as well as the background of its non
    composited .child. This tests that the .child background is drawn
    correctly to its bounds as they do include borders unlike #scroller. -->
<div id="scroller">
    <div class="child"></div>
    <div class="spacer"></div>
</div>