| <!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> |
