<script>
if (window.testRunner)
    testRunner.waitUntilDone();
onload = function() {
    // Double rAF to ensure content is painted before scroll.
    requestAnimationFrame(function() {
        requestAnimationFrame(function() {
            document.getElementById('scroller').scrollTop = 200;
            if (window.testRunner)
                window.testRunner.notifyDone();
        })
    });
}
</script>
<style>
#scroller {
    background: gray local content-box;
    border: 10px solid rgba(0, 255, 0, 0.5);
    overflow: scroll;
    padding: 10px;
    width: 200px;
    height: 200px;
    will-change: transform;
}

.spacer {
    height: 300px;
}
</style>
<!-- #scroller has a locally attached background with padding so when it is
    scrolled we can see the background slide up. Doing this on a composited
    element without repainting requires the background to be painted into
    the scrolling contents layer and correctly account for that layer not
    including the border in its bounds. -->
<div id="scroller">
    <div class="spacer"></div>
</div>