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>