diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html new file mode 100644 index 0000000000..5d1c65e941 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-keyboard.tentative.html @@ -0,0 +1,142 @@ +<!doctype html> +<title>HTMLSelectListElement Test: keyboard accessibility</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"> + <button id="selectList0-button0" type=selectlist>button</button> + <option class=one>one</option> + <option class=two>two</option> + <option class=three>three</option> + </selectlist> + + <selectlist id="selectList1"> + <option id="selectList1-child0">one</option> + </selectlist> + + <selectlist id="selectList2" disabled> + <button id="selectList2-button0" type=selectlist>button</button> + <option disabled>one</option> + <option>two</option> + <option>three</option> + </selectlist> + + <selectlist id="selectList3"> + <button id="selectList3-button0" type=selectlist>button</button> + <option class=one>one</option> + <option disabled>two</option> + <option class=three>three</option> + </selectlist> +<script> +// See https://w3c.github.io/webdriver/#keyboard-actions +const KEY_CODE_MAP = { + 'Enter': '\uE007', + 'Space': '\uE00D', + 'ArrowUp': '\uE013', + 'ArrowDown': '\uE015' +}; + +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 t => { + const selectList = document.querySelector("#selectList0"); + const button = document.querySelector("#selectList0-button0"); + assert_false(selectList.open, "selectlist should not be initially open"); + + await test_driver.send_keys(button, KEY_CODE_MAP.Enter); + assert_false(selectList.open, "Enter key shouldn't open selectlist"); + await test_driver.send_keys(button, KEY_CODE_MAP.Space); + assert_true(selectList.open, "Space key should open selectlist"); + assert_equals(selectList.value, "one"); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown); + assert_equals(document.activeElement, selectList.querySelector('.two'), + "Down arrow should focus the next option."); + assert_equals(selectList.value, "one", "Down arrow should not commit the newly focused option."); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown); + assert_equals(document.activeElement, selectList.querySelector('.three'), + "Down arrow should focus the next option."); + assert_equals(selectList.value, "one", "Down arrow should not commit the newly focused option."); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown); + assert_equals(document.activeElement, selectList.querySelector('.three'), + "Down arrow should do nothing if already at the last option."); + assert_equals(selectList.value, "one", "Down arrow should not commit the newly focused option."); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp); + assert_equals(document.activeElement, selectList.querySelector('.two'), + "Up arrow should focus the previous option."); + assert_equals(selectList.value, "one", "Up arrow should not commit the newly focused option."); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp); + assert_equals(document.activeElement, selectList.querySelector('.one'), + "Up arrow should focus the previous option."); + assert_equals(selectList.value, "one", "Up arrow should not commit the newly focused option."); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp); + assert_equals(document.activeElement, selectList.querySelector('.one'), + "Up arrow should do nothing if already at the first option."); + assert_equals(selectList.value, "one", "Up arrow should not commit the newly focused option."); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter); + assert_false(selectList.open, "Enter key should close selectlist"); + + await test_driver.send_keys(button, KEY_CODE_MAP.Space); + assert_true(selectList.open, "Space key should open selectlist"); + + // This behavior is suspicious (since Space key can open the selectlist), + // but it maches <select>. See https://github.com/openui/open-ui/issues/386 + await test_driver.send_keys(selectList, " "); + assert_true(selectList.open, "Space key should *not* close selectlist"); + + await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter); + assert_false(selectList.open, "Enter key should close selectlist"); +}, "Validate Enter, Up/Down Arrow, and Space keyboard accessibility support for <selectlist>"); + +promise_test(async t => { + const selectListOption = document.getElementById("selectList1-child0"); + const event = document.createEvent("Event"); + event.initEvent("keydown"); + selectListOption.dispatchEvent(event); +}, "Firing a synthetic event at a selectlist's option doesn't crash"); + +promise_test(async t => { + const selectList2 = document.querySelector("#selectList2"); + const selectList2Button = document.querySelector("#selectList2-button0"); + assert_false(selectList2.open, "selectlist should not be initially open"); + + await test_driver.send_keys(selectList2Button, KEY_CODE_MAP.Enter); + assert_false(selectList2.open, "Enter key should not open a disabled selectlist"); + await clickOn(selectList2); + assert_false(selectList2.open, "Click should not open a disabled selectlist"); + assert_equals(selectList2.value, "one"); + + const selectList3 = document.querySelector("#selectList3"); + const selectList3Button = document.querySelector("#selectList3-button0"); + assert_false(selectList3.open, "selectlist should not be initially open"); + + await test_driver.send_keys(selectList3Button, KEY_CODE_MAP.Enter); + assert_false(selectList3.open, "Enter key shouldn't open selectlist"); + + await test_driver.send_keys(selectList3Button, KEY_CODE_MAP.Space); + assert_true(selectList3.open, "Space key should open selectlist"); + assert_equals(selectList3.value, "one"); + + await test_driver.send_keys(selectList3, KEY_CODE_MAP.ArrowDown); + assert_equals(document.activeElement, selectList3.querySelector('.three'), + "Down arrow should go to next non-disabled option"); + + await test_driver.send_keys(selectList3, KEY_CODE_MAP.ArrowUp); + assert_equals(document.activeElement, selectList3.querySelector('.one'), + "Up arrow should go to the previous non-disabled option"); +}, "Validate Enter, Up/Down Arrow keyboard accessibility support for disabled <selectlist>"); +</script> |