OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 div { |
| 6 width: 50px; |
| 7 height: 50px; |
| 8 background: green; |
| 9 } |
| 10 </style> |
| 11 <div id=target1></div> |
| 12 <div id=target2></div> |
| 13 <script> |
| 14 var anim1, anim2; |
| 15 anim1 = target1.animate([ |
| 16 {transform: 'none'}, |
| 17 {transform: 'translateX(500px)'}, |
| 18 ], 1000); |
| 19 |
| 20 function awaitFrame(frameTest) { |
| 21 return new Promise(resolve => { |
| 22 requestAnimationFrame(() => { |
| 23 if (frameTest()) { |
| 24 resolve(); |
| 25 } else { |
| 26 awaitFrame(frameTest).then(resolve); |
| 27 } |
| 28 }); |
| 29 }); |
| 30 } |
| 31 |
| 32 awaitFrame(() => anim1.currentTime > 100).then(() => { |
| 33 requestAnimationFrame(t => { |
| 34 // Testing a regression where scheduling anim1 and anim2 together caused ani
m2 |
| 35 // to get anim1's start time. |
| 36 anim1.startTime = t - 100; |
| 37 anim2 = target2.animate([ |
| 38 {transform: 'none'}, |
| 39 {transform: 'translateX(500px)'}, |
| 40 ], 200); |
| 41 }); |
| 42 }); |
| 43 |
| 44 async_test(t => { |
| 45 awaitFrame(() => anim2 && anim2.startTime != null).then(() => { |
| 46 t.step(() => assert_not_equals(Math.round(anim1.startTime), Math.round(anim2
.startTime))); |
| 47 t.done(); |
| 48 }); |
| 49 }); |
| 50 </script> |
OLD | NEW |