<!DOCTYPE html> <html class=reftest-wait> <title>View transitions: set current time</title> <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <link rel="match" href="set-current-time-transform-ref.html"> <script src="/common/reftest-wait.js"></script> <style> :root { view-transition-name: unset; } #target { width: 100px; height: 100px; background: blue; view-transition-name: target; position: relative; } .left { left: 0; } .right { left: 100px; } html::view-transition-group(*) { animation: unset; } html::view-transition-old(*) { animation: unset; opacity: 0; } @keyframes move { from { transform: translate(500px); } } html::view-transition-new(target) { animation-name: move; animation-duration: 1s; animation-timing-function: linear; animation-play-state: paused; } </style> <div id=target class=left></div> <script> async function runTest() { let transition = document.startViewTransition(() => target.classList.replace("left", "right")); transition.ready.then(() => { requestAnimationFrame(() => requestAnimationFrame(() => { document.getAnimations().forEach((animation) => { animation.currentTime = 500; }); requestAnimationFrame(takeScreenshot); })); }); } onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); </script>