selectlist-nested.tentative.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<html lang="en">

<title>HTMLSelectListElement Test: nested selects</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">

  <div popover slot="listbox" behavior="listbox">

    <selectlist id="nested0">

      <option id="child1">one</option>

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

    </selectlist>

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

  </div>

</selectlist>

<selectlist id="selectList1">

  <div popover slot="listbox" behavior="listbox">

    <select>

      <option>one</option>

      <option>two</option>

    </select>

    <option>three</option>

  </div>

</selectlist>

<selectlist id="selectList2">

  <div slot="button">

    <selectlist id="nested2">

      <button type=selectlist id="selectList2-button0">button0</button>

      <option id="nested2-option1">one</option>

    </selectlist>

    <button type=selectlist id="selectList2-button1">button1</button>

  </div>

  <option>two</option>

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

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

    assert_equals(selectList0.value, "three", "Options nested in another <selectlist> should not get controller code from outer <selectlist>");

    await clickOn(selectList0);

    assert_true(selectList0.open);

    assert_false(nested0.open);

    await clickOn(nested0);

    assert_true(nested0.open);

    await clickOn(child2);

    assert_false(nested0.open);

    assert_equals(nested0.value, "two");

    assert_true(selectList0.open, "click on option in inner <selectlist> should not close outer <selectlist>");

    assert_equals(selectList0.value, "three", "click on option in inner <selectlist> should not change value of outer <selectlist>");

  }, "A <selectlist> shouldn't apply controller code to parts nested in a <selectlist> child");

  promise_test(async () => {

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

    assert_equals(selectList0.value, "three");

  }, "A <selectlist> shouldn't apply controller code to parts nested in a <select> child");

  promise_test(async () => {

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

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

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

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

    const nested2Option1 = document.getElementById("nested2-option1");

    assert_false(selectList2.open);

    assert_false(nested2.open);

    await clickOn(button0);

    assert_false(selectList2.open, "Clicking the button of a nested <selectlist> should not open the outer <selectlist>");

    assert_true(nested2.open, "Clicking the button of a nested <selectlist> should open the outer <selectlist>");

    await clickOn(nested2Option1);

    assert_false(nested2.open);

    await clickOn(button1);

    assert_true(selectList2.open);

    assert_false(nested2.open);

  }, "A nested button part in a nested <selectlist> shouldn't get controller code even if it comes first in document order");

</script>