<!DOCTYPE html>
<html lang="en">
<title>HTMLSelectMenuElement Test: ask-for-reset</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<form name="fm1" id="form1">
  <selectmenu id="selectmenu1">
    <option>one</option>
    <option>two</option>
  </selectmenu>

  <selectmenu id="selectmenu2">
    <option>one</option>
    <option selected>two</option>
  </selectmenu>

  <selectmenu id="selectmenu3">
    <option>one</option>
    <option selected>two</option>
    <option selected>three</option>
  </selectmenu>
</form>

<script>
function createSelectMenu(numberOfOptions) {
  let selectMenu = document.createElement("selectmenu");
  for (let i = 0; i < numberOfOptions; i++) {
    let option = document.createElement("option");
    option.value = i;
    selectMenu.appendChild(option);
  }
  return selectMenu;
}

function checkSelection(selectMenu, selectedOptionIndex, msg) {
  for (let i = 0; i < selectMenu.children.length; i++) {
    if (i != selectedOptionIndex) {
      assert_false(selectMenu.children[i].selected);
    }
  }
  assert_true(selectMenu.children[selectedOptionIndex].selected, msg);
  assert_equals(selectMenu.value, selectMenu.children[selectedOptionIndex].value);
}

test(() => {
  let selectMenu = createSelectMenu(5);

  selectMenu.children[4].selected = true;
  checkSelection(selectMenu, 4);

  selectMenu.children[4].remove();
  checkSelection(selectMenu, 0, "After removing the selected option, selection should default to first option.");

  selectMenu.children[3].selected = true;
  checkSelection(selectMenu, 3);
  selectMenu.children[0].remove();
  checkSelection(selectMenu, 2, "Removing non-selected option should have no effect.");
}, "ask-for-reset when removing option");

test(() => {
  let selectMenu = createSelectMenu(3);
  selectMenu.children[1].selected = true;

  let newOption = document.createElement("option");
  newOption.selected = true;
  selectMenu.appendChild(newOption);
  checkSelection(selectMenu, 3, "Inserting a selected option should update selection.");

  let newOption2 = document.createElement("option");
  newOption2.selected = true;
  selectMenu.prepend(newOption2);
  checkSelection(selectMenu, 0, "Inserting a selected option should update selection, even though it's not last in tree order.");

  let newOption3 = document.createElement("option");
  selectMenu.appendChild(newOption3);
  checkSelection(selectMenu, 0, "Inserting a non-selected option should have no effect.");
}, "ask-for-reset when inserting option");

test(() => {
  let selectMenu = createSelectMenu(3);
  let options = selectMenu.children;

  // select options from first to last
  for (let i = 0; i < options.length; i++) {
    options[i].selected = true;
    checkSelection(selectMenu, i);
  }

  // select options from last to first
  for (let i = options.length - 1; i >= 0; i--) {
    options[i].selected = true;
    checkSelection(selectMenu, i);
  }

  options[2].selected = true;
  checkSelection(selectMenu, 2);
  options[2].selected = false;
  checkSelection(selectMenu, 0, "First non-disabled option should be selected.");

  options[0].disabled = true;
  options[2].selected = true;
  checkSelection(selectMenu, 2);
  options[2].selected = false;
  checkSelection(selectMenu, 1, "First non-disabled option should be selected.");
}, "ask-for-reset when changing selectedness of option");

test(() => {
  let selectMenu1 = document.getElementById("selectmenu1");
  let selectMenu2 = document.getElementById("selectmenu2");
  let selectMenu3 = document.getElementById("selectmenu3");

  document.getElementById("form1").reset();

  assert_equals(selectMenu1.value, "one", "First non-disabled option should be selected.");
  assert_equals(selectMenu2.value, "two", "The selected option should be selected.");
  assert_equals(selectMenu3.value, "three", "Last selected option should be selected.")
}, "ask-for-reset for form");
</script>
