test_input_datetime_focus_state.html (2616B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1346085 5 --> 6 <head> 7 <title>Test moving focus in onfocus/onblur handler</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1346085">Mozilla Bug 1346085</a> 13 <p id="display"></p> 14 <div id="content"> 15 <input id="input_time" type="time"> 16 <input id="input_date" type="date"> 17 <input id="input_dummy" type="text"> 18 </div> 19 <pre id="test"> 20 <script type="application/javascript"> 21 22 /** 23 * Test for Bug 1346085. 24 * This test checks whether date/time input types' focus state are set 25 * correctly, event when moving focus in onfocus/onblur handler. 26 */ 27 SimpleTest.waitForExplicitFinish(); 28 SimpleTest.waitForFocus(function() { 29 test(); 30 SimpleTest.finish(); 31 }); 32 33 function testFocusState(type) { 34 let input = document.getElementById("input_" + type); 35 36 input.focus(); 37 let focus = document.querySelector(":focus"); 38 let focusRing = document.querySelector(":-moz-focusring"); 39 is(focus, input, "input should have :focus state after focus"); 40 is(focusRing, input, "input should have :-moz-focusring state after focus"); 41 42 input.blur(); 43 focus = document.querySelector(":focus"); 44 focusRing = document.querySelector(":-moz-focusring"); 45 isnot(focus, input, "input should not have :focus state after blur"); 46 isnot(focusRing, input, "input should not have :-moz-focusring state after blur"); 47 48 input.addEventListener("focus", function() { 49 document.getElementById("input_dummy").focus(); 50 }, { once: true }); 51 52 input.focus(); 53 focus = document.querySelector(":focus"); 54 focusRing = document.querySelector(":-moz-focusring"); 55 isnot(focus, input, "input should not have :focus state when moving focus in onfocus handler"); 56 isnot(focusRing, input, "input should not have :-moz-focusring state when moving focus in onfocus handler"); 57 58 input.addEventListener("blur", function() { 59 document.getElementById("input_dummy").focus(); 60 }, { once: true }); 61 62 input.blur(); 63 focus = document.querySelector(":focus"); 64 focusRing = document.querySelector(":-moz-focusring"); 65 isnot(focus, input, "input should not have :focus state when moving focus in onblur handler"); 66 isnot(focusRing, input, "input should not have :-moz-focusring state when moving focus in onblur handler"); 67 } 68 69 function test() { 70 let inputTypes = ["time", "date"]; 71 72 for (let i = 0; i < inputTypes.length; i++) { 73 testFocusState(inputTypes[i]); 74 } 75 } 76 </script> 77 </pre> 78 </body> 79 </html>