diff --git a/Tests/LibWeb/Layout/expected/input-placeholder.txt b/Tests/LibWeb/Layout/expected/input-placeholder.txt new file mode 100644 index 00000000000..486dff31309 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/input-placeholder.txt @@ -0,0 +1,51 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x42 [BFC] children: not-inline + BlockContainer 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 at (9,9) content-size 200x24 inline-block [BFC] children: not-inline + Box
at (11,10) content-size 196x22 flex-container(row) [FFC] children: not-inline + BlockContainer
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 at (221,9) content-size 200x24 inline-block [BFC] children: not-inline + Box
at (223,10) content-size 196x22 flex-container(row) [FFC] children: not-inline + BlockContainer
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 at (433,9) content-size 200x24 inline-block [BFC] children: not-inline + Box
at (435,10) content-size 196x22 flex-container(row) [FFC] children: not-inline + BlockContainer
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) [0,0 800x42] + PaintableWithLines (BlockContainer) [8,8 784x26] + PaintableWithLines (BlockContainer) [8,8 202x26] + PaintableBox (Box
) [9,9 200x24] + PaintableWithLines (BlockContainer
) [11,10 196x22] + TextPaintable (TextNode<#text>) + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer) [220,8 202x26] overflow: [221,9 200x45] + PaintableBox (Box
) [221,9 200x24] overflow: [221,9 200x45] + PaintableWithLines (BlockContainer
) [223,10 196x22] overflow: [223,10 196x44] + TextPaintable (TextNode<#text>) + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer) [432,8 202x26] + PaintableBox (Box
) [433,9 200x24] + PaintableWithLines (BlockContainer
) [435,10 196x22] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/input-placeholder.html b/Tests/LibWeb/Layout/input/input-placeholder.html new file mode 100644 index 00000000000..73d57d7046a --- /dev/null +++ b/Tests/LibWeb/Layout/input/input-placeholder.html @@ -0,0 +1,10 @@ + + + diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp index 318f7239c3a..7d280d358f8 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp @@ -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)); diff --git a/Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp index 05ac71e2d51..e9e52217800 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp @@ -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)); } }