selectlist-popover.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-selectlist-element/selectlist-popover.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>HTMLSelectListElement Test: popover</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>

<selectlist id="selectList0">

  <option>one</option>

  <option id="selectList0-child2">two</option>

  <option>three</option>

  <option>four</option>

</selectlist>

<selectlist id="selectList1">

  <button type=selectlist class=button>

    Custom button

  </button>

  <listbox>

    <option>one</option>

    <option class="child2">two</option>

    <option class="child3">three</option>

  </listbox>

</selectlist>

<selectlist id="selectList2">

  <!-- Swap out the listbox part without providing a replacement -->

  <div slot="listbox"></div>

</selectlist>

<selectlist id="selectList3">

  <div slot="listbox">

    <div popover behavior="listbox" id="selectList3-listbox">

      <option>one</option>

    </div>

  </div>

</selectlist>

<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 selectList0 = document.getElementById("selectList0");

    const selectList0Child2 = document.getElementById("selectList0-child2");

    assert_equals(selectList0.value, "one");

    assert_equals(selectList0.open, false);

    await clickOn(selectList0);

    assert_equals(selectList0.open, true);

    await clickOn(selectList0Child2);

    assert_equals(selectList0.value, "two");

    assert_equals(selectList0.open, false);

    await clickOn(selectList0);

    assert_equals(selectList0.open, true);

    await clickOn(selectList0Child2);

    assert_equals(selectList0.open, false);

  }, "Opening the popover and clicking an option should change the selectlist's value");

  promise_test(async () => {

    const selectList1 = document.getElementById("selectList1");

    const button = selectList1.querySelector(".button");

    const child2 = selectList1.querySelector(".child2");

    const child3 = selectList1.querySelector(".child3");

    assert_equals(selectList1.value, "one");

    assert_equals(selectList1.open, false);

    await clickOn(button);

    assert_equals(selectList1.open, true);

    await clickOn(child2);

    assert_equals(selectList1.value, "two", "Clicking an <option> should change the value");

    assert_equals(selectList1.open, false);

    await clickOn(button);

    assert_equals(selectList1.open, true);

    await clickOn(child3);

    assert_equals(selectList1.value, "three", "Clicking a <div part='option'> should change the value");

    assert_equals(selectList1.open, false);

  }, "With custom button and popover: opening the popover and clicking an option should change the selectlist's value");

  promise_test(async () => {

    const selectList2 = document.getElementById("selectList2");

    await clickOn(selectList2);

    assert_equals(selectList2.value, "");

    assert_equals(selectList2.open, false);

  }, "Clicking a popover with no listbox part does nothing");

  promise_test(async () => {

    const selectList3 = document.getElementById("selectList3");

    const selectList3Listbox = document.getElementById("selectList3-listbox");

    selectList3Listbox.remove();

    await clickOn(selectList3);

    assert_equals(selectList3.value, "");

    assert_equals(selectList3.open, false);

  }, "Clicking a popover with a listbox that was removed does nothing");

</script>