Bug 1738265 - Teach some popup tests to deal with popups having margins by default. r=NeilDeakin

For tests that actually test margin handling I've just removed the default
margin by adding:

  <?xml-stylesheet href="data:text/css,menupopup{margin: 0}" type="text/css"?>

The other tests I've just fixed by accounting for the margins.

Differential Revision: https://phabricator.services.mozilla.com/D129866

browser/components/extensions/test/browser/browser_ext_popup_select_in_oopif.js

@@ -94,10 +94,12 @@ add_task(async function testPopupSelectPopup() {
   await popupPromise;
 
   let popupRect = selectPopup.getOuterScreenRect();
+  let popupMarginLeft = parseFloat(getComputedStyle(selectPopup).marginLeft);
+  let popupMarginTop = parseFloat(getComputedStyle(selectPopup).marginTop);
 
   is(
     Math.floor(browserForPopup.screenX + selectRect.left),
-    popupRect.left,
+    popupRect.left - popupMarginLeft,
     "Select popup has the correct x origin"
   );
 
@@ -105,7 +107,11 @@ add_task(async function testPopupSelectPopup() {
   let expectedY = navigator.platform.includes("Mac")
     ? Math.floor(browserForPopup.screenY)
     : Math.floor(browserForPopup.screenY + selectRect.bottom);
-  is(expectedY, popupRect.top, "Select popup has the correct y origin");
+  is(
+    expectedY,
+    popupRect.top - popupMarginTop,
+    "Select popup has the correct y origin"
+  );
 
   const onPopupHidden = BrowserTestUtils.waitForEvent(
     selectPopup,

gfx/layers/apz/test/mochitest/browser_test_select_popup_position.js

@@ -72,9 +72,11 @@ async function runPopupPositionTest(parentDocumentFileName) {
   await openSelectPopup(selectPopup);
 
   const popup_rect = selectPopup.getBoundingClientRect();
+  const popupMarginTop = parseFloat(getComputedStyle(selectPopup).marginTop);
+  const popupMarginLeft = parseFloat(getComputedStyle(selectPopup).marginLeft);
 
   is(
-    popup_rect.left,
+    popup_rect.left - popupMarginLeft,
     selectRect.x * 2.0,
     "select popup position should be scaled by the desktop zoom"
   );
@@ -83,14 +85,14 @@ async function runPopupPositionTest(parentDocumentFileName) {
   // option element.
   if (!navigator.platform.includes("Mac")) {
     is(
-      popup_rect.top,
+      popup_rect.top - popupMarginTop,
       tab.linkedBrowser.getBoundingClientRect().top +
         (selectRect.y + selectRect.height) * 2.0,
       "select popup position should be scaled by the desktop zoom"
     );
   } else {
     is(
-      popup_rect.top,
+      popup_rect.top - popupMarginTop,
       tab.linkedBrowser.getBoundingClientRect().top + selectRect.y * 2.0,
       "select popup position should be scaled by the desktop zoom"
     );

layout/xul/test/test_bug467442.xhtml

@@ -30,8 +30,9 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=467442
 
     panel.addEventListener("popupshown", function onpopupshown() {
       let panelRect = panel.getBoundingClientRect();
+      let marginLeft  = parseFloat(getComputedStyle(panel).marginLeft);
       let anchorRect = anchor.getBoundingClientRect();
-      is(panelRect.left, anchorRect.left, "Panel should be anchored to the button");
+      is(panelRect.left - marginLeft, anchorRect.left, "Panel should be anchored to the button");
       panel.addEventListener("popuphidden", function onpopuphidden() {
         SimpleTest.finish();
       }, { once: true });

layout/xul/test/test_bug477754.xhtml

@@ -38,8 +38,10 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=477754
     }, false);
 
     function doTest() {
-      is(Math.round(testAnchor.getBoundingClientRect().right -
-                    testPopup.getBoundingClientRect().right), 10,
+      let anchorRect = testAnchor.getBoundingClientRect();
+      let popupRect = testPopup.getBoundingClientRect();
+      let marginRight = parseFloat(getComputedStyle(testPopup).marginRight)
+      is(Math.round(anchorRect.right - popupRect.right - marginRight), 10,
          "RTL popup's right offset should be equal to the x offset passed to openPopup");
       testPopup.hidePopup();
       SimpleTest.finish();

layout/xul/test/test_resizer.xhtml

@@ -28,6 +28,7 @@ XUL <resizer> tests
     var step = 0;
     function popupShown(event)
     {
+      let panel = document.getElementById("panel");
       if (step == 0) {
         // check to make sure that the popup cannot be resized past the edges of
         // the content area
@@ -37,7 +38,7 @@ XUL <resizer> tests
 
         // allow a one pixel variance as rounding is always done to the inside
         // of a rectangle.
-        var popuprect = document.getElementById("panel").getBoundingClientRect();
+        var popuprect = panel.getBoundingClientRect();
         ok(Math.round(popuprect.right) == window.innerWidth ||
            Math.round(popuprect.right) == window.innerWidth - 1,
            "resized to content edge width");
@@ -52,9 +53,11 @@ XUL <resizer> tests
         // the popup is opened twice. Make sure that for the second time, the
         // resized popup opens in the same direction as there should still be
         // room for it
-        var popuprect = document.getElementById("panel").getBoundingClientRect();
-        is(Math.round(popuprect.left), window.innerWidth - 130, "reopen popup left");
-        is(Math.round(popuprect.top), window.innerHeight - 130, "reopen popup top");
+        var popuprect = panel.getBoundingClientRect();
+        var marginLeft = parseFloat(getComputedStyle(panel).marginLeft);
+        var marginTop = parseFloat(getComputedStyle(panel).marginTop);
+        is(Math.round(popuprect.left - marginLeft), window.innerWidth - 130, "reopen popup left");
+        is(Math.round(popuprect.top - marginTop), window.innerHeight - 130, "reopen popup top");
       }
 
       event.target.hidePopup();

toolkit/content/tests/browser/browser_datetime_datepicker.js

@@ -109,8 +109,18 @@ async function verifyPickerPosition(browsingContext, inputId) {
       msg + ": " + got + " should be equal(-ish) to " + exp
     );
   }
-  is_close(helper.panel.screenX, inputRect.left, "datepicker x position");
-  is_close(helper.panel.screenY, inputRect.bottom, "datepicker y position");
+  const marginLeft = parseFloat(getComputedStyle(helper.panel).marginLeft);
+  const marginTop = parseFloat(getComputedStyle(helper.panel).marginTop);
+  is_close(
+    helper.panel.screenX - marginLeft,
+    inputRect.left,
+    "datepicker x position"
+  );
+  is_close(
+    helper.panel.screenY - marginTop,
+    inputRect.bottom,
+    "datepicker y position"
+  );
 }
 
 let helper = new DateTimeTestHelper();

toolkit/content/tests/chrome/frame_popup_anchor.xhtml

@@ -33,13 +33,13 @@ function popupShowing(event)
 function popupShown()
 {
   var left, top;
-  var popuprect = document.getElementById("popup").getBoundingClientRect();
+  var popup = document.getElementById("popup");
+  var popuprect = popup.getBoundingClientRect();
   if (isSecondTest) {
     let buttonrect = document.getElementById("button").getBoundingClientRect();
     left = buttonrect.left + 6;
     top = buttonrect.top + 6;
-  }
-  else {
+  } else {
     let iframerect = parent.document.getElementById("frame").getBoundingClientRect();
     let buttonrect = parent.document.getElementById("outerbutton").getBoundingClientRect();
 
@@ -54,6 +54,9 @@ function popupShown()
     top = -(Math.round(iframerect.top) - Math.round(buttonrect.bottom) + 2);
   }
 
+  left += parseFloat(getComputedStyle(popup).marginLeft);
+  top += parseFloat(getComputedStyle(popup).marginTop);
+
   var testid = isSecondTest ? "with mouse" : "anchored to parent frame";
   parent.arguments[0].SimpleTest.is(Math.round(popuprect.left), left, "popup left " + testid);
   parent.arguments[0].SimpleTest.is(Math.round(popuprect.top), top, "popup top " + testid);

toolkit/content/tests/chrome/test_contextmenu_list.xhtml

@@ -83,7 +83,7 @@ var gContextMenuFired = false;
 async function startTest()
 {
   // These tests check behavior of non-native menus, and use anchored and non-anchored popups
-  // somewhat interchangibly. So disable native context menus for this test.
+  // somewhat interchangeably. So disable native context menus for this test.
   // We will have separate tests for native context menu behavior, see bug 1700727.
   await SpecialPowers.pushPrefEnv({ set: [["widget.macos.native-context-menus", false]] });
 
@@ -228,14 +228,16 @@ function checkContextMenuForMenu(event)
 function checkPopup()
 {
   var menurect = $("themenu").getBoundingClientRect();
-  
+
   // Context menus are offset by a number of pixels from the mouse click
   // which activates them. This is so that they don't appear exactly
   // under the mouse which can cause them to be mistakenly dismissed.
-  // The number of pixels depends on the platform  and is defined in
+  // The number of pixels depends on the platform and is defined in
   // each platform's nsLookAndFeel
   var contextMenuOffsetX = platformIsMac() ? 1 : 2;
   var contextMenuOffsetY = platformIsMac() ? -6 : 2;
+  contextMenuOffsetY += parseFloat(getComputedStyle($("themenu")).marginTop);
+  contextMenuOffsetX += parseFloat(getComputedStyle($("themenu")).marginLeft);
 
   if (gTestId == 0) {
     if (gTestElement == "list") {

toolkit/content/tests/chrome/test_popup_coords.xhtml

@@ -6,8 +6,8 @@
   onload="setTimeout(openThePopup, 0, 'outer');"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      
-  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
 
 <deck style="margin-top: 5px; padding-top: 5px;">
   <label id="outer" popup="outerpopup" value="Popup"/>
@@ -72,8 +72,10 @@ function popupShowingEventOccurred(event)
   is(event.rangeOffset, Array.prototype.indexOf.call(trigger.parentNode.childNodes, trigger) + 1, testname + "rangeOffset");
 
   var popuprect = event.target.getBoundingClientRect();
-  is(Math.round(popuprect.left), Math.round(rect.left + 4), "popup left");
-  is(Math.round(popuprect.top), Math.round(rect.top + 5), "popup top");
+  var marginLeft = parseFloat(getComputedStyle(event.target).marginLeft);
+  var marginTop = parseFloat(getComputedStyle(event.target).marginTop);
+  is(Math.round(popuprect.left - marginLeft), Math.round(rect.left + 4), "popup left");
+  is(Math.round(popuprect.top - marginTop), Math.round(rect.top + 5), "popup top");
   ok(popuprect.width > 0, "popup width");
   ok(popuprect.height > 0, "popup height");
 }

toolkit/content/tests/chrome/test_popup_moveToAnchor.xhtml

@@ -4,8 +4,8 @@
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      
-  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
 
 <vbox align="start" style="margin-left: 80px;">
   <button id="button1" label="Button 1" style="margin-top: 80px;"/>
@@ -31,32 +31,34 @@ function popupshown()
   var popupheight = popup.getBoundingClientRect().height;
   var button1rect = $("button1").getBoundingClientRect();
   var button2rect = $("button2").getBoundingClientRect();
+  var marginLeft = parseFloat(getComputedStyle(popup).marginLeft);
+  var marginTop = parseFloat(getComputedStyle(popup).marginTop);
 
-  checkCoords(popup, button1rect.left, button1rect.bottom, "initial");
+  checkCoords(popup, button1rect.left + marginLeft, button1rect.bottom + marginTop, "initial");
 
   popup.moveToAnchor($("button1"), "after_start", 0, 8);
-  checkCoords(popup, button1rect.left, button1rect.bottom + 8, "move anchor top + 8");
+  checkCoords(popup, button1rect.left + marginLeft, button1rect.bottom + 8 + marginTop, "move anchor top + 8");
 
   popup.moveToAnchor($("button1"), "after_start", 6, -10);
-  checkCoords(popup, button1rect.left + 6, button1rect.bottom - 10, "move anchor left + 6, top - 10");
+  checkCoords(popup, button1rect.left + 6 + marginLeft, button1rect.bottom - 10 + marginTop, "move anchor left + 6, top - 10");
 
   popup.moveToAnchor($("button1"), "before_start", -2, 0);
-  checkCoords(popup, button1rect.left - 2, button1rect.top - popupheight, "move anchor before_start");
+  checkCoords(popup, button1rect.left - 2 + marginLeft, button1rect.top - popupheight - marginTop, "move anchor before_start");
 
   popup.moveToAnchor($("button2"), "before_start");
-  checkCoords(popup, button2rect.left, button2rect.top - popupheight, "move button2");
+  checkCoords(popup, button2rect.left + marginLeft, button2rect.top - popupheight - marginTop, "move button2");
 
   popup.moveToAnchor($("button1"), "end_before");
-  checkCoords(popup, button1rect.right, button1rect.top, "move anchor end_before");
+  checkCoords(popup, button1rect.right + marginLeft, button1rect.top + marginTop, "move anchor end_before");
 
   popup.moveToAnchor($("button2"), "after_start", 5, 4);
-  checkCoords(popup, button2rect.left + 5, button2rect.bottom + 4, "move button2 left + 5, top + 4");
+  checkCoords(popup, button2rect.left + 5 + marginLeft, button2rect.bottom + 4 + marginTop, "move button2 left + 5, top + 4");
 
   popup.moveTo($("button1").screenX + 10, $("button1").screenY + 12);
   checkCoords(popup, button1rect.left + 10, button1rect.top + 12, "move to button1 screen with offset");
 
   popup.moveToAnchor($("button1"), "after_start", 1, 2);
-  checkCoords(popup, button1rect.left + 1, button1rect.bottom + 2, "move button2 after screen");
+  checkCoords(popup, button1rect.left + 1 + marginLeft, button1rect.bottom + 2 + marginTop, "move button2 after screen");
 
   popup.hidePopup();
 }

toolkit/content/tests/chrome/test_popup_scaled.xhtml

@@ -6,8 +6,8 @@
         onload="setTimeout(runTests, 0);"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      
-  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
 
 <!-- This test checks that the position is correct in two cases:
       - a popup anchored at an element in a scaled document
@@ -46,17 +46,17 @@ function setScale(win, scale)
 function shown()
 {
   var popup = $("popup");
+  var marginLeft = parseFloat(getComputedStyle(popup).marginLeft);
+  var marginTop = parseFloat(getComputedStyle(popup).marginTop);
   if (screenTest) {
-    is(popup.screenX, screenx, "screen left position");
-    is(popup.screenY, screeny, "screen top position");
-  }
-  else {
+    is(popup.screenX - marginLeft, screenx, "screen left position");
+    is(popup.screenY - marginTop, screeny, "screen top position");
+  } else {
     var anchor = $("frame").contentDocument.getElementById("two");
-
     is(Math.round(anchor.getBoundingClientRect().left * 2),
-       Math.round(popup.getBoundingClientRect().left), "anchored left position");
+       Math.round(popup.getBoundingClientRect().left - marginLeft), "anchored left position");
     is(Math.round(anchor.getBoundingClientRect().bottom * 2),
-       Math.round(popup.getBoundingClientRect().top), "anchored top position");
+       Math.round(popup.getBoundingClientRect().top - marginTop), "anchored top position");
   }
 
   popup.hidePopup();

toolkit/content/tests/chrome/window_panel_anchoradjust.xhtml

@@ -42,16 +42,25 @@ function next()
   })
 }
 
-function waitForPanel(panel, event)  
+function waitForPanel(panel, event)
 {
   return new Promise(resolve => {
     panel.addEventListener(event, () => { resolve(); }, { once: true });
   });
 }
 
-function isWithinHalfPixel(a, b)
+function isWithinHalfPixel(a, b, message)
 {
-  return Math.abs(a - b) <= 0.5;
+  ok(Math.abs(a - b) <= 0.5, `${message}: ${a}, ${b}`);
+}
+
+function getPanelPos(panel) {
+  let {left, top, bottom, right} = panel.getBoundingClientRect();
+  left -= parseFloat(getComputedStyle(panel).marginLeft);
+  top -= parseFloat(getComputedStyle(panel).marginTop);
+  bottom += parseFloat(getComputedStyle(panel).marginBottom);
+  right += parseFloat(getComputedStyle(panel).marginRight);
+  return {left, top, bottom, right};
 }
 
 async function runTests() {
@@ -64,8 +73,8 @@ async function runTests() {
   await popupshown;
 
   let anchorrect = anchor.getBoundingClientRect();
-  let panelrect = panel.getBoundingClientRect();
-  let xarrowdiff = panelrect.left - anchorrect.left;
+  let panelpos = getPanelPos(panel);
+  let xarrowdiff = panelpos.left - anchorrect.left;
 
   // When the anchor is moved in some manner, the panel should be adjusted
   let popuppositioned = waitForPanel(panel, "popuppositioned");
@@ -75,9 +84,9 @@ async function runTests() {
   info("after popuppositioned");
 
   anchorrect = anchor.getBoundingClientRect();
-  panelrect = panel.getBoundingClientRect();
-  ok(isWithinHalfPixel(anchorrect.left, panelrect.left - xarrowdiff), "anchor moved x");
-  ok(isWithinHalfPixel(anchorrect.bottom, panelrect.top), "anchor moved y");
+  panelpos = getPanelPos(panel);
+  isWithinHalfPixel(anchorrect.left, panelpos.left - xarrowdiff, "anchor moved x");
+  isWithinHalfPixel(anchorrect.bottom, panelpos.top, "anchor moved y");
 
   // moveToAnchor is used to change the anchor
   let anchor2 = document.getElementById("anchor2");
@@ -88,9 +97,9 @@ async function runTests() {
   info("after popuppositioned 2");
 
   let anchor2rect = anchor2.getBoundingClientRect();
-  panelrect = panel.getBoundingClientRect();
-  ok(isWithinHalfPixel(anchor2rect.right, panelrect.right + xarrowdiff), "new anchor x");
-  ok(isWithinHalfPixel(anchor2rect.bottom, panelrect.top), "new anchor y");
+  panelpos = getPanelPos(panel);
+  isWithinHalfPixel(anchor2rect.right, panelpos.right + xarrowdiff, "new anchor x");
+  isWithinHalfPixel(anchor2rect.bottom, panelpos.top, "new anchor y");
 
   // moveToAnchor is used to change the anchor with an x and y offset
   popuppositioned = waitForPanel(panel, "popuppositioned");
@@ -98,9 +107,9 @@ async function runTests() {
   await popuppositioned;
 
   anchor2rect = anchor2.getBoundingClientRect();
-  panelrect = panel.getBoundingClientRect();
-  ok(isWithinHalfPixel(anchor2rect.right + 7, panelrect.right + xarrowdiff), "new anchor with offset x");
-  ok(isWithinHalfPixel(anchor2rect.bottom + 9, panelrect.top), "new anchor with offset y");
+  panelpos = getPanelPos(panel);
+  isWithinHalfPixel(anchor2rect.right + 7, panelpos.right + xarrowdiff, "new anchor with offset x");
+  isWithinHalfPixel(anchor2rect.bottom + 9, panelpos.top, "new anchor with offset y");
 
   // When the container of the anchor is collapsed, the panel should be hidden.
   let popuphidden = waitForPanel(panel, "popuphidden");
@@ -152,14 +161,13 @@ async function runTests() {
   await popupshown;
 
   let anchor4rect = anchor4.getBoundingClientRect();
-  panelrect = panel.getBoundingClientRect();
 
   anchor4.style.marginLeft = "50px"
   await next();
 
-  panelrect = panel.getBoundingClientRect();
-  ok(isWithinHalfPixel(anchor4rect.left, panelrect.left - xarrowdiff), "no follow anchor x");
-  ok(isWithinHalfPixel(anchor4rect.bottom, panelrect.top), "no follow anchor y");
+  panelpos = getPanelPos(panel);
+  isWithinHalfPixel(anchor4rect.left, panelpos.left - xarrowdiff, "no follow anchor x");
+  isWithinHalfPixel(anchor4rect.bottom, panelpos.top, "no follow anchor y");
 
   popuphidden = waitForPanel(panel, "popuphidden");
   panel.hidePopup();

toolkit/content/tests/chrome/window_popup_attribute.xhtml

@@ -1,5 +1,6 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,menupopup{margin: 0}" type="text/css"?>
 
 <window title="Popup Attribute Tests"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

toolkit/content/tests/chrome/window_popup_button.xhtml

@@ -1,12 +1,13 @@
 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,menupopup{margin: 0}" type="text/css"?>
 
 <window title="Popup Tests"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
-  <script type="application/javascript" src="popup_shared.js"></script>      
-  <script type="application/javascript" src="popup_trigger.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <script src="popup_shared.js"></script>
+  <script src="popup_trigger.js"></script>
 
 <script>
 window.opener.SimpleTest.waitForFocus(runTests, window);