<!DOCTYPE html>
<div id="container" style="width: 300px; height: 300px; overflow: scroll; outline: 10px solid yellow; will-change: transform">
<!-- This is to trigger the foreground layer -->
<div style="position: absolute; width: 100px; height: 100px; will-change: transform; z-index: -1; background-color: red"></div>
<div style="width: 3000px; height: 3000px">CONTENT</div>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
container.scrollTop = 400;
}
onload = runRepaintAndPixelTest;
</script>