const gSelects = {
  PAGECONTENT_COLORS:
    "<html><head><style>" +
    "  .blue { color: #fff; background-color: #00f; }" +
    "  .green { color: #800080; background-color: green; }" +
    "  .defaultColor { color: -moz-ComboboxText; }" +
    "  .defaultBackground { background-color: -moz-Combobox; }" +
    "</style>" +
    "<body><select id='one'>" +
    '  <option value="One" style="color: #fff; background-color: #f00;">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(255, 0, 0)"}</option>' +
    '  <option value="Two" class="blue">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 255)"}</option>' +
    '  <option value="Three" class="green">{"color": "rgb(128, 0, 128)", "backgroundColor": "rgb(0, 128, 0)"}</option>' +
    '  <option value="Four" class="defaultColor defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "-moz-Combobox"}</option>' +
    '  <option value="Five" class="defaultColor">{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)", "unstyled": "true"}</option>' +
    '  <option value="Six" class="defaultBackground">{"color": "-moz-ComboboxText", "backgroundColor": "-moz-Combobox"}</option>' +
    '  <option value="Seven" selected="true">{"unstyled": "true"}</option>' +
    "</select></body></html>",

  PAGECONTENT_COLORS_ON_SELECT:
    "<html><head><style>" +
    "  #one { background-color: #7E3A3A; color: #fff }" +
    "</style>" +
    "<body><select id='one'>" +
    '  <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option value="Two">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option value="Three">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option value="Four" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  TRANSPARENT_SELECT:
    "<html><head><style>" +
    "  #one { background-color: transparent; }" +
    "</style>" +
    "<body><select id='one'>" +
    '  <option value="One">{"unstyled": "true"}</option>' +
    '  <option value="Two" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT:
    "<html><head><style>" +
    "  #one { background-color: black; color: white; }" +
    "</style>" +
    "<body><select id='one'>" +
    '  <option value="One" style="background-color: white; color: black;">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgb(255, 255, 255)"}</option>' +
    '  <option value="Two" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  GENERIC_OPTION_STYLED_AS_IMPORTANT:
    "<html><head><style>" +
    "  option { background-color: black !important; color: white !important; }" +
    "</style>" +
    "<body><select id='one'>" +
    '  <option value="One">{"color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 0)"}</option>' +
    '  <option value="Two" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  TRANSLUCENT_SELECT_BECOMES_OPAQUE:
    "<html><head>" +
    "<body><select id='one' style='background-color: rgba(255,255,255,.55);'>" +
    '  <option value="One">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option value="Two" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR:
    "<html><head>" +
    "<body><select id='one' style='background-color: rgba(255,0,0,.55);'>" +
    '  <option value="One">{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option value="Two" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  DISABLED_OPTGROUP_AND_OPTIONS:
    "<html><head>" +
    "<body><select id='one'>" +
    "  <optgroup label='{\"unstyled\": true}'>" +
    '    <option disabled="">{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"unstyled": true}</option>' +
    '    <option disabled="">{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"unstyled": true}</option>' +
    '    <option>{"unstyled": true}</option>' +
    '    <option>{"unstyled": true}</option>' +
    '    <option>{"unstyled": true}</option>' +
    "  </optgroup>" +
    '  <optgroup label=\'{"color": "GrayText", "backgroundColor": "-moz-Combobox"}\' disabled=\'\'>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    '    <option>{"color": "GrayText", "backgroundColor": "-moz-Combobox"}</option>' +
    "  </optgroup>" +
    '  <option value="Two" selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_CHANGES_COLOR_ON_FOCUS:
    "<html><head><style>" +
    "  select:focus { background-color: orange; color: black; }" +
    "</style></head>" +
    "<body><select id='one'>" +
    '  <option>{"color": "rgb(0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS:
    "<html><head><style>" +
    "  select { background-color: black; }" +
    "  option { color: white; }" +
    "</style></head>" +
    "<body><select id='one'>" +
    '  <option>{"colorScheme": "dark", "color": "rgb(255, 255, 255)", "backgroundColor": "rgb(0, 0, 0)"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT:
    "<html><head><style>" +
    "  select:focus { background-color: #3a96dd; }" +
    "  select:focus option { background-color: #fff; }" +
    "</style></head>" +
    "<body><select id='one'>" +
    '  <option>{"color": "-moz-ComboboxText", "backgroundColor": "rgb(255, 255, 255)"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT:
    "<html><body><select id='one'>" +
    '  <option>{"color": "rgb(255, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body><scr" +
    "ipt>" +
    "  var select = document.getElementById('one');" +
    "  select.addEventListener('focus', () => select.style.color = 'red');" +
    "</script></html>",

  SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
    "<html><head><style>" +
    "  select { transition: all .1s; }" +
    "  select:focus { background-color: orange; }" +
    "</style></head><body><select id='one'>" +
    '  <option>{"color": "-moz-ComboboxText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND:
    "<html><head><style>" +
    "  select { transition: all .1s; }" +
    "  select:focus { text-shadow: 0 0 0 #303030; }" +
    "  option { color: red; /* It gets the default otherwise, which is fine but we don't have a good way to test for */ }" +
    "</style></head><body><select id='one'>" +
    '  <option>{"color": "rgb(255, 0, 0)", "backgroundColor": "-moz-Combobox", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW:
    "<html><head><style>" +
    "  select { color: transparent; text-shadow: 0 0 0 #303030; }" +
    "</style></head><body><select id='one'>" +
    '  <option>{"color": "rgba(0, 0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
    '  <option selected="true">{"end": "true"}</option>' +
    "</select></body></html>",

  SELECT_LONG_WITH_TRANSITION:
    "<html><head><style>" +
    "  select { transition: all .2s linear; }" +
    "  select:focus { color: purple; }" +
    "</style></head><body><select id='one'>" +
    (function () {
      let rv = "";
      for (let i = 0; i < 75; i++) {
        rv +=
          '  <option>{"color": "rgb(128, 0, 128)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>';
      }
      rv +=
        '  <option selected="true">{"end": "true"}</option>' +
        "</select></body></html>";
      return rv;
    })(),

  SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT: `
   <html><head><style>
     select { color: blue; text-shadow: 1px 1px 2px blue; }
     .redColor { color: red; }
     .textShadow { text-shadow: 1px 1px 2px black; }
   </style></head><body><select id='one'>
     <option>{"color": "rgb(0, 0, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
     <option>{"color": "rgb(0, 0, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
     <option>{"color": "rgb(0, 0, 255)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
     <option class="redColor">{"color": "rgb(255, 0, 0)", "backgroundColor": "-moz-Combobox"}</option>
     <option class="textShadow">{"color": "rgb(0, 0, 255)", "textShadow": "rgb(0, 0, 0) 1px 1px 2px", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
     <option selected="true">{"end": "true"}</option>
   </select></body></html>
`,

  SELECT_FONT_INHERITS_TO_OPTION: `
   <html><head><style>
     select { font-family: monospace }
   </style></head><body><select id='one'>
     <option>One</option>
     <option style="font-family: sans-serif">Two</option>
   </select></body></html>
`,

  SELECT_SCROLLBAR_PROPS: `
   <html><head><style>
     select { scrollbar-width: thin; scrollbar-color: red blue }
   </style></head><body><select id='one'>
     <option>One</option>
     <option style="font-family: sans-serif">Two</option>
   </select></body></html>
`,
  DEFAULT_DARKMODE: `
   <html><body><select id='one'>
     <option>{"unstyled": "true"}</option>
     <option>{"unstyled": "true"}</option>
     <option selected="true">{"end": "true"}</option>
   </select></body></html>
`,

  DEFAULT_DARKMODE_DARK: `
   <meta name=color-scheme content=dark>
   <select id='one'>
     <option>{"color": "MenuText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
     <option>{"color": "MenuText", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>
     <option selected="true">{"end": "true"}</option>
   </select>
`,

  SPLIT_FG_BG_OPTION_DARKMODE: `
   <html><head><style>
     select { background-color: #fff; }
     option { color: #2b2b2b; }
   </style></head><body><select id='one'>
     <option>{"color": "rgb(43, 43, 43)", "backgroundColor": "rgb(255, 255, 255)"}</option>
     <option>{"color": "rgb(43, 43, 43)", "backgroundColor": "rgb(255, 255, 255)"}</option>
     <option selected="true">{"end": "true"}</option>
   </select></body></html>
`,

  IDENTICAL_BG_DIFF_FG_OPTION_DARKMODE: `
   <html><head><style>
     select { background-color: #fff; }
     option { color: #2b2b2b; background-color: #fff; }
   </style></head><body><select id='one'>
     <option>{"colorScheme": "light", "color": "rgb(43, 43, 43)", "backgroundColor": "rgb(255, 255, 255)"}</option>
     <option>{"colorScheme": "light", "color": "rgb(43, 43, 43)", "backgroundColor": "rgb(255, 255, 255)"}</option>
     <option selected="true">{"end": "true"}</option>
   </select></body></html>
`,
};

function rgbaToString(parsedColor) {
  let { r, g, b, a } = parsedColor;
  if (a == 1) {
    return `rgb(${r}, ${g}, ${b})`;
  }
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

function testOptionColors(test, index, item) {
  // The label contains a JSON string of the expected colors for
  // `color` and `background-color`.
  let expected = JSON.parse(item.label);

  // Press Down to move the selected item to the next item in the
  // list and check the colors of this item when it's not selected.
  EventUtils.synthesizeKey("KEY_ArrowDown");

  if (expected.end) {
    return;
  }

  if (expected.unstyled) {
    ok(
      !item.hasAttribute("customoptionstyling"),
      `${test}: Item ${index} should not have any custom option styling: ${item.outerHTML}`
    );
  } else {
    is(
      getComputedStyle(item).color,
      expected.color,
      `${test}: Item ${index} has correct foreground color`
    );
    is(
      getComputedStyle(item).backgroundColor,
      expected.backgroundColor,
      `${test}: Item ${index} has correct background color`
    );
    if (expected.textShadow) {
      is(
        getComputedStyle(item).textShadow,
        expected.textShadow,
        `${test}: Item ${index} has correct text-shadow color`
      );
    }
  }
}

function computeLabels(tab) {
  return SpecialPowers.spawn(tab.linkedBrowser, [], function () {
    function _rgbaToString(parsedColor) {
      let { r, g, b, a } = parsedColor;
      if (a == 1) {
        return `rgb(${r}, ${g}, ${b})`;
      }
      return `rgba(${r}, ${g}, ${b}, ${a})`;
    }
    function computeColors(expected) {
      let any = false;
      for (let color of Object.keys(expected)) {
        if (
          color != "colorScheme" &&
          color.toLowerCase().includes("color") &&
          !expected[color].startsWith("rgb")
        ) {
          any = true;
          expected[color] = _rgbaToString(
            InspectorUtils.colorToRGBA(expected[color], content.document)
          );
        }
      }
      return any;
    }
    for (let option of content.document.querySelectorAll("option,optgroup")) {
      if (!option.label) {
        continue;
      }
      let expected;
      try {
        expected = JSON.parse(option.label);
      } catch (ex) {
        continue;
      }
      if (computeColors(expected)) {
        option.label = JSON.stringify(expected);
      }
    }
  });
}

async function openSelectPopup(select) {
  const pageUrl = "data:text/html," + escape(select);
  let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);

  await computeLabels(tab);

  let popupShownPromise = BrowserTestUtils.waitForSelectPopupShown(window);
  await BrowserTestUtils.synthesizeMouseAtCenter(
    "#one",
    { type: "mousedown" },
    gBrowser.selectedBrowser
  );
  let selectPopup = await popupShownPromise;
  let menulist = selectPopup.parentNode;
  return { tab, menulist, selectPopup };
}

async function testSelectColors(selectID, itemCount, options) {
  let select = gSelects[selectID];
  let { tab, menulist, selectPopup } = await openSelectPopup(select);
  if (options.unstyled) {
    ok(
      !selectPopup.hasAttribute("customoptionstyling"),
      `Shouldn't have custom option styling for ${selectID}`
    );
  }
  let arrowSB = selectPopup.shadowRoot.querySelector(
    ".menupopup-arrowscrollbox"
  );
  if (options.waitForComputedStyle) {
    let property = options.waitForComputedStyle.property;
    let expectedValue = options.waitForComputedStyle.value;
    await TestUtils.waitForCondition(() => {
      let node = ["background-image", "background-color"].includes(property)
        ? arrowSB
        : selectPopup;
      let value = getComputedStyle(node).getPropertyValue(property);
      info(`<${node.localName}> has ${property}: ${value}`);
      return value == expectedValue;
    }, `${selectID} - Waiting for <select> to have ${property}: ${expectedValue}`);
  }

  is(selectPopup.parentNode.itemCount, itemCount, "Correct number of items");
  let child = selectPopup.firstElementChild;
  let idx = 1;

  if (typeof options.skipSelectColorTest != "object") {
    let skip = !!options.skipSelectColorTest;
    options.skipSelectColorTest = {
      color: skip,
      background: skip,
    };
  }
  if (!options.skipSelectColorTest.color) {
    is(
      getComputedStyle(arrowSB).color,
      options.selectColor,
      selectID + " popup has expected foreground color"
    );
  }

  if (options.selectTextShadow) {
    is(
      getComputedStyle(selectPopup).textShadow,
      options.selectTextShadow,
      selectID + " popup has expected text-shadow color"
    );
  }

  if (!options.skipSelectColorTest.background) {
    // Combine the select popup's backgroundColor and the
    // backgroundImage color to get the color that is seen by
    // the user.
    let base = getComputedStyle(arrowSB).backgroundColor;
    if (base == "rgba(0, 0, 0, 0)") {
      base = getComputedStyle(selectPopup).backgroundColor;
    }
    info("Parsing background color: " + base);
    let [, /* unused */ bR, bG, bB] = base.match(/rgb\((\d+), (\d+), (\d+)\)/);
    bR = parseInt(bR, 10);
    bG = parseInt(bG, 10);
    bB = parseInt(bB, 10);
    let topCoat = getComputedStyle(arrowSB).backgroundImage;
    if (topCoat == "none") {
      is(
        `rgb(${bR}, ${bG}, ${bB})`,
        options.selectBgColor,
        selectID + " popup has expected background color (top coat)"
      );
    } else {
      let [, , /* unused */ /* unused */ tR, tG, tB, tA] = topCoat.match(
        /(rgba?\((\d+), (\d+), (\d+)(?:, (0\.\d+))?\)), \1/
      );
      tR = parseInt(tR, 10);
      tG = parseInt(tG, 10);
      tB = parseInt(tB, 10);
      tA = parseFloat(tA) || 1;
      let actualR = Math.round(tR * tA + bR * (1 - tA));
      let actualG = Math.round(tG * tA + bG * (1 - tA));
      let actualB = Math.round(tB * tA + bB * (1 - tA));
      is(
        `rgb(${actualR}, ${actualG}, ${actualB})`,
        options.selectBgColor,
        selectID + " popup has expected background color (no top coat)"
      );
    }
  }

  ok(!child.selected, "The first child should not be selected");
  while (child) {
    testOptionColors(selectID, idx, child, menulist);
    idx++;
    child = child.nextElementSibling;
  }

  if (!options.leaveOpen) {
    await hideSelectPopup("escape");
    BrowserTestUtils.removeTab(tab);
  }
}

// System colors may be different in content pages and chrome pages.
let kDefaultSelectStyles = {};

add_setup(async function () {
  await SpecialPowers.pushPrefEnv({
    set: [["dom.forms.select.customstyling", true]],
  });
  kDefaultSelectStyles = await BrowserTestUtils.withNewTab(
    `data:text/html,<select>`,
    function (browser) {
      return SpecialPowers.spawn(browser, [], function () {
        let cs = content.getComputedStyle(
          content.document.querySelector("select")
        );
        return {
          backgroundColor: cs.backgroundColor,
        };
      });
    }
  );
});

// This test checks when a <select> element has styles applied to <option>s within it.
add_task(async function test_colors_applied_to_popup_items() {
  await testSelectColors("PAGECONTENT_COLORS", 7, {
    skipSelectColorTest: true,
  });
});

// This test checks when a <select> element has styles applied to itself.
add_task(async function test_colors_applied_to_popup() {
  let options = {
    selectColor: "rgb(255, 255, 255)",
    selectBgColor: "rgb(126, 58, 58)",
  };
  await testSelectColors("PAGECONTENT_COLORS_ON_SELECT", 4, options);
});

// This test checks when a <select> element has a transparent background applied to itself.
add_task(async function test_transparent_applied_to_popup() {
  let options = {
    unstyled: true,
    skipSelectColorTest: true,
  };
  await testSelectColors("TRANSPARENT_SELECT", 2, options);
});

// This test checks when a <select> element has a background set, and the
// options have their own background set which is equal to the default
// user-agent background color, but should be used because the select
// background color has been changed.
add_task(async function test_options_inverted_from_select_background() {
  // The popup has a black background and white text, but the
  // options inside of it have flipped the colors.
  let options = {
    selectColor: "rgb(255, 255, 255)",
    selectBgColor: "rgb(0, 0, 0)",
  };
  await testSelectColors(
    "OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT",
    2,
    options
  );
});

// This test checks when a <select> element has a background set using !important,
// which was affecting how we calculated the user-agent styling.
add_task(async function test_select_background_using_important() {
  await testSelectColors("GENERIC_OPTION_STYLED_AS_IMPORTANT", 2, {
    skipSelectColorTest: true,
  });
});

// This test checks when a <select> element has a background set, and the
// options have their own background set which is equal to the default
// user-agent background color, but should be used because the select
// background color has been changed.
add_task(async function test_translucent_select_becomes_opaque() {
  // The popup is requested to show a translucent background
  // but we apply the requested background color on the system's base color.
  let options = {
    selectColor: "rgb(0, 0, 0)",
    selectBgColor: "rgb(255, 255, 255)",
  };
  await testSelectColors("TRANSLUCENT_SELECT_BECOMES_OPAQUE", 2, options);
});

// This test checks when a popup has a translucent background color,
// and that the color painted to the screen of the translucent background
// matches what the user expects.
add_task(async function test_translucent_select_applies_on_base_color() {
  // The popup is requested to show a translucent background
  // but we apply the requested background color on the system's base color.
  let options = {
    selectColor: "rgb(0, 0, 0)",
    selectBgColor: "rgb(255, 115, 115)",
  };
  await testSelectColors(
    "TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR",
    2,
    options
  );
});

add_task(async function test_disabled_optgroup_and_options() {
  await testSelectColors("DISABLED_OPTGROUP_AND_OPTIONS", 17, {
    skipSelectColorTest: true,
  });
});

add_task(async function test_disabled_optgroup_and_options() {
  let options = {
    selectColor: "rgb(0, 0, 0)",
    selectBgColor: "rgb(255, 165, 0)",
  };

  await testSelectColors("SELECT_CHANGES_COLOR_ON_FOCUS", 2, options);
});

add_task(async function test_bgcolor_on_select_color_on_options() {
  let options = {
    selectColor: "rgb(0, 0, 0)",
    selectBgColor: "rgb(0, 0, 0)",
  };

  await testSelectColors(
    "SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS",
    2,
    options
  );
});

add_task(
  async function test_style_of_options_is_dependent_on_focus_of_select() {
    let options = {
      selectColor: "rgb(0, 0, 0)",
      selectBgColor: "rgb(58, 150, 221)",
    };

    await testSelectColors(
      "SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT",
      2,
      options
    );
  }
);

add_task(
  async function test_style_of_options_is_dependent_on_focus_of_select_after_event() {
    let options = {
      skipSelectColorTest: true,
      waitForComputedStyle: {
        property: "--panel-color",
        value: "rgb(255, 0, 0)",
      },
    };
    await testSelectColors(
      "SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT",
      2,
      options
    );
  }
);

add_task(async function test_color_of_options_is_dependent_on_transitionend() {
  let options = {
    selectColor: "rgb(0, 0, 0)",
    selectBgColor: "rgb(255, 165, 0)",
    waitForComputedStyle: {
      property: "background-image",
      value: "linear-gradient(rgb(255, 165, 0), rgb(255, 165, 0))",
    },
  };

  await testSelectColors(
    "SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND",
    2,
    options
  );
});

add_task(
  async function test_textshadow_of_options_is_dependent_on_transitionend() {
    let options = {
      skipSelectColorTest: true,
      waitForComputedStyle: {
        property: "text-shadow",
        value: "rgb(48, 48, 48) 0px 0px 0px",
      },
    };

    await testSelectColors(
      "SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND",
      2,
      options
    );
  }
);

add_task(async function test_transparent_color_with_text_shadow() {
  let options = {
    selectColor: "rgba(0, 0, 0, 0)",
    selectTextShadow: "rgb(48, 48, 48) 0px 0px 0px",
    selectBgColor: kDefaultSelectStyles.backgroundColor,
  };

  await testSelectColors(
    "SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW",
    2,
    options
  );
});

add_task(
  async function test_select_with_transition_doesnt_lose_scroll_position() {
    let options = {
      selectColor: "rgb(128, 0, 128)",
      selectBgColor: kDefaultSelectStyles.backgroundColor,
      waitForComputedStyle: {
        property: "--panel-color",
        value: "rgb(128, 0, 128)",
      },
      leaveOpen: true,
    };

    await testSelectColors("SELECT_LONG_WITH_TRANSITION", 76, options);

    let selectPopup = document.getElementById(
      "ContentSelectDropdown"
    ).menupopup;
    let scrollBox = selectPopup.scrollBox;
    is(
      scrollBox.scrollTop,
      scrollBox.scrollTopMax,
      "The popup should be scrolled to the bottom of the list (where the selected item is)"
    );

    await hideSelectPopup("escape");
    BrowserTestUtils.removeTab(gBrowser.selectedTab);
  }
);

add_task(
  async function test_select_inherited_colors_on_options_dont_get_unique_rules_if_rule_set_on_select() {
    let options = {
      selectColor: "rgb(0, 0, 255)",
      selectTextShadow: "rgb(0, 0, 255) 1px 1px 2px",
      selectBgColor: kDefaultSelectStyles.backgroundColor,
      leaveOpen: true,
    };

    await testSelectColors(
      "SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT",
      6,
      options
    );

    let stylesheetEl = document.getElementById(
      "ContentSelectDropdownStylesheet"
    );

    let sheet = stylesheetEl.sheet;
    /* Check that the rules are what we expect: There are three different option styles (even though there are 6 options, plus the select rules). */
    let expectedSelectors = [
      "#ContentSelectDropdown .ContentSelectDropdown-item-0",
      "#ContentSelectDropdown .ContentSelectDropdown-item-1",
      '#ContentSelectDropdown .ContentSelectDropdown-item-1:not([_moz-menuactive="true"])',
      "#ContentSelectDropdown .ContentSelectDropdown-item-2",
      '#ContentSelectDropdown .ContentSelectDropdown-item-2:not([_moz-menuactive="true"])',
      '#ContentSelectDropdown > menupopup > :is(menuitem, menucaption):not([_moz-menuactive="true"])',
      '#ContentSelectDropdown > menupopup > :is(menuitem, menucaption)[_moz-menuactive="true"]',
    ].sort();

    let actualSelectors = [...sheet.cssRules].map(r => r.selectorText).sort();
    is(
      actualSelectors.length,
      expectedSelectors.length,
      "Should have the expected number of rules"
    );
    for (let i = 0; i < expectedSelectors.length; ++i) {
      is(
        actualSelectors[i],
        expectedSelectors[i],
        `Selector ${i} should match`
      );
    }

    await hideSelectPopup("escape");
    BrowserTestUtils.removeTab(gBrowser.selectedTab);
  }
);

add_task(async function test_select_font_inherits_to_option() {
  let { tab, menulist, selectPopup } = await openSelectPopup(
    gSelects.SELECT_FONT_INHERITS_TO_OPTION
  );

  let popupFont = getComputedStyle(selectPopup).fontFamily;
  let items = menulist.querySelectorAll("menuitem");
  is(items.length, 2, "Should have two options");
  let firstItemFont = getComputedStyle(items[0]).fontFamily;
  let secondItemFont = getComputedStyle(items[1]).fontFamily;

  is(
    popupFont,
    firstItemFont,
    "First menuitem's font should be inherited from the select"
  );
  isnot(
    popupFont,
    secondItemFont,
    "Second menuitem's font should be the author specified one"
  );

  await hideSelectPopup("escape");
  BrowserTestUtils.removeTab(tab);
});

add_task(async function test_scrollbar_props() {
  let { tab, selectPopup } = await openSelectPopup(
    gSelects.SELECT_SCROLLBAR_PROPS
  );

  let popupStyle = getComputedStyle(selectPopup);
  is(popupStyle.getPropertyValue("--content-select-scrollbar-width"), "thin");
  is(popupStyle.scrollbarColor, "rgb(255, 0, 0) rgb(0, 0, 255)");

  let scrollBoxStyle = getComputedStyle(selectPopup.scrollBox.scrollbox);
  is(scrollBoxStyle.overflow, "auto", "Should be the scrollable box");
  is(scrollBoxStyle.scrollbarWidth, "thin");
  is(scrollBoxStyle.scrollbarColor, "rgb(255, 0, 0) rgb(0, 0, 255)");

  await hideSelectPopup("escape");
  BrowserTestUtils.removeTab(tab);
});

if (AppConstants.platform == "win") {
  add_task(async function test_darkmode() {
    let lightSelectColor = rgbaToString(
      InspectorUtils.colorToRGBA("MenuText", document)
    );
    let lightSelectBgColor = rgbaToString(
      InspectorUtils.colorToRGBA("Menu", document)
    );

    // Force dark mode:
    let darkModeQuery = matchMedia("(prefers-color-scheme: dark)");
    let darkModeChange = BrowserTestUtils.waitForEvent(darkModeQuery, "change");
    await SpecialPowers.pushPrefEnv({ set: [["ui.systemUsesDarkTheme", 1]] });
    await darkModeChange;

    // Determine colours from the main context menu:
    let darkSelectColor = rgbaToString(
      InspectorUtils.colorToRGBA("MenuText", document)
    );
    let darkSelectBgColor = rgbaToString(
      InspectorUtils.colorToRGBA("Menu", document)
    );

    isnot(lightSelectColor, darkSelectColor);
    isnot(lightSelectBgColor, darkSelectBgColor);

    let { tab } = await openSelectPopup(gSelects.DEFAULT_DARKMODE);

    await testSelectColors("DEFAULT_DARKMODE", 3, {
      selectColor: lightSelectColor,
      selectBgColor: lightSelectBgColor,
    });

    await hideSelectPopup("escape");

    await testSelectColors("DEFAULT_DARKMODE_DARK", 3, {
      selectColor: darkSelectColor,
      selectBgColor: darkSelectBgColor,
    });

    await hideSelectPopup("escape");
    BrowserTestUtils.removeTab(tab);

    ({ tab } = await openSelectPopup(
      gSelects.IDENTICAL_BG_DIFF_FG_OPTION_DARKMODE
    ));

    // Custom styling on the options enforces using the select styling, too,
    // even if it matched the UA style. They'll be overridden on individual
    // options where necessary.
    await testSelectColors("IDENTICAL_BG_DIFF_FG_OPTION_DARKMODE", 3, {
      selectColor: "rgb(0, 0, 0)",
      selectBgColor: "rgb(255, 255, 255)",
    });

    await hideSelectPopup("escape");
    BrowserTestUtils.removeTab(tab);

    ({ tab } = await openSelectPopup(gSelects.SPLIT_FG_BG_OPTION_DARKMODE));

    // Like the previous case, but here the bg colour is defined on the
    // select, and the fg colour on the option. The behaviour should be the
    // same.
    await testSelectColors("SPLIT_FG_BG_OPTION_DARKMODE", 3, {
      selectColor: "rgb(0, 0, 0)",
      selectBgColor: "rgb(255, 255, 255)",
    });

    await hideSelectPopup("escape");
    BrowserTestUtils.removeTab(tab);
  });
}
