selectlist-nested.tentative.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/external/wpt/html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html
