diff --git a/toolkit/components/pictureinpicture/tests/browser.ini b/toolkit/components/pictureinpicture/tests/browser.ini
index e8b815503869..8142dfd75c38 100644
--- a/toolkit/components/pictureinpicture/tests/browser.ini
+++ b/toolkit/components/pictureinpicture/tests/browser.ini
@@ -17,6 +17,8 @@ prefs =
 [browser_cannotTriggerFromContent.js]
 [browser_contextMenu.js]
 [browser_closeTab.js]
+[browser_mouseButtonVariation.js]
+skip-if = debug
 [browser_rerequestPiP.js]
 [browser_showMessage.js]
 [browser_toggleButtonOverlay.js]
diff --git a/toolkit/components/pictureinpicture/tests/browser_mouseButtonVariation.js b/toolkit/components/pictureinpicture/tests/browser_mouseButtonVariation.js
new file mode 100644
index 000000000000..1dfa755ed6fe
--- /dev/null
+++ b/toolkit/components/pictureinpicture/tests/browser_mouseButtonVariation.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that if the user mousedown's on a Picture-in-Picture toggle,
+ * but then mouseup's on something completely different, that we still
+ * open a Picture-in-Picture window, and that the mouse button events are
+ * all suppressed. Also ensures that a subsequent click on the document
+ * body results in all mouse button events firing normally.
+ */
+add_task(async () => {
+  await BrowserTestUtils.withNewTab({
+    gBrowser,
+    url: TEST_PAGE,
+  }, async browser => {
+    await SimpleTest.promiseFocus(browser);
+    await ensureVideosReady(browser);
+    let videoID = "no-controls";
+
+    let { toggleClientRect } = await prepareForToggleClick(browser, videoID);
+
+    // Hover the mouse over the video to reveal the toggle, which is necessary
+    // if we want to click on the toggle.
+    await BrowserTestUtils.synthesizeMouseAtCenter(`#${videoID}`, {
+      type: "mousemove",
+    }, browser);
+    await BrowserTestUtils.synthesizeMouseAtCenter(`#${videoID}`, {
+      type: "mouseover",
+    }, browser);
+
+    info("Waiting for toggle to become visible");
+    await toggleOpacityReachesThreshold(browser, videoID, HOVER_VIDEO_OPACITY);
+
+    // The toggle center, because of how it slides out, is actually outside
+    // of the bounds of a click event. For now, we move the mouse in by a
+    // hard-coded 2 pixels along the x and y axis to achieve the hover.
+    let toggleLeft = toggleClientRect.left + 2;
+    let toggleTop = toggleClientRect.top + 2;
+
+    info("Clicking on toggle, and expecting a Picture-in-Picture window to open");
+    let domWindowOpened = BrowserTestUtils.domWindowOpened(null);
+
+    await BrowserTestUtils.synthesizeMouseAtPoint(toggleLeft, toggleTop, {
+      type: "mousedown",
+    }, browser);
+
+    await BrowserTestUtils.synthesizeMouseAtPoint(1, 1, {
+      type: "mouseup",
+    }, browser);
+
+    let win = await domWindowOpened;
+    ok(win, "A Picture-in-Picture window opened.");
+    await BrowserTestUtils.closeWindow(win);
+    await assertSawMouseEvents(browser, false);
+
+    await BrowserTestUtils.synthesizeMouseAtPoint(1, 1, {}, browser);
+    await assertSawMouseEvents(browser, true);
+  });
+});