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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<!DOCTYPE html>
<html>
<head>
<title>Tests for inputmode attribute</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/SpecialPowers.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<div>
<input id="a1" inputmode="none">
<input id="a2" inputmode="text">
<input id="a3" inputmode="tel">
<input id="a4" inputmode="url">
<input id="a5" inputmode="email">
<input id="a6" inputmode="numeric">
<input id="a7" inputmode="decimal">
<input id="a8" inputmode="search">
<input id="a9">
<input id="a10" type="number" inputmode="numeric">
<input id="a11" type="date" inputmode="numeric">
<input id="a12" type="time" inputmode="numeric">
<textarea id="b1" inputmode="none"></textarea>
<textarea id="b2" inputmode="text"></textarea>
<textarea id="b3" inputmode="tel"></textarea>
<textarea id="b4" inputmode="url"></textarea>
<textarea id="b5" inputmode="email"></textarea>
<textarea id="b6" inputmode="numeric"></textarea>
<textarea id="b7" inputmode="decimal"></textarea>
<textarea id="b8" inputmode="search"></textarea>
<textarea id="b9"></textarea>
<div contenteditable id="c1" inputmode="none"><span>c1</span></div>
<div contenteditable id="c2" inputmode="text"><span>c2</span></div>
<div contenteditable id="c3" inputmode="tel"><span>c3</span></div>
<div contenteditable id="c4" inputmode="url"><span>c4</span></div>
<div contenteditable id="c5" inputmode="email"><span>c5</span></div>
<div contenteditable id="c6" inputmode="numeric"><span>c6</span></div>
<div contenteditable id="c7" inputmode="decimal"><span>c7</span></div>
<div contenteditable id="c8" inputmode="search"><span>c8</span></div>
<div contenteditable id="c9"><span>c9</span></div>
<input id="d1" inputmode="URL"> <!-- no lowercase -->
</div>
<pre id="test">
<script class=testbody" type="application/javascript">
// eslint-disable-next-line mozilla/no-addtask-setup
add_task(async function setup() {
await new Promise(r => SimpleTest.waitForFocus(r));
});
add_task(async function basic() {
const tests = [
{ id: "a1", inputmode: "none", desc: "inputmode of input element is none" },
{ id: "a2", inputmode: "text", desc: "inputmode of input element is text" },
{ id: "a3", inputmode: "tel", desc: "inputmode of input element is tel" },
{ id: "a4", inputmode: "url", desc: "inputmode of input element is url" },
{ id: "a5", inputmode: "email", desc: "inputmode of input element is email" },
{ id: "a6", inputmode: "numeric", desc: "inputmode of input element is numeric" },
{ id: "a7", inputmode: "decimal", desc: "inputmode of input element is decimal" },
{ id: "a8", inputmode: "search", desc: "inputmode of input element is search" },
{ id: "a9", inputmode: "", desc: "no inputmode of input element" },
{ id: "a10", inputmode: "numeric", desc: "inputmode of input type=number is numeric" },
{ id: "a11", inputmode: "", desc: "no inputmode due to type=date" },
{ id: "a12", inputmode: "", desc: "no inputmode due to type=time" },
{ id: "b1", inputmode: "none", desc: "inputmode of textarea element is none" },
{ id: "b2", inputmode: "text", desc: "inputmode of textarea element is text" },
{ id: "b3", inputmode: "tel", desc: "inputmode of textarea element is tel" },
{ id: "b4", inputmode: "url", desc: "inputmode of textarea element is url" },
{ id: "b5", inputmode: "email", desc: "inputmode of textarea element is email" },
{ id: "b6", inputmode: "numeric", desc: "inputmode of textarea element is numeric" },
{ id: "b7", inputmode: "decimal", desc: "inputmode of textarea element is decimal" },
{ id: "b8", inputmode: "search", desc: "inputmode of textarea element is search" },
{ id: "b9", inputmode: "", desc: "no inputmode of textarea element" },
{ id: "c1", inputmode: "none", desc: "inputmode of contenteditable is none" },
{ id: "c2", inputmode: "text", desc: "inputmode of contenteditable is text" },
{ id: "c3", inputmode: "tel", desc: "inputmode of contentedtiable is tel" },
{ id: "c4", inputmode: "url", desc: "inputmode of contentedtiable is url" },
{ id: "c5", inputmode: "email", desc: "inputmode of contentedtable is email" },
{ id: "c6", inputmode: "numeric", desc: "inputmode of contenteditable is numeric" },
{ id: "c7", inputmode: "decimal", desc: "inputmode of contenteditable is decimal" },
{ id: "c8", inputmode: "search", desc: "inputmode of contenteditable is search" },
{ id: "c9", inputmode: "", desc: "no inputmode of contentedtiable" },
{ id: "d1", inputmode: "url", desc: "inputmode of input element is URL" },
];
for (let test of tests) {
let element = document.getElementById(test.id);
if (element.tagName == "DIV") {
// Set caret to text node in contenteditable
window.getSelection().removeAllRanges();
let range = document.createRange();
range.setStart(element.firstChild.firstChild, 1);
range.setEnd(element.firstChild.firstChild, 1);
window.getSelection().addRange(range);
} else {
// input and textarea element
element.focus();
}
is(SpecialPowers.DOMWindowUtils.focusedInputMode, test.inputmode, test.desc);
}
});
add_task(async function dynamicChange() {
const tests = ["a3", "b3", "c3"];
for (let test of tests) {
let element = document.getElementById(test);
element.focus();
is(SpecialPowers.DOMWindowUtils.focusedInputMode, "tel", "Initial inputmode");
element.inputMode = "url";
is(SpecialPowers.DOMWindowUtils.focusedInputMode, "url",
"inputmode in InputContext has to sync with current inputMode property");
element.setAttribute("inputmode", "decimal");
is(SpecialPowers.DOMWindowUtils.focusedInputMode, "decimal",
"inputmode in InputContext has to sync with current inputmode attribute");
// Storing the original value may be safer.
element.inputMode = "tel";
}
let element = document.getElementById("a3");
element.focus();
is(SpecialPowers.DOMWindowUtils.focusedInputMode, "tel", "Initial inputmode");
document.getElementById("a4").inputMode = "email";
is(SpecialPowers.DOMWindowUtils.focusedInputMode, "tel",
"inputmode in InputContext keeps focused inputmode value");
// Storing the original value may be safer.
document.getElementById("a4").inputMode = "url";
});
</script>
</pre>
</body>
</html>
|
