| 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 800133004:
Animation: Allow CC per-curve timing functions to be steps timing functions (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@0