view-transition-waituntil-animation-manipulation.html (1716B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: waitUntil allows animation manipulation</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 <link rel="match" href="view-transition-waituntil-animation-manipulation-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 :root { view-transition-name: none } 10 11 #target { 12 width: 100px; 13 height: 100px; 14 background: green; 15 view-transition-name: target; 16 } 17 18 #target.after { 19 background: red; 20 } 21 22 ::view-transition { background: lightpink; } 23 ::view-transition-group(*) { 24 animation-duration: 1ms; 25 } 26 </style> 27 28 <div id=target></div> 29 30 <script> 31 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 32 failIfNot(ViewTransition.prototype.waitUntil, "ViewTransition.waitUntil is not available"); 33 34 async function runTest() { 35 const transition = document.startViewTransition(() => target.classList.add("after")); 36 transition.waitUntil(new Promise(() => {})); 37 38 transition.ready.then(async () => { 39 // Let the animation run to the end. 40 const animations = document.getAnimations(); 41 animations.forEach(a => { 42 a.currentTime = 1; 43 }); 44 45 // Wait a few frames. 46 await new Promise(requestAnimationFrame); 47 await new Promise(requestAnimationFrame); 48 await new Promise(requestAnimationFrame); 49 50 // Now, rewind the animation and take a screenshot. 51 requestAnimationFrame(() => { 52 animations.forEach(a => { 53 a.play(); 54 a.pause(); 55 a.currentTime = 0; 56 }); 57 takeScreenshot(); 58 }); 59 }); 60 } 61 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 62 </script>