<!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>