<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<style>
#container {
width:500px;
height:100px;
overflow:auto;
border:2px solid red;
padding:0px;
}
#spacer {
height:200px;
}
</style>
<ol>
<li>Middle-click inside the <div> with the red border below to activate pan-mode.</li>
<li>Move the mouse such that you scroll the <div> until you see the hyperlinks "Link 1" and "Link 2".</li>
<li>Left-click the hyperlink "Link 1". Should exit panning but not activate the link.</li>
<li>Left-click the hyperlink "Link 2". Should activate the link.</li>
</ol>
<div id="container">
<div id="spacer" ></div>
<a id="firstLink" href="#">Link 1</a> <a id="secondLink" href="#">Link 2</a>
</div>
<script>
window.onload = async function()
{
const container = document.getElementById("container");
const firstLink = document.getElementById("firstLink");
const secondLink = document.getElementById("secondLink");
const leftButton = 0;
const middleButton = 1;
promise_test (async (t) => {
await waitForCompositorCommit();
await mouseClickOn(container.offsetLeft + 10, container.offsetTop + 10, middleButton);
await mouseMoveTo(container.offsetLeft + 10, container.offsetTop + container.offsetHeight);
await waitFor(() => {
return container.scrollTop === container.scrollHeight - container.clientHeight;
}, "Failed to scroll container with middle-click autoscroll.");
let firstLinkClicked = false;
let secondLinkClicked = false;
firstLink.onclick = e => { firstLinkClicked = true; };
secondLink.onclick = e => { secondLinkClicked = true; };
const firstLinkBoundingBox = firstLink.getBoundingClientRect();
const secondLinkBoundingBox = secondLink.getBoundingClientRect();
await mouseClickOn(firstLinkBoundingBox.left + 10, firstLinkBoundingBox.top, leftButton);
await mouseClickOn(secondLinkBoundingBox.left + 10, secondLinkBoundingBox.top + 5, leftButton);
assert_false(firstLinkClicked, "Click over link while in autoscroll mode must not fire click event");
assert_true(secondLinkClicked, "Click on second link must have caused click event");
await mouseClickOn(firstLinkBoundingBox.left + 10, firstLinkBoundingBox.top, leftButton);
assert_true(firstLinkClicked, "Click over first link should now fire click event");
}, "Clicking link while in pan-mode is ignored");
}
</script>