<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1372369
-->
<head>
  <title>Test for &lt;input type='date'&gt; bad input validity state</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
    input    { background-color: rgb(0,0,0)   !important; }
    :valid   { background-color: rgb(0,255,0) !important; }
    :invalid { background-color: rgb(255,0,0) !important; }
  </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1372369">Mozilla Bug 1372369</a>
<p id="display"></p>
<div id="content">
  <form>
    <input type="date" id="input">
  <form>
</div>
<pre id="test">
<script type="application/javascript">

/** Test for <input type='date'> bad input validity state **/

SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
  test();
  SimpleTest.finish();
});

const DATE_BAD_INPUT_MSG = "Please enter a valid date.";
const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);

function checkValidity(aElement, aIsBadInput) {
  is(aElement.validity.valid, !aIsBadInput,
     "validity.valid should be " + (aIsBadInput ? "false" : "true"));
  is(aElement.validity.badInput, !!aIsBadInput,
     "validity.badInput should be " + (aIsBadInput ? "true" : "false"));
  is(aElement.validationMessage, aIsBadInput ? DATE_BAD_INPUT_MSG : "",
     "validationMessage should be: " + (aIsBadInput ? DATE_BAD_INPUT_MSG : ""));

  is(window.getComputedStyle(aElement).getPropertyValue('background-color'),
     aIsBadInput ? "rgb(255, 0, 0)" : "rgb(0, 255, 0)",
     (aIsBadInput ? ":invalid" : "valid") + " pseudo-class should apply");
}

function sendKeys(aKey) {
  if (aKey.startsWith("KEY_")) {
    synthesizeKey(aKey);
  } else {
    sendString(aKey);
  }
}

function test() {
  var elem = document.getElementById("input");

  elem.focus();
  sendKeys("02312017");
  elem.blur();
  checkValidity(elem, true);

  elem.focus();
  sendKeys("02292016");
  elem.blur();
  checkValidity(elem, false);

  elem.focus();
  sendKeys("06312000");
  elem.blur();
  checkValidity(elem, true);

  // Removing some of the fields keeps the input as invalid.
  elem.focus();
  sendKeys("KEY_Backspace");
  elem.blur();
  checkValidity(elem, true);

  // Removing all of the fields manually makes the input valid (but empty) again.
  elem.focus();
  sendKeys("KEY_ArrowRight");
  sendKeys("KEY_Backspace");
  sendKeys("KEY_ArrowRight");
  sendKeys("KEY_Delete");
  elem.blur();
  checkValidity(elem, false);

  elem.focus();
  sendKeys("02292017");
  elem.blur();
  checkValidity(elem, true);

  // Clearing all fields should clear bad input validity state as well.
  elem.focus();
  synthesizeKey("KEY_Backspace", { accelKey: true });
  checkValidity(elem, false);

  sendKeys("22334444");
  elem.blur();
  elem.focus();
  synthesizeKey("KEY_Delete", { accelKey: true });
  checkValidity(elem, false);
}

</script>
</pre>
</body>
</html>
