<!DOCTYPE html>
<title>Tests mouse interactions on a custom composited div scrollbar.</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<script src="../../../resources/scrollbar-util.js"></script>
<style>
.appearance {
  width: 100px;
  height: 100px;
  overflow: scroll;
  border: 1px solid black;
}
.customLocation {
  position: absolute;
  top: 250px;
  left: 100px;
}
.space {
  height: 1000px;
  width: 1000px;
}

#custom::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

#custom::-webkit-scrollbar-track {
  background: #f5f5f5;
}

#custom::-webkit-scrollbar-thumb {
  background: #ababab;
}

#custom::-webkit-scrollbar-thumb:hover {
  background: #cdcdcd;
}
</style>

<!-- Composited custom scroller -->
<div id="custom" class="appearance customLocation">
  <div class="space"></div>
</div>

<script>
window.onload = () => {
  promise_test (async () => {
    await waitForCompositorCommit();
    const customDivFast = document.getElementById("custom");
    const customRectFast = customDivFast.getBoundingClientRect();

    // Testing the vertical custom scrollbar click.
    let x = customRectFast.right - 5;
    let y = customRectFast.top + customRectFast.height / 2;

    await mouseMoveTo(x, y);
    await mouseDownAt(x, y);
    await mouseMoveTo(x, y);
    await mouseUpAt(x, y);

    // Testing the horizontal custom scrollbar click.
    x = customRectFast.left + customRectFast.width / 2;
    y = customRectFast.bottom - 5;

    await mouseMoveTo(x, y);
    await mouseDownAt(x, y);
    await mouseMoveTo(x, y);
    await mouseUpAt(x, y);

    // Test passes if renderer did not crash.

  }, "Test mouse click on custom composited div scrollbars.");
}
</script>