Bug 1431041: Fix placeholder-shown when the value of the input is invalid. r=smaug

Wow, the setup for <input type="number"> is really weird :(.

Looking at the callers, this should be sane.

MozReview-Commit-ID: C0ZNNSdg0Hb

--HG--
extra : rebase_source : ff8efaaa3b0068b35e3b408e16b6f9d133165e5c
This commit is contained in:
Emilio Cobos Álvarez 2018-01-17 18:30:59 +01:00
parent 0d4c1d977b
commit fa8af866b9
4 changed files with 55 additions and 1 deletions

View File

@ -6600,7 +6600,7 @@ HTMLInputElement::IntrinsicState() const
if (PlaceholderApplies() &&
HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
IsValueEmpty()) {
ShouldShowPlaceholder()) {
state |= NS_EVENT_STATE_PLACEHOLDERSHOWN;
}
@ -6611,6 +6611,24 @@ HTMLInputElement::IntrinsicState() const
return state;
}
bool
HTMLInputElement::ShouldShowPlaceholder() const
{
MOZ_ASSERT(PlaceholderApplies());
if (IsValueEmpty()) {
return true;
}
// For number controls, even though the (sanitized) value is empty, there may
// be text in the anon text control.
if (nsNumberControlFrame* frame = do_QueryFrame(GetPrimaryFrame())) {
return frame->AnonTextControlIsEmpty();
}
return false;
}
void
HTMLInputElement::AddStates(EventStates aStates)
{

View File

@ -1059,6 +1059,11 @@ protected:
*/
bool IsValueEmpty() const;
/**
* Returns whether the current placeholder value should be shown.
*/
bool ShouldShowPlaceholder() const;
void ClearFiles(bool aSetValueChanged);
void SetIndeterminateInternal(bool aValue,

View File

@ -58,6 +58,7 @@ skip-if = os == "android"
# We don't build ICU for Firefox for Android:
skip-if = os == "android"
[test_input_number_focus.html]
[test_input_number_placeholder_shown.html]
[test_input_range_attr_order.html]
[test_input_range_key_events.html]
[test_input_range_mouse_and_touch_events.html]

View File

@ -0,0 +1,30 @@
<!doctype html>
<title>Test for :placeholder-shown on input elements and invalid values.</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<style>
input {
border: 1px solid purple;
}
input:placeholder-shown {
border-color: blue;
}
</style>
<input type="number" placeholder="foo">
<script>
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
test();
SimpleTest.finish();
});
function test() {
let input = document.querySelector('input');
input.focus();
is(getComputedStyle(input).borderLeftColor, "rgb(0, 0, 255)",
":placeholder-shown should apply")
synthesizeKey('x', {});
isnot(getComputedStyle(input).borderLeftColor, "rgb(0, 0, 255)",
":placeholder-shown should not apply, even though the value is invalid")
}
</script>