diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-input-element/radio-keyboard-navigation-order.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-input-element/radio-keyboard-navigation-order.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/radio-keyboard-navigation-order.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/radio-keyboard-navigation-order.html new file mode 100644 index 0000000000..d019ca982c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/radio-keyboard-navigation-order.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Radio button group keyboard navigation order</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> +</head> +<body> +<form id="inside"> + <input type="radio" name="inside" id="inside1"/> + <input type="radio" name="inside" id="inside2"/> + <input type="radio" name="inside" id="inside3"/> +</form> +<form id="before"></form> +<input type="radio" form="before" name="before" id="before1"/> +<input type="radio" form="before" name="before" id="before2"/> +<input type="radio" form="before" name="before" id="before3"/> +<input type="radio" form="after" name="after" id="after1"/> +<input type="radio" form="after" name="after" id="after2"/> +<input type="radio" form="after" name="after" id="after3"/> +<form id="after"></form> +<input type="radio" name="mix" id="mix1"/> +<form id="mix"><input type="radio" name="mix" id="mix2"/></form> +<input type="radio" name="mix" id="mix3"/> +<input type="radio" name="doc" id="doc1"/> +<input type="radio" name="doc" id="doc2"/> +<input type="radio" name="doc" id="doc3"/> +<script> +async function pressRight() { + return new test_driver.Actions() + .keyDown("\uE014") + .keyUp("\uE014") + .send(); +} + +promise_test(async () => { + for (const groupName of ["inside", "before", "after", "mix", "doc"]) { + const firstInGroup = document.querySelector(`input[name="${groupName}"]`); + const newInput = document.createElement("input"); + newInput.id = groupName + "New"; + newInput.type = "radio"; + if (groupName != "doc") { + newInput.setAttribute("form", groupName); + } + newInput.name = groupName; + firstInGroup.after(newInput); + } + + for (const formId of ["inside", "before", "after", "mix"]) { + document.forms[formId].elements[0].focus(); + for (const radio of document.forms[formId].elements) { + assert_equals(radio, document.activeElement, `Navigated to next radio button in form '${formId}'`); + await pressRight(); + } + } + + const radios = document.querySelectorAll("input[name='doc']"); + radios[0].focus(); + for (const radio of radios) { + assert_equals(radio, document.activeElement, `Navigated to next radio button on document`); + await pressRight(); + } +}, "Radio button keyboard navigation should proceed in tree-order."); +</script> +</body> +</html> |