1 files changed, 99 insertions, 0 deletions
diff --git a/browser/base/content/test/tabs/browser_tabCloseSpacer.js b/browser/base/content/test/tabs/browser_tabCloseSpacer.js
new file mode 100644
index 0000000000..39f0a2860f
--- /dev/null
+++ b/browser/base/content/test/tabs/browser_tabCloseSpacer.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that while clicking to close tabs, the close button remains under the mouse
+ * even when an underflow happens.
+ */
+add_task(async function() {
+  // Disable tab animations
+  gReduceMotionOverride = true;
+
+  let downButton = gBrowser.tabContainer.arrowScrollbox._scrollButtonDown;
+  let closingTabsSpacer = gBrowser.tabContainer._closingTabsSpacer;
+
+  await overflowTabs();
+  ok(
+    gBrowser.tabContainer.hasAttribute("overflow"),
+    "Tab strip should be overflowing"
+  );
+  isnot(downButton.clientWidth, 0, "down button has some width");
+  is(closingTabsSpacer.clientWidth, 0, "spacer has no width");
+
+  let originalCloseButtonLocation = getLastCloseButtonLocation();
+
+  info(
+    "Removing half the tabs and making sure the last close button doesn't move"
+  );
+  let numTabs = gBrowser.tabs.length / 2;
+  while (gBrowser.tabs.length > numTabs) {
+    let lastCloseButtonLocation = getLastCloseButtonLocation();
+    Assert.deepEqual(
+      lastCloseButtonLocation,
+      originalCloseButtonLocation,
+      "Close button hasn't moved"
+    );
+
+    EventUtils.synthesizeMouseAtCenter(getLastCloseButton(), {});
+    await new Promise(r => requestAnimationFrame(r));
+  }
+
+  ok(!gBrowser.tabContainer.hasAttribute("overflow"), "not overflowing");
+  ok(
+    gBrowser.tabContainer.hasAttribute("using-closing-tabs-spacer"),
+    "using spacer"
+  );
+  is(downButton.clientWidth, 0, "down button has no width");
+  isnot(closingTabsSpacer.clientWidth, 0, "spacer has some width");
+});
+
+async function overflowTabs() {
+  let arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;
+  const originalSmoothScroll = arrowScrollbox.smoothScroll;
+  arrowScrollbox.smoothScroll = false;
+  registerCleanupFunction(() => {
+    arrowScrollbox.smoothScroll = originalSmoothScroll;
+  });
+
+  let width = ele => ele.getBoundingClientRect().width;
+  let tabMinWidth = parseInt(
+    getComputedStyle(gBrowser.selectedTab, null).minWidth
+  );
+  let tabCountForOverflow = Math.ceil(
+    (width(arrowScrollbox) / tabMinWidth) * 1.1
+  );
+  while (gBrowser.tabs.length < tabCountForOverflow) {
+    BrowserTestUtils.addTab(gBrowser, "about:blank", {
+      skipAnimation: true,
+      index: 0,
+    });
+  }
+
+  // Make sure scrolling finished.
+  await new Promise(resolve => {
+    arrowScrollbox.addEventListener("scrollend", resolve, { once: true });
+  });
+}
+
+function getLastCloseButton() {
+  let lastTab = gBrowser.tabs[gBrowser.tabs.length - 1];
+  return lastTab.closeButton;
+}
+
+function getLastCloseButtonLocation() {
+  let rect = getLastCloseButton().getBoundingClientRect();
+  return {
+    left: Math.round(rect.left),
+    top: Math.round(rect.top),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+  };
+}
+
+registerCleanupFunction(() => {
+  while (gBrowser.tabs.length > 1) {
+    BrowserTestUtils.removeTab(gBrowser.tabs[0]);
+  }
+});