helper_scroll_anchoring_smooth_scroll.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

<title>Tests scroll anchoring interaction with smooth visual scrolling.</title>

<script src="apz_test_utils.js"></script>

<script src="apz_test_native_event_utils.js"></script>

<script src="/tests/SimpleTest/paint_listener.js"></script>

<style>

  body { margin: 0 }

  #target > div {

    height: 500px;

</style>

<div id="target"></div>

<div class="spacer" style="height: 200vh"></div>

<script>

  const utils = SpecialPowers.DOMWindowUtils;

  const targetElement = document.getElementById("target");

  async function test() {

    const destY = window.scrollMaxY;

    ok(destY > 0, "Should have some scroll range");

    // Scroll to the bottom of the page.

    window.scrollTo(0, destY);

    is(window.scrollY, window.scrollMaxY, "Should be at the bottom");

    // Register a TransformEnd observer so we can tell when the smooth scroll

    // animation stops.

    let transformEndPromise = promiseTransformEnd();

    // Trigger smooth scrolling, and quickly insert an element which takes

    // space into the DOM.

//

    // It is important that it actually takes space so as to trigger scroll

    // anchoring.

    targetElement.scrollIntoView({ behavior: "smooth" });

    targetElement.appendChild(document.createElement("div"));

    // Wait for the TransformEnd.

    await transformEndPromise;

    // Give scroll offsets a chance to sync.

    await promiseApzFlushedRepaints();

    // Check that the async smooth scroll finished.

    is(window.scrollY, 0, "Should've completed the smooth scroll without getting interrupted by scroll anchoring");

  waitUntilApzStable()

  .then(test)

  .then(subtestDone, subtestFailed);

</script>