test_input_datetime_calendar_button.html (5817B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1479708 5 --> 6 <head> 7 <title>Test required date/datetime-local input's Calendar button</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 Created for <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1479708">Mozilla Bug 1479708</a> and updated by <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1676068">Mozilla Bug 1676068</a> and <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1865885">Mozilla Bug 1865885</a> 14 <p id="display"></p> 15 <div id="content"> 16 <input type="date" id="id_date" value="2017-06-08"> 17 <input type="time" id="id_time" value="10:30"> 18 <input type="datetime-local" id="id_datetime-local" value="2017-06-08T10:30"> 19 <input type="date" id="id_date_required" value="2017-06-08" required> 20 <input type="time" id="id_time_required" value="10:30" required> 21 <input type="datetime-local" id="id_datetime-local_required" value="2017-06-08T10:30" required> 22 <input type="date" id="id_date_readonly" value="2017-06-08" readonly> 23 <input type="time" id="id_time_readonly" value="10:30" readonly> 24 <input type="datetime-local" id="id_datetime-local_readonly" value="2017-06-08T10:30" readonly> 25 <input type="date" id="id_date_disabled" value="2017-06-08" disabled> 26 <input type="time" id="id_time_disabled" value="10:30" disabled> 27 <input type="datetime-local" id="id_datetime-local_disabled" value="2017-06-08T10:30" disabled> 28 </div> 29 <pre id="test"> 30 <script class="testbody"> 31 32 const kTypes = ["date", "time", "datetime-local"]; 33 34 function id_for_type(type, kind) { 35 return "id_" + type + (kind ? "_" + kind : ""); 36 } 37 38 SimpleTest.waitForExplicitFinish(); 39 SimpleTest.waitForFocus(function() { 40 // Initial load. 41 assert_calendar_visible_all(""); 42 assert_calendar_visible_all("required"); 43 assert_calendar_hidden_all("readonly"); 44 assert_calendar_hidden_all("disabled"); 45 46 // Dynamic toggling. 47 test_make_readonly(""); 48 test_make_editable("readonly"); 49 test_disabled_field_disabled(); 50 51 // Now toggle the inputs to the initial state, but while being 52 // display: none. This tests for bug 1567191. 53 for (const input of document.querySelectorAll("input")) { 54 input.style.display = "none"; 55 is(input.getBoundingClientRect().width, 0, "Should be undisplayed"); 56 } 57 58 test_make_readonly("readonly"); 59 test_make_editable(""); 60 61 // And test other toggling as well. 62 test_readonly_field_disabled(); 63 test_disabled_field_disabled(); 64 65 SimpleTest.finish(); 66 }); 67 68 function test_disabled_field_disabled() { 69 for (let type of kTypes) { 70 const id = id_for_type(type, "disabled"); 71 const input = document.getElementById(id); 72 73 ok(input.disabled, `#${id} Should be disabled`); 74 ok( 75 is_calendar_button_hidden(id), 76 `disabled's Calendar button is hidden (${id})` 77 ); 78 79 input.disabled = false; 80 ok(!input.disabled, `#${id} Should not be disabled anymore`); 81 if (type === "time") { 82 assert_calendar_hidden(id); 83 } else { 84 ok( 85 !is_calendar_button_hidden(id), 86 `enabled field's Calendar button is not hidden (${id})` 87 ); 88 } 89 90 input.disabled = true; // reset to the original state. 91 } 92 } 93 94 function test_readonly_field_disabled() { 95 for (let type of kTypes) { 96 const id = id_for_type(type, "readonly"); 97 const input = document.getElementById(id); 98 99 ok(input.readOnly, `#${id} Should be read-only`); 100 ok(is_calendar_button_hidden(id), `readonly field's Calendar button is hidden (${id})`); 101 102 input.readOnly = false; 103 ok(!input.readOnly, `#${id} Should not be read-only anymore`); 104 if (type === "time") { 105 assert_calendar_hidden(id); 106 } else { 107 ok( 108 !is_calendar_button_hidden(id), 109 `non-readonly field's Calendar button is not hidden (${id})` 110 ); 111 } 112 113 input.readOnly = true; // reset to the original state. 114 } 115 } 116 117 function test_make_readonly(kind) { 118 for (let type of kTypes) { 119 const id = id_for_type(type, kind); 120 const input = document.getElementById(id); 121 is(input.readOnly, false, `Precondition: input #${id} is editable`); 122 123 input.readOnly = true; 124 assert_calendar_hidden(id); 125 } 126 } 127 128 function test_make_editable(kind) { 129 for (let type of kTypes) { 130 const id = id_for_type(type, kind); 131 const input = document.getElementById(id); 132 is(input.readOnly, true, `Precondition: input #${id} is read-only`); 133 134 input.readOnly = false; 135 if (type === "time") { 136 assert_calendar_hidden(id); 137 } else { 138 assert_calendar_visible(id); 139 } 140 } 141 } 142 143 function assert_calendar_visible_all(kind) { 144 for (let type of kTypes) { 145 if (type === "time") { 146 assert_calendar_hidden(id_for_type(type, kind)); 147 } else { 148 assert_calendar_visible(id_for_type(type, kind)); 149 } 150 } 151 } 152 function assert_calendar_visible(id) { 153 const isCalendarButtonHidden = is_calendar_button_hidden(id); 154 ok(!isCalendarButtonHidden, `Calendar button is not hidden on #${id}`); 155 } 156 157 function assert_calendar_hidden_all(kind) { 158 for (let type of kTypes) { 159 assert_calendar_hidden(id_for_type(type, kind)); 160 } 161 } 162 163 function assert_calendar_hidden(id) { 164 const isCalendarButtonHidden = is_calendar_button_hidden(id); 165 ok(isCalendarButtonHidden, `Calendar button is hidden on #${id}`); 166 } 167 168 function is_calendar_button_hidden(id) { 169 const input = document.getElementById(id); 170 const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot; 171 const calendarButton = shadowRoot.getElementById("calendar-button"); 172 const calendarButtonDisplay = SpecialPowers.wrap(window).getComputedStyle(calendarButton).display; 173 return calendarButtonDisplay === "none"; 174 } 175 176 </script> 177 </pre> 178 </body> 179 </html>