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