| <!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> |
