| <!DOCTYPE html> |
| <style> |
| #box { |
| width: 100px; |
| height: 100px; |
| background-color: #00ff00; |
| } |
| </style> |
| |
| <div id="box"></div> |
| |
| <script id="visual_update" type="text/worklet"> |
| registerAnimator("test_animator", class { |
| animate(currentTime, effect) { |
| effect.localTime = 500; |
| } |
| }); |
| </script> |
| |
| <script src="resources/animation-worklet-tests.js"></script> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| runInAnimationWorklet( |
| document.getElementById('visual_update').textContent |
| ).then(()=>{ |
| const keyframes_before = [ |
| { transform: 'translateY(0)' }, |
| { transform: 'translateY(200px)' } |
| ]; |
| const keyframes_after = [ |
| { transform: 'translateX(0)' }, |
| { transform: 'translateX(200px)' } |
| ]; |
| |
| const box = document.getElementById('box'); |
| const effect = new KeyframeEffect(box, keyframes_before, {duration: 1000}); |
| const animation = new WorkletAnimation('test_animator', effect, document.timeline, {}); |
| animation.play(); |
| |
| waitTwoAnimationFrames(_ => { |
| effect.setKeyframes(keyframes_after); |
| waitTwoAnimationFrames(_ => { |
| // TODO(crbug.com/829926): The same issue that is affecting |
| // worklet-animation-cancel test is at play here. Change opacity to force |
| // a new animation frame and commit to get updated result. |
| box.style.opacity = 0.8; |
| waitTwoAnimationFrames(_ => { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| }); |
| }); |
| }); |
| </script> |
