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