<!DOCTYPE html>
<script src="../resources/text-based-repaint.js"></script>
<style>
#flexbox {
display: flex;
flex-flow: column-reverse;
width: 200px;
}
.flex-item {
height: 30px;
}
</style>
<script>
function repaintTest()
{
document.getElementById("blue").style.margin = "1px";
}
window.onload = function() {
if (!window.testRunner) {
document.body.appendChild(document.createTextNode(
"This test checks that for flex items that are moved multiple times during the layout "
+ "only the initial and final positions are repainted. Only the blue flex item should be repainted "
+ "after changing its position. If the other flex items are repainted, this test fails."));
}
window.enablePixelTesting = true;
runRepaintTest();
};
</script>
<div id="flexbox">
<div id="blue" class="flex-item" style="background-color: blue;"></div>
<div id="green" class="flex-item" style="background-color: green;"></div>
<div id="yellow" class="flex-item" style="background-color: yellow;"></div>
</div>