1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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>
|
