| <html> |
| <head> |
| <script> |
| function print(message, color) { |
| var paragraph = document.createElement("div"); |
| paragraph.appendChild(document.createTextNode(message)); |
| paragraph.style.fontFamily = "monospace"; |
| if (color) |
| paragraph.style.color = color; |
| document.getElementById("console").appendChild(paragraph); |
| } |
| |
| |
| function shouldBe(description, actual, expected, useFuzzyMath) |
| { |
| if (useFuzzyMath) { |
| if (Math.abs(expected - actual) < 20) { // > |
| print("PASS: " + description + " should be approximately " + expected + |
| " and is " + actual + "\n", |
| "green"); |
| } else { |
| print("FAIL: " + description + " should be approximately " + expected + |
| " but instead is " + actual + "\n", |
| "red"); |
| } |
| } else { |
| if (expected === actual) { |
| print("PASS: " + description + " should be " + expected + |
| " and is\n", |
| "green"); |
| } else { |
| print("FAIL: " + description + " should be " + expected + |
| " but instead is " + actual + "\n", |
| "red"); |
| } |
| } |
| } |
| |
| function listener(event) |
| { |
| document.getElementById("console").innerHTML = ""; |
| |
| shouldBe("event target", document.getElementById('test'), event.target, false); |
| |
| var useFuzzyMath; |
| if (window.eventSender) |
| useFuzzyMath = false; |
| else { |
| // Use fuzzy math, because we can't predict exactly where the user will click |
| useFuzzyMath = true; |
| } |
| |
| shouldBe("event.pageX", event.pageX, 175, useFuzzyMath); |
| shouldBe("event.pageY", event.pageY, 105, useFuzzyMath); |
| shouldBe("event.clientX", event.clientX, 175, useFuzzyMath); |
| shouldBe("event.clientY", event.clientY, 105, useFuzzyMath); |
| shouldBe("event.layerX", event.layerX, 7, useFuzzyMath); // not really sure why this isn't 5 |
| shouldBe("event.layerY", event.layerY, 5, useFuzzyMath); |
| shouldBe("event.offsetX", event.offsetX, 7, useFuzzyMath); // not really sure why this isn't 5 |
| shouldBe("event.offsetY", event.offsetY, 5, useFuzzyMath); |
| shouldBe("event.x", event.x, 175, useFuzzyMath); |
| shouldBe("event.y", event.y, 105, useFuzzyMath); |
| } |
| |
| function test() { |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| document.getElementById('test').addEventListener("click", listener, false); |
| |
| if (window.eventSender) { |
| eventSender.mouseMoveTo(175, 105); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| </script> |
| </head> |
| <body onload="test();"> |
| <p>This page tests whether a click event propagates with the correct target and positioning. |
| See <a href="rdar://problem/4477126">rdar://problem/4477126</a>. |
| </p> |
| <hr> |
| <div style="position:absolute; top: 100"> |
| click inside the red box:<span id="test" style="position:absolute; left:160; color:red">[]</span> |
| </div> |
| <div style="position:absolute; top: 150;" id='console'></div> |
| </body> |
| </html> |
