summaryrefslogtreecommitdiffstats
path: root/dom/events/test/test_offsetxy.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--dom/events/test/test_offsetxy.html98
1 files changed, 98 insertions, 0 deletions
diff --git a/dom/events/test/test_offsetxy.html b/dom/events/test/test_offsetxy.html
new file mode 100644
index 0000000000..693683d1b0
--- /dev/null
+++ b/dom/events/test/test_offsetxy.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Test for DOM MouseEvent offsetX/Y</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<div id="d" style="position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px"></div>
+<div id="d2" style="position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px; transform:translateX(100px)"></div>
+<div id="d3" style="display:none; position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px"></div>
+<div id="d4" style="transform:scale(0); position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px"></div>
+
+<pre id="test">
+<script type="application/javascript">
+
+var offsetX = -1, offsetY = -1;
+var ev = new MouseEvent("click", {clientX:110, clientY:110});
+is(ev.offsetX, 110);
+is(ev.offsetY, 110);
+is(ev.offsetX, ev.pageX);
+is(ev.offsetY, ev.pageY);
+d.addEventListener("click", function (event) {
+ is(ev, event, "Event objects must match");
+ offsetX = event.offsetX;
+ offsetY = event.offsetY;
+});
+d.dispatchEvent(ev);
+is(offsetX, 5);
+is(offsetY, 5);
+is(ev.offsetX, 5);
+is(ev.offsetY, 5);
+
+var ev2 = new MouseEvent("click", {clientX:220, clientY:130});
+is(ev2.offsetX, 220);
+is(ev2.offsetY, 130);
+is(ev2.offsetX, ev2.pageX);
+is(ev2.offsetY, ev2.pageY);
+d2.addEventListener("click", function (event) {
+ is(ev2, event, "Event objects must match");
+ offsetX = event.offsetX;
+ offsetY = event.offsetY;
+});
+d2.dispatchEvent(ev2);
+is(offsetX, 15);
+is(offsetY, 25);
+is(ev2.offsetX, 15);
+is(ev2.offsetY, 25);
+
+var ev3 = new MouseEvent("click", {clientX:110, clientY:110});
+is(ev3.offsetX, 110);
+is(ev3.offsetY, 110);
+is(ev3.offsetX, ev3.pageX);
+is(ev3.offsetY, ev3.pageY);
+d3.addEventListener("click", function (event) {
+ is(ev3, event, "Event objects must match");
+ offsetX = event.offsetX;
+ offsetY = event.offsetY;
+});
+d3.dispatchEvent(ev3);
+is(offsetX, 0);
+is(offsetY, 0);
+is(ev3.offsetX, 0);
+is(ev3.offsetY, 0);
+
+var ev4 = new MouseEvent("click", {clientX:110, clientY:110});
+is(ev4.offsetX, 110);
+is(ev4.offsetY, 110);
+is(ev4.offsetX, ev4.pageX);
+is(ev4.offsetY, ev4.pageY);
+d4.addEventListener("click", function (event) {
+ is(ev4, event, "Event objects must match");
+ offsetX = event.offsetX;
+ offsetY = event.offsetY;
+});
+d4.dispatchEvent(ev4);
+is(offsetX, 0);
+is(offsetY, 0);
+is(ev4.offsetX, 0);
+is(ev4.offsetY, 0);
+
+// Now redispatch ev4 to "d" to make sure that its offsetX gets updated
+// relative to the new target. Have to set "ev" to "ev4", because the listener
+// on "d" expects to see "ev" as the event.
+ev = ev4;
+d.dispatchEvent(ev4);
+is(offsetX, 5);
+is(offsetY, 5);
+is(ev.offsetX, 5);
+is(ev.offsetY, 5);
+</script>
+</pre>
+</body>
+</html>