| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| div { |
| width: 50px; |
| height: 50px; |
| background: green; |
| } |
| </style> |
| <div id=target1></div> |
| <div id=target2></div> |
| <script> |
| var anim1, anim2; |
| anim1 = target1.animate([ |
| {transform: 'none'}, |
| {transform: 'translateX(500px)'}, |
| ], 1000); |
| |
| function awaitFrame(frameTest) { |
| return new Promise(resolve => { |
| requestAnimationFrame(() => { |
| if (frameTest()) { |
| resolve(); |
| } else { |
| awaitFrame(frameTest).then(resolve); |
| } |
| }); |
| }); |
| } |
| |
| awaitFrame(() => anim1.currentTime > 100).then(() => { |
| requestAnimationFrame(t => { |
| // Testing a regression where scheduling anim1 and anim2 together caused anim2 |
| // to get anim1's start time. |
| anim1.startTime = t - 100; |
| anim2 = target2.animate([ |
| {transform: 'none'}, |
| {transform: 'translateX(500px)'}, |
| ], 200); |
| }); |
| }); |
| |
| async_test(t => { |
| awaitFrame(() => anim2 && anim2.startTime != null).then(() => { |
| t.step(() => assert_not_equals(Math.round(anim1.startTime), Math.round(anim2.startTime))); |
| t.done(); |
| }); |
| }); |
| </script> |
