<!DOCTYPE html>
<style>
.scroller {
    border: 2px solid cyan;
    height: 50px;
    overflow: scroll;
    width: 8px;
    margin-left: 10px;
    margin-top: 5px;
    display: inline-block;
}
.selfpainting {
    position: relative;
}
.rounded {
    border-radius: 8px;
}
.composited {
    will-change: transform;
}
.outlined {
    outline: 6px solid yellow;
}
.space {
    width: 1px;
    height: 100px;
}
.clipline {
    display: inline-block;
    width: 0px;
    height: 50px;
    border-left: 1px dotted black;
    margin-left: -12px;
    margin-right: 12px;
    top: -2px;
    position: relative;
}
</style>
Every scrollbar should be cut off at the dotted line.<br>
<div class="scroller"><div class="space"></div></div><div class="clipline"></div>
<div class="scroller selfpainting"><div class="space"></div></div><div class="clipline"></div>
<div class="scroller composited"><div class="space"></div></div><div class="clipline"></div>
<div class="scroller composited outlined"><div class="space"></div></div><div class="clipline"></div>
<div class="rounded scroller"><div class="space"></div></div><div class="clipline"></div>
<div class="rounded scroller selfpainting "><div class="space"></div></div><div class="clipline"></div>
<div class="rounded scroller composited"><div class="space"></div></div><div class="clipline"></div>
<div class="rounded scroller composited outlined"><div class="space"></div></div><div class="clipline"></div>
<script>
if (window.testRunner)
    testRunner.dumpAsTextWithPixelResults();
</script>