| <!DOCTYPE html> |
| <html style="background-color: red; "> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body style="margin: 0px;"> |
| <script> |
| description("This tests that page scaling and CSS transforms do not affect mouse event pageX and pageY coordinates for " + |
| "content embedded in an iframe."); |
| |
| var html = document.documentElement; |
| |
| var iframe = document.createElement("iframe"); |
| iframe.style.border = "none"; |
| iframe.style.width = "200px"; |
| iframe.style.height = "200px"; |
| iframe.style.background = "green"; |
| |
| var div = document.createElement("div"); |
| div.style.width = "100px"; |
| div.style.height = "100px"; |
| div.style.backgroundColor = "blue"; |
| |
| var eventLog = ""; |
| |
| function appendEventLog(event) { |
| var msg = event.type + "(" + event.pageX + ", " + event.pageY + ")"; |
| |
| if (window.eventSender) { |
| eventLog += msg; |
| } else { |
| debug(msg); |
| } |
| } |
| |
| function clearEventLog() { |
| eventLog = ""; |
| } |
| |
| function sendEvents(button) { |
| if (!window.eventSender) { |
| debug("This test requires the EventSender API (provided by, for example, DumpRenderTree or WebKitTestRunner). Click on the blue rect with the left mouse button to log the mouse coordinates.") |
| return; |
| } |
| eventSender.mouseDown(button); |
| eventSender.mouseUp(button); |
| } |
| |
| function testEvents(button, description, expectedString) { |
| sendEvents(button); |
| debug(description); |
| shouldBeEqualToString("eventLog", expectedString); |
| clearEventLog(); |
| debug(""); |
| } |
| |
| function iframeLoaded() { |
| // Add the div to the iframe. |
| div.addEventListener("click", appendEventLog, false); |
| iframe.contentWindow.document.body.insertBefore(div, iframe.contentWindow.document.body.firstChild); |
| |
| if (window.eventSender && window.internals) { |
| eventSender.mouseMoveTo(10, 10); |
| // We are clicking in the same position on screen. As we scale or transform the page, |
| // we expect the pageX and pageY event coordinates to change because different |
| // parts of the document are under the mouse. |
| |
| testEvents(0, "Unscaled", "click(10, 10)"); |
| |
| window.internals.setPageScaleFactor(0.5, 0, 0); |
| testEvents(0, "setPageScale(0.5)", "click(20, 20)"); |
| |
| window.internals.setPageScaleFactor(1.0, 0, 0); |
| html.style["-webkit-transform"] = "scale(0.5, 2.0)"; |
| html.style["-webkit-transform-origin"] = "0 0"; |
| testEvents(0, "CSS scale(0.5, 2.0)", "click(20, 5)"); |
| |
| window.internals.setPageScaleFactor(0.5, 0, 0); |
| testEvents(0, "setPageScale(0.5), CSS scale(0.5, 2.0)", "click(40, 10)"); |
| } |
| |
| finishJSTest(); |
| } |
| |
| // Add the iframe to the document. |
| iframe.src = "resources/page-scaled-mouse-click-iframe-inner.html"; |
| document.body.insertBefore(iframe, document.body.firstChild); |
| |
| window.jsTestIsAsync = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
