<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#scroller {
    background: gray local;
    border: 10px solid green;
    overflow: scroll;
    width: 200px;
    height: 200px;
    will-change: transform;
}

#spacer {
    height: 500px;
}
</style>
<!-- Test that the background is correctly repainted when the scrolled content
    grows in size. -->
<div id="scroller">
    <div id="spacer"></div>
    <p>Text content</p>
</div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

onload = runAfterLayoutAndPaint(function() {
    scroller.scrollTop = 500;
    if (window.testRunner)
        testRunner.notifyDone();
});
</script>