widget/tests/test_bug596600.xhtml

   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 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" />
   9   <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.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
  25 var gLeftWindow, gRightWindow, gBrowserElement;
  26
  27 function openWindows() {
  28   gLeftWindow = window.browsingContext.topChromeWindow
  29                       .open('empty_window.xhtml', '_blank', 'chrome,screenX=50,screenY=50,width=200,height=200');
  30   SimpleTest.waitForFocus(function () {
  31     gRightWindow = window.browsingContext.topChromeWindow
  32                          .open('empty_window.xhtml', '', 'chrome,screenX=300,screenY=50,width=200,height=200');
  33     SimpleTest.waitForFocus(attachBrowserToLeftWindow, gRightWindow);
  34   }, gLeftWindow);
  35 }
  36
  37 function attachBrowserToLeftWindow() {
  38   gBrowserElement = gLeftWindow.document.createXULElement("browser");
  39   gBrowserElement.setAttribute("type", "content");
  40   gBrowserElement.setAttribute("src", "file_bug596600.html");
  41   gBrowserElement.style.width = "100px";
  42   gBrowserElement.style.height = "100px";
  43   gBrowserElement.style.margin = "50px";
  44   gLeftWindow.document.documentElement.appendChild(gBrowserElement);
  45   gBrowserElement.addEventListener("load", async () => {
  46     await test1();
  47     await test2();
  48     gRightWindow.close();
  49     gLeftWindow.close();
  50     SimpleTest.finish();
  51   }, { capture: true, once: true });
  52 }
  53
  54 async function test1() {
  55   // gRightWindow is active, gLeftWindow is inactive.
  56   info(`Synthesizing native "mousemove" event at top-left of the screen...`);
  57   await promiseNativeMouseEvent({
  58     type: "mousemove",
  59     screenX: 0,
  60     screenY: 0,
  61     scale: "inScreenPixels",
  62   });
  63   await new Promise(resolve => SimpleTest.executeSoon(resolve));
  64
  65   // Move into the left window
  66   info(`Synthesizing native "mousemove" event in the left window (but outside the content)...`);
  67   await promiseNativeMouseEventAndWaitForEvent({
  68     type: "mousemove",
  69     target: gBrowserElement,
  70     offsetX: -20,
  71     offsetY: -20,
  72     win: gLeftWindow,
  73     eventTypeToWait: "mouseover",
  74     eventTargetToListen: gLeftWindow,
  75   });
  76   ok(true, `"mouseover" event is fired on the left window when cursor is moved into it`);
  77
  78   // Move over the browser
  79   info(`Synthesizing native "mousemove" event on the content in the left window...`);
  80   await promiseNativeMouseEventAndWaitForEvent({
  81     type: "mousemove",
  82     target: gBrowserElement,
  83     atCenter: true,
  84     win: gLeftWindow,
  85     eventTypeToWait: "mouseout",
  86     eventTargetToListen: gLeftWindow,
  87   });
  88   ok(true, `"mouseout" event is fired on the left window when cursor is moved into its child browser`);
  89 }
  90
  91 async function test2() {
  92   // Make the browser cover the whole window.
  93   gBrowserElement.style.margin = "0";
  94   gBrowserElement.style.width = gBrowserElement.style.height = "200px";
  95
  96   // Add a box to the browser at the left edge.
  97   var doc = gBrowserElement.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 browser 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(winToFocus,
 114                                              elementToWatchForMouseEventOn) {
 115     return Promise.all([
 116       new Promise(resolve => {
 117         function mouseWatcher() {
 118           elementToWatchForMouseEventOn.removeEventListener("mouseover",
 119                                                             mouseWatcher);
 120           elementToWatchForMouseEventOn.removeEventListener("mouseout",
 121                                                             mouseWatcher);
 122           SimpleTest.executeSoon(resolve);
 123         }
 124         elementToWatchForMouseEventOn.addEventListener("mouseover",
 125                                                       mouseWatcher);
 126         elementToWatchForMouseEventOn.addEventListener("mouseout",
 127                                                       mouseWatcher);
 128       }),
 129       new Promise(resolve => SimpleTest.waitForFocus(resolve, winToFocus)),
 130     ]);
 131   }
 132
 133   // Move the mouse over the box.
 134   info(`Synthesizing native "mousemove" event into the box...`);
 135   await promiseNativeMouseEvent({
 136     type: "mousemove",
 137     target: box,
 138     atCenter: true,
 139     win: gLeftWindow,
 140   });
 141   await new Promise(resolve =>
 142     requestAnimationFrame(() => SimpleTest.executeSoon(resolve))
 143   );
 144   // XXX We cannot guarantee that the native mousemouse have already handled here.
 145   ok(!box.matches(":hover"), "Box shouldn't be hovered (since it's in a non-clickthrough browser in a background window)");
 146
 147   // Activate the left window.
 148   info("Waiting the left window activated...");
 149   await changeFocusAndAwaitSyntheticMouse(gLeftWindow, box);
 150   ok(gBrowserElement.matches(":hover"), "browser should be hovered");
 151   ok(box.matches(":hover"), "Box should be hovered");
 152
 153   // De-activate the window (by activating the right window).
 154   info("Waiting the right window activated...");
 155   await changeFocusAndAwaitSyntheticMouse(gRightWindow, box);
 156   ok(!gBrowserElement.matches(":hover"), "browser shouldn't be hovered");
 157   ok(!box.matches(":hover"), "Box shouldn't be hovered");
 158
 159   // Re-activate it.
 160   info("Waiting the left window activated again...");
 161   await changeFocusAndAwaitSyntheticMouse(gLeftWindow, box);
 162   ok(gBrowserElement.matches(":hover"), "browser should be hovered");
 163   ok(box.matches(":hover"), "Box should be hovered");
 164
 165   // Unhover the box and the left window.
 166   info(`Synthesizing native "mousemove" event outside the box and the left window...`);
 167   await promiseNativeMouseEventAndWaitForEvent({
 168     type: "mousemove",
 169     screenX: 0,
 170     screenY: 0,
 171     scale: "inScreenPixels",
 172     win: gLeftWindow,
 173     eventTargetToListen: box,
 174     eventTypeToWait: "mouseout",
 175   });
 176   await new Promise(resolve =>
 177     requestAnimationFrame(() => SimpleTest.executeSoon(resolve))
 178   );
 179
 180   ok(!gBrowserElement.matches(":hover"), "browser shouldn't be hovered");
 181   ok(!box.matches(":hover"), "box shouldn't be hovered");
 182 }
 183
 184 SimpleTest.waitForExplicitFinish();
 185 SimpleTest.waitForFocus(openWindows);
 186
 187 ]]>
 188 </script>
 189
 190 </window>