| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src="../../../../resources/js-test.js"></script> |
| 3 <script src="../../resources/record-events.js"></script> |
| 4 <style> |
| 5 body { margin: 0px; } |
| 6 div.box { padding: 40px; } |
| 7 #yellow { background-color: yellow; } |
| 8 #console { padding: 0px; } |
| 9 iframe { margin: 0px; border: 0px; width: 100%; height: 320px; } |
| 10 </style> |
| 11 <div class="box" id="yellow"><iframe src='resources/gesture-tap-mouse-events-bet
ween-frames-iframe1.html' id='frameA'></iframe></div> |
| 12 <div id="console"></div> |
| 13 <script> |
| 14 description("Verifies that mouse events are fired on tapping of gesture across f
rames in the correct order."); |
| 15 var frameA, frameB, frameC, frameD, frameE; |
| 16 |
| 17 var yellowEnterOrder = [ |
| 18 ["yellow", "mouseover"], |
| 19 ["yellow", "mouseenter"], |
| 20 ["greenyellow", "mouseover"], |
| 21 ["greenyellow", "mouseenter"]]; |
| 22 |
| 23 var greenEnterOrder = [ |
| 24 ["limegreen", "mouseover"], |
| 25 ["limegreen", "mouseenter"], |
| 26 ["darkgreen", "mouseover"], |
| 27 ["green", "mouseover"], |
| 28 ["green", "mouseenter"], |
| 29 ["darkgreen", "mouseenter"]]; |
| 30 |
| 31 var greenLeaveOrder = [ |
| 32 ["darkgreen", "mouseout"], |
| 33 ["green", "mouseout"], |
| 34 ["darkgreen", "mouseleave"], |
| 35 ["green", "mouseleave"], |
| 36 ["limegreen", "mouseout"], |
| 37 ["limegreen", "mouseleave"], |
| 38 ["greenyellow", "mouseout"], |
| 39 ["greenyellow", "mouseover"]]; |
| 40 |
| 41 var pinkEnterOrder = [ |
| 42 ["pink", "mouseover"], |
| 43 ["pink", "mouseenter"], |
| 44 ["deeppink", "mouseover"], |
| 45 ["hotpink", "mouseover"], |
| 46 ["hotpink", "mouseenter"], |
| 47 ["deeppink", "mouseenter"]]; |
| 48 |
| 49 var pinkLeaveOrder = [ |
| 50 ["deeppink", "mouseout"], |
| 51 ["hotpink", "mouseout"], |
| 52 ["deeppink", "mouseleave"], |
| 53 ["hotpink", "mouseleave"], |
| 54 ["pink", "mouseout"], |
| 55 ["pink", "mouseleave"], |
| 56 ["greenyellow", "mouseout"], |
| 57 ["greenyellow", "mouseover"]]; |
| 58 |
| 59 function getElementById(obj) |
| 60 { |
| 61 if (obj.frame) |
| 62 return obj.frame.contentDocument.getElementById(obj.id); |
| 63 return document.getElementById(obj.id); |
| 64 } |
| 65 |
| 66 function init() { |
| 67 frameA = document.getElementById("frameA"); |
| 68 frameB = frameA.contentDocument.getElementById("frameB"); |
| 69 frameC = frameB.contentDocument.getElementById("frameC"); |
| 70 frameD = frameA.contentDocument.getElementById("frameD"); |
| 71 frameE = frameD.contentDocument.getElementById("frameE"); |
| 72 |
| 73 var ids = [ |
| 74 { id : "yellow" }, |
| 75 { id : "greenyellow", frame : frameA }, |
| 76 { id : "limegreen", frame: frameB }, |
| 77 { id : "green", frame: frameC }, |
| 78 { id : "darkgreen", frame: frameC }, |
| 79 { id : "pink", frame: frameD }, |
| 80 { id : "hotpink", frame: frameE }, |
| 81 { id : "deeppink", frame: frameE }]; |
| 82 |
| 83 var elements = []; |
| 84 ids.forEach(function(id) { |
| 85 var element = getElementById(id); |
| 86 elements.push(element); |
| 87 }); |
| 88 registerElementsAndEventsToRecord(elements, ["mouseover", "mouseout", "mouse
enter", "mouseleave"]); |
| 89 } |
| 90 |
| 91 function doGesture(obj, base) |
| 92 { |
| 93 debug("-- sending gestureTap to " + obj.id + " --"); |
| 94 var element = getElementById( { id : obj.id, frame : obj.frame }); |
| 95 |
| 96 var x = base.x + element.offsetLeft + element.offsetWidth / 2; |
| 97 var y = base.y + element.offsetTop + element.offsetHeight / 2; |
| 98 eventSender.gestureTap(x, y); |
| 99 } |
| 100 |
| 101 function runTests() |
| 102 { |
| 103 init(); |
| 104 if (window.eventSender) { |
| 105 debug("--- Tap tests ---"); |
| 106 |
| 107 var expectedOrder = []; |
| 108 beginRecordingEvents(); |
| 109 |
| 110 var greenX = frameA.offsetLeft + frameB.offsetLeft + frameC.offsetLeft;
; |
| 111 var greenY = frameA.offsetTop + frameB.offsetTop + frameC.offsetTop;; |
| 112 |
| 113 doGesture({id: "darkgreen", frame: frameC}, {x: greenX, y: greenY}); |
| 114 expectedOrder = expectedOrder.concat(yellowEnterOrder, greenEnterOrder); |
| 115 checkThatEventsFiredInOrder(expectedOrder); |
| 116 |
| 117 doGesture({id: "darkgreen", frame: frameC}, {x: greenX, y: greenY}); |
| 118 debug("There should not be any mouse event."); |
| 119 checkThatEventsFiredInOrder(expectedOrder); |
| 120 |
| 121 var pinkX = frameA.offsetLeft + frameD.offsetLeft + frameE.offsetLeft;; |
| 122 var pinkY = frameA.offsetTop + frameD.offsetTop + frameE.offsetTop;; |
| 123 doGesture({id: "deeppink", frame: frameE }, {x: pinkX, y: pinkY}); |
| 124 expectedOrder = expectedOrder.concat(greenLeaveOrder, pinkEnterOrder); |
| 125 checkThatEventsFiredInOrder(expectedOrder); |
| 126 |
| 127 doGesture({id: "deeppink", frame: frameE }, {x: pinkX, y: pinkY}); |
| 128 debug("There should not be any mouse event."); |
| 129 checkThatEventsFiredInOrder(expectedOrder); |
| 130 |
| 131 doGesture({id: "darkgreen", frame: frameC}, {x: greenX, y: greenY}); |
| 132 expectedOrder = expectedOrder.concat(pinkLeaveOrder, greenEnterOrder); |
| 133 checkThatEventsFiredInOrder(expectedOrder); |
| 134 endRecordingEvents(); |
| 135 } else { |
| 136 debug("This test requires eventSender"); |
| 137 } |
| 138 finishJSTest(); |
| 139 } |
| 140 |
| 141 if (window.testRunner) { |
| 142 window.jsTestIsAsync = true; |
| 143 testRunner.waitUntilDone(); |
| 144 } |
| 145 |
| 146 window.onload = runTests; |
| 147 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1170513002:
Update the mouse events on tapping of gesture across frames (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master