scrolling_issues.html | Explore in Territory

<!doctype html>

<p>The scrollbar should be roughly in the middle of the scroll range.</p>
<p>This is intended to duplicate https://crbug.com/927560</p>

<div id="scroller">
  <div style="width: 200px; height: 5000px;"></div>
</div>

<style>
#scroller {
  overflow-y: scroll;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src='../../resources/gesture-util.js'></script>

<script>
var scroller = document.getElementById('scroller');
var rect = scroller.getBoundingClientRect();
var start_x = (rect.left + rect.right) / 2;
var start_y = (rect.top + rect.bottom) / 2;

async function scrollDown(pixels_to_scroll, gesture_source_type) {
  const target_scroll_offset = scroller.scrollTop + pixels_to_scroll;
  await waitForCompositorCommit();
  await smoothScroll(pixels_to_scroll, start_x, start_y, gesture_source_type,
                    'down', SPEED_INSTANT);
  await waitFor(() => {
    return approx_equals(scroller.scrollTop, target_scroll_offset, 20);
  }, "Didn't scroll by expected amount: " + pixels_to_scroll + "  scroller.scrollTop is " + scroller.scrollTop + ", target is " + target_scroll_offset);
  await waitForCompositorCommit();
}

promise_test(async () => {
  await scrollDown(800, GestureSourceType.TOUCHPAD_INPUT);
  await scrollDown(800, GestureSourceType.TOUCH_INPUT);
  await scrollDown(800, GestureSourceType.MOUSE_INPUT);
  assert_approx_equals(scroller.scrollTop,2400,60,"Scroll didn't work: ")
}, "Scrolling by wheel then touch should work.");

</script>
chromium/third_party/blink/web_tests/paint/paintlayer/scrolling_issues.html
