<!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>
