window-resize-aborts-transition-before-ready.html (2731B)
1 <!DOCTYPE html> 2 <title> 3 View transitions: Resizing viewport before animating rejects the ready promise. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:bokan@chromium.org"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 13 <script> 14 function pollForResize(win) { 15 const initial_width = win.innerWidth; 16 const initial_height = win.innerHeight; 17 return new Promise(resolve => { 18 const interval_id = win.setInterval(() => { 19 if (win.innerWidth != initial_width || win.innerHeight != initial_height) { 20 win.clearInterval(interval_id); 21 resolve(); 22 } 23 }, 100); 24 }); 25 } 26 27 promise_test(async t => { 28 assert_implements( 29 document.startViewTransition, 'Missing document.startViewTransition'); 30 31 let popup_win; 32 33 // Open a popup window that we'll use to start a transition 34 await test_driver.bless('Open a popup in a new window', () => { 35 popup_win = window.open('about:blank', 'popup', 'width=300,height=300'); 36 t.add_cleanup(() => popup_win.close()); 37 }); 38 39 // Wait until the popup window is loaded to make sure the document we start 40 // the view transitions is the right one. 41 if (!popup_win.document || popup_win.document.readyState != 'complete') { 42 await new Promise(resolve => { 43 popup_win.addEventListener('load', resolve, { once: true }); 44 }); 45 } 46 47 if (popup_win.document.visibilityState == "hidden") { 48 await new Promise((resolve) => { 49 popup_win.document.addEventListener("visibilitychange", resolve, { once: true }); 50 }); 51 } 52 53 // Resize the window while the update callback is running (i.e. before 54 // capturing the new state). 55 let transition = popup_win.document.startViewTransition(async () => { 56 // resizeTo is asynchonous so we want to wait until it takes effect 57 // before proceeding to capture the new state. Needs to poll for a 58 // changed size since rAFs are currently blocked (and thus, so is 59 // `resize` event). 60 const popup_resize = pollForResize(popup_win); 61 popup_win.resizeTo(popup_win.innerWidth/2, popup_win.innerHeight/2); 62 await popup_resize; 63 }); 64 65 // Since the window was resized before capturing the new state, the 66 // transition must be skipped and the ready promise rejected. 67 68 let did_finish = false; 69 transition.finished.then(() => { did_finish = true; }); 70 71 await promise_rejects_dom(t, 'InvalidStateError', popup_win.DOMException, 72 transition.ready, 'Resize must must reject `ready`.'); 73 74 assert_true(did_finish, 'Transition must be skipped.'); 75 }); 76 </script>