finished-promise-defers-cleanup.html (2164B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>View Transition: cleanup is deferred after finished promise resolves</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 #target { 12 width: 100px; 13 height: 100px; 14 view-transition-name: target; 15 } 16 ::view-transition-group(*) { 17 animation-duration: 0ms; 18 } 19 ::view-transition-old(target) { 20 background-color: rgb(0, 255, 0); 21 } 22 </style> 23 24 <div id=target></div> 25 26 <script> 27 promise_test(async t => { 28 assert_implements(document.startViewTransition, "View Transitions are not supported"); 29 30 const transition = document.startViewTransition(() => {}); 31 32 // When we're ready, we request a new animation frame (in which the vt should be finished), 33 // and we post a task to run right after the update the rendering to verify that the view 34 // transition pseudos are still there. Wait until that happens. 35 await transition.ready.then(async () => { 36 await new Promise(resolve => { 37 requestAnimationFrame(() => { 38 t.step_timeout(() => { 39 assert_equals(getComputedStyle(document.documentElement, "::view-transition").display, "block"); 40 assert_equals(getComputedStyle(document.documentElement, "::view-transition").position, "absolute"); 41 resolve(); 42 }, 0); 43 }); 44 }); 45 }); 46 47 // From here, we expect that the finished promise will run before any new rAFs. 48 let success = true; 49 requestAnimationFrame(() => success = false); 50 51 // When the finished promise runs, verify that everything is cleaned up and that we didn't 52 // have a rAF between the timeout function and here. 53 transition.finished.then(t.step_func(() => { 54 assert_true(success); 55 assert_equals(getComputedStyle(document.documentElement, "::view-transition").display, "inline"); 56 assert_equals(getComputedStyle(document.documentElement, "::view-transition").position, "static"); 57 })); 58 }, "View transition cleanup is deferred until after the frame where `finished` promise resolves"); 59 </script>