widget/tests/test_bug596600.xul

   1 <?xml version="1.0"?>
   2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
   3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css"
   4                  type="text/css"?>
   5 <window title="Native mouse event tests"
   6   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   7
   8   <script type="application/javascript"
   9           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" />
  10
  11 <body  xmlns="http://www.w3.org/1999/xhtml">
  12 <p id="display"></p>
  13 <div id="content" style="display: none">
  14
  15 </div>
  16 <pre id="test">
  17 </pre>
  18 </body>
  19
  20 <script class="testbody" type="application/javascript">
  21 <![CDATA[
  22
  23 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  24 const NSMouseMoved = 5;
  25
  26 var gLeftWindow, gRightWindow, gIFrame;
  27 var gExpectedEvents = [];
  28
  29 function moveMouseTo(x, y, andThen) {
  30   var utils = gLeftWindow.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
  31                                  getInterface(Components.interfaces.nsIDOMWindowUtils);
  32   utils.sendNativeMouseEvent(x, y, NSMouseMoved, 0, gLeftWindow.documentElement);
  33   SimpleTest.executeSoon(andThen);
  34 }
  35
  36 function openWindows() {
  37   gLeftWindow = open('empty_window.xul', '_blank', 'chrome,screenX=50,screenY=50,width=200,height=200');
  38   SimpleTest.waitForFocus(function () {
  39     gRightWindow = open('empty_window.xul', '', 'chrome,screenX=300,screenY=50,width=200,height=200');
  40     SimpleTest.waitForFocus(attachIFrameToRightWindow, gRightWindow);
  41   }, gLeftWindow);
  42 }
  43
  44 function attachIFrameToRightWindow() {
  45   gIFrame = gLeftWindow.document.createElementNS(XUL_NS, "iframe");
  46   gIFrame.setAttribute("type", "content");
  47   gIFrame.setAttribute("clickthrough", "never");
  48   gIFrame.setAttribute("src", "data:text/html,<!DOCTYPE html>Content page");
  49   gIFrame.style.width = "100px";
  50   gIFrame.style.height = "100px";
  51   gIFrame.style.margin = "50px";
  52   gLeftWindow.document.documentElement.appendChild(gIFrame);
  53   gIFrame.contentWindow.addEventListener("load", function (e) {
  54     gIFrame.removeEventListener("load", arguments.callee, false);
  55     test1();
  56   }, false);
  57 }
  58
  59 function test1() {
  60   // gRightWindow is active, gLeftWindow is inactive.
  61   moveMouseTo(0, 0, function () {
  62     var expectMouseOver = false, expectMouseOut = false;
  63     function mouseOverListener(e) {
  64       ok(expectMouseOver, "Got expected mouseover at " + e.screenX + ", " + e.screenY);
  65       expectMouseOver = false;
  66     }
  67     function mouseOutListener(e) {
  68       ok(expectMouseOut, "Got expected mouseout at " + e.screenX + ", " + e.screenY);
  69       expectMouseOut = false;
  70     }
  71     gLeftWindow.addEventListener("mouseover", mouseOverListener, false);
  72     gLeftWindow.addEventListener("mouseout", mouseOutListener, false);
  73
  74     // Move into the left window
  75     expectMouseOver = true;
  76     moveMouseTo(80, 80, function () {
  77       ok(!expectMouseOver, "Should have got mouseover event");
  78
  79       // Move over the iframe, which has clickthrough="never".
  80       expectMouseOut = true;
  81       moveMouseTo(150, 150, function () {
  82         ok (!expectMouseOut, "Should have got mouseout event");
  83         gLeftWindow.removeEventListener("mouseover", mouseOverListener, false);
  84         gLeftWindow.removeEventListener("mouseout", mouseOutListener, false);
  85         test2();
  86       });
  87     });
  88   });
  89 }
  90
  91 function test2() {
  92   // Make the iframe cover the whole window.
  93   gIFrame.style.margin = "0";
  94   gIFrame.style.width = gIFrame.style.height = "200px";
  95
  96   // Add a box to the iframe at the left edge.
  97   var doc = gIFrame.contentDocument;
  98   var box = doc.createElement("div");
  99   box.setAttribute("id", "box");
 100   box.style.position = "absolute";
 101   box.style.left = "0";
 102   box.style.top = "50px";
 103   box.style.width = "100px";
 104   box.style.height = "100px";
 105   box.style.backgroundColor = "green";
 106   doc.body.appendChild(box);
 107
 108   ok(!box.matches(":hover"), "Box shouldn't be hovered (since the mouse isn't over it and since it's in a non-clickthrough iframe in a background window)");
 109
 110   // A function to waitForFocus and then wait for synthetic mouse
 111   // events to happen.  Note that those happen off the refresh driver,
 112   // and happen after animation frame requests.
 113   function changeFocusAndAwaitSyntheticMouse(callback, winToFocus,
 114                                              elementToWatchForMouseEventOn) {
 115      function mouseWatcher() {
 116        elementToWatchForMouseEventOn.removeEventListener("mouseover",
 117                                                          mouseWatcher,
 118                                                          false);
 119        elementToWatchForMouseEventOn.removeEventListener("mouseout",
 120                                                          mouseWatcher,
 121                                                          false);
 122        SimpleTest.executeSoon(callback);
 123      }
 124      elementToWatchForMouseEventOn.addEventListener("mouseover",
 125                                                     mouseWatcher,
 126                                                     false);
 127      elementToWatchForMouseEventOn.addEventListener("mouseout",
 128                                                     mouseWatcher,
 129                                                     false);
 130      // Just pass a dummy function to waitForFocus; the mouseout/over listener
 131      // will actually handle things for us.
 132      SimpleTest.waitForFocus(function() {}, winToFocus);
 133   }
 134
 135   // Move the mouse over the box.
 136   moveMouseTo(100, 150, function () {
 137     ok(!box.matches(":hover"), "Box shouldn't be hovered (since it's in a non-clickthrough iframe in a background window)");
 138     // Activate the left window.
 139     changeFocusAndAwaitSyntheticMouse(function () {
 140       ok(gIFrame.matches(":hover"), "iframe should be hovered");
 141       ok(box.matches(":hover"), "Box should be hovered");
 142       // De-activate the window (by activating the right window).
 143       changeFocusAndAwaitSyntheticMouse(function () {
 144         ok(!gIFrame.matches(":hover"), "iframe shouldn't be hovered");
 145         ok(!box.matches(":hover"), "Box shouldn't be hovered");
 146         // Re-activate it.
 147         changeFocusAndAwaitSyntheticMouse(function () {
 148           ok(gIFrame.matches(":hover"), "iframe should be hovered");
 149           ok(box.matches(":hover"), "Box should be hovered");
 150           // Unhover box and iframe by moving the mouse outside the window.
 151           moveMouseTo(0, 150, function () {
 152             const isOSXSnowLeopard = navigator.userAgent.indexOf("Mac OS X 10.6") != -1;
 153             if (!isOSXSnowLeopard) {
 154               ok(!gIFrame.matches(":hover"), "iframe shouldn't be hovered");
 155               ok(!box.matches(":hover"), "box shouldn't be hovered");
 156             }
 157             finalize();
 158           });
 159         }, gLeftWindow, box);
 160       }, gRightWindow, box);
 161     }, gLeftWindow, box);
 162   });
 163 }
 164
 165 function finalize() {
 166   gRightWindow.close();
 167   gLeftWindow.close();
 168   SimpleTest.finish();
 169 }
 170
 171 SimpleTest.waitForExplicitFinish();
 172 SimpleTest.waitForFocus(openWindows);
 173
 174 ]]>
 175 </script>
 176
 177 </window>