<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test form field autofill highlight</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="../../../satchel/test/satchel_common.js"></script>
  <script type="text/javascript" src="pwmgr_common.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display"></p>
<div id="content"></div>
<pre id="test">
<script>
function closeCurrentTab() {
  runInParent(function cleanUpWindow() {
    let window = Services.wm.getMostRecentWindow("navigator:browser");
    window.gBrowser.removeTab(window.gBrowser.selectedTab);
  });
}

add_setup(async () => {
  await setStoredLoginsAsync(
    [location.origin, "http://autocomplete", null, "user1", "pass1", "", ""],
    [location.origin, "http://autocomplete", null, "user2", "pass2", "", ""]
  );
});

add_task(async function test_field_highlight_on_pw_field_autocomplete_insecureWarning() {
  const form = createLoginForm({
    action: "http://autocomplete"
  });
  await promiseFormsProcessedInSameProcess();

  // Press enter on insecure warning and check.
  form.pword.focus();
  await popupByArrowDown();
  synthesizeKey("KEY_ArrowDown"); // insecure warning
  synthesizeKey("KEY_Enter");

  is(document.defaultView.getComputedStyle(form.pword).getPropertyValue("filter"), "none",
     "Highlight is not applied to the password field if enter key is pressed on the insecure warning item");
  is(document.defaultView.getComputedStyle(form.uname).getPropertyValue("filter"), "none",
     "Highlight is not applied to the username field if enter key is pressed on the insecure warning item");

  // Press tab on insecure warning and check.
  await openPopupOn(form.pword);
  synthesizeKey("KEY_ArrowDown"); // insecure warning
  synthesizeKey("KEY_Tab");

  is(document.defaultView.getComputedStyle(form.pword).getPropertyValue("filter"), "none",
     "Highlight is not applied to the password field if tab key is pressed on the insecure warning item");
  is(document.defaultView.getComputedStyle(form.uname).getPropertyValue("filter"), "none",
     "Highlight is not applied to the username field if tab key is pressed on the insecure warning item");
});

add_task(async function test_field_highlight_on_pw_field_autocomplete_footer() {
  const form = createLoginForm({
    action: "http://autocomplete"
  });
  await promiseFormsProcessedInSameProcess();

  // Press enter on the footer and check.
  await openPopupOn(form.pword);
  synthesizeKey("KEY_ArrowUp"); // footer
  synthesizeKey("KEY_Enter");

  is(document.defaultView.getComputedStyle(form.pword).getPropertyValue("filter"), "none",
     "Highlight is not applied to the password field if enter key is pressed on the footer item");
  is(document.defaultView.getComputedStyle(form.uname).getPropertyValue("filter"), "none",
     "Highlight is not applied to the username field if enter key is pressed on the footer item");

  closeCurrentTab();

  // Press tab on the footer and check.
  await openPopupOn(form.pword);
  synthesizeKey("KEY_ArrowUp"); // footer
  synthesizeKey("KEY_Tab");

  is(document.defaultView.getComputedStyle(form.pword).getPropertyValue("filter"), "none",
     "Highlight is not applied to the password field if tab key is pressed on the footer item");
  is(document.defaultView.getComputedStyle(form.uname).getPropertyValue("filter"), "none",
     "Highlight is not applied to the username field if tab key is pressed on the insecure warning item");

  closeCurrentTab();
});
</script>
</body>
</html>
