set-current-time-transform-ref.html (866B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: set current time</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 @keyframes move { 9 from { 10 transform: translate(500px); 11 } 12 } 13 #target { 14 width: 100px; 15 height: 100px; 16 background: blue; 17 view-transition-name: target; 18 position: relative; 19 left: 100px; 20 21 animation-name: move; 22 animation-duration: 1s; 23 animation-timing-function: linear; 24 animation-play-state: paused; 25 } 26 </style> 27 28 <div id=target></div> 29 30 <script> 31 function runReference() { 32 document.getAnimations().forEach((animation) => { 33 animation.currentTime = 500; 34 }); 35 takeScreenshot(); 36 } 37 onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference)); 38 </script>