<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)
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>