1 files changed, 100 insertions, 0 deletions
diff --git a/browser/components/extensions/test/browser/browser_ext_optionsPage_modals.js b/browser/components/extensions/test/browser/browser_ext_optionsPage_modals.js
new file mode 100644
index 0000000000..809a5605c0
--- /dev/null
+++ b/browser/components/extensions/test/browser/browser_ext_optionsPage_modals.js
@@ -0,0 +1,100 @@
+/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set sts=2 sw=2 et tw=80: */
+"use strict";
+
+add_task(async function test_tab_options_modals() {
+  function backgroundScript() {
+    browser.runtime.openOptionsPage();
+  }
+
+  function optionsScript() {
+    try {
+      alert("WebExtensions OptionsUI Page Modal");
+
+      browser.test.notifyPass("options-ui-modals");
+    } catch (error) {
+      browser.test.log(`Error: ${error} :: ${error.stack}`);
+      browser.test.notifyFail("options-ui-modals");
+    }
+  }
+
+  let extension = ExtensionTestUtils.loadExtension({
+    useAddonManager: "temporary",
+
+    manifest: {
+      permissions: ["tabs"],
+      options_ui: {
+        page: "options.html",
+      },
+    },
+    files: {
+      "options.html": `<!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+            <script src="options.js" type="text/javascript"></script>
+          </head>
+        </html>`,
+      "options.js": optionsScript,
+    },
+    background: backgroundScript,
+  });
+
+  await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:addons");
+
+  await extension.startup();
+
+  const onceModalOpened = new Promise(resolve => {
+    const aboutAddonsBrowser = gBrowser.selectedBrowser;
+
+    aboutAddonsBrowser.addEventListener(
+      "DOMWillOpenModalDialog",
+      function onModalDialog(event) {
+        // Wait for the next event tick to make sure the remaining part of the
+        // testcase runs after the dialog gets opened.
+        SimpleTest.executeSoon(resolve);
+      },
+      { once: true, capture: true }
+    );
+  });
+
+  info("Wait the options_ui modal to be opened");
+  await onceModalOpened;
+
+  const optionsBrowser = getInlineOptionsBrowser(gBrowser.selectedBrowser);
+
+  // The stack that contains the tabmodalprompt elements is the parent of
+  // the extensions options_ui browser element.
+  let stack = optionsBrowser.parentNode;
+
+  let dialogs = stack.querySelectorAll("tabmodalprompt");
+  Assert.equal(
+    dialogs.length,
+    1,
+    "Expect a tab modal opened for the about addons tab"
+  );
+
+  // Verify that the expected stylesheets have been applied on the
+  // tabmodalprompt element (See Bug 1550529).
+  const tabmodalStyle = dialogs[0].ownerGlobal.getComputedStyle(dialogs[0]);
+  is(
+    tabmodalStyle["background-color"],
+    "rgba(26, 26, 26, 0.5)",
+    "Got the expected styles applied to the tabmodalprompt"
+  );
+
+  info("Close the tab modal prompt");
+  dialogs[0].querySelector(".tabmodalprompt-button0").click();
+
+  await extension.awaitFinish("options-ui-modals");
+
+  Assert.equal(
+    stack.querySelectorAll("tabmodalprompt").length,
+    0,
+    "Expect the tab modal to be closed"
+  );
+
+  BrowserTestUtils.removeTab(gBrowser.selectedTab);
+
+  await extension.unload();
+});