OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <script src="../../resources/js-test.js"></script> |
| 4 <script src="../dom/resources/event-sender-util.js"></script> |
| 5 <script> |
| 6 description('This test checks if contextmenu event target is correct when handle
d at the document level and in the' + |
| 7 ' presence of pinch-zoom. To test manually, first pinch-zoom into th
e page, scroll away from the origin' + |
| 8 ' and then then press the menu key. There are three cases to check:
nothing focused (the context menu is' + |
| 9 ' expected to appear in the top left of the viewport), click on the
orange box to focus it then use the' + |
| 10 ' menu key, and select some text in the box and use the menu key. No
te: on Mac there is no menu key.'); |
| 11 |
| 12 // Pinch Viewport will be at the bottom right quadrant of the page. |
| 13 var pinchViewportContentX = 400; |
| 14 var pinchViewportContentY = 300; |
| 15 var scale = 2; |
| 16 |
| 17 // Should match the static const in EventHandler::sendContextMenuEventForKey |
| 18 var kContextMenuMargin = 1; |
| 19 |
| 20 var expectedX; |
| 21 var expectedY; |
| 22 var expectedScreenX; |
| 23 var expectedScreenY; |
| 24 var event; |
| 25 |
| 26 var anchor; |
| 27 var textbox; |
| 28 |
| 29 function handleContextMenuNoFocus(e) { |
| 30 event = e; |
| 31 expectedX = kContextMenuMargin + pinchViewportContentX; |
| 32 expectedY = kContextMenuMargin + pinchViewportContentY; |
| 33 expectedScreenX = kContextMenuMargin * scale; |
| 34 expectedScreenY = kContextMenuMargin * scale; |
| 35 shouldBe('event.clientX', 'expectedX'); |
| 36 shouldBe('event.clientY', 'expectedY'); |
| 37 shouldBe('event.screenX', 'expectedScreenX'); |
| 38 shouldBe('event.screenY', 'expectedScreenY'); |
| 39 e.preventDefault(); |
| 40 } |
| 41 |
| 42 function handleContextMenuFocus(e) { |
| 43 event = e; |
| 44 expectedX = anchor.offsetLeft + anchor.offsetWidth/2; |
| 45 expectedY = anchor.offsetTop + anchor.offsetHeight/2; |
| 46 expectedScreenX = (expectedX - pinchViewportContentX) * scale; |
| 47 expectedScreenY = (expectedY - pinchViewportContentY) * scale; |
| 48 shouldBe('event.clientX', 'expectedX'); |
| 49 shouldBe('event.clientY', 'expectedY'); |
| 50 shouldBe('event.screenX', 'expectedScreenX'); |
| 51 shouldBe('event.screenY', 'expectedScreenY'); |
| 52 e.preventDefault(); |
| 53 } |
| 54 |
| 55 function handleContextMenuEditable(e) { |
| 56 event = e; |
| 57 |
| 58 var rangeRect = window.getSelection().getRangeAt(0).getBoundingClientRect(); |
| 59 expectedX = rangeRect.left; |
| 60 |
| 61 // EventHandler::sendContextKeyForMenuEvent subtracts 1 from the y value so |
| 62 // that the context menu doesn't end up in the next line on multiline |
| 63 // selections. |
| 64 expectedY = rangeRect.bottom - 1; |
| 65 |
| 66 expectedScreenX = (expectedX - pinchViewportContentX) * scale; |
| 67 expectedScreenY = (expectedY - pinchViewportContentY) * scale; |
| 68 |
| 69 shouldBe('event.clientX', 'expectedX'); |
| 70 shouldBe('event.clientY', 'expectedY'); |
| 71 shouldBe('event.screenX', 'expectedScreenX'); |
| 72 shouldBe('event.screenY', 'expectedScreenY'); |
| 73 e.preventDefault(); |
| 74 } |
| 75 |
| 76 var runTest = function() { |
| 77 eventSender.setPageScaleFactor(scale, 0, 0); |
| 78 |
| 79 // Position the pinch viewport. |
| 80 eventSender.gestureScrollBegin(0, 0); |
| 81 |
| 82 // Start from pinch viewport offset (0, 0). |
| 83 eventSender.gestureScrollUpdate(-pinchViewportContentX*scale, |
| 84 -pinchViewportContentY*scale); |
| 85 eventSender.gestureScrollEnd(0, 0); |
| 86 |
| 87 anchor = document.getElementById("anchor"); |
| 88 |
| 89 // With nothing focused, the context menu should appear in the top left |
| 90 // corner of the viewport. |
| 91 document.addEventListener('contextmenu', handleContextMenuNoFocus, true); |
| 92 eventSender.keyDown("menu"); |
| 93 eventSender.keyDown("escape"); |
| 94 document.removeEventListener('contextmenu', handleContextMenuNoFocus, true); |
| 95 |
| 96 // Focus the anchor, make sure the client coordinates and screen coordinates |
| 97 // take the viewport's position and scale into account. |
| 98 anchor.focus(); |
| 99 document.addEventListener('contextmenu', handleContextMenuFocus, true); |
| 100 eventSender.keyDown("menu"); |
| 101 eventSender.keyDown("escape"); |
| 102 document.removeEventListener('contextmenu', handleContextMenuFocus, true); |
| 103 |
| 104 // Place selection and make sure it still works. |
| 105 window.getSelection().selectAllChildren(anchor); |
| 106 document.addEventListener('contextmenu', handleContextMenuEditable, true); |
| 107 eventSender.keyDown("menu"); |
| 108 eventSender.keyDown("escape"); |
| 109 document.removeEventListener('contextmenu', handleContextMenuEditable, true)
; |
| 110 |
| 111 testRunner.notifyDone(); |
| 112 } |
| 113 |
| 114 if (!window.eventSender || !window.testRunner) { |
| 115 testFailed('This test needs to run in a test environment.'); |
| 116 document.addEventListener('contextmenu', handleContextMenuEditable, true); |
| 117 } else { |
| 118 testRunner.waitUntilDone(); |
| 119 window.addEventListener('load', runTest); |
| 120 } |
| 121 </script> |
| 122 |
| 123 <style> |
| 124 #anchor { |
| 125 background-color: orange; |
| 126 position: absolute; |
| 127 top: 380px; |
| 128 left: 530px; |
| 129 height: 100px; |
| 130 width: 100px; |
| 131 } |
| 132 </style> |
| 133 <div id="anchor" tabindex="0">Target</div> |
| 134 <div id="console"></div> |
OLD | NEW |