wheel-scroll-latching-on-scrollbar.html

<!DOCTYPE HTML>
<script src='../../resources/gesture-util.js'></script>
<script src='../../resources/blink-coordinates-util.js'></script>
<script src='../../resources/scrollbar-util.js'></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/testdriver.js"></script>
<script src="../../resources/testdriver-actions.js"></script>
<script src="../../resources/testdriver-vendor.js"></script>
<style>

  body {
    margin: 0px;
    height: 100px;
    width: 100px;
  }
  #parentDiv {
    background-color: #FF7F7F;
    height: 100px;
    width: 100px;
    overflow: scroll;
  }
  #content1 {
    height: 120px;
    width: 120px;
  }
  #childDiv {
    background-color: #84BE6A;
    height: 80px;
    width: 80px;
    overflow: scroll;
  }
  #content2 {
    height: 100px;
    width: 100px;
  }
</style>

<div id="parentDiv">
  <div id="content1">
    <div id="childDiv">
      <div id="content2">
      </div>
    </div>
  </div>
</div>

<script>
window.onload = () => {
  const childDiv = document.getElementById('childDiv');
  const parentDiv = document.getElementById('parentDiv');
  const pos = trackBottom(childDiv);
  const deltaY = 1000;
  promise_test(async t => {
    await waitForCompositorCommit();
    await wheelScroll(pos.x, pos.y, 0, deltaY, childDiv);
    const expectedScroll = childDiv.scrollHeight - childDiv.clientHeight;
    const delta = childDiv.scrollTop - expectedScroll;
    assert_true(Math.abs(delta) < 0.5, "childDiv must be fully scrolled");
    await conditionHolds(() => { return parentDiv.scrollTop == 0; },
                         "parentDiv shouldn't scroll at all");
  }, "Scrolling on scrollbar of the child div doesn't propagate to the " +
     "parent.");
}

</script>
chromium/third_party/blink/web_tests/fast/scrolling/wheel-scroll-latching-on-scrollbar.html
