Index: LayoutTests/fast/events/menu-key-context-menu-document-pinch-zoom.html |
diff --git a/LayoutTests/fast/events/menu-key-context-menu-document-pinch-zoom.html b/LayoutTests/fast/events/menu-key-context-menu-document-pinch-zoom.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..23a3e4f058df70a6ffac6f67bc17774acfd48251 |
--- /dev/null |
+++ b/LayoutTests/fast/events/menu-key-context-menu-document-pinch-zoom.html |
@@ -0,0 +1,134 @@ |
+<!DOCTYPE html> |
+ |
+<script src="../../resources/js-test.js"></script> |
+<script src="../dom/resources/event-sender-util.js"></script> |
+<script> |
+description('This test checks if contextmenu event target is correct when handled at the document level and in the' + |
+ ' presence of pinch-zoom. To test manually, first pinch-zoom into the page, scroll away from the origin' + |
+ ' and then then press the menu key. There are three cases to check: nothing focused (the context menu is' + |
+ ' expected to appear in the top left of the viewport), click on the orange box to focus it then use the' + |
+ ' menu key, and select some text in the box and use the menu key. Note: on Mac there is no menu key.'); |
+ |
+// Pinch Viewport will be at the bottom right quadrant of the page. |
+var pinchViewportContentX = 400; |
+var pinchViewportContentY = 300; |
+var scale = 2; |
+ |
+// Should match the static const in EventHandler::sendContextMenuEventForKey |
+var kContextMenuMargin = 1; |
+ |
+var expectedX; |
+var expectedY; |
+var expectedScreenX; |
+var expectedScreenY; |
+var event; |
+ |
+var anchor; |
+var textbox; |
+ |
+function handleContextMenuNoFocus(e) { |
+ event = e; |
+ expectedX = kContextMenuMargin + pinchViewportContentX; |
+ expectedY = kContextMenuMargin + pinchViewportContentY; |
+ expectedScreenX = kContextMenuMargin * scale; |
+ expectedScreenY = kContextMenuMargin * scale; |
+ shouldBe('event.clientX', 'expectedX'); |
+ shouldBe('event.clientY', 'expectedY'); |
+ shouldBe('event.screenX', 'expectedScreenX'); |
+ shouldBe('event.screenY', 'expectedScreenY'); |
+ e.preventDefault(); |
+} |
+ |
+function handleContextMenuFocus(e) { |
+ event = e; |
+ expectedX = anchor.offsetLeft + anchor.offsetWidth/2; |
+ expectedY = anchor.offsetTop + anchor.offsetHeight/2; |
+ expectedScreenX = (expectedX - pinchViewportContentX) * scale; |
+ expectedScreenY = (expectedY - pinchViewportContentY) * scale; |
+ shouldBe('event.clientX', 'expectedX'); |
+ shouldBe('event.clientY', 'expectedY'); |
+ shouldBe('event.screenX', 'expectedScreenX'); |
+ shouldBe('event.screenY', 'expectedScreenY'); |
+ e.preventDefault(); |
+} |
+ |
+function handleContextMenuEditable(e) { |
+ event = e; |
+ |
+ var rangeRect = window.getSelection().getRangeAt(0).getBoundingClientRect(); |
+ expectedX = rangeRect.left; |
+ |
+ // EventHandler::sendContextKeyForMenuEvent subtracts 1 from the y value so |
+ // that the context menu doesn't end up in the next line on multiline |
+ // selections. |
+ expectedY = rangeRect.bottom - 1; |
+ |
+ expectedScreenX = (expectedX - pinchViewportContentX) * scale; |
+ expectedScreenY = (expectedY - pinchViewportContentY) * scale; |
+ |
+ shouldBe('event.clientX', 'expectedX'); |
+ shouldBe('event.clientY', 'expectedY'); |
+ shouldBe('event.screenX', 'expectedScreenX'); |
+ shouldBe('event.screenY', 'expectedScreenY'); |
+ e.preventDefault(); |
+} |
+ |
+var runTest = function() { |
+ eventSender.setPageScaleFactor(scale, 0, 0); |
+ |
+ // Position the pinch viewport. |
+ eventSender.gestureScrollBegin(0, 0); |
+ |
+ // Start from pinch viewport offset (0, 0). |
+ eventSender.gestureScrollUpdate(-pinchViewportContentX*scale, |
+ -pinchViewportContentY*scale); |
+ eventSender.gestureScrollEnd(0, 0); |
+ |
+ anchor = document.getElementById("anchor"); |
+ |
+ // With nothing focused, the context menu should appear in the top left |
+ // corner of the viewport. |
+ document.addEventListener('contextmenu', handleContextMenuNoFocus, true); |
+ eventSender.keyDown("menu"); |
+ eventSender.keyDown("escape"); |
+ document.removeEventListener('contextmenu', handleContextMenuNoFocus, true); |
+ |
+ // Focus the anchor, make sure the client coordinates and screen coordinates |
+ // take the viewport's position and scale into account. |
+ anchor.focus(); |
+ document.addEventListener('contextmenu', handleContextMenuFocus, true); |
+ eventSender.keyDown("menu"); |
+ eventSender.keyDown("escape"); |
+ document.removeEventListener('contextmenu', handleContextMenuFocus, true); |
+ |
+ // Place selection and make sure it still works. |
+ window.getSelection().selectAllChildren(anchor); |
+ document.addEventListener('contextmenu', handleContextMenuEditable, true); |
+ eventSender.keyDown("menu"); |
+ eventSender.keyDown("escape"); |
+ document.removeEventListener('contextmenu', handleContextMenuEditable, true); |
+ |
+ testRunner.notifyDone(); |
+} |
+ |
+if (!window.eventSender || !window.testRunner) { |
+ testFailed('This test needs to run in a test environment.'); |
+ document.addEventListener('contextmenu', handleContextMenuEditable, true); |
+} else { |
+ testRunner.waitUntilDone(); |
+ window.addEventListener('load', runTest); |
+} |
+</script> |
+ |
+<style> |
+#anchor { |
+ background-color: orange; |
+ position: absolute; |
+ top: 380px; |
+ left: 530px; |
+ height: 100px; |
+ width: 100px; |
+} |
+</style> |
+<div id="anchor" tabindex="0">Target</div> |
+<div id="console"></div> |