<!DOCTYPE html>
<title>HTMLSelectMenuElement Test: popup</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<selectmenu id="selectMenu0">
  <option>one</option>
  <option id="selectMenu0-child2">two</option>
  <div id="selectMenu0-child3">I'm a div with no part attr</div>
  <option>three</option>
  <option>four</option>
</selectmenu>

<selectmenu id="selectMenu1">
  <div slot="button" behavior="button" class="button">
    Custom button
  </div>
  <div popup slot="listbox" behavior="listbox">
    <option>one</option>
    <option class="child2">two</option>
    <option class="child3">three</option>
  </div>
</selectmenu>

<selectmenu id="selectMenu2">
  <!-- Swap out the listbox part without providing a replacement -->
  <div slot="listbox"></div>
</selectmenu>

<selectmenu id="selectMenu3">
  <div slot="listbox">
    <div popup behavior="listbox" id="selectMenu3-listbox">
      <option>one</option>
    </div>
  </div>
</selectmenu>
<script>

  function clickOn(element) {
    const actions = new test_driver.Actions();
    return actions.pointerMove(0, 0, {origin: element})
      .pointerDown({button: actions.ButtonType.LEFT})
      .pointerUp({button: actions.ButtonType.LEFT})
      .send();
  }

  promise_test(async () => {
    const selectMenu0 = document.getElementById("selectMenu0");
    const selectMenu0Child2 = document.getElementById("selectMenu0-child2");
    const selectMenu0Child3 = document.getElementById("selectMenu0-child3");
    assert_equals(selectMenu0.value, "one");
    assert_equals(selectMenu0.open, false);
    await clickOn(selectMenu0);
    assert_equals(selectMenu0.open, true);
    await clickOn(selectMenu0Child2);
    assert_equals(selectMenu0.value, "two");
    assert_equals(selectMenu0.open, false);

    await clickOn(selectMenu0);
    assert_equals(selectMenu0.open, true);
    await clickOn(selectMenu0Child3);
    assert_equals(selectMenu0.value, "two", "Clicking a non-option should not change the value");
    assert_equals(selectMenu0.open, true);
    await clickOn(selectMenu0Child2);
    assert_equals(selectMenu0.open, false);
  }, "Opening the popup and clicking an option should change the selectmenu's value");

  promise_test(async () => {
    const selectMenu1 = document.getElementById("selectMenu1");
    const button = selectMenu1.querySelector(".button");
    const child2 = selectMenu1.querySelector(".child2");
    const child3 = selectMenu1.querySelector(".child3");
    assert_equals(selectMenu1.value, "one");
    assert_equals(selectMenu1.open, false);
    await clickOn(button);
    assert_equals(selectMenu1.open, true);
    await clickOn(child2);
    assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
    assert_equals(selectMenu1.open, false);

    await clickOn(button);
    assert_equals(selectMenu1.open, true);
    await clickOn(child3);
    assert_equals(selectMenu1.value, "three", "Clicking a <div part='option'> should change the value");
    assert_equals(selectMenu1.open, false);
  }, "With custom button and popup: opening the popup and clicking an option should change the selectmenu's value");

  promise_test(async () => {
    const selectMenu2 = document.getElementById("selectMenu2");
    await clickOn(selectMenu2);
    assert_equals(selectMenu2.value, "");
    assert_equals(selectMenu2.open, false);
  }, "Clicking a popup with no listbox part does nothing");

  promise_test(async () => {
    const selectMenu3 = document.getElementById("selectMenu3");
    const selectMenu3Listbox = document.getElementById("selectMenu3-listbox");
    selectMenu3Listbox.remove();

    await clickOn(selectMenu3);
    assert_equals(selectMenu3.value, "");
    assert_equals(selectMenu3.open, false);
  }, "Clicking a popup with a listbox that was removed does nothing");
</script>
