<!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;
await swipe(10, scrollbarX, scrollbarY, "down");
await conditionHolds(() => {return movingDiv.scrollTop < 90; })
});
</script>