hide-before-reveal.html (1630B)
1 <!DOCTYPE html> 2 <title>View transitions: pagereveal event provides viewTransition</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <meta name="timeout" content="long"> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/page-visibility/resources/window_state_context.js"></script> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script> 11 const params = new URLSearchParams(location.search); 12 13 switch (params.get("mode") || "test") { 14 case "test": 15 promise_test(async t => { 16 const event = await new Promise(resolve => { 17 window.did_reveal = e => { resolve(e) }; 18 const popup = window.open("?mode=old"); 19 t.add_cleanup(() => popup.close()); 20 }); 21 22 assert_equals(event.viewTransition, null, 23 "Transition should have been skipped when document was minimized"); 24 }); 25 break; 26 case "old": 27 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 28 location.replace('?mode=new'); 29 })); 30 break; 31 case "new": 32 const render_blocker = document.createElement("script"); 33 render_blocker.blocking = "render"; 34 render_blocker.src = "/loading/resources/dummy.js?pipe=trickle(d10)"; 35 render_blocker.type = "module"; 36 document.head.append(render_blocker); 37 38 addEventListener('pagereveal', e => window.opener.did_reveal(e)); 39 40 test_driver.minimize_window().then(rect => { 41 render_blocker.remove(); 42 test_driver.set_window_rect(rect); 43 }); 44 break; 45 } 46 </script> 47 <style> 48 @view-transition { 49 navigation: auto; 50 } 51 </style>