adjustments-in-scroll-event-handler.tentative.html (1759B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 7 <style> 8 body { margin: 0 } 9 .content { 10 height: 200px; 11 background: lightblue; 12 } 13 .spacer { 14 height: 300vh; 15 } 16 </style> 17 <div class="content"></div> 18 <div class="content" style="background: green"></div> 19 <div class="spacer"></div> 20 <script> 21 const anchor = document.querySelectorAll(".content")[1]; 22 23 const t = async_test("Scroll adjustments happen even if it's triggered from scroll event listeners"); 24 window.addEventListener("scroll", t.step_func(function() { 25 // Forcibly flush layout, this will flush the pending the node insertion. 26 let scrollPosition = window.scrollY; 27 28 requestAnimationFrame(t.step_func(function() { 29 requestAnimationFrame(t.step_func(function() { 30 assert_equals(window.scrollY, 400); 31 t.done(); 32 })); 33 })); 34 }), { once: true }); 35 36 window.onload = t.step_func(function() { 37 requestAnimationFrame(t.step_func(function() { 38 // Scroll to the anchor node in a requestAnimationFrame callback so that 39 // it queues a scroll event which will be fired in the next event loop. 40 anchor.scrollIntoView({ behavior: "instant" }); 41 42 // Then in a setTimeout callback insert an element just right before the 43 // anchor node, it will run before firing the scroll event. 44 t.step_timeout(function() { 45 const content = document.createElement("div"); 46 content.classList.add("content"); 47 content.style.background = "red"; 48 anchor.before(content); 49 }, 0); 50 })); 51 }); 52 53 </script>