diff options
Diffstat (limited to 'dom/html/test/forms/test_input_password_click_show_password_button.html')
-rw-r--r-- | dom/html/test/forms/test_input_password_click_show_password_button.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_password_click_show_password_button.html b/dom/html/test/forms/test_input_password_click_show_password_button.html new file mode 100644 index 0000000000..fd5cfe6935 --- /dev/null +++ b/dom/html/test/forms/test_input_password_click_show_password_button.html @@ -0,0 +1,95 @@ +<!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"); + + 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> |