<!DOCTYPE html>
<meta charset="utf-8">
<title>Input type switch on blur event should clean up properly</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, capture) {
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() {
input.type = toType;
}
input.addEventListener("focus", onFocus);
input.addEventListener("blur", onBlur, capture);
await tick();
assert_equals(document.activeElement, input, `${fromType} input should still be focused after tick`);
assert_true(input.matches(":focus"), `${fromType} input should match :focus`);
assert_true(input.matches(":focus-visible"), `${fromType} input should match :focus-visible`);
input.blur();
assert_equals(document.activeElement, document.body, `${fromType} input should not remain focused after blur`);
assert_false(input.matches(":focus"), `${fromType} input should not match :focus`);
assert_false(input.matches(":focus-visible"), `${fromType} input should not match :focus-visible`);
assert_equals(input.type, toType, `${fromType} input should have changed to ${toType}`);
input.removeEventListener("focus", onFocus);
input.removeEventListener("blur", onBlur);
}, `${fromType} -> ${toType} ${capture}`);
}
for (let type of inputTypes) {
if (type == "hidden") {
continue; // hidden inputs are not focusable
}
for (let capture of [true, false]) {
test_from_to(type, "text", capture);
test_from_to("text", type, capture);
}
}
</script>
</body>
Codebase Browser
chromium