Bug 1093686 - Add a test to ensure event listeners on the body don't affect event retargeting. r=roc
authorKartikaya Gupta <kgupta@mozilla.com>
Thu, 06 Nov 2014 08:05:51 -0500
changeset 214595 c2e3537ca09fb4f04de70ed66073be7df872ab4e
parent 214594 064ea6bcfa0b9eb01b935f7263a98b7ae21b59ea
child 214596 18aee2cd999e53a0365f195854ca3d86807ba147
push id27788
push userryanvm@gmail.com
push dateFri, 07 Nov 2014 18:23:58 +0000
treeherdermozilla-central@c39ff12ad6eb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs1093686
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1093686 - Add a test to ensure event listeners on the body don't affect event retargeting. r=roc
layout/base/tests/bug1093686_inner.html
layout/base/tests/mochitest.ini
layout/base/tests/test_bug1093686.html
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/bug1093686_inner.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html id="html" style="height:100%">
+<head>
+  <title>Testing effect of listener on body</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+  .target { position:absolute; left:200px; top:200px; width:200px; height:200px; background:blue; }
+  </style>
+</head>
+<body id="body" onload="setTimeout(runTest, 0)" style="margin:0; width:100%; height:100%; overflow:hidden">
+<div id="content">
+  <div id="ruler" style="position:absolute; left:0; top:0; width:1mozmm; height:0;"></div>
+  <div class="target" id="t"></div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+var eventTarget;
+window.onmousedown = function(event) { eventTarget = event.target; };
+
+// Make sure the target div is "clickable" by adding a click listener on it.
+document.getElementById('t').addEventListener('click', function(e) {
+  parent.ok(true, "target was clicked on");
+}, false);
+
+// Helper functions
+
+function testMouseClick(aX, aY, aExpectedId, aMsg) {
+  eventTarget = null;
+  synthesizeMouseAtPoint(aX, aY, {});
+  try {
+    parent.is(eventTarget.id, aExpectedId,
+       "checking offset " + aX + "," + aY + " hit " + aExpectedId + " [" + aMsg + "]");
+  } catch (ex) {
+    parent.ok(false, "checking offset " + aX + "," + aY + " hit " + aExpectedId + " [" + aMsg + "]; got " + eventTarget);
+  }
+}
+
+function testWithAndWithoutBodyListener(aX, aY, aExpectedId, aMsg) {
+  var func = function(e) {
+    // no-op function
+    parent.ok(true, "body was clicked on");
+  };
+  testMouseClick(aX, aY, aExpectedId, aMsg + " without listener on body");
+  document.body.addEventListener("click", func, false);
+  testMouseClick(aX, aY, aExpectedId, aMsg + " with listener on body");
+  document.body.removeEventListener("click", func, false);
+}
+
+// Main tests
+
+var mm;
+function runTest() {
+  mm = document.getElementById("ruler").getBoundingClientRect().width;
+  parent.ok(4*mm >= 10, "WARNING: mm " + mm + " too small in this configuration. Test results will be bogus");
+
+  // Test near the target, check it hits the target
+  testWithAndWithoutBodyListener(200 - 2*mm, 200 - 2*mm, "t", "basic click retargeting");
+  // Test on the target, check it hits the target
+  testWithAndWithoutBodyListener(200 + 2*mm, 200 + 2*mm, "t", "direct click");
+  // Test outside the target, check it hits the root
+  testWithAndWithoutBodyListener(40, 40, "body", "click way outside target");
+
+  SpecialPowers.pushPrefEnv({"set": [["ui.mouse.radius.enabled", false]]}, runTest2);
+}
+
+function runTest2() {
+  // In this test, mouse event retargeting is disabled.
+
+  // Test near the target, check it hits the body
+  testWithAndWithoutBodyListener(200 - 2*mm, 200 - 2*mm, "body", "basic click retargeting");
+  // Test on the target, check it hits the target
+  testWithAndWithoutBodyListener(200 + 2*mm, 200 + 2*mm, "t", "direct click");
+  // Test outside the target, check it hits the root
+  testWithAndWithoutBodyListener(40, 40, "body", "click way outside target");
+
+  parent.finishTest();
+}
+
+</script>
+</pre>
+</body>
+</html>
--- a/layout/base/tests/mochitest.ini
+++ b/layout/base/tests/mochitest.ini
@@ -501,8 +501,10 @@ support-files =
 [test_bug1070851.html]
 [test_bug1080360.html]
 support-files = bug1080360_inner.html
 [test_bug1078327.html]
 support-files = bug1078327_inner.html
 [test_bug1080361.html]
 support-files = bug1080361_inner.html
 [test_touchcaret_visibility.html]
+[test_bug1093686.html]
+support-files = bug1093686_inner.html
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/test_bug1093686.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1093686
+-->
+  <head>
+    <meta charset="utf-8">
+    <title>Testing effect of listener on body with respect to event retargeting</title>
+    <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+    <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+    <script type="text/javascript">
+      var iframe = undefined;
+      function prepareTest() {
+        SimpleTest.waitForExplicitFinish();
+        iframe = document.getElementById("testFrame");
+        turnOnEventRetargeting(startTest);
+      }
+      function turnOnEventRetargeting(callback) {
+        SpecialPowers.pushPrefEnv({
+          "set": [
+            ["ui.mouse.radius.enabled", true],
+            ["ui.mouse.radius.inputSource.touchOnly", false],
+            ["ui.mouse.radius.leftmm", 8],
+            ["ui.mouse.radius.topmm", 12],
+            ["ui.mouse.radius.rightmm", 8],
+            ["ui.mouse.radius.bottommm", 4]
+          ]
+        }, callback);
+      }
+      function startTest() {
+        iframe.src = "bug1093686_inner.html";
+      }
+      function finishTest() {
+        SimpleTest.finish();
+      }
+    </script>
+  </head>
+  <body onload="prepareTest()">
+    <iframe id="testFrame" height="700" width="700"></iframe>
+  </body>
+</html>