0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
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.
This commit is contained in:
Timothy Flynn 2024-04-04 12:37:27 -04:00 • committed by Andreas Kling
parent 06a3ca734e
commit 0e774fe780
Notes: sideshowbarker 2024-07-17 01:46:43 +09:00
6 changed files with 67 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Tests/LibWeb/Layout/expected/input-password-to-text.txt Normal file
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
Tests/LibWeb/Layout/expected/input-text-to-password.txt Normal file
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
Tests/LibWeb/Layout/input/input-password-to-text.html Normal file
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
Tests/LibWeb/Layout/input/input-text-to-password.html Normal file
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>

13
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
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 };