Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: dom/html/test/forms/mochitest.toml
<!DOCTYPE HTML>
<html>
<!--
-->
<head>
<title>Test required date/datetime-local input's Calendar button</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
</head>
<body>
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>
<p id="display"></p>
<div id="content">
<input type="date" id="id_date" value="2017-06-08">
<input type="time" id="id_time" value="10:30">
<input type="datetime-local" id="id_datetime-local" value="2017-06-08T10:30">
<input type="date" id="id_date_required" value="2017-06-08" required>
<input type="time" id="id_time_required" value="10:30" required>
<input type="datetime-local" id="id_datetime-local_required" value="2017-06-08T10:30" required>
<input type="date" id="id_date_readonly" value="2017-06-08" readonly>
<input type="time" id="id_time_readonly" value="10:30" readonly>
<input type="datetime-local" id="id_datetime-local_readonly" value="2017-06-08T10:30" readonly>
<input type="date" id="id_date_disabled" value="2017-06-08" disabled>
<input type="time" id="id_time_disabled" value="10:30" disabled>
<input type="datetime-local" id="id_datetime-local_disabled" value="2017-06-08T10:30" disabled>
</div>
<pre id="test">
<script class="testbody">
const kTypes = ["date", "time", "datetime-local"];
function id_for_type(type, kind) {
return "id_" + type + (kind ? "_" + kind : "");
}
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
// Initial load.
assert_calendar_visible_all("");
assert_calendar_visible_all("required");
assert_calendar_hidden_all("readonly");
assert_calendar_hidden_all("disabled");
// Dynamic toggling.
test_make_readonly("");
test_make_editable("readonly");
test_disabled_field_disabled();
// Now toggle the inputs to the initial state, but while being
for (const input of document.querySelectorAll("input")) {
input.style.display = "none";
is(input.getBoundingClientRect().width, 0, "Should be undisplayed");
}
test_make_readonly("readonly");
test_make_editable("");
// And test other toggling as well.
test_readonly_field_disabled();
test_disabled_field_disabled();
SimpleTest.finish();
});
function test_disabled_field_disabled() {
for (let type of kTypes) {
const id = id_for_type(type, "disabled");
const input = document.getElementById(id);
ok(input.disabled, `#${id} Should be disabled`);
ok(
is_calendar_button_hidden(id),
`disabled's Calendar button is hidden (${id})`
);
input.disabled = false;
ok(!input.disabled, `#${id} Should not be disabled anymore`);
if (type === "time") {
assert_calendar_hidden(id);
} else {
ok(
!is_calendar_button_hidden(id),
`enabled field's Calendar button is not hidden (${id})`
);
}
input.disabled = true; // reset to the original state.
}
}
function test_readonly_field_disabled() {
for (let type of kTypes) {
const id = id_for_type(type, "readonly");
const input = document.getElementById(id);
ok(input.readOnly, `#${id} Should be read-only`);
ok(is_calendar_button_hidden(id), `readonly field's Calendar button is hidden (${id})`);
input.readOnly = false;
ok(!input.readOnly, `#${id} Should not be read-only anymore`);
if (type === "time") {
assert_calendar_hidden(id);
} else {
ok(
!is_calendar_button_hidden(id),
`non-readonly field's Calendar button is not hidden (${id})`
);
}
input.readOnly = true; // reset to the original state.
}
}
function test_make_readonly(kind) {
for (let type of kTypes) {
const id = id_for_type(type, kind);
const input = document.getElementById(id);
is(input.readOnly, false, `Precondition: input #${id} is editable`);
input.readOnly = true;
assert_calendar_hidden(id);
}
}
function test_make_editable(kind) {
for (let type of kTypes) {
const id = id_for_type(type, kind);
const input = document.getElementById(id);
is(input.readOnly, true, `Precondition: input #${id} is read-only`);
input.readOnly = false;
if (type === "time") {
assert_calendar_hidden(id);
} else {
assert_calendar_visible(id);
}
}
}
function assert_calendar_visible_all(kind) {
for (let type of kTypes) {
if (type === "time") {
assert_calendar_hidden(id_for_type(type, kind));
} else {
assert_calendar_visible(id_for_type(type, kind));
}
}
}
function assert_calendar_visible(id) {
const isCalendarButtonHidden = is_calendar_button_hidden(id);
ok(!isCalendarButtonHidden, `Calendar button is not hidden on #${id}`);
}
function assert_calendar_hidden_all(kind) {
for (let type of kTypes) {
assert_calendar_hidden(id_for_type(type, kind));
}
}
function assert_calendar_hidden(id) {
const isCalendarButtonHidden = is_calendar_button_hidden(id);
ok(isCalendarButtonHidden, `Calendar button is hidden on #${id}`);
}
function is_calendar_button_hidden(id) {
const input = document.getElementById(id);
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
const calendarButton = shadowRoot.getElementById("calendar-button");
const calendarButtonDisplay = SpecialPowers.wrap(window).getComputedStyle(calendarButton).display;
return calendarButtonDisplay === "none";
}
</script>
</pre>
</body>
</html>