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