<!DOCTYPE HTML>
<script src="../resources/text-based-repaint.js"></script>
<style>
body {
margin: 0;
}
#vbox {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
#scroller {
/* translucent to prevent compositing */
background-color: rgba(128, 128, 128, 0.5);
flex: 1 1;
overflow: auto;
}
.content {
font: 15px Ahem;
line-height: 25px;
min-height: 30px;
}
</style>
<div id="vbox">
<div id="scroller">
<div class="content" id="dynamic">a</div>
<div class="content">b</div>
<div class="content">c</div>
<div class="content">d</div>
<div class="content">e</div>
<div class="content">f</div>
<div class="content">g</div>
</div>
</div>
<script>
function repaintTest() {
document.getElementById("dynamic").innerHTML = "z";
}
onload = runRepaintTest;
</script>