Browse Source

LibWeb: Hide input placeholder when input already has a value

Bastiaan van der Plaat 1 year ago
parent
commit
d025d207d9

+ 0 - 5
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 <input> at (11,11) content-size 200x25.84375 inline-block [BFC] children: not-inline
         Box <div> 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 <div>
-              TextNode <#text>
           BlockContainer <div> 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<BODY>) [9,9 782x29.84375]
       PaintableWithLines (BlockContainer<INPUT>) [10,10 202x27.84375]
         PaintableBox (Box<DIV>) [11,11 200x25.84375]
-          PaintableWithLines (BlockContainer(anonymous)) [13,23.921875 0x0]
-            InlinePaintable (InlineNode<DIV>)
           PaintableWithLines (BlockContainer<DIV>) [13,12 196x23.84375]

+ 11 - 0
Tests/LibWeb/Ref/input-placeholder.html

@@ -0,0 +1,11 @@
+<link rel="match" href="reference/input-placeholder-ref.html" />
+<style>
+    * {
+        margin: 0;
+        font: 16px 'SerenitySans';
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<input value="PASS" placeholder="FAIL">

BIN
Tests/LibWeb/Ref/reference/images/input-placeholder-ref.png


+ 15 - 0
Tests/LibWeb/Ref/reference/input-placeholder-ref.html

@@ -0,0 +1,15 @@
+<style>
+    * {
+        margin: 0;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<!-- To rebase:
+    1. Open input-placeholder.html in Ladybird
+    2. Resize the window just above the width of the canvas
+    3. Right click > "Take Full Screenshot"
+    4. Update the image below:
+-->
+<img src="./images/input-placeholder-ref.png">

+ 23 - 16
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<DeprecatedString> HTMLInputElement::placeholder_value() const
 {
@@ -509,19 +526,7 @@ Optional<DeprecatedString> 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<DOM::Text>(realm(), document(), initial_value);
-    m_placeholder_text_node->set_data(attribute(HTML::AttributeNames::placeholder).value_or(String {}));
+    m_placeholder_text_node = heap().allocate<DOM::Text>(realm(), document(), String {});
+    m_placeholder_text_node->set_data(placeholder());
     m_placeholder_text_node->set_editable_text_node_owner(Badge<HTMLInputElement> {}, *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<String>
         }
     } 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);
     }

+ 1 - 0
Userland/Libraries/LibWeb/HTML/HTMLInputElement.h

@@ -71,6 +71,7 @@ public:
 
     void commit_pending_changes();
 
+    String placeholder() const;
     Optional<DeprecatedString> placeholder_value() const;
 
     bool checked() const { return m_checked; }