tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_input_date_bad_input.html (3064B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1372369
      5 -->
      6 <head>
      7  <title>Test for &lt;input type='date'&gt; bad input validity state</title>
      8  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      9  <script src="/tests/SimpleTest/EventUtils.js"></script>
     10  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
     11  <style>
     12    input    { background-color: rgb(0,0,0)   !important; }
     13    :valid   { background-color: rgb(0,255,0) !important; }
     14    :invalid { background-color: rgb(255,0,0) !important; }
     15  </style>
     16 </head>
     17 <body>
     18 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1372369">Mozilla Bug 1372369</a>
     19 <p id="display"></p>
     20 <div id="content">
     21  <form>
     22    <input type="date" id="input">
     23  <form>
     24 </div>
     25 <pre id="test">
     26 <script type="application/javascript">
     27 
     28 /** Test for <input type='date'> bad input validity state */
     29 
     30 SimpleTest.waitForExplicitFinish();
     31 SimpleTest.waitForFocus(function() {
     32  test();
     33  SimpleTest.finish();
     34 });
     35 
     36 const DATE_BAD_INPUT_MSG = "Please enter a valid date.";
     37 const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);
     38 
     39 function checkValidity(aElement, aIsBadInput) {
     40  is(aElement.validity.valid, !aIsBadInput,
     41     "validity.valid should be " + (aIsBadInput ? "false" : "true"));
     42  is(aElement.validity.badInput, !!aIsBadInput,
     43     "validity.badInput should be " + (aIsBadInput ? "true" : "false"));
     44  is(aElement.validationMessage, aIsBadInput ? DATE_BAD_INPUT_MSG : "",
     45     "validationMessage should be: " + (aIsBadInput ? DATE_BAD_INPUT_MSG : ""));
     46 
     47  is(window.getComputedStyle(aElement).getPropertyValue('background-color'),
     48     aIsBadInput ? "rgb(255, 0, 0)" : "rgb(0, 255, 0)",
     49     (aIsBadInput ? ":invalid" : "valid") + " pseudo-class should apply");
     50 }
     51 
     52 function sendKeys(aKey) {
     53  if (aKey.startsWith("KEY_")) {
     54    synthesizeKey(aKey);
     55  } else {
     56    sendString(aKey);
     57  }
     58 }
     59 
     60 function test() {
     61  var elem = document.getElementById("input");
     62 
     63  elem.focus();
     64  sendKeys("02312017");
     65  elem.blur();
     66  checkValidity(elem, true);
     67 
     68  elem.focus();
     69  sendKeys("02292016");
     70  elem.blur();
     71  checkValidity(elem, false);
     72 
     73  elem.focus();
     74  sendKeys("06312000");
     75  elem.blur();
     76  checkValidity(elem, true);
     77 
     78  // Removing some of the fields keeps the input as invalid.
     79  elem.focus();
     80  sendKeys("KEY_Backspace");
     81  elem.blur();
     82  checkValidity(elem, true);
     83 
     84  // Removing all of the fields manually makes the input valid (but empty) again.
     85  elem.focus();
     86  sendKeys("KEY_ArrowRight");
     87  sendKeys("KEY_Backspace");
     88  sendKeys("KEY_ArrowRight");
     89  sendKeys("KEY_Delete");
     90  elem.blur();
     91  checkValidity(elem, false);
     92 
     93  elem.focus();
     94  sendKeys("02292017");
     95  elem.blur();
     96  checkValidity(elem, true);
     97 
     98  // Clearing all fields should clear bad input validity state as well.
     99  elem.focus();
    100  synthesizeKey("KEY_Backspace", { accelKey: true });
    101  checkValidity(elem, false);
    102 
    103  sendKeys("22334444");
    104  elem.blur();
    105  elem.focus();
    106  synthesizeKey("KEY_Delete", { accelKey: true });
    107  checkValidity(elem, false);
    108 }
    109 
    110 </script>
    111 </pre>
    112 </body>
    113 </html>