<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
html { position: absolute; }
body {
margin: 0;
height: 2000px;
}
#container {
position: absolute;
left: 0;
top: 50px;
width: 700px;
height: 2000px;
}
#target {
margin-top: 150px;
margin-left: 100px;
width: 200px;
height: 100px;
background: silver;
}
</style>
<div id="container">
<div id="target"></div>
</div>
<script>
function run(zoom, scroll) {
if (!window.testRunner)
return;
testRunner.setPageZoomFactor(zoom);
scrollTo(0, scroll);
var result;
var target = document.querySelector("#target");
var rect = target.getBoundingClientRect();
target.addEventListener("click", (event) => {
result = [event.offsetX, event.offsetY, event.layerX, event.layerY];
});
eventSender.mouseMoveTo(
(rect.left + rect.width / 2) * zoom,
(rect.top + rect.height / 2) * zoom);
eventSender.mouseDown();
eventSender.mouseUp();
// layerX and layerY are relative to #container
assert_array_approx_equals(result, [100, 50, 200, 200], 5);
}
test(() => { run(1, 0); }, 'no zoom or scroll');
test(() => { run(1, 100); }, 'scroll without zoom');
test(() => { run(2, 0); }, 'zoom without scroll');
test(() => { run(2, 100); }, 'zoom and scroll');
</script>