dom/events/test/test_offsetxy.html

   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>