OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #flexbox { | 5 #flexbox { |
6 display: -webkit-flex; | 6 display: -webkit-flex; |
7 } | 7 } |
8 | 8 |
9 #left { | 9 #left { |
10 -webkit-flex: 1; | 10 -webkit-flex: 1; |
(...skipping 14 matching lines...) Expand all Loading... |
25 | 25 |
26 function setFlex(id, animationPercentage, start, end) { | 26 function setFlex(id, animationPercentage, start, end) { |
27 var flexValue = start + ((end - start) * animationPercentage); | 27 var flexValue = start + ((end - start) * animationPercentage); |
28 document.getElementById(id).style.webkitFlex = flexValue + " 0 0px"; | 28 document.getElementById(id).style.webkitFlex = flexValue + " 0 0px"; |
29 } | 29 } |
30 | 30 |
31 function step(count) { | 31 function step(count) { |
32 var animationPercentage = count ? 1 : .9; | 32 var animationPercentage = count ? 1 : .9; |
33 setFlex("content", animationPercentage, 1, 5); | 33 setFlex("content", animationPercentage, 1, 5); |
34 | 34 |
35 if (!count) | 35 if (!count) { |
36 setTimeout(step.bind(null, 1)); | 36 // FIXME: we need a better way of waiting for layout/repainting to happe
n |
37 else if (window.testRunner) { | 37 setTimeout(step.bind(null, 1), 1); |
| 38 } else if (window.testRunner) { |
38 finishRepaintTest(); | 39 finishRepaintTest(); |
39 } | 40 } |
40 } | 41 } |
41 | 42 |
42 window.testIsAsync = true; | 43 window.testIsAsync = true; |
43 window.onload = runRepaintTest; | 44 window.onload = runRepaintTest; |
44 | 45 |
45 function repaintTest() { | 46 function repaintTest() { |
46 window.startTime = Date.now(); | 47 window.startTime = Date.now(); |
47 setTimeout(step.bind(null, 0), 0); | 48 // FIXME: we need a better way of waiting for layout/repainting to happen |
| 49 setTimeout(step.bind(null, 0), 1); |
48 } | 50 } |
49 </script> | 51 </script> |
50 </head> | 52 </head> |
51 <body> | 53 <body> |
52 <br><br><br><br><br><br> | 54 <br><br><br><br><br><br> |
53 <div id="flexbox"> | 55 <div id="flexbox"> |
54 <div id="left"></div> | 56 <div id="left"></div> |
55 <div id="content"> | 57 <div id="content"> |
56 <p style="margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ae
nean laoreet dolor id urna eleifend aliquet. Nulla vel dolor ipsum. Aliquam ut t
urpis nisl, in vulputate sapien. Cum sociis natoque penatibus et magnis dis part
urient montes, nascetur ridiculus mus. Sed congue magna vitae dolor feugiat vehi
cula. Sed volutpat, tellus vel varius vestibulum, purus quam mollis sapien, in c
ondimentum leo neque sed nulla. Nunc quis porta elit. Pellentesque erat lectus,
ultricies a lobortis id, faucibus id quam.</p> | 58 <p style="margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ae
nean laoreet dolor id urna eleifend aliquet. Nulla vel dolor ipsum. Aliquam ut t
urpis nisl, in vulputate sapien. Cum sociis natoque penatibus et magnis dis part
urient montes, nascetur ridiculus mus. Sed congue magna vitae dolor feugiat vehi
cula. Sed volutpat, tellus vel varius vestibulum, purus quam mollis sapien, in c
ondimentum leo neque sed nulla. Nunc quis porta elit. Pellentesque erat lectus,
ultricies a lobortis id, faucibus id quam.</p> |
57 </div> | 59 </div> |
58 </body> | 60 </body> |
59 </html> | 61 </html> |
OLD | NEW |