navigation-api-view-transition.tentative.html (1804B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Navigation API + ViewTransition trigger a soft navigation.</title> 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="resources/soft-navigation-helper.js"></script> 11 </head> 12 <body> 13 <main id=main> 14 <div> 15 <a id=link href="foobar.html">Click me!</a> 16 </div> 17 </main> 18 <script> 19 let key; 20 window.onload = async () => { 21 // Wait for after the load event so that the navigation doesn't get 22 // converted into a replace navigation. 23 await new Promise(r => step_timeout(r, 0)); 24 25 const navigate_callback = e => { 26 e.intercept({ 27 async handler() { 28 const lcp_promise = new Promise(resolve => { 29 (new PerformanceObserver(list => resolve())).observe( 30 {type: 'largest-contentful-paint'}); 31 }); 32 const transition = document.startViewTransition(async () => { 33 const main = document.getElementById('main'); 34 main.innerHTML = '<img id="image" src="/images/blue.png?' + 35 Math.random() + '">'; 36 const img = document.getElementById("image"); 37 }); 38 await transition.updateCallbackDone; 39 await lcp_promise; 40 } 41 }); 42 timestamps[counter]["eventEnd"] = performance.now(); 43 }; 44 45 const link = document.getElementById("link"); 46 testNavigationApi("Navigation API interception handler + " + 47 "startViewTransition properly detects soft navigations", 48 navigate_callback, link); 49 }; 50 </script> 51 </body> 52 </html>