summaryrefslogtreecommitdiffstats
path: root/browser/base/content/test/forms/browser_selectpopup_hr.js
blob: 85a44be66c94407a0ed9bf2da495cddef9fafcd2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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);
});