<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style>
::-webkit-scrollbar {
  background-color: #ccc;
  /* fixed size for consistent touch adjustment behavior across platforms */
  width: 15px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  background-color: #777;
  width: 15px;
}

body {
  margin: 0;
}

.large {
  height: 2000px;
  width: 600px;
}
</style>
<div class="large"></div>

<script type="text/javascript">
promise_test (async () => {
  assert_greater_than(window.innerWidth - document.body.clientWidth, 5);
  var scrollbarX = document.body.clientWidth + 5;
  var scrollbarY = window.innerHeight / 2;  // Trying to grab the thumb
  // Scroll down to ensure we test the difference between content and client
  // co-ordinate spaces.
  window.scrollTo(0, 800);
  assert_equals(window.scrollY, 800);

  await smoothScroll(20, scrollbarX, scrollbarY, GestureSourceType.TOUCH_INPUT,
                     "up", SPEED_INSTANT);
  // We don't know exactly how far draging the thumb will scroll.  If we end
  // up scrolling in the wrong direction it probably means hit tests are
  // passing through the scrollbar and hitting the content.
  await waitFor( () => { return window.scrollY >= 820;});
  await smoothScroll(60, scrollbarX, scrollbarY, GestureSourceType.TOUCH_INPUT,
                     "up", SPEED_INSTANT);
  await waitFor( () => { return window.scrollY >= 885;});
}, 'This tests scroll gesture events on main frame scroll bars The document ' +
   'should be slightly scrolled down if successful.');
</script>