test_input_datetime_input_change_events.html (6352B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1370858 5 --> 6 <head> 7 <title>Test for Bugs 1370858 and 1804881</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 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1370858">Mozilla Bug 1370858</a> 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1804881">Mozilla Bug 1804881</a> 15 <p id="display"></p> 16 <div id="content"> 17 <input type="time" id="input_time" onchange="++changeEvents[0]" 18 oninput="++inputEvents[0]"> 19 <input type="date" id="input_date" onchange="++changeEvents[1]" 20 oninput="++inputEvents[1]"> 21 <input type="datetime-local" id="input_datetime-local" onchange="++changeEvents[2]" 22 oninput="++inputEvents[2]"> 23 </div> 24 <pre id="test"> 25 <script class="testbody"> 26 27 /** 28 * Test for Bug 1370858. 29 * Test that change and input events are (not) fired for date/time inputs. 30 */ 31 32 const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent); 33 34 var inputTypes = ["time", "date", "datetime-local"]; 35 var changeEvents = [0, 0, 0]; 36 var inputEvents = [0, 0, 0]; 37 var values = ["10:30", "2017-06-08", "2017-06-08T10:30"]; 38 var expectedValues = [ 39 ["09:30", "01:30", "01:25", "", "01:59", "13:59", ""], 40 ["2017-05-08", "2017-01-08", "2017-01-25", "", "2017-01-31", "2017-01-31", ""], 41 ["2017-05-08T10:30", "2017-01-08T10:30", "2017-01-25T10:30", "", "2017-01-31T10:30", "2017-01-31T10:30", ""] 42 ]; 43 44 SimpleTest.waitForExplicitFinish(); 45 SimpleTest.waitForFocus(function() { 46 test(); 47 SimpleTest.finish(); 48 }); 49 50 function test() { 51 for (var i = 0; i < inputTypes.length; i++) { 52 var input = document.getElementById("input_" + inputTypes[i]); 53 54 is(changeEvents[i], 0, "Number of change events should be 0 at start."); 55 is(inputEvents[i], 0, "Number of input events should be 0 at start."); 56 57 // Test that change and input events are not dispatched setting .value by 58 // script. 59 input.value = values[i]; 60 is(input.value, values[i], "Check that value was set correctly (0)."); 61 is(changeEvents[i], 0, "Change event should not have dispatched (0)."); 62 is(inputEvents[i], 0, "Input event should not have dispatched (0)."); 63 64 // Test that change and input events are fired when changing the value using 65 // up/down keys. 66 input.focus(); 67 synthesizeKey("KEY_ArrowDown"); 68 is(input.value, expectedValues[i][0], "Check that value was set correctly (1)."); 69 is(changeEvents[i], 1, "Change event should be dispatched (1)."); 70 is(inputEvents[i], 1, "Input event should be dispatched (1)."); 71 72 // Test that change and input events are fired when changing the value with 73 // the keyboard. 74 sendString("01"); 75 // We get event per character. 76 is(input.value, expectedValues[i][1], "Check that value was set correctly (2)."); 77 is(changeEvents[i], 2, "Change event should be dispatched (2)."); 78 is(inputEvents[i], 2, "Input event should be dispatched (2)."); 79 80 // Test that change and input events are fired when changing the value with 81 // both the numeric keyboard and digit keys. 82 synthesizeKey("2", { code: "Numpad2" }); 83 synthesizeKey("5"); 84 // We get event per character. 85 is(input.value, expectedValues[i][2], "Check that value was set correctly (3)."); 86 is(changeEvents[i], 3, "Change event should be dispatched (3)."); 87 is(inputEvents[i], 3, "Input event should be dispatched (3)."); 88 89 // Test that change and input events are not fired when navigating with Tab. 90 // Return to the previously focused field (minutes, day, day). 91 synthesizeKey("KEY_Tab", { shiftKey: true }); 92 is(input.value, expectedValues[i][2], "Check that value was not changed (4)."); 93 is(changeEvents[i], 3, "Change event should not be dispatched (4)."); 94 is(inputEvents[i], 3, "Input event should not be dispatched (4)."); 95 96 // Test that change and input events are fired when using Backspace. 97 synthesizeKey("KEY_Backspace"); 98 // We get event per character. 99 is(input.value, expectedValues[i][3], "Check that value was set correctly (5)."); 100 is(changeEvents[i], 4, "Change event should be dispatched (5)."); 101 is(inputEvents[i], 4, "Input event should be dispatched (5)."); 102 103 // Test that change and input events are fired when using Home key. 104 synthesizeKey("KEY_End"); 105 // We get event per character. 106 is(input.value, expectedValues[i][4], "Check that value was set correctly (6)."); 107 is(changeEvents[i], 5, "Change event should be dispatched (6)."); 108 is(inputEvents[i], 5, "Input event should be dispatched (6)."); 109 110 // Test that change and input events are fired for time and not fired 111 // for others when changing the value with a letter key. 112 // Navigate to the next field (time of the day, year, year). 113 synthesizeKey("KEY_Tab"); 114 synthesizeKey("P"); 115 // We get event per character. 116 is(input.value, expectedValues[i][5], "Check that value was set correctly (7)."); 117 if (i === 0) { 118 // For the time input, the time of the day should be focused and it, 119 // as an AM/PM toggle, should change to "PM" when the "p" key is pressed 120 is(changeEvents[i], 6, "Change event should be dispatched (7)."); 121 is(inputEvents[i], 6, "Input event should be dispatched (7)."); 122 } else { 123 // For the date and datetime inputs, the year should be focused and it, 124 // as a numeric value, should not change when the "p" key is pressed 125 is(changeEvents[i], 5, "Change event should not be dispatched (7)."); 126 is(inputEvents[i], 5, "Input event should not be dispatched (7)."); 127 } 128 129 // Test that change and input events are fired when clearing the value 130 // using a Ctrl/Cmd+Delete/Backspace key combination 131 let events = (i === 0) ? 7 : 6; 132 synthesizeKey("KEY_Backspace", { accelKey: true }); 133 // We get one event 134 is(input.value, expectedValues[i][6], "Check that value was cleared out correctly (8)."); 135 is(changeEvents[i], events, "Change event should be dispatched (8)."); 136 is(inputEvents[i], events, "Input event should be dispatched (8)."); 137 } 138 } 139 140 </script> 141 </pre> 142 </body> 143 </html>