LayoutTests/fast/events/mouseclick-target-and-positioning.html

   1 <html>
   2 <head>
   3 <script>
   4 function print(message, color) {
   5     var paragraph = document.createElement("div");
   6     paragraph.appendChild(document.createTextNode(message));
   7     paragraph.style.fontFamily = "monospace";
   8     if (color)
   9         paragraph.style.color = color;
  10     document.getElementById("console").appendChild(paragraph);
  11 }
  12
  13
  14 function shouldBe(description, actual, expected, useFuzzyMath)
  15 {
  16     if (useFuzzyMath) {
  17         if (Math.abs(expected - actual) < 20) { // >
  18             print("PASS: " + description + " should be approximately " + expected +
  19                   " and is " + actual + "\n",
  20                   "green");
  21         } else {
  22             print("FAIL: " + description + " should be approximately " + expected +
  23                   " but instead is " + actual + "\n",
  24                   "red");
  25         }
  26     } else {
  27         if (expected === actual) {
  28             print("PASS: " + description + " should be " + expected +
  29                   " and is\n",
  30                   "green");
  31         } else {
  32             print("FAIL: " + description + " should be " + expected +
  33                   " but instead is " + actual + "\n",
  34                   "red");
  35         }
  36     }
  37 }
  38
  39 function listener(event)
  40 {
  41     document.getElementById("console").innerHTML = "";
  42
  43     shouldBe("event target", document.getElementById('test'), event.target, false);
  44
  45     var useFuzzyMath;
  46     if (window.eventSender)
  47         useFuzzyMath = false;
  48     else {
  49         // Use fuzzy math, because we can't predict exactly where the user will click
  50         useFuzzyMath = true;
  51     }
  52
  53     shouldBe("event.pageX", event.pageX, 175, useFuzzyMath);
  54     shouldBe("event.pageY", event.pageY, 105, useFuzzyMath);
  55     shouldBe("event.clientX", event.clientX, 175, useFuzzyMath);
  56     shouldBe("event.clientY", event.clientY, 105, useFuzzyMath);
  57     shouldBe("event.layerX", event.layerX, 7, useFuzzyMath); // not really sure why this isn't 5
  58     shouldBe("event.layerY", event.layerY, 5, useFuzzyMath);
  59     shouldBe("event.offsetX", event.offsetX, 7, useFuzzyMath); // not really sure why this isn't 5
  60     shouldBe("event.offsetY", event.offsetY, 5, useFuzzyMath);
  61     shouldBe("event.x", event.x, 175, useFuzzyMath);
  62     shouldBe("event.y", event.y, 105, useFuzzyMath);
  63 }
  64
  65 function test() {
  66     if (window.testRunner) {
  67         testRunner.dumpAsText();
  68         testRunner.waitUntilDone();
  69     }
  70
  71     document.getElementById('test').addEventListener("click", listener, false);
  72
  73     if (window.eventSender) {
  74         eventSender.mouseMoveTo(175, 105);
  75         eventSender.mouseDown();
  76         eventSender.mouseUp();
  77     }
  78
  79     if (window.testRunner)
  80         testRunner.notifyDone();
  81 }
  82 </script>
  83 </head>
  84 <body onload="test();">
  85 <p>This page tests whether a click event propogates with the correct target and positioning.
  86 See <a href="rdar://problem/4477126">rdar://problem/4477126</a>.
  87 </p>
  88 <hr>
  89 <div style="position:absolute; top: 100">
  90 click inside the red box:<span id="test" style="position:absolute; left:160; color:red">[]</span>
  91 </div>
  92 <div style="position:absolute; top: 150;" id='console'></div>
  93 </body>
  94 </html>