test_input_datetime_tabindex.html (3402B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1288591 5 --> 6 <head> 7 <title>Test tabindex attribute for date/time input types</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=1288591">Mozilla Bug 1288591</a> 14 <p id="display"></p> 15 <div id="content"> 16 <input id="time1" type="time" tabindex="0"> 17 <input id="time2" type="time" tabindex="-1"> 18 <input id="time3" type="time" tabindex="0"> 19 <input id="time4" type="time" disabled> 20 <input id="date1" type="date" tabindex="0"> 21 <input id="date2" type="date" tabindex="-1"> 22 <input id="date3" type="date" tabindex="0"> 23 <input id="date4" type="date" disabled> 24 <input id="datetime-local1" type="datetime-local" tabindex="0"> 25 <input id="datetime-local2" type="datetime-local" tabindex="-1"> 26 <input id="datetime-local3" type="datetime-local" tabindex="0"> 27 <input id="datetime-local4" type="datetime-local" disabled> 28 </div> 29 <pre id="test"> 30 <script> 31 /** 32 * Test for Bug 1288591. 33 * This test checks whether date/time input types tabindex attribute works 34 * correctly. 35 */ 36 SimpleTest.waitForExplicitFinish(); 37 SimpleTest.waitForFocus(function() { 38 test(); 39 SimpleTest.finish(); 40 }); 41 42 function checkInnerTextboxTabindex(input, tabindex) { 43 let fields = SpecialPowers.wrap(input).openOrClosedShadowRoot.querySelectorAll(".datetime-edit-field"); 44 45 for (let field of fields) { 46 is(field.tabIndex, tabindex, "tabIndex in the inner textbox should be correct"); 47 } 48 49 } 50 51 function testTabindex(type) { 52 let input1 = document.getElementById(type + "1"); 53 let input2 = document.getElementById(type + "2"); 54 let input3 = document.getElementById(type + "3"); 55 let input4 = document.getElementById(type + "4"); 56 57 input1.focus(); 58 is(document.activeElement, input1, 59 "input element with tabindex=0 is focusable"); 60 61 // Time input does not include a Calendar button 62 let fieldCount; 63 if (type == "datetime-local") { 64 fieldCount = 7; 65 } else if (type == "date") { 66 fieldCount = 4; 67 } else { 68 fieldCount = 3; 69 }; 70 71 // Advance through inner fields. 72 for (let i = 0; i < fieldCount - 1; ++i) { 73 synthesizeKey("KEY_Tab"); 74 is(document.activeElement, input1, 75 "input element with tabindex=0 is tabbable"); 76 } 77 78 // Advance to next element 79 synthesizeKey("KEY_Tab"); 80 is(document.activeElement, input3, 81 "input element with tabindex=-1 is not tabbable"); 82 83 input2.focus(); 84 is(document.activeElement, input2, 85 "input element with tabindex=-1 is still focusable"); 86 87 checkInnerTextboxTabindex(input1, 0); 88 checkInnerTextboxTabindex(input2, -1); 89 checkInnerTextboxTabindex(input3, 0); 90 91 // Changing the tabindex attribute dynamically. 92 input3.setAttribute("tabindex", "-1"); 93 94 synthesizeKey("KEY_Tab"); // need only one TAB since input2 is not tabbable 95 96 isnot(document.activeElement, input3, 97 "element with tabindex changed to -1 should not be tabbable"); 98 isnot(document.activeElement, input4, 99 "disabled element should not be tabbable"); 100 101 checkInnerTextboxTabindex(input3, -1); 102 } 103 104 function test() { 105 for (let inputType of ["time", "date", "datetime-local"]) { 106 testTabindex(inputType); 107 } 108 } 109 110 </script> 111 </pre> 112 </body> 113 </html>