negative-playback-rate.html (1531B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <!-- TODO update link --> 6 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Scoped view transition with negative playback rate</title> 9 </head> 10 <style> 11 #target { 12 background-color: blue; 13 height: 100px; 14 width: 100px; 15 z-index: 1; 16 } 17 </style> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="/dom/events/scrolling/scroll_support.js"></script> 21 <body> 22 <div id="target"> 23 </div> 24 </body> 25 <script> 26 promise_test(async () => { 27 await waitForNextFrame(); 28 const target = document.getElementById('target'); 29 const vt = target.startViewTransition(() => { 30 target.style = 'background-color: teal'; 31 }); 32 await vt.ready; 33 const promises = []; 34 document.getAnimations().forEach(a => { 35 a.playbackRate = -1; 36 promises.push(a.ready); 37 }); 38 let finished = false; 39 vt.finished.then(() => { 40 finished = true; 41 }); 42 await Promise.all(promises); 43 await waitForNextFrame(); 44 assert_equals(document.getAnimations.length, 0, 45 'Animations have finished running on the next frame'); 46 await waitForNextFrame(); 47 await waitForNextFrame(); 48 assert_true(finished, 49 'transition completes once animations are no longer running'); 50 }, 'View transition duration affected by playback rate'); 51 </script> 52 </html>