diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-many-options.tentative.html | 140 |
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> |