test_input_time_sec_millisec_field.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=1374967

-->

<head>

  <title>Test second and millisecond fields in input type=time</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"/>

  <meta charset="UTF-8">

</head>

<body>

<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374967">Mozilla Bug 1374967</a>

<p id="display"></p>

<div id="content">

  <input id="input1" type="time">

  <input id="input2" type="time" value="12:30:40">

  <input id="input3" type="time" value="12:30:40.567">

  <input id="input4" type="time" step="1">

  <input id="input5" type="time" step="61">

  <input id="input6" type="time" step="120">

  <input id="input7" type="time" step="0.01">

  <input id="input8" type="time" step="0.001">

  <input id="input9" type="time" step="1.001">

  <input id="input10" type="time" min="01:30:05">

  <input id="input11" type="time" min="01:30:05.100">

  <input id="dummy">

</div>

<pre id="test">

<script type="application/javascript">

SimpleTest.waitForExplicitFinish();

SimpleTest.waitForFocus(function() {

  test();

  SimpleTest.finish();

});

const NUM_OF_FIELDS_DEFAULT = 3;

const NUM_OF_FIELDS_WITH_SECOND = NUM_OF_FIELDS_DEFAULT + 1;

const NUM_OF_FIELDS_WITH_MILLISEC = NUM_OF_FIELDS_WITH_SECOND + 1;

function countNumberOfFields(aElement) {

  is(aElement.type, "time", "Input element type should be 'time'");

  let inputRect = aElement.getBoundingClientRect();

  let firstField_X = 15;

  let firstField_Y = inputRect.height / 2;

  // Make sure to start on the first field.

  synthesizeMouse(aElement, firstField_X, firstField_Y, {});

  is(document.activeElement, aElement, "Input element should be focused");

  let n = 0;

  while (document.activeElement == aElement) {

    n++;

    synthesizeKey("KEY_Tab");

  return n;

function test() {

  // Normal input time element.

  let elem = document.getElementById("input1");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_DEFAULT, "Default input time");

  // Dynamically changing the value with second part.

  elem.value = "10:20:30";

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_SECOND,

     "Input time after changing value with second part");

  // Dynamically changing the step to 1 millisecond.

  elem.step = "0.001";

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_MILLISEC,

     "Input time after changing step to 1 millisecond");

  // Input time with value with second part.

  elem = document.getElementById("input2");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_SECOND,

     "Input time with value with second part");

  // Input time with value with second and millisecond part.

  elem = document.getElementById("input3");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_MILLISEC,

     "Input time with value with second and millisecond part");

  // Input time with step set as 1 second.

  elem = document.getElementById("input4");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_SECOND,

     "Input time with step set as 1 second");

  // Input time with step set as 61 seconds.

  elem = document.getElementById("input5");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_SECOND,

     "Input time with step set as 61 seconds");

  // Input time with step set as 2 minutes.

  elem = document.getElementById("input6");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_DEFAULT,

     "Input time with step set as 2 minutes");

  // Input time with step set as 10 milliseconds.

  elem = document.getElementById("input7");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_MILLISEC,

     "Input time with step set as 10 milliseconds");

  // Input time with step set as 100 milliseconds.

  elem = document.getElementById("input8");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_MILLISEC,

     "Input time with step set as 100 milliseconds");

  // Input time with step set as 1001 milliseconds.

  elem = document.getElementById("input9");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_MILLISEC,

     "Input time with step set as 1001 milliseconds");

  // Input time with min with second part and default step (60 seconds). Note

  // that step base is min, when there is a min.

  elem = document.getElementById("input10");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_SECOND,

     "Input time with min with second part");

  // Input time with min with second and millisecond part and default step (60

  // seconds). Note that step base is min, when there is a min.

  elem = document.getElementById("input11");

  is(countNumberOfFields(elem), NUM_OF_FIELDS_WITH_MILLISEC,

     "Input time with min with second and millisecond part");

</script>

</pre>

</body>

</html>