1 files changed, 113 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_date_bad_input.html b/dom/html/test/forms/test_input_date_bad_input.html
new file mode 100644
index 0000000000..516d48263f
--- /dev/null
+++ b/dom/html/test/forms/test_input_date_bad_input.html
@@ -0,0 +1,113 @@
+<!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>