diff options
Diffstat (limited to 'dom/events/test/test_offsetxy.html')
-rw-r--r-- | dom/events/test/test_offsetxy.html | 98 |
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> |