1 files changed, 94 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html
new file mode 100644
index 0000000000..c29413f180
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-nested.tentative.html
@@ -0,0 +1,94 @@
+<!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>