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>