We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

LibWeb: Recreate the <input> shadow tree when the type attribute changes

This is often used on login forms, for example, to toggle the visibility
of a password. The site will change the <input> element's type to "text"
to allow the password to show.
Timothy Flynn 1 year ago
parent
06a3ca734e
commit
0e774fe780
6 changed files with 67 additions and 1 deletions
Split View Show Diff Stats
  1. 20 0
      Tests/LibWeb/Layout/expected/input-password-to-text.txt
  2. 20 0
      Tests/LibWeb/Layout/expected/input-text-to-password.txt
  3. 7 0
      Tests/LibWeb/Layout/input/input-password-to-text.html
  4. 7 0
      Tests/LibWeb/Layout/input/input-text-to-password.html
  5. 12 1
      Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
  6. 1 0
      Userland/Libraries/LibWeb/HTML/HTMLInputElement.h

+ 20 - 0
Tests/LibWeb/Layout/expected/input-password-to-text.txt
View File 

@@ -0,0 +1,20 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x21 children: inline
 
+      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 13.296875
 
+      BlockContainer <input> at (9,9) content-size 189.875x19 inline-block [BFC] children: not-inline
 
+        Box <div> at (11,10) content-size 185.875x17 flex-container(row) [FFC] children: not-inline
 
+          BlockContainer <div> at (11,10) content-size 185.875x17 flex-item [BFC] children: inline
 
+            frag 0 from TextNode start: 0, length: 7, rect: [11,10 61.890625x17] baseline: 13.296875
 
+                "hunter2"
 
+            TextNode <#text>
 
+      TextNode <#text>
 
+      TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x21]
 
+      PaintableWithLines (BlockContainer<INPUT>) [8,8 191.875x21]
 
+        PaintableBox (Box<DIV>) [9,9 189.875x19]
 
+          PaintableWithLines (BlockContainer<DIV>) [11,10 185.875x17]
 
+            TextPaintable (TextNode<#text>)

+ 20 - 0
Tests/LibWeb/Layout/expected/input-text-to-password.txt
View File 

@@ -0,0 +1,20 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x21 children: inline
 
+      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 13.296875
 
+      BlockContainer <input> at (9,9) content-size 189.875x19 inline-block [BFC] children: not-inline
 
+        Box <div> at (11,10) content-size 185.875x17 flex-container(row) [FFC] children: not-inline
 
+          BlockContainer <div> at (11,10) content-size 185.875x17 flex-item [BFC] children: inline
 
+            frag 0 from TextNode start: 0, length: 7, rect: [11,10 55.5625x17] baseline: 13.296875
 
+                "*******"
 
+            TextNode <#text>
 
+      TextNode <#text>
 
+      TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x21]
 
+      PaintableWithLines (BlockContainer<INPUT>) [8,8 191.875x21]
 
+        PaintableBox (Box<DIV>) [9,9 189.875x19]
 
+          PaintableWithLines (BlockContainer<DIV>) [11,10 185.875x17]
 
+            TextPaintable (TextNode<#text>)

+ 7 - 0
Tests/LibWeb/Layout/input/input-password-to-text.html
View File 

@@ -0,0 +1,7 @@
 
+<input type="password" value="hunter2" />
 
+<script type="text/javascript">
 
+    document.addEventListener("DOMContentLoaded", () => {
 
+        let input = document.querySelector("input");
 
+        input.type = "text";
 
+    });
 
+</script>

+ 7 - 0
Tests/LibWeb/Layout/input/input-text-to-password.html
View File 

@@ -0,0 +1,7 @@
 
+<input type="text" value="hunter2" />
 
+<script type="text/javascript">
 
+    document.addEventListener("DOMContentLoaded", () => {
 
+        let input = document.querySelector("input");
 
+        input.type = "password";
 
+    });
 
+</script>

+ 12 - 1
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View File 

@@ -612,6 +612,14 @@ void HTMLInputElement::update_placeholder_visibility()
 
     }
 
 }
 
 
+void HTMLInputElement::update_text_input_shadow_tree()
 
+{
 
+    if (m_text_node) {
 
+        m_text_node->set_data(m_value);
 
+        update_placeholder_visibility();
 
+    }
 
+}
 
+
 
 // https://html.spec.whatwg.org/multipage/input.html#the-input-element:attr-input-readonly-3
 
 static bool is_allowed_to_be_readonly(HTML::HTMLInputElement::TypeAttributeState state)
 
 {
 
@@ -746,6 +754,7 @@ void HTMLInputElement::update_shadow_tree()
 
         update_slider_thumb_element();
 
         break;
 
     default:
 
+        update_text_input_shadow_tree();
 
         break;
 
     }
 
 }
 
@@ -1073,6 +1082,9 @@ void HTMLInputElement::form_associated_element_attribute_changed(FlyString const
 
         }
 
     } else if (name == HTML::AttributeNames::type) {
 
         m_type = parse_type_attribute(value.value_or(String {}));
 
+
 
+        set_shadow_root(nullptr);
 
+        create_shadow_tree_if_needed();
 
     } else if (name == HTML::AttributeNames::value) {
 
         if (!m_dirty_value) {
 
             if (!value.has_value()) {
 
@@ -1081,7 +1093,6 @@ void HTMLInputElement::form_associated_element_attribute_changed(FlyString const
 
                 m_value = value_sanitization_algorithm(*value);
 
             }
 
 
-            update_placeholder_visibility();
 
             update_shadow_tree();
 
         }
 
     } else if (name == HTML::AttributeNames::placeholder) {

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

@@ -265,6 +265,7 @@ private:
 
     JS::GCPtr<DOM::Element> m_placeholder_element;
 
     JS::GCPtr<DOM::Text> m_placeholder_text_node;
 
 
+    void update_text_input_shadow_tree();
 
     JS::GCPtr<DOM::Element> m_inner_text_element;
 
     JS::GCPtr<DOM::Text> m_text_node;
 
     bool m_checked { false };

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