<!DOCTYPE html>
<html>
<title>HTMLSelectListElement Test: many options</title>
<link rel="author" title="Ionel Popescu" href="mailto:[email protected]">
<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>
Codebase Browser
chromium