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

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

<script>
  var asyncTest = async_test("Verify smooth scroll interaction with scroll anchoring on page with vertical-lr writing mode");

  // The element that will change in height.
  var ch;
  // Initital scroll position.
  var initialX = -10;
  var initialY = 0;
  // Amount to smooth scroll by.
  var userScrollX = -205;
  // Amount to change the height of the element above the viewport.
  var changerX = 100;
  // End position: height of ch + userScroll.
  var endX = -305;
  var source = GestureSourceType.MOUSE_INPUT;

  function scrollListener() {
    if (window.scrollX == endX) {
      asyncTest.done();
      return;
    }

    if (ch.style.width != "100")
      ch.style.width = changerX;
  }

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

    // Smooth scroll.
    smoothScroll(userScrollX, 100, 100, source, 'right', SPEED_INSTANT, false /* precise_scrolling_deltas */);
    await raf();
    window.scrollTo(initialX, initialY);
  }
</script>