test_input_datetime_disabled_focus.html (3707B)
1 <!DOCTYPE html> 2 <title>Test for bugs 1772841 and 1865885</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 6 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1772841">Mozilla Bug 1772841</a> and <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1865885">Mozilla Bug 1865885</a> 7 <div id="content"> 8 <!-- Disabled --> 9 <input type="date" id="date" disabled> 10 <input type="time" id="time" disabled> 11 <input type="datetime-local" id="datetime-local" disabled> 12 <fieldset id="fieldset" disabled> 13 <input type="date" id="fieldset-date"> 14 <input type="time" id="fieldset-time"> 15 <input type="datetime-local" id="fieldset-datetime-local"> 16 </fieldset> 17 18 <!-- Dynamically disabled --> 19 <input type="date" id="date1"> 20 <input type="time" id="time1"> 21 <input type="datetime-local" id="datetime-local1"> 22 <fieldset id="fieldset1"> 23 <input type="date" id="fieldset-date1"> 24 <input type="time" id="fieldset-time1"> 25 <input type="datetime-local" id="fieldset-datetime-local1"> 26 </fieldset> 27 28 <!-- Dynamically enabled --> 29 <input type="date" id="date2" disabled> 30 <input type="time" id="time2" disabled> 31 <input type="datetime-local" id="datetime-local2" disabled> 32 <fieldset id="fieldset2" disabled> 33 <input type="date" id="fieldset-date2"> 34 <input type="time" id="fieldset-time2"> 35 <input type="datetime-local" id="fieldset-datetime-local2"> 36 </fieldset> 37 </div> 38 <script> 39 /* 40 * Test for bugs 1772841 and 1865885 41 * This test checks that when a datetime input element is disabled by itself 42 * or from its containing fieldset, it should not be focusable by click. 43 **/ 44 45 add_task(async function() { 46 await SimpleTest.promiseFocus(window); 47 for (let inputId of ["time", "date", "datetime-local", "fieldset-time", "fieldset-date", "fieldset-datetime-local"]) { 48 testFocusState(inputId, /* isDisabled = */ true); 49 testDynamicChange(inputId, "1", /* isDisabling = */ true); 50 testDynamicChange(inputId, "2", /* isDisabling = */ false); 51 } 52 }) 53 function testFocusState(inputId, isDisabled) { 54 let input = document.getElementById(inputId); 55 56 document.getElementById("content").click(); 57 input.click(); 58 if (isDisabled) { 59 isnot(document.activeElement, input, `This disabled ${inputId} input should not be focusable by click`); 60 } else { 61 // The click method won't set the focus on clicked input, thus we 62 // only check that the state is changed to enabled here 63 ok(!input.disabled, `This ${inputId} input is not disabled`); 64 } 65 66 document.getElementById("content").click(); 67 synthesizeMouseAtCenter(input, {}); 68 if (isDisabled) { 69 isnot(document.activeElement, input, `This disabled ${inputId} input should not be focusable by click`); 70 } else { 71 is(document.activeElement, input, `This enabled ${inputId} input should be focusable by click`); 72 } 73 } 74 function testDynamicChange(inputId, index, isDisabling) { 75 if (inputId.split("-")[0] === "fieldset") { 76 document.getElementById("fieldset" + index).disabled = isDisabling; 77 } else { 78 document.getElementById(inputId + index).disabled = isDisabling; 79 } 80 testFocusState(inputId + index, /* isDisabled = */ isDisabling); 81 } 82 </script>