ongoing-smooth-scroll-anchors.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<script src="../../../resources/percent-based-util.js"></script>
<style>
  body {
    margin: 0px;
    height: 2000px;
    width: 2000px;
  }
  #changer {
    background-color: #FF7F7F;
    height: 10px;
  }
  #anchor {
    height: 1500px;
    background-color: #84BE6A;
  }
</style>

<div id="changer"></div>
<div id="anchor"></div>

<script>
  var asyncTest = async_test("Verify smooth scroll interaction with scroll anchroing");

  // The element that will change in height.
  var ch;

  // Initital scroll position.
  var initialY = 10;
  // Amount to smooth scroll by.
  const { y: userScrollY } = calculatePixelsToScroll(
    document.scrollingElement, 0, 205
  );
  // Amount to change the height of the element above the viewport.
  var changerY =  100;
  // End position: height of ch + userScroll.
  var endY = 305;
  var source = GestureSourceType.MOUSE_INPUT;

  function scrollListener() {
    // The value on Linux appears to be slightly different
    if (approx_equals(window.scrollY, endY, 0.5)) {
      asyncTest.done();
      return;
    }

    if (ch.style.height != "100")
      ch.style.height = changerY + "px";
  }

  window.onload = async () => {
    ch = document.getElementById("changer");
    document.addEventListener("scroll", scrollListener);

    // Smooth scroll.
    smoothScroll(userScrollY, 100, 100, source, 'down',
                 SPEED_INSTANT, false /* precise_scrolling_deltas */);
    await raf();
    document.getElementById('anchor').scrollIntoView();
  }
</script>
chromium/third_party/blink/web_tests/fast/scroll-behavior/smooth-scroll/ongoing-smooth-scroll-anchors.html
