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