<!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>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-actions.js"></script>
<script src="../../../resources/testdriver-vendor.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 new test_driver.Actions()
.pointerMove(x, y)
.pointerDown()
.addTick()
.pointerUp()
.send();
// Testing the horizontal custom scrollbar click.
x = customRectFast.left + customRectFast.width / 2;
y = customRectFast.bottom - 5;
await new test_driver.Actions()
.pointerMove(x, y)
.pointerDown()
.addTick()
.pointerUp()
.send();
// Test passes if renderer did not crash.
}, "Test mouse click on custom composited div scrollbars.");
}
</script>