<!DOCTYPE html>
<script src="../resources/text-based-repaint.js" type="text/javascript"></script>
<style>
#scroller {
    background: gray local;
    overflow: scroll;
    width: 200px;
    height: 200px;
    will-change: transform;
}

#spacer {
    height: 500px;
}
</style>
<!-- Passes if text in scroller is visible and scroller background is blue. -->
<div id="scroller">
    <div id="spacer"></div>
    <p>Text content</p>
</div>
<script>
window.testIsAsync = true;

function repaintTest() {
    scroller.scrollTop = 500;
    scroller.style.backgroundColor = 'blue';
    finishRepaintTest();
}

onload = runRepaintAndPixelTest;
</script>