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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>input.showPicker() with datalist shows the autocomplete popup</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
<script>
const controller = SpecialPowers.Cc["@mozilla.org/autocomplete/controller;1"].getService(
SpecialPowers.Ci.nsIAutoCompleteController
);
async function testWithInputType(aType) {
const inp = document.getElementById("inp-showPicker");
inp.type = aType;
ok(!controller.input?.popupOpen, `Initially no input popup`);
SpecialPowers.wrap(document).notifyUserGestureActivation();
try {
inp.showPicker();
} catch (e) {
if (e.name == "SecurityError" && isXOrigin) {
ok(true, "showPicker was blocked in xorigin document");
return;
}
throw e;
}
is(isXOrigin, false, "showPicker should be blocked in xorigin document");
await SimpleTest.promiseWaitForCondition(
() => controller.input?.popupOpen,
`input[type=${aType}] popup was not opened`
);
ok(controller.input?.popupOpen, `input[type=${aType}] popup open`);
// focus a different element
synthesizeMouseAtCenter(document.getElementById("inp-blur"), {});
await SimpleTest.promiseWaitForCondition(
() => !controller.input?.popupOpen,
`input[type=${aType}] popup was closed`
);
}
SimpleTest.waitForExplicitFinish();
window.onload = async function() {
await SpecialPowers.pushPrefEnv({
set: [["dom.input.showPicker_datalist.enabled", true]],
});
for (const type of ["text", "search", "email", "url", "tel", "number"]) {
await testWithInputType(type);
}
SimpleTest.finish();
};
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
<input list="id-list" id="inp-showPicker" />
<datalist id="id-list">
<option value="Chocolate"></option>
<option value="Coconut"></option>
</datalist>
<input id="inp-blur">
</body>
</html>
|
