mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 08:15:31 +00:00
Bug 1479708 - Hide required date time input reset button. r=emilio
Differential Revision: https://phabricator.services.mozilla.com/D39315 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
2062812e83
commit
b81795066d
@ -40,6 +40,7 @@ skip-if = android_version == '18' # Android, bug 1147974
|
||||
[test_input_datetime_focus_blur_events.html]
|
||||
[test_input_datetime_focus_state.html]
|
||||
[test_input_datetime_hidden.html]
|
||||
[test_input_datetime_reset_button.html]
|
||||
[test_input_datetime_reset_default_value_input_change_event.html]
|
||||
[test_input_datetime_tabindex.html]
|
||||
[test_input_defaultValue.html]
|
||||
|
82
dom/html/test/forms/test_input_datetime_reset_button.html
Normal file
82
dom/html/test/forms/test_input_datetime_reset_button.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<!--
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=1479708
|
||||
-->
|
||||
<head>
|
||||
<title>Test required date/time input can't be reset</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>
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1479708">Mozilla Bug 1479708</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="date" id="id_date_required" value="2017-06-08" required>
|
||||
<input type="time" id="id_time_required" value="10:30" required>
|
||||
</div>
|
||||
<pre id="test">
|
||||
<script class="testbody">
|
||||
|
||||
const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);
|
||||
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
SimpleTest.waitForFocus(function() {
|
||||
if (isDesktop) {
|
||||
// Initial load.
|
||||
assert_reset_visible("id_date");
|
||||
assert_reset_visible("id_time");
|
||||
assert_reset_hidden("id_date_required");
|
||||
assert_reset_hidden("id_time_required");
|
||||
|
||||
// Dynamic toggling.
|
||||
test_make_required("id_date");
|
||||
test_make_required("id_time");
|
||||
test_make_optional("id_date_required");
|
||||
test_make_optional("id_time_required");
|
||||
} else {
|
||||
ok(true, "Mobile and tablet don’t show reset button");
|
||||
}
|
||||
SimpleTest.finish();
|
||||
});
|
||||
|
||||
function test_make_required(id) {
|
||||
const input = document.getElementById(id);
|
||||
is(input.required, false, `Precondition: input #${id} is optional`);
|
||||
|
||||
input.required = true;
|
||||
assert_reset_hidden(id);
|
||||
}
|
||||
|
||||
function test_make_optional(id) {
|
||||
const input = document.getElementById(id);
|
||||
is(input.required, true, `Precondition: input #${id} is required`);
|
||||
|
||||
input.required = false;
|
||||
assert_reset_visible(id);
|
||||
}
|
||||
|
||||
function assert_reset_visible(id) {
|
||||
const resetButton = get_reset_button(id);
|
||||
is(resetButton.style.visibility, "", `Reset button is visible on #${id}`);
|
||||
}
|
||||
|
||||
function assert_reset_hidden(id) {
|
||||
const resetButton = get_reset_button(id);
|
||||
is(resetButton.style.visibility, "hidden", `Reset button is hidden on #${id}`);
|
||||
}
|
||||
|
||||
function get_reset_button(id) {
|
||||
const input = document.getElementById(id);
|
||||
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
|
||||
return shadowRoot.getElementById("reset-button");
|
||||
}
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
@ -233,7 +233,8 @@ nsresult nsDateTimeControlFrame::AttributeChanged(int32_t aNameSpaceID,
|
||||
// nsGkAtoms::disabled is handled by SyncDisabledState
|
||||
if (aNameSpaceID == kNameSpaceID_None) {
|
||||
if (aAttribute == nsGkAtoms::value || aAttribute == nsGkAtoms::readonly ||
|
||||
aAttribute == nsGkAtoms::tabindex) {
|
||||
aAttribute == nsGkAtoms::tabindex ||
|
||||
aAttribute == nsGkAtoms::required) {
|
||||
MOZ_ASSERT(mContent->IsHTMLElement(nsGkAtoms::input), "bad cast");
|
||||
auto contentAsInputElem =
|
||||
static_cast<dom::HTMLInputElement*>(GetContent());
|
||||
|
@ -337,7 +337,7 @@ this.DateTimeInputBaseImplWidget = class {
|
||||
}
|
||||
|
||||
updateResetButtonVisibility() {
|
||||
if (this.isAnyFieldAvailable(false)) {
|
||||
if (this.isAnyFieldAvailable(false) && !this.isRequired()) {
|
||||
this.mResetButton.style.visibility = "";
|
||||
} else {
|
||||
this.mResetButton.style.visibility = "hidden";
|
||||
@ -438,6 +438,7 @@ this.DateTimeInputBaseImplWidget = class {
|
||||
}
|
||||
|
||||
this.mResetButton.disabled = this.mInputElement.disabled;
|
||||
this.updateResetButtonVisibility();
|
||||
}
|
||||
|
||||
isEmpty(aValue) {
|
||||
@ -513,6 +514,10 @@ this.DateTimeInputBaseImplWidget = class {
|
||||
return this.mInputElement.hasAttribute("readonly");
|
||||
}
|
||||
|
||||
isRequired() {
|
||||
return this.mInputElement.hasAttribute("required");
|
||||
}
|
||||
|
||||
handleEvent(aEvent) {
|
||||
this.log("handleEvent: " + aEvent.type);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user