Bug 1701963, fix some menu related tests on Windows 10 that fail with the larger menu size, r=Gijs

Account for the border and padding now on the inner arrowscrollbox, and increase some window and margin
sizes to account for the menu being larger in Windows 10.

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

browser/base/content/test/forms/browser_selectpopup.js

@@ -829,8 +829,12 @@ async function performLargePopupTests(win) {
     // Don't check the scroll position for the last step as the popup will be cut off.
     if (positions.length) {
       let cs = win.getComputedStyle(selectPopup);
+      let csArrow = win.getComputedStyle(selectPopup.scrollBox);
       let bpBottom =
-        parseFloat(cs.paddingBottom) + parseFloat(cs.borderBottomWidth);
+        parseFloat(cs.paddingBottom) +
+        parseFloat(cs.borderBottomWidth) +
+        parseFloat(csArrow.paddingBottom) +
+        parseFloat(csArrow.borderBottomWidth);
       let selectedOption = 60;
 
       if (Services.prefs.getBoolPref("dom.forms.selectSearch")) {

toolkit/content/tests/chrome/test_menuchecks.xhtml

@@ -72,6 +72,7 @@
     {
       testname: "select out of order checked radio",
       item: "bysubject",
+      scroll: true,
       checked: ["toolbar", "history", "bysubject", "ascending"]
     },
     {
@@ -111,6 +112,13 @@
   function popupShown()
   {
     var test = tests[gTestIndex];
+
+    if (test.scroll) {
+      // On Windows 10, the menu is larger than the test frame. Scroll the later
+      // items into view. Since we are just testing the checked state of the items,
+      // and not their positions, this doesn't affect the behaviour of the test.
+      document.getElementById(test.item).scrollIntoView({ block: 'nearest' });
+    }
     synthesizeMouse(document.getElementById(test.item), 4, 4, { });
   }
 

toolkit/content/tests/chrome/test_menulist_paging.xhtml

@@ -96,12 +96,19 @@ let tests = [
 function startTest()
 {
   let popup = document.getElementById("menulist-popup1");
-  let menupopupHeight = popup.getBoundingClientRect().height;
   let menuitemHeight = popup.firstChild.getBoundingClientRect().height;
 
+  let cs = window.getComputedStyle(popup);
+  let csArrow = window.getComputedStyle(popup.scrollBox);
+  let bpTop = parseFloat(cs.paddingTop) + parseFloat(cs.borderTopWidth) +
+              parseFloat(csArrow.paddingTop) + parseFloat(csArrow.borderTopWidth);
+  let bpBottom = parseFloat(cs.paddingBottom) + parseFloat(cs.borderBottomWidth) +
+                 parseFloat(csArrow.paddingBottom) + parseFloat(csArrow.borderBottomWidth);
+
   // First, set the height of each popup to the height of four menuitems plus
   // any padding and border on the menupopup.
-  let height = menuitemHeight * 4 + (menupopupHeight - menuitemHeight * 10);
+  let height = menuitemHeight * 4 + bpTop + bpBottom;
+
   popup.height = height;
   document.getElementById("menulist-popup2").height = height;
   document.getElementById("menulist-popup3").height = height;
@@ -127,7 +134,9 @@ function menulistShown()
   is(menulist.activeChild.label, menulist.getItemAtIndex(test.initial).label, test.list + " initial selection");
 
   let cs = window.getComputedStyle(menulist.menupopup);
-  let bpTop = parseFloat(cs.paddingTop) + parseFloat(cs.borderTopWidth);
+  let csArrow = window.getComputedStyle(menulist.menupopup.scrollBox);
+  let bpTop = parseFloat(cs.paddingTop) + parseFloat(cs.borderTopWidth) +
+              parseFloat(csArrow.paddingTop) + parseFloat(csArrow.borderTopWidth);
 
   // Skip menulist3 as it has a label that scrolling doesn't need normally deal with.
   if (test.scroll >= 0) {

toolkit/content/tests/chrome/test_popup_attribute.xhtml

@@ -12,7 +12,7 @@
 SimpleTest.waitForExplicitFinish();
 function runTest()
 {
-  window.open("window_popup_attribute.xhtml", "_blank", "width=600,height=700");
+  window.open("window_popup_attribute.xhtml", "_blank", "width=600,height=800");
 }
 </script>
 

toolkit/content/tests/chrome/test_popup_button.xhtml

@@ -12,7 +12,7 @@
 SimpleTest.waitForExplicitFinish();
 function runTest()
 {
-  window.open("window_popup_button.xhtml", "_blank", "width=700,height=700");
+  window.open("window_popup_button.xhtml", "_blank", "width=700,height=800");
 }
 </script>
 

toolkit/content/tests/chrome/test_popup_moveToAnchor.xhtml

@@ -7,8 +7,8 @@
   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      
   <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
 
-<vbox align="start">
-  <button id="button1" label="Button 1" style="margin-top: 60px;"/>
+<vbox align="start" style="margin-left: 80px;">
+  <button id="button1" label="Button 1" style="margin-top: 80px;"/>
   <button id="button2" label="Button 2" style="margin-top: 70px;"/>
 </vbox>
 

toolkit/content/tests/chrome/window_popup_attribute.xhtml

@@ -12,7 +12,7 @@
 window.opener.SimpleTest.waitForFocus(runTests, window);
 </script>
 
-<hbox style="margin-left: 200px; margin-top: 290px;">
+<hbox style="margin-left: 200px; margin-top: 340px;">
   <label id="trigger" popup="thepopup" value="Popup" height="60"/>
 </hbox>
 <!-- this frame is used to check that document.popupNode

toolkit/content/tests/chrome/window_popup_button.xhtml

@@ -12,7 +12,7 @@
 window.opener.SimpleTest.waitForFocus(runTests, window);
 </script>
 
-<hbox style="margin-left: 200px; margin-top: 290px;">
+<hbox style="margin-left: 200px; margin-top: 340px;">
   <button id="trigger" type="menu" label="Popup" width="100" height="50">
     <menupopup id="thepopup">
       <menuitem id="item1" label="First"/>