1 files changed, 55 insertions, 0 deletions
diff --git a/browser/base/content/test/forms/browser_selectpopup_hr.js b/browser/base/content/test/forms/browser_selectpopup_hr.js
new file mode 100644
index 0000000000..85a44be66c
--- /dev/null
+++ b/browser/base/content/test/forms/browser_selectpopup_hr.js
@@ -0,0 +1,55 @@
+add_task(async function test_hr() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["dom.forms.select.customstyling", true]],
+  });
+
+  const PAGE_CONTENT = `
+<!doctype html>
+<select>
+<option>One</option>
+<hr style="color: red; background-color: blue">
+<option>Two</option>
+</select>`;
+
+  const pageUrl = "data:text/html," + encodeURIComponent(PAGE_CONTENT);
+  let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
+
+  const selectPopup = await openSelectPopup("click");
+  const menulist = selectPopup.parentNode;
+
+  const optionOne = selectPopup.children[0];
+  const separator = selectPopup.children[1];
+  const optionTwo = selectPopup.children[2];
+
+  is(optionOne.textContent, "One", "First option has expected text content");
+
+  is(separator.tagName, "menuseparator", "Separator is menuseparator");
+
+  const separatorStyle = getComputedStyle(separator);
+
+  is(
+    separatorStyle.color,
+    "rgb(255, 0, 0)",
+    "Separator color is specified CSS color"
+  );
+
+  is(
+    separatorStyle.backgroundColor,
+    "rgba(0, 0, 0, 0)",
+    "Separator background-color is not set to specified CSS color"
+  );
+
+  is(optionTwo.textContent, "Two", "Second option has expected text content");
+
+  is(menulist.activeChild, optionOne, "First option is selected to start");
+
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+
+  is(
+    menulist.activeChild,
+    optionTwo,
+    "Second option is selected after arrow down"
+  );
+
+  BrowserTestUtils.removeTab(tab);
+});