From d025d207d9d649c2780fe7eba6ab0fd9ebc45e76 Mon Sep 17 00:00:00 2001 From: Bastiaan van der Plaat Date: Sun, 10 Dec 2023 19:33:37 +0100 Subject: [PATCH] LibWeb: Hide input placeholder when input already has a value --- .../input-element-with-display-inline.txt | 5 --- Tests/LibWeb/Ref/input-placeholder.html | 11 +++++ .../images/input-placeholder-ref.png | Bin 0 -> 1611 bytes .../Ref/reference/input-placeholder-ref.html | 15 +++++++ .../LibWeb/HTML/HTMLInputElement.cpp | 39 +++++++++++------- .../Libraries/LibWeb/HTML/HTMLInputElement.h | 1 + 6 files changed, 50 insertions(+), 21 deletions(-) create mode 100644 Tests/LibWeb/Ref/input-placeholder.html create mode 100644 Tests/LibWeb/Ref/reference/images/input-placeholder-ref.png create mode 100644 Tests/LibWeb/Ref/reference/input-placeholder-ref.html diff --git a/Tests/LibWeb/Layout/expected/input-element-with-display-inline.txt b/Tests/LibWeb/Layout/expected/input-element-with-display-inline.txt index 20f97d91c0..fd8360912f 100644 --- a/Tests/LibWeb/Layout/expected/input-element-with-display-inline.txt +++ b/Tests/LibWeb/Layout/expected/input-element-with-display-inline.txt @@ -5,9 +5,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 200x25.84375] BlockContainer at (11,11) content-size 200x25.84375 inline-block [BFC] children: not-inline Box
at (13,12) content-size 196x23.84375 flex-container(row) [FFC] children: not-inline - BlockContainer <(anonymous)> at (13,23.921875) content-size 0x0 flex-item [BFC] children: inline - InlineNode
- TextNode <#text> BlockContainer
at (14,13) content-size 194x21.84375 flex-item [BFC] children: inline TextNode <#text> @@ -16,6 +13,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [9,9 782x29.84375] PaintableWithLines (BlockContainer) [10,10 202x27.84375] PaintableBox (Box
) [11,11 200x25.84375] - PaintableWithLines (BlockContainer(anonymous)) [13,23.921875 0x0] - InlinePaintable (InlineNode
) PaintableWithLines (BlockContainer
) [13,12 196x23.84375] diff --git a/Tests/LibWeb/Ref/input-placeholder.html b/Tests/LibWeb/Ref/input-placeholder.html new file mode 100644 index 0000000000..231fcc4895 --- /dev/null +++ b/Tests/LibWeb/Ref/input-placeholder.html @@ -0,0 +1,11 @@ + + + diff --git a/Tests/LibWeb/Ref/reference/images/input-placeholder-ref.png b/Tests/LibWeb/Ref/reference/images/input-placeholder-ref.png new file mode 100644 index 0000000000000000000000000000000000000000..76e554854e4f49c672af644eaac8f5675e079a02 GIT binary patch literal 1611 zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iU|?X_FMD?l0|T3or;B4q#jUru6$@TP ziL_mecXLzfU*n>rJkcXXb(2tJ=Ngx=I1mvQ*V*Ip=$r7u+Uqet?`@g9^@?Kit;zW( z=J8bid&u?A`RBv(84dy+AoOEhqmF!3w9c=80imIfU%xE*w9sl-><$F zmEF&j7}r?xQqFvKitXLvnLVLjSI<9pH)4CN`CN0R#InYat4gt8 zI+jCgm?Zb<@pyj!vPFKmBm4 z8x0;i^krV|Gt7N?{Og9OZ7SWX?p8(U{^n@e$y#JrvsUzd{^P$TRr^C^-|6$-{&`=# zLeCK#)=pMshQV3&JQu7(Q!oz!0LEXPFF{FdUBJ8i*G#gdoBw z;esKA;WGyX3?U4kVexE(Lk|PZVhO`%0vs4Z7(P=Fz#=r7B&n1C1}sVLTV2oa?w57$ TrsjFeLA8XZtDnm{r-UW|?PP#- literal 0 HcmV?d00001 diff --git a/Tests/LibWeb/Ref/reference/input-placeholder-ref.html b/Tests/LibWeb/Ref/reference/input-placeholder-ref.html new file mode 100644 index 0000000000..fad703c634 --- /dev/null +++ b/Tests/LibWeb/Ref/reference/input-placeholder-ref.html @@ -0,0 +1,15 @@ + + + diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp index 5d648ec339..e7eaa5be22 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp @@ -500,6 +500,23 @@ static bool is_allowed_to_have_placeholder(HTML::HTMLInputElement::TypeAttribute } } +// https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder +String HTMLInputElement::placeholder() const +{ + auto maybe_placeholder = get_attribute(HTML::AttributeNames::placeholder); + if (!maybe_placeholder.has_value()) + return String {}; + auto placeholder = *maybe_placeholder; + + // The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters. + StringBuilder builder; + for (auto c : placeholder.bytes_as_string_view()) { + if (c != '\r' && c != '\n') + builder.append(c); + } + return MUST(builder.to_string()); +} + // https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder Optional HTMLInputElement::placeholder_value() const { @@ -509,19 +526,7 @@ Optional HTMLInputElement::placeholder_value() const return {}; if (!has_attribute(HTML::AttributeNames::placeholder)) return {}; - - auto placeholder = deprecated_attribute(HTML::AttributeNames::placeholder); - - if (placeholder.contains('\r') || placeholder.contains('\n')) { - StringBuilder builder; - for (auto ch : placeholder) { - if (ch != '\r' && ch != '\n') - builder.append(ch); - } - placeholder = builder.to_deprecated_string(); - } - - return placeholder; + return placeholder().to_deprecated_string(); } void HTMLInputElement::create_shadow_tree_if_needed() @@ -573,8 +578,8 @@ void HTMLInputElement::create_text_input_shadow_tree() )~~~"_string)); MUST(element->append_child(*m_placeholder_element)); - m_placeholder_text_node = heap().allocate(realm(), document(), initial_value); - m_placeholder_text_node->set_data(attribute(HTML::AttributeNames::placeholder).value_or(String {})); + m_placeholder_text_node = heap().allocate(realm(), document(), String {}); + m_placeholder_text_node->set_data(placeholder()); m_placeholder_text_node->set_editable_text_node_owner(Badge {}, *this); MUST(m_placeholder_element->append_child(*m_placeholder_text_node)); @@ -597,6 +602,8 @@ void HTMLInputElement::create_text_input_shadow_tree() m_text_node->set_is_password_input({}, true); MUST(m_inner_text_element->append_child(*m_text_node)); + update_placeholder_visibility(); + if (type_state() == TypeAttributeState::Number) { // Up button auto up_button = MUST(DOM::create_element(document(), HTML::TagNames::button, Namespace::HTML)); @@ -718,7 +725,7 @@ void HTMLInputElement::attribute_changed(FlyString const& name, Optional } } else if (name == HTML::AttributeNames::placeholder) { if (m_placeholder_text_node) - m_placeholder_text_node->set_data(value.value_or(String {})); + m_placeholder_text_node->set_data(placeholder()); } else if (name == HTML::AttributeNames::readonly) { handle_readonly_attribute(value); } diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h index 22ce87181f..df1754f9dc 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h +++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h @@ -71,6 +71,7 @@ public: void commit_pending_changes(); + String placeholder() const; Optional placeholder_value() const; bool checked() const { return m_checked; }