diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html new file mode 100644 index 0000000000..a19e2b0d28 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-popover-position.tentative.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<html> +<title>HTMLSelectListElement Test: popover position</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; + } + + #selectList1 { + position: absolute; + bottom: 0px; + left: 0px; + } + + #selectList2 { + position: absolute; + top: 0px; + right: 0px; + } + + #selectList3 { + position: absolute; + bottom: 0px; + right: 0px; + } +</style> + +<selectlist id="selectList0"> + <div popover slot="listbox" behavior="listbox" id="selectList0-popover"> + <option>bottom left</option> + <option>two</option> + <option>three</option> + </div> +</selectlist> +<br> + +<selectlist id="selectList1"> + <div popover slot="listbox" behavior="listbox" id="selectList1-popover"> + <option>top left</option> + <option>two</option> + <option>three</option> + </div> +</selectlist> + +<selectlist id="selectList2"> + <div popover slot="listbox" behavior="listbox" id="selectList2-popover"> + <option>bottom right</option> + <option>two</option> + <option>three</option> + </div> +</selectlist> + +<selectlist id="selectList3"> + <div popover slot="listbox" behavior="listbox" id="selectList3-popover"> + <option>top right</option> + <option>two</option> + <option>three</option> + </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 selectList0Popover = document.getElementById("selectList0-popover"); + + await clickOn(selectList0); + assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().bottom - selectList0Popover.getBoundingClientRect().top)), 0); + assert_equals(Math.abs(Math.trunc(selectList0.getBoundingClientRect().left - selectList0Popover.getBoundingClientRect().left)), 0); + }, "The popover should be bottom left positioned"); + + promise_test(async () => { + const selectList1 = document.getElementById("selectList1"); + const selectList1Popover = document.getElementById("selectList1-popover"); + + await clickOn(selectList1); + assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().top - selectList1Popover.getBoundingClientRect().bottom)), 0); + assert_equals(Math.abs(Math.trunc(selectList1.getBoundingClientRect().left - selectList1Popover.getBoundingClientRect().left)), 0); + }, "The popover should be top left positioned"); + + promise_test(async () => { + const selectList2 = document.getElementById("selectList2"); + const selectList2Popover = document.getElementById("selectList2-popover"); + + await clickOn(selectList2); + assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().bottom - selectList2Popover.getBoundingClientRect().top)), 0); + assert_equals(Math.abs(Math.trunc(selectList2.getBoundingClientRect().right - selectList2Popover.getBoundingClientRect().right)), 0); + }, "The popover should be bottom right positioned"); + + promise_test(async () => { + const selectList3 = document.getElementById("selectList3"); + const selectList3Popover = document.getElementById("selectList3-popover"); + + await clickOn(selectList3); + assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().top - selectList3Popover.getBoundingClientRect().bottom)), 0); + assert_equals(Math.abs(Math.trunc(selectList3.getBoundingClientRect().right - selectList3Popover.getBoundingClientRect().right)), 0); + }, "The popover should be top right positioned"); + +</script> |