| <!DOCTYPE html> |
| <meta name="viewport" content="width=device-width"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="author" title="Mozilla" href="https://mozilla.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> |
| <style> |
| body { margin: 0 } |
| .content { |
| height: 200px; |
| background: lightblue; |
| } |
| .spacer { |
| height: 300vh; |
| } |
| </style> |
| <div class="content"></div> |
| <div class="content" style="background: green"></div> |
| <div class="spacer"></div> |
| <script> |
| const anchor = document.querySelectorAll(".content")[1]; |
| |
| const t = async_test("Scroll adjustments happen even if it's triggered from scroll event listeners"); |
| window.addEventListener("scroll", t.step_func(function() { |
| // Forcibly flush layout, this will flush the pending the node insertion. |
| let scrollPosition = window.scrollY; |
| |
| requestAnimationFrame(t.step_func(function() { |
| requestAnimationFrame(t.step_func(function() { |
| assert_equals(window.scrollY, 400); |
| t.done(); |
| })); |
| })); |
| }), { once: true }); |
| |
| window.onload = t.step_func(function() { |
| requestAnimationFrame(t.step_func(function() { |
| // Scroll to the anchor node in a requestAnimationFrame callback so that |
| // it queues a scroll event which will be fired in the next event loop. |
| anchor.scrollIntoView({ behavior: "instant" }); |
| |
| // Then in a setTimeout callback insert an element just right before the |
| // anchor node, it will run before firing the scroll event. |
| t.step_timeout(function() { |
| const content = document.createElement("div"); |
| content.classList.add("content"); |
| content.style.background = "red"; |
| anchor.before(content); |
| }, 0); |
| })); |
| }); |
| |
| </script> |
