helper_scroll_anchoring_smooth_scroll.html (1762B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, minimum-scale=1.0"> 4 <title>Tests scroll anchoring interaction with smooth visual scrolling.</title> 5 <script src="apz_test_utils.js"></script> 6 <script src="apz_test_native_event_utils.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <style> 9 body { margin: 0 } 10 #target > div { 11 height: 500px; 12 } 13 </style> 14 <div id="target"></div> 15 <div class="spacer" style="height: 200vh"></div> 16 <script> 17 const utils = SpecialPowers.DOMWindowUtils; 18 const targetElement = document.getElementById("target"); 19 20 async function test() { 21 const destY = window.scrollMaxY; 22 ok(destY > 0, "Should have some scroll range"); 23 24 // Scroll to the bottom of the page. 25 window.scrollTo(0, destY); 26 27 is(window.scrollY, window.scrollMaxY, "Should be at the bottom"); 28 29 // Register a TransformEnd observer so we can tell when the smooth scroll 30 // animation stops. 31 let transformEndPromise = promiseTransformEnd(); 32 33 // Trigger smooth scrolling, and quickly insert an element which takes 34 // space into the DOM. 35 // 36 // It is important that it actually takes space so as to trigger scroll 37 // anchoring. 38 targetElement.scrollIntoView({ behavior: "smooth" }); 39 targetElement.appendChild(document.createElement("div")); 40 41 // Wait for the TransformEnd. 42 await transformEndPromise; 43 44 // Give scroll offsets a chance to sync. 45 await promiseApzFlushedRepaints(); 46 47 // Check that the async smooth scroll finished. 48 is(window.scrollY, 0, "Should've completed the smooth scroll without getting interrupted by scroll anchoring"); 49 } 50 51 waitUntilApzStable() 52 .then(test) 53 .then(subtestDone, subtestFailed); 54 </script>