after-transition-intercept-handler-modifies.html (1567B)
1 <!doctype html> 2 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <div id="main" style="height: 200vh; width: 200vw;"></div> 7 <script> 8 promise_test(async t => { 9 // Wait for after the load event so that the navigation doesn't get converted 10 // into a replace navigation. 11 await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0)); 12 assert_equals(window.scrollY, 0); 13 window.scrollTo(0, 100); 14 assert_equals(window.scrollY, 100); 15 navigation.onnavigate = e => e.intercept( 16 { scroll: "after-transition", 17 handler: async () => { 18 if (e.navigationType == "push") { 19 // Inserting this <div> should scroll *after* the scroll position 20 // is saved, so that it doesn't break scroll restoration when going 21 // back. 22 let div = document.createElement("div"); 23 div.style = "height: 1000px; width: 1000px;"; 24 document.body.insertBefore(div, main); 25 } 26 } 27 } 28 ); 29 await navigation.navigate("?go").finished; 30 // Ensure the layout changes and scroll position update from the first 31 // navigation are processed before navigating back, otherwise the restored 32 // scroll postion can be overwritten. 33 await new Promise(resolve => requestAnimationFrame(resolve)); 34 await navigation.back().finished; 35 assert_equals(window.scrollY, 100); 36 }, "scroll: state should be saved before intercept handlers run"); 37 </script> 38 </body>