<!DOCTYPE html>
<style>
#flexbox {
    display: -webkit-flex;
    -webkit-flex-flow: column-reverse;
    width: 200px;
}
.flex-item {
    height: 30px;
}
</style>
<script>
function changeChildMargin()
{
    document.getElementById("blue").style.margin = "1px";
    if (window.testRunner)
        testRunner.notifyDone();
}

window.onload = function() {
    if (window.testRunner) {
        testRunner.dumpAsText(true);
        testRunner.waitUntilDone();
        testRunner.displayAndTrackRepaints();
    } else {
        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."));
    }
    setTimeout(changeChildMargin, 0);
};
</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>