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>