1 files changed, 140 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html
new file mode 100644
index 0000000000..36bae1a82b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<title>HTMLSelectListElement Test: many options</title>
+<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
+<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>
+
+<style>
+  #selectList0 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  #selectList0-popover {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
+    box-sizing: border-box;
+    overflow: auto;
+    padding: 4px;
+  }
+</style>
+
+<selectlist id="selectList0">
+  <div popover slot="listbox" behavior="listbox" id="selectList0-popover">
+    <option>bottom left</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+    <option>two</option>
+    <option>three</option>
+  </div>
+</selectlist>
+<br>
+
+<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 selectList0Popover = document.getElementById("selectList0-popover");
+
+    await clickOn(selectList0);
+    assert_equals(Math.round(selectList0.getBoundingClientRect().bottom), Math.round(selectList0Popover.getBoundingClientRect().top));
+    assert_equals(Math.round(selectList0.getBoundingClientRect().left), Math.round(selectList0Popover.getBoundingClientRect().left));
+    assert_equals(window.innerHeight, Math.round(selectList0Popover.getBoundingClientRect().bottom));
+  }, "The popover should be bottom left positioned");
+
+</script>