| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="resources/flexbox.css"> |
| <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 resizeFlexItem() { |
| var div = document.getElementById("flex-item-1"); |
| div.classList.add("width"); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }; |
| window.onload = function() { |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.displayAndTrackRepaints(); |
| } else { |
| 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.")); |
| } |
| setTimeout(resizeFlexItem, 0); |
| }; |
| </script> |
| </body></html> |
