diff --git a/browser/base/content/moz.build b/browser/base/content/moz.build
index 8e2914502952..fd21ea5dd94b 100644
--- a/browser/base/content/moz.build
+++ b/browser/base/content/moz.build
@@ -94,6 +94,9 @@ with Files("test/sync/**"):
 with Files("test/tabdialogs/**"):
     BUG_COMPONENT = ("Firefox", "Tabbed Browser")
 
+with Files("test/tabnotificationbox/**"):
+    BUG_COMPONENT = ("Firefox", "Tabbed Browser")
+
 with Files("test/tabPrompts/**"):
     BUG_COMPONENT = ("Firefox", "Tabbed Browser")
 
diff --git a/browser/base/content/test/tabnotificationbox/.eslintrc.js b/browser/base/content/test/tabnotificationbox/.eslintrc.js
new file mode 100644
index 000000000000..1779fd7f1cf8
--- /dev/null
+++ b/browser/base/content/test/tabnotificationbox/.eslintrc.js
@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+  extends: ["plugin:mozilla/browser-test"],
+};
diff --git a/browser/base/content/test/tabnotificationbox/browser.ini b/browser/base/content/test/tabnotificationbox/browser.ini
new file mode 100644
index 000000000000..4048e10eb094
--- /dev/null
+++ b/browser/base/content/test/tabnotificationbox/browser.ini
@@ -0,0 +1 @@
+[browser_tabnotificationbox_switch_tabs.js]
diff --git a/browser/base/content/test/tabnotificationbox/browser_tabnotificationbox_switch_tabs.js b/browser/base/content/test/tabnotificationbox/browser_tabnotificationbox_switch_tabs.js
new file mode 100644
index 000000000000..7c4cbd94649b
--- /dev/null
+++ b/browser/base/content/test/tabnotificationbox/browser_tabnotificationbox_switch_tabs.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+function assertNotificationBoxHidden(notificationBox, reason) {
+  let { stack } = notificationBox;
+  let name = stack.getAttribute("name");
+  ok(name, `Notification box has a name ${reason}`);
+
+  let { selectedViewName } = stack.parentElement;
+  ok(
+    selectedViewName != name,
+    `Box is not shown ${reason} ${selectedViewName} != ${name}`
+  );
+}
+
+function assertNotificationBoxShown(notificationBox, reason) {
+  let { stack } = notificationBox;
+  let name = stack.getAttribute("name");
+  ok(name, `Notification box has a name ${reason}`);
+
+  let { selectedViewName } = stack.parentElement;
+  is(selectedViewName, name, `Box is shown ${reason}`);
+}
+
+function createNotification({ browser, label, value, priority }) {
+  let notificationBox = gBrowser.getNotificationBox(browser);
+  let notification = notificationBox.appendNotification(
+    label,
+    value,
+    null,
+    notificationBox[priority],
+    []
+  );
+  return notification;
+}
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.proton.infobars.enabled", true]],
+  });
+});
+
+add_task(async function testNotificationDeckIsLazy() {
+  let deck = document.getElementById("tab-notification-deck");
+  ok(!deck, "There is no tab notification deck");
+  await BrowserTestUtils.withNewTab("about:blank", async browser => {
+    createNotification({
+      browser,
+      label: "First notification",
+      value: "first-notification",
+      priority: "PRIORITY_INFO_LOW",
+    });
+
+    deck = document.getElementById("tab-notification-deck");
+    ok(deck, "Creating a notification created the deck");
+  });
+});
+
+add_task(async function testNotificationInBackgroundTab() {
+  let firstTab = gBrowser.selectedTab;
+
+  // Navigating to a page will create the notification box, so go to example.com
+  await BrowserTestUtils.withNewTab("https://example.com", async browser => {
+    let notificationBox = gBrowser.readNotificationBox(browser);
+    ok(notificationBox, "The notification box has already been created");
+
+    assertNotificationBoxShown(notificationBox, "initial tab creation");
+    gBrowser.selectedTab = firstTab;
+    assertNotificationBoxHidden(notificationBox, "initial tab creation");
+
+    createNotification({
+      browser,
+      label: "My notification body",
+      value: "test-notification",
+      priority: "PRIORITY_INFO_LOW",
+    });
+
+    gBrowser.selectedTab = gBrowser.getTabForBrowser(browser);
+    assertNotificationBoxShown(notificationBox, "initial tab creation");
+  });
+});
+
+add_task(async function testNotificationInActiveTab() {
+  // Open about:blank so the notification box isn't created on tab open.
+  await BrowserTestUtils.withNewTab("about:blank", async browser => {
+    ok(!gBrowser.readNotificationBox(browser), "No notifications for new tab");
+
+    createNotification({
+      browser,
+      label: "Notification!",
+      value: "test-notification",
+      priority: "PRIORITY_INFO_LOW",
+    });
+    let notificationBox = gBrowser.readNotificationBox(browser);
+    ok(notificationBox, "Notification box was created");
+    assertNotificationBoxShown(notificationBox, "after appendNotification");
+  });
+});
+
+add_task(async function testNotificationMultipleTabs() {
+  let tabOne = gBrowser.selectedTab;
+  let tabTwo = await BrowserTestUtils.openNewForegroundTab({
+    gBrowser,
+    url: "about:blank",
+  });
+  let tabThree = await BrowserTestUtils.openNewForegroundTab({
+    gBrowser,
+    url: "https://example.com",
+  });
+  let browserOne = tabOne.linkedBrowser;
+  let browserTwo = tabTwo.linkedBrowser;
+  let browserThree = tabThree.linkedBrowser;
+
+  is(gBrowser.selectedBrowser, browserThree, "example.com selected");
+
+  let notificationBoxOne = gBrowser.readNotificationBox(browserOne);
+  let notificationBoxTwo = gBrowser.readNotificationBox(browserTwo);
+  let notificationBoxThree = gBrowser.readNotificationBox(browserThree);
+
+  ok(!notificationBoxOne, "no initial tab box");
+  ok(!notificationBoxTwo, "no about:blank box");
+  ok(notificationBoxThree, "example.com has a notification box");
+
+  // Verify the correct box is shown after creating tabs.
+  assertNotificationBoxShown(notificationBoxThree, "after open");
+
+  createNotification({
+    browser: browserTwo,
+    label: "Test blank",
+    value: "blank",
+    priority: "PRIORITY_INFO_LOW",
+  });
+  notificationBoxTwo = gBrowser.readNotificationBox(browserTwo);
+  ok(notificationBoxTwo, "Notification box was created");
+
+  // Verify the selected browser's notification box is still shown.
+  assertNotificationBoxHidden(notificationBoxTwo, "hidden create");
+  assertNotificationBoxShown(notificationBoxThree, "other create");
+
+  createNotification({
+    browser: browserThree,
+    label: "Test active tab",
+    value: "active",
+    priority: "PRIORITY_CRITICAL_LOW",
+  });
+  // Verify the selected browser's notification box is still shown.
+  assertNotificationBoxHidden(notificationBoxTwo, "active create");
+  assertNotificationBoxShown(notificationBoxThree, "active create");
+
+  gBrowser.selectedTab = tabTwo;
+
+  // Verify the notification box for the tab that has one gets shown.
+  assertNotificationBoxShown(notificationBoxTwo, "tab switch");
+  assertNotificationBoxHidden(notificationBoxThree, "tab switch");
+
+  BrowserTestUtils.removeTab(tabTwo);
+  BrowserTestUtils.removeTab(tabThree);
+});
diff --git a/browser/base/moz.build b/browser/base/moz.build
index 4f62ec18721c..f1d7d6898f33 100644
--- a/browser/base/moz.build
+++ b/browser/base/moz.build
@@ -56,6 +56,7 @@ BROWSER_CHROME_MANIFESTS += [
     "content/test/tabcrashed/browser.ini",
     "content/test/tabdialogs/browser.ini",
     "content/test/tabMediaIndicator/browser.ini",
+    "content/test/tabnotificationbox/browser.ini",
     "content/test/tabPrompts/browser.ini",
     "content/test/tabs/browser.ini",
     "content/test/touch/browser.ini",