diff --git a/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt b/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt new file mode 100644 index 00000000000..ab58e0f527b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt @@ -0,0 +1,25 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x100 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x84 children: inline + frag 0 from BlockContainer start: 0, length: 0, rect: [9,8 200x82] baseline: 45.296875 + frag 1 from TextNode start: 0, length: 4, rect: [210,40 32.140625x17] baseline: 13.296875 + "text" + BlockContainer at (9,8) content-size 200x82 inline-block [BFC] children: not-inline + Box
at (11,9) content-size 196x80 flex-container(row) [FFC] children: not-inline + BlockContainer
at (11,40.5) content-size 98x17 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 11, rect: [11,40.5 89.90625x17] baseline: 13.296875 + "placeholder" + TextNode <#text> + BlockContainer
at (109,9) content-size 98x80 flex-item [BFC] children: inline + TextNode <#text> + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x100] + PaintableWithLines (BlockContainer) [8,8 784x84] + PaintableWithLines (BlockContainer) [8,7 202x84] + PaintableBox (Box
) [9,8 200x82] + PaintableWithLines (BlockContainer
) [11,40.5 98x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [109,9 98x80] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/expected/input-placeholder.txt b/Tests/LibWeb/Layout/expected/input-placeholder.txt index 5a2427126db..ed071489674 100644 --- a/Tests/LibWeb/Layout/expected/input-placeholder.txt +++ b/Tests/LibWeb/Layout/expected/input-placeholder.txt @@ -22,6 +22,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.546875x22] baseline: 17 "This placeholder should be visible" TextNode <#text> + BlockContainer
at (419,10) content-size 0x22 flex-item [BFC] children: inline + 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 @@ -36,6 +38,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 40, rect: [11,36 407.859375x22] baseline: 17 "This placeholder should also be visisble" TextNode <#text> + BlockContainer
at (207,36) content-size 0x22 flex-item [BFC] children: inline + TextNode <#text> TextNode <#text> TextNode <#text> @@ -51,6 +55,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableBox (Box
) [221,9 200x24] overflow: [221,9 346.546875x25] PaintableWithLines (BlockContainer
) [223,10 196x22] overflow: [223,10 344.546875x22] TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [419,10 0x22] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer) [432,8 202x26] PaintableBox (Box
) [433,9 200x24] @@ -60,3 +65,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableBox (Box
) [9,35 200x24] overflow: [9,35 409.859375x25] PaintableWithLines (BlockContainer
) [11,36 196x22] overflow: [11,36 407.859375x22] TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [207,36 0x22] diff --git a/Tests/LibWeb/Layout/input/input-placeholder-with-line-height.html b/Tests/LibWeb/Layout/input/input-placeholder-with-line-height.html new file mode 100644 index 00000000000..ef11e717d4b --- /dev/null +++ b/Tests/LibWeb/Layout/input/input-placeholder-with-line-height.html @@ -0,0 +1,7 @@ +text diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css index 7d51222c6d2..9bf16ac00e1 100644 --- a/Userland/Libraries/LibWeb/CSS/Default.css +++ b/Userland/Libraries/LibWeb/CSS/Default.css @@ -45,6 +45,7 @@ textarea { input::placeholder, textarea::placeholder { color: GrayText; + line-height: initial; } button, input[type=submit], input[type=button], input[type=reset], select { diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp index df459fe4c35..352314f5505 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp @@ -624,10 +624,8 @@ void HTMLInputElement::update_placeholder_visibility() return; 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)); } } @@ -815,7 +813,6 @@ void HTMLInputElement::create_text_input_shadow_tree() // https://www.w3.org/TR/css-ui-4/#input-rules MUST(m_placeholder_element->set_attribute(HTML::AttributeNames::style, R"~~~( width: 100%; - height: 1lh; align-items: center; text-overflow: clip; white-space: nowrap;