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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=502258
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 502258</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/WindowSnapshot.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<script>
SimpleTest.waitForExplicitFinish();
async function click_show_password(aId) {
var wu = SpecialPowers.getDOMWindowUtils(window);
var element = document.getElementById(aId);
element.focus();
await new Promise(resolve => setTimeout(resolve, 0));
var rect = element.getBoundingClientRect();
var x = rect.right - 8;
var y = rect.top + 8;
wu.sendMouseEvent("mousedown", x, y, 0, 1, 0);
wu.sendMouseEvent("mouseup", x, y, 0, 1, 0);
await new Promise(resolve => requestAnimationFrame(resolve));
}
async function test_show_password(aId) {
var wu = SpecialPowers.getDOMWindowUtils(window);
var element = document.getElementById(aId);
var baseSnapshot = await snapshotWindow(window);
await new Promise(resolve => setTimeout(resolve, 0));
element.type = "text";
await new Promise(resolve => requestAnimationFrame(resolve));
var typeTextSnapshot = await snapshotWindow(window);
results = compareSnapshots(baseSnapshot, typeTextSnapshot, true);
ok(results[0], aId + ": type=text should render the same as type=password that is showing the password");
// Re-setting value shouldn't change anything.
// eslint-disable-next-line no-self-assign
element.value = element.value;
var tmpSnapshot = await snapshotWindow(window);
results = compareSnapshots(baseSnapshot, tmpSnapshot, true);
ok(results[0], aId + ": re-setting the value should change nothing");
}
async function reset_show_password(aId, concealedSnapshot) {
var element = document.getElementById(aId);
element.type = "password";
await new Promise(resolve => requestAnimationFrame(resolve));
var typePasswordSnapshot = await snapshotWindow(window);
results = compareSnapshots(concealedSnapshot, typePasswordSnapshot, true);
ok(results[0], aId + ": changing the type attribute should conceal the password again");
}
async function runTest() {
await SpecialPowers.pushPrefEnv({set: [["layout.forms.reveal-password-button.enabled", true]]});
document.getElementById("content").style.display = "";
document.getElementById("content").getBoundingClientRect();
var concealedSnapshot = await snapshotWindow(window);
// test1 checks that the Show Password button becomes invisible when the value becomes empty
document.getElementById('test1').value = "123";
await click_show_password('test1');
document.getElementById('test1').value = "";
// test2 checks that clicking the Show Password button unmasks the value
await click_show_password('test2');
await test_show_password('test1');
await test_show_password('test2');
// checks that changing the type attribute resets thhe revealed state
await reset_show_password('test2', concealedSnapshot);
SimpleTest.finish();
}
SimpleTest.waitForFocus(runTest);
</script>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=502258">Mozilla Bug 502258</a>
<p id="display"></p>
<style>input {appearance:none} .ref {display:none}</style>
<div id="content" style="display: none">
<input id="test1" type=password>
<div style="position:relative; margin: 1em 0;">
<input id="test2" type=password value="123" style="position:absolute">
<div style="position:absolute; top:0;left:10ch; width:20ch; height:2em; background:black; pointer-events:none"></div>
</div>
</div>
<pre id="test">
</pre>
</body>
</html>
|
