| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="../../../css3/flexbox/resources/flexbox.css"> |
| <script src="../resources/text-based-repaint.js"></script> |
| <style> |
| body { |
| margin: 0; |
| } |
| .flexbox { |
| background: #333; |
| } |
| .flex-item { |
| height: 50px; |
| margin: 20px; |
| background: #eee; |
| width: 10px; |
| } |
| |
| .width { |
| width:50px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="flexbox"> |
| <div id="flex-item-1" class="flex-item"></div> |
| <div class="flex-item"></div> |
| <div class="flex-item"></div> |
| </div> |
| <script> |
| function repaintTest() { |
| var div = document.getElementById("flex-item-1"); |
| div.classList.add("width"); |
| } |
| window.onload = function() { |
| if (!window.testRunner) { |
| document.body.appendChild(document.createTextNode( |
| "Tests to make sure that when changing the size of one flex item changes the " |
| + "location of another flex item, we properly repaint. The repaint rect should " |
| + "include the three flex items.")); |
| } |
| window.enablePixelTesting = true; |
| runRepaintTest(); |
| }; |
| </script> |
| </body></html> |
