We use cookies to ensure you get the best experience on our website
Startseite Erkunden Hilfe
Registrieren Anmelden
0ct0pu5
/
ladybird
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

LibWeb: Hide inner text of input element when showing placeholder

Bastiaan van der Plaat vor 1 Jahr
Ursprung
b4bae912c9
Commit
4205ac778f
4 geänderte Dateien mit 68 neuen und 4 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 51 0
      Tests/LibWeb/Layout/expected/input-placeholder.txt
  2. 10 0
      Tests/LibWeb/Layout/input/input-placeholder.html
  3. 5 4
      Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
  4. 2 0
      Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp

+ 51 - 0
Tests/LibWeb/Layout/expected/input-placeholder.txt
Datei anzeigen 

@@ -0,0 +1,51 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x42 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x26 children: inline
 
+      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 200x24] baseline: 17
 
+      frag 1 from TextNode start: 0, length: 1, rect: [210,8 10x22] baseline: 17
 
+          " "
 
+      frag 2 from BlockContainer start: 0, length: 0, rect: [221,9 200x24] baseline: 17
 
+      frag 3 from TextNode start: 0, length: 1, rect: [422,8 10x22] baseline: 17
 
+          " "
 
+      frag 4 from BlockContainer start: 0, length: 0, rect: [433,9 200x24] baseline: 17
 
+      BlockContainer <input> at (9,9) content-size 200x24 inline-block [BFC] children: not-inline
 
+        Box <div> at (11,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
 
+          BlockContainer <div> at (11,10) content-size 196x22 flex-item [BFC] children: inline
 
+            frag 0 from TextNode start: 0, length: 4, rect: [11,10 40.171875x22] baseline: 17
 
+                "text"
 
+            TextNode <#text>
 
+      TextNode <#text>
 
+      BlockContainer <input> at (221,9) content-size 200x24 inline-block [BFC] children: not-inline
 
+        Box <div> at (223,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
 
+          BlockContainer <div> at (223,10) content-size 196x22 flex-item [BFC] children: inline
 
+            frag 0 from TextNode start: 0, length: 16, rect: [223,10 166.75x22] baseline: 17
 
+                "This placeholder"
 
+            frag 1 from TextNode start: 17, length: 17, rect: [223,32 167.6875x22] baseline: 17
 
+                "should be visible"
 
+            TextNode <#text>
 
+      TextNode <#text>
 
+      BlockContainer <input> at (433,9) content-size 200x24 inline-block [BFC] children: not-inline
 
+        Box <div> at (435,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
 
+          BlockContainer <div> at (435,10) content-size 196x22 flex-item [BFC] children: inline
 
+            frag 0 from TextNode start: 0, length: 4, rect: [435,10 40.171875x22] baseline: 17
 
+                "text"
 
+            TextNode <#text>
 
+      TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x42]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x26]
 
+      PaintableWithLines (BlockContainer<INPUT>) [8,8 202x26]
 
+        PaintableBox (Box<DIV>) [9,9 200x24]
 
+          PaintableWithLines (BlockContainer<DIV>) [11,10 196x22]
 
+            TextPaintable (TextNode<#text>)
 
+      TextPaintable (TextNode<#text>)
 
+      PaintableWithLines (BlockContainer<INPUT>) [220,8 202x26] overflow: [221,9 200x45]
 
+        PaintableBox (Box<DIV>) [221,9 200x24] overflow: [221,9 200x45]
 
+          PaintableWithLines (BlockContainer<DIV>) [223,10 196x22] overflow: [223,10 196x44]
 
+            TextPaintable (TextNode<#text>)
 
+      TextPaintable (TextNode<#text>)
 
+      PaintableWithLines (BlockContainer<INPUT>) [432,8 202x26]
 
+        PaintableBox (Box<DIV>) [433,9 200x24]
 
+          PaintableWithLines (BlockContainer<DIV>) [435,10 196x22]
 
+            TextPaintable (TextNode<#text>)

+ 10 - 0
Tests/LibWeb/Layout/input/input-placeholder.html
Datei anzeigen 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html><html><head><style>
 
+* {
 
+    font: 20px 'SerenitySans';
 
+}
 
+input {
 
+    width: 200px;
 
+}
 
+</style></head><body><input type="text" value="text" />
 
+<input type="text" placeholder="This placeholder should be visible" />
 
+<input type="text" value="text" placeholder="This placeholder should not be visible" />

+ 5 - 4
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
Datei anzeigen 

@@ -601,11 +601,12 @@ void HTMLInputElement::update_placeholder_visibility()
 
 {
 
     if (!m_placeholder_element)
 
         return;
 
-    auto placeholder_text = this->placeholder_value();
 
-    if (placeholder_text.has_value()) {
 
+    if (this->placeholder_value().has_value()) {
 
         MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv));
 
+        MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv));
 
     } else {
 
         MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv));
 
+        MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv));
 
     }
 
 }
 
 
@@ -767,7 +768,7 @@ void HTMLInputElement::create_text_input_shadow_tree()
 
     m_placeholder_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
 
     m_placeholder_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Placeholder);
 
     MUST(m_placeholder_element->set_attribute(HTML::AttributeNames::style, R"~~~(
 
-        flex: 1;
 
+        width: 100%;
 
         height: 1lh;
 
     )~~~"_string));
 
     MUST(element->append_child(*m_placeholder_element));
 
@@ -779,7 +780,7 @@ void HTMLInputElement::create_text_input_shadow_tree()
 
 
     m_inner_text_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
 
     MUST(m_inner_text_element->set_attribute(HTML::AttributeNames::style, R"~~~(
 
-        flex: 1;
 
+        width: 100%;
 
         height: 1lh;
 
     )~~~"_string));
 
     MUST(element->append_child(*m_inner_text_element));

+ 2 - 0
Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp
Datei anzeigen 

@@ -398,8 +398,10 @@ void HTMLTextAreaElement::update_placeholder_visibility()
 
     auto placeholder_text = get_attribute(AttributeNames::placeholder);
 
     if (placeholder_text.has_value() && m_text_node->data().is_empty()) {
 
         MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv));
 
+        MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv));
 
     } else {
 
         MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv));
 
+        MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv));
 
     }
 
 }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5