test_input_password_click_show_password_button.html

Enable keyboard shortcuts

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

    info(aId + ": type=text should render the same as type=password that is showing the password");

    assertSnapshots(baseSnapshot, typeTextSnapshot, true, null, aId + ": base", aId + ": type=text");

    // Re-setting value shouldn't change anything.

    // eslint-disable-next-line no-self-assign

    element.value = element.value;

    var tmpSnapshot = await snapshotWindow(window);

    info(aId + ": re-setting the value should change nothing");

    assertSnapshots(baseSnapshot, tmpSnapshot, true, null, aId + ": base", aId + ": tmp");

  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);

    info(aId + ": changing the type attribute should conceal the password again");

    assertSnapshots(concealedSnapshot, typePasswordSnapshot, true, null, aId + ": concealed", aId + ": type=password");

  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>