test_offsetxy.html (2902B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for DOM MouseEvent offsetX/Y</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 </head> 8 <body> 9 <p id="display"></p> 10 <div id="content" style="display: none"> 11 12 </div> 13 <div id="d" style="position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px"></div> 14 <div id="d2" style="position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px; transform:translateX(100px)"></div> 15 <div id="d3" style="display:none; position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px"></div> 16 <div id="d4" style="transform:scale(0); position:absolute; top:100px; left:100px; width:100px; border:5px dotted black; height:100px"></div> 17 18 <pre id="test"> 19 <script type="application/javascript"> 20 21 var offsetX = -1, offsetY = -1; 22 var ev = new MouseEvent("click", {clientX:110, clientY:110}); 23 is(ev.offsetX, 110); 24 is(ev.offsetY, 110); 25 is(ev.offsetX, ev.pageX); 26 is(ev.offsetY, ev.pageY); 27 d.addEventListener("click", function (event) { 28 is(ev, event, "Event objects must match"); 29 offsetX = event.offsetX; 30 offsetY = event.offsetY; 31 }); 32 d.dispatchEvent(ev); 33 is(offsetX, 5); 34 is(offsetY, 5); 35 is(ev.offsetX, 5); 36 is(ev.offsetY, 5); 37 38 var ev2 = new MouseEvent("click", {clientX:220, clientY:130}); 39 is(ev2.offsetX, 220); 40 is(ev2.offsetY, 130); 41 is(ev2.offsetX, ev2.pageX); 42 is(ev2.offsetY, ev2.pageY); 43 d2.addEventListener("click", function (event) { 44 is(ev2, event, "Event objects must match"); 45 offsetX = event.offsetX; 46 offsetY = event.offsetY; 47 }); 48 d2.dispatchEvent(ev2); 49 is(offsetX, 15); 50 is(offsetY, 25); 51 is(ev2.offsetX, 15); 52 is(ev2.offsetY, 25); 53 54 var ev3 = new MouseEvent("click", {clientX:110, clientY:110}); 55 is(ev3.offsetX, 110); 56 is(ev3.offsetY, 110); 57 is(ev3.offsetX, ev3.pageX); 58 is(ev3.offsetY, ev3.pageY); 59 d3.addEventListener("click", function (event) { 60 is(ev3, event, "Event objects must match"); 61 offsetX = event.offsetX; 62 offsetY = event.offsetY; 63 }); 64 d3.dispatchEvent(ev3); 65 is(offsetX, 0); 66 is(offsetY, 0); 67 is(ev3.offsetX, 0); 68 is(ev3.offsetY, 0); 69 70 var ev4 = new MouseEvent("click", {clientX:110, clientY:110}); 71 is(ev4.offsetX, 110); 72 is(ev4.offsetY, 110); 73 is(ev4.offsetX, ev4.pageX); 74 is(ev4.offsetY, ev4.pageY); 75 d4.addEventListener("click", function (event) { 76 is(ev4, event, "Event objects must match"); 77 offsetX = event.offsetX; 78 offsetY = event.offsetY; 79 }); 80 d4.dispatchEvent(ev4); 81 is(offsetX, 0); 82 is(offsetY, 0); 83 is(ev4.offsetX, 0); 84 is(ev4.offsetY, 0); 85 86 // Now redispatch ev4 to "d" to make sure that its offsetX gets updated 87 // relative to the new target. Have to set "ev" to "ev4", because the listener 88 // on "d" expects to see "ev" as the event. 89 ev = ev4; 90 d.dispatchEvent(ev4); 91 is(offsetX, 5); 92 is(offsetY, 5); 93 is(ev.offsetX, 5); 94 is(ev.offsetY, 5); 95 </script> 96 </pre> 97 </body> 98 </html>