1 files changed, 55 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/focus-dynamic-type-change.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/focus-dynamic-type-change.html
new file mode 100644
index 0000000000..982cda6c92
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/focus-dynamic-type-change.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Input type switch on focused input shouldn't blur</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script type=module>
+import inputTypes from "./input-types.js";
+
+function tick() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+}
+
+function test_from_to(fromType, toType) {
+  if (fromType == toType) {
+    return;
+  }
+  promise_test(async function(t) {
+    const input = document.createElement("input");
+    input.type = fromType;
+    document.body.appendChild(input);
+    input.focus();
+    assert_equals(document.activeElement, input, `${fromType} input should be focused`);
+    function onFocus() {
+      t.assert_unreached("shouldn't be getting spurious focus events");
+    }
+    function onBlur() {
+      t.assert_unreached("shouldn't be getting spurious blur events");
+    }
+    input.addEventListener("focus", onFocus);
+    input.addEventListener("blur", onBlur);
+    input.type = toType;
+    assert_equals(document.activeElement, input, `${fromType} input should be focused after change to ${toType}`);
+    assert_true(input.matches(":focus"), `${fromType} input should still match :focus`);
+    assert_true(input.matches(":focus-visible"), `${fromType} input should still match :focus-visible`);
+    await tick();
+    assert_equals(document.activeElement, input, `${fromType} input should still be focused after change to ${toType}`);
+    assert_true(input.matches(":focus"), `${fromType} input should still match :focus`);
+    assert_true(input.matches(":focus-visible"), `${fromType} input should still match :focus-visible`);
+    input.removeEventListener("focus", onFocus);
+    input.removeEventListener("blur", onBlur);
+  }, `${fromType} -> ${toType}`);
+}
+
+for (let type of inputTypes) {
+  if (type == "hidden") {
+    continue; // hidden inputs are not focusable
+  }
+  test_from_to(type, "text");
+  test_from_to("text", type);
+}
+</script>
+</body>