1 files changed, 80 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_password_show_password_button.html b/dom/html/test/forms/test_input_password_show_password_button.html
new file mode 100644
index 0000000000..0bb5fdbee6
--- /dev/null
+++ b/dom/html/test/forms/test_input_password_show_password_button.html
@@ -0,0 +1,80 @@
+<!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 test_append_char(aId) {
+    let element = document.getElementById(aId);
+    element.focus();
+
+    let baseSnapshot = await snapshotWindow(window);
+
+    element.selectionStart = element.selectionEnd = element.value.length;
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+    sendString('f');
+
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+    let selectionAtTheEndSnapshot = await snapshotWindow(window);
+    assertSnapshots(baseSnapshot, selectionAtTheEndSnapshot, /* equal = */ false, /* fuzz = */ null, "baseSnapshot", "selectionAtTheEndSnapshot");
+
+    element.value = element.value;
+    let tmpSnapshot = await snapshotWindow(window);
+
+    // Re-setting value shouldn't have changed anything.
+    assertSnapshots(baseSnapshot, tmpSnapshot, /* equal = */ false, /* fuzz = */ null, "baseSnapshot", "tmpSnapshot");
+    assertSnapshots(selectionAtTheEndSnapshot, tmpSnapshot, /* equal = */ true, /* fuzz = */ null, "selectionAtTheEndSnapshot", "tmpSnapshot");
+
+    element.selectionStart = element.selectionEnd = 0;
+    element.blur();
+  }
+
+  async function runTest() {
+    await SpecialPowers.pushPrefEnv({set: [["layout.forms.reveal-password-button.enabled", true]]});
+    document.getElementById("content").style.display = "";
+    document.getElementById("content").getBoundingClientRect();
+    await test_append_char('test1');
+    await test_append_char('test2');
+    await test_append_char('test3');
+    await test_append_char('test4');
+    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}</style>
+<div id="content" style="display: none">
+  <input id="test1" type=password>
+  <input id="test2" type=password value="123">
+  <!-- text value masked off -->
+  <div style="position:relative; margin: 1em 0;">
+    <input id="test3" type=password style="position:absolute">
+    <div style="position:absolute; top:0;left:0; width:10ch; height:2em; background:black"></div>
+  </div>
+  <br>
+  <!-- Show Password button masked off -->
+  <div style="position:relative; margin: 1em 0;">
+    <input id="test4" type=password style="position:absolute">
+    <div style="position:absolute; top:0;left:10ch; width:20ch; height:2em; background:black"></div>
+  </div>
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>