paused-animation-at-end.html (1303B)
1 <!DOCTYPE html> 2 <title>View transitions: pause animation and set current time to the end</title> 3 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 6 <script src="/dom/events/scrolling/scroll_support.js"></script> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 :root { view-transition-name: unset; } 12 #target { 13 width: 100px; 14 height: 100px; 15 view-transition-name: target; 16 } 17 .one { 18 background: blue; 19 } 20 .two { 21 background: green; 22 } 23 </style> 24 25 <div id=target class=one></div> 26 27 <script> 28 promise_test(async (t) => { 29 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 30 await waitForCompositorReady(); 31 return new Promise((resolve, reject) => { 32 let transition = document.startViewTransition(() => { 33 target.classList.replace("one", "two"); 34 }); 35 36 transition.finished.then(() => reject("transition unexpectedly finished")); 37 transition.ready.then(() => { 38 document.getAnimations().forEach((animation) => { 39 animation.pause(); 40 animation.currentTime = 1000; 41 }); 42 step_timeout(resolve, 500); 43 }); 44 }); 45 }, "view transition is not over if animations are paused"); 46 </script>