| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <style> | |
| 3 div { | |
| 4 position: relative; | |
| 5 height: 100px; | |
| 6 width: 100px; | |
| 7 background: blue; | |
| 8 } | |
| 9 </style> | |
| 10 <body> | |
| 11 <p> | |
| 12 Each section has below has two boxes. | |
| 13 <ul> | |
| 14 <li>Top - runs on main thread.</li> | |
| 15 <li>Bottom - runs on the compositor, unless otherwise specified.</li> | |
| 16 </ul> | |
| 17 The animations should be identical but start at different times. | |
| 18 </p><p> | |
| 19 This test is successful if the boxes are mostly in sync (there might be a small | |
| 20 offset between them). | |
| 21 </p> | |
| 22 <hr> | |
| 23 | |
| 24 Start delay 0s. | |
| 25 <br> | |
| 26 <div class='test0 anim-left'></div> | |
| 27 <div class='test0 anim-transform'></div> | |
| 28 | |
| 29 Start delay 3s. Bottom does not run on compositor. | |
| 30 <br> | |
| 31 <div class='test1 anim-left'></div> | |
| 32 <div class='test1 anim-transform'></div> | |
| 33 | |
| 34 Start delay 6s. | |
| 35 <br> | |
| 36 <div class='test2 anim-left'></div> | |
| 37 <div class='test2 anim-transform'></div> | |
| 38 | |
| 39 Start delay 9s. | |
| 40 <br> | |
| 41 <div class='test3 anim-left'></div> | |
| 42 <div class='test3 anim-transform'></div> | |
| 43 <script> | |
| 44 document.getElementsByClassName('test0 anim-left')[0].animate( | |
| 45 [{left: '0'}, {left: '300px'}], | |
| 46 {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); | |
| 47 | |
| 48 document.getElementsByClassName('test0 anim-transform')[0].animate( | |
| 49 [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}], | |
| 50 {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); | |
| 51 | |
| 52 setTimeout(function() { | |
| 53 document.getElementsByClassName('test1 anim-left')[0].animate( | |
| 54 [{left: '0', easing: 'ease-in'}, {left: '300px'}], | |
| 55 {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); | |
| 56 | |
| 57 document.getElementsByClassName('test1 anim-transform')[0].animate( | |
| 58 [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translate
X(300px)'}], | |
| 59 {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); | |
| 60 }, 3000); | |
| 61 | |
| 62 setTimeout(function() { | |
| 63 document.getElementsByClassName('test2 anim-left')[0].animate( | |
| 64 [{left: '0', easing: 'ease-in'}, {left: '300px'}], | |
| 65 {duration: 2000, easing: 'ease-out'}); | |
| 66 | |
| 67 document.getElementsByClassName('test2 anim-transform')[0].animate( | |
| 68 [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translate
X(300px)'}], | |
| 69 {duration: 2000, easing: 'ease-out'}); | |
| 70 }, 6000); | |
| 71 | |
| 72 setTimeout(function() { | |
| 73 document.getElementsByClassName('test3 anim-left')[0].animate([ | |
| 74 {left: '0'}, | |
| 75 {left: '100px', easing: 'ease-in'}, | |
| 76 {left: '200px'}, | |
| 77 {left: '300px'} | |
| 78 ], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); | |
| 79 | |
| 80 document.getElementsByClassName('test3 anim-transform')[0].animate([ | |
| 81 {transform: 'translateX(0)'}, | |
| 82 {transform: 'translateX(100px)', easing: 'ease-in'}, | |
| 83 {transform: 'translateX(200px)'}, | |
| 84 {transform: 'translateX(300px)'} | |
| 85 ], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); | |
| 86 }, 9000); | |
| 87 </script> | |
| 88 </body> | |
| 89 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 768653002:
Revert "Animations: Pass animation timing function through to compositor." (Closed)
Base URL: svn://svn.chromium.org/blink/trunk