after-transition-reload-no-scroll-anchoring.html (1690B)
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="buffer" style="height: 1000px; width: 200vw;"></div> 7 <div id="frag"></div> 8 <div style="height: 2000px; width: 200vw;"></div> 9 <style> 10 * { 11 overflow-anchor: none; 12 } 13 </style> 14 <script> 15 promise_test(async t => { 16 // Wait for after the load event so that the navigation doesn't get converted 17 // into a replace navigation. 18 await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0)); 19 assert_equals(window.scrollY, 0); 20 await navigation.navigate("#frag").finished; 21 // Scroll down 10px from #frag 22 window.scrollBy(0, 10); 23 let scrollY_frag_plus_10 = window.scrollY; 24 25 let intercept_resolve; 26 let navigate_event; 27 navigation.onnavigate = e => { 28 navigate_event = e; 29 e.intercept({ handler: () => new Promise(r => intercept_resolve = r), 30 scroll: "after-transition" }); 31 }; 32 let reload_promises = navigation.reload(); 33 await reload_promises.committed; 34 35 // removing the <div id="buffer"> should stay in same position. 36 assert_equals(window.scrollY, scrollY_frag_plus_10); 37 buffer.remove(); 38 let scrollY_after_buffer_remove = window.scrollY; 39 assert_equals(scrollY_after_buffer_remove, scrollY_frag_plus_10); 40 41 // Finishing should scroll to #frag, which is 10px up from the current location 42 intercept_resolve(); 43 await reload_promises.finished; 44 assert_equals(window.scrollY, scrollY_after_buffer_remove - 1000 - 10); 45 }, "scroll: after-transition should work on a reload navigation"); 46 </script> 47 </body>