| <!DOCTYPE HTML> |
| <script src="../../../../resources/js-test.js"></script> |
| <style> |
| html, body { |
| margin: 0; |
| } |
| body { |
| height: 1000px; |
| } |
| #target { |
| width: 50px; |
| height: 50px; |
| } |
| </style> |
| <iframe frameborder=0 id="target" src="resources/event-delegator-boxes.html"></iframe> |
| <div id=console></div> |
| <script> |
| var event; |
| var frameRect = target.getBoundingClientRect(); |
| var pointInFrame = { |
| x: frameRect.width / 2, |
| y: frameRect.height / 2 |
| }; |
| var pointInWindow = { |
| x: frameRect.left + pointInFrame.x, |
| y: frameRect.top + pointInFrame.y |
| }; |
| |
| var eventReceived = {}; |
| var currentOffset = 0; |
| var expectedOffset; |
| var targetRect; |
| |
| function offsetFrame() { |
| currentOffset += 5; |
| target.style.marginTop = currentOffset + 'px'; |
| target.style.marginLeft = currentOffset + 'px'; |
| } |
| |
| function onEventInFrame(e) { |
| |
| // Each mouse event relies on a new hit test except for click. |
| if (e.type != "click") |
| expectedOffset = currentOffset; |
| |
| debug(""); |
| debug("Received " + e.type + " in child frame with currentOffset=" + currentOffset + " expectedOffset=" + expectedOffset); |
| event = e; |
| eventReceived[e.type] = true; |
| shouldBeEqualToNumber("event.screenX", pointInWindow.x); |
| shouldBeEqualToNumber("event.screenY", pointInWindow.y); |
| shouldBeEqualToNumber("event.clientX", pointInFrame.x - expectedOffset); |
| shouldBeEqualToNumber("event.clientY", pointInFrame.y - expectedOffset); |
| shouldBeEqualToNumber("event.pageX", pointInFrame.x - expectedOffset); |
| shouldBeEqualToNumber("event.pageY", pointInFrame.y - expectedOffset); |
| |
| // Verify the node found by hit-testing actually contains the point. |
| // Note that 'click' is dispatched to the common ancestor of 'mousedown' and 'mouseup'. |
| shouldBeEqualToString("event.target.nodeName", e.type == "click" ? "BODY" : "DIV"); |
| targetRect = event.target.getBoundingClientRect(); |
| debug("Target element is at (" + targetRect.left + "," + targetRect.top + "," + targetRect.right + "," + targetRect.bottom + ")"); |
| shouldBeGreaterThanOrEqual("targetRect.right", "event.clientX"); |
| shouldBeGreaterThanOrEqual("event.clientX", "targetRect.left"); |
| shouldBeGreaterThanOrEqual("targetRect.bottom", "event.clientY"); |
| shouldBeGreaterThanOrEqual("event.clientY", "targetRect.top"); |
| |
| // Move the frame for the next event. |
| offsetFrame(); |
| } |
| |
| description("Verifies mouse event co-ordinates from a tap in an iframe that changes position on each mouse event"); |
| |
| if (window.eventSender) { |
| jsTestIsAsync = true; |
| target.onload = function() { |
| debug("Sending GestureTapDown to " + pointInWindow.x + "," + pointInWindow.y); |
| eventSender.gestureTapDown(pointInWindow.x, pointInWindow.y); |
| |
| debug("Sending GestureShowPress"); |
| eventSender.gestureShowPress(pointInWindow.x, pointInWindow.y); |
| |
| debug("Sending GestureTap"); |
| eventSender.gestureTap(pointInWindow.x, pointInWindow.y); |
| |
| shouldBeTrue("eventReceived.mousemove"); |
| shouldBeTrue("eventReceived.mousedown"); |
| shouldBeTrue("eventReceived.mouseup"); |
| shouldBeTrue("eventReceived.click"); |
| setTimeout(finishJSTest, 0); |
| } |
| } else { |
| debug("This test requires eventSender"); |
| } |
| </script> |
