OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 #flexbox { | 3 #flexbox { |
4 display: -webkit-flex; | 4 display: -webkit-flex; |
5 -webkit-flex-flow: column-reverse; | 5 -webkit-flex-flow: column-reverse; |
6 width: 200px; | 6 width: 200px; |
7 } | 7 } |
8 .flex-item { | 8 .flex-item { |
9 height: 30px; | 9 height: 30px; |
10 } | 10 } |
11 </style> | 11 </style> |
12 <script> | 12 <script> |
13 function changeChildMargin() | 13 function changeChildMargin() |
14 { | 14 { |
15 document.getElementById("blue").style.margin = "1px"; | 15 document.getElementById("blue").style.margin = "1px"; |
16 if (window.testRunner) | 16 if (window.testRunner) |
17 testRunner.notifyDone(); | 17 testRunner.notifyDone(); |
18 } | 18 } |
19 | 19 |
20 window.onload = function() { | 20 window.onload = function() { |
21 if (window.testRunner) { | 21 if (window.testRunner) { |
22 testRunner.dumpAsText(true); | 22 testRunner.dumpAsTextWithPixelResults(); |
23 testRunner.waitUntilDone(); | 23 testRunner.waitUntilDone(); |
24 testRunner.display(); | 24 testRunner.display(); |
25 } else { | 25 } else { |
26 document.body.appendChild(document.createTextNode( | 26 document.body.appendChild(document.createTextNode( |
27 "This test checks that for flex items that are moved multiple times
during the layout " | 27 "This test checks that for flex items that are moved multiple times
during the layout " |
28 + "only the initial and final positions are repainted. Only the blue
flex item should be repainted " | 28 + "only the initial and final positions are repainted. Only the blue
flex item should be repainted " |
29 + "after changing its position. If the other flex items are repainte
d, this test fails.")); | 29 + "after changing its position. If the other flex items are repainte
d, this test fails.")); |
30 } | 30 } |
31 setTimeout(changeChildMargin, 0); | 31 setTimeout(changeChildMargin, 0); |
32 }; | 32 }; |
33 </script> | 33 </script> |
34 <div id="flexbox"> | 34 <div id="flexbox"> |
35 <div id="blue" class="flex-item" style="background-color: blue;"></div> | 35 <div id="blue" class="flex-item" style="background-color: blue;"></div> |
36 <div id="green" class="flex-item" style="background-color: green;"></div> | 36 <div id="green" class="flex-item" style="background-color: green;"></div> |
37 <div id="yellow" class="flex-item" style="background-color: yellow;"></div> | 37 <div id="yellow" class="flex-item" style="background-color: yellow;"></div> |
38 </div> | 38 </div> |
OLD | NEW |