<!DOCTYPE html>
<style>
#container {
    height: 4000px;
    background-color: red;
}
.noScroll {
    overflow-y: hidden;
}
#overlay {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    background-color: green;
}
.hidden {
    display: none;
}
input {
    position: fixed;
    z-index: 10;
    bottom: 0;
}
</style>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="text-based-repaint.js"></script>
<body>
<div id="container">
    <div id="overlay" class="hidden"></div>
</div>
</body>
<script>
function repaintTest() {
    var overlay = document.getElementById("overlay");
    overlay.classList.toggle('hidden');
    document.body.classList.toggle('noScroll');
}

if (window.testRunner)
    window.testRunner.waitUntilDone();

window.scrollTo(0, 4000);
runAfterLayoutAndPaint(runRepaintTest);
</script>