transition-in-hidden-page.html (2794B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: Transition in a hidden page</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <meta name="timeout" content="long"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/page-visibility/resources/window_state_context.js"></script> 11 <style> 12 ::view-transition-group(*) { 13 animation-duration: 5s; 14 } 15 </style> 16 <script> 17 promise_test(async t => { 18 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 19 20 const wsc = window_state_context(t); 21 await wsc.minimize(); 22 assert_true(document.hidden); 23 const transition = document.startViewTransition(); 24 await promise_rejects_dom(t, "InvalidStateError", transition.ready); 25 await wsc.restore(); 26 }, "A view transition should be immediately skipped if started when document is hidden"); 27 28 promise_test(async t => { 29 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 30 31 const wsc = window_state_context(t); 32 const transition = document.startViewTransition(async () => { 33 await wsc.minimize(); 34 }); 35 36 let event_fired = false; 37 38 window.addEventListener("visibilitychange", () => { 39 if (document.hidden) 40 event_fired = true; 41 }); 42 43 // Restoring so that the document has an opportunity to present the real 44 // frame and start the transition's animation. 45 await wsc.restore(); 46 47 const [readyResult] = await Promise.allSettled([transition.ready]); 48 assert_true(event_fired, "visibilitychange event should fire before skipping the transition"); 49 await transition.finished; 50 assert_equals(readyResult.status, "rejected"); 51 }, "A view transition should be skipped when a document becomes hidden while processing update callback"); 52 53 promise_test(async t => { 54 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 55 assert_false(document.hidden); 56 const wsc = window_state_context(t); 57 const transition = document.startViewTransition(() => { }); 58 await transition.ready; 59 await new Promise(resolve => requestAnimationFrame(resolve)); 60 await wsc.minimize(); 61 const result = await new Promise(resolve => { 62 transition.finished.then(() => resolve("finished")); 63 t.step_timeout(() => resolve("timeout"), 1000); 64 }); 65 66 assert_equals(result, "finished"); 67 }, "A view transition should be skipped when a document becomes hidden while animating"); 68 </script> 69 </body> 70 </html>