<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/compositor-controls.js"></script>
<script src="../../../../resources/gesture-util.js"></script>

<!-- This tests that the scrollbar thumb is deselected on a fling start -->

<style type="text/css">
::-webkit-scrollbar {
  background-color: #ccc;
  height: 15px;
  width: 15px;
}

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

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

::-webkit-scrollbar-thumb:active {
  background-color: #333;
}

#scrollable {
  height: 300px;
  width: 300px;
  overflow: scroll;
}

.large {
  height: 600px;
  width: 600px;
}
</style>

<div id="scrollable">
  <div class="large">
  </div>
</div>

<script type="text/javascript">
setAnimationRequiresRaster();

promise_test (async () => {
  var movingDiv = document.getElementById('scrollable');
  var scrollbarX = movingDiv.offsetLeft + movingDiv.offsetWidth - 5;
  var scrollThumbSafeOffset = 80;
  var scrollbarY = movingDiv.offsetTop + scrollThumbSafeOffset;
  var fling_velocity = 1000;
  await swipe(10, scrollbarX, scrollbarY, "up", SPEED_INSTANT, fling_velocity, GestureSourceType.TOUCHPAD_INPUT);
  await waitFor(() => {return movingDiv.scrollTop > 90; })
});
</script>