diff --git a/Tests/LibWeb/Layout/expected/input-placeholder.txt b/Tests/LibWeb/Layout/expected/input-placeholder.txt index a8e40b1649..b4c308e2ea 100644 --- a/Tests/LibWeb/Layout/expected/input-placeholder.txt +++ b/Tests/LibWeb/Layout/expected/input-placeholder.txt @@ -19,10 +19,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline 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" + frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.4375x22] baseline: 17 + "This placeholder should be visible" TextNode <#text> TextNode <#text> BlockContainer at (433,9) content-size 200x24 inline-block [BFC] children: not-inline @@ -35,12 +33,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (9,35) content-size 200x24 inline-block [BFC] children: not-inline Box
at (11,36) content-size 196x22 flex-container(row) [FFC] children: not-inline BlockContainer
at (11,36) content-size 196x22 flex-item [BFC] children: inline - frag 0 from TextNode start: 0, length: 16, rect: [11,36 166.75x22] baseline: 17 - "This placeholder" - frag 1 from TextNode start: 17, length: 14, rect: [11,58 147.90625x22] baseline: 17 - "should also be" - frag 2 from TextNode start: 32, length: 8, rect: [11,80 73.046875x22] baseline: 17 - "visisble" + frag 0 from TextNode start: 0, length: 40, rect: [11,36 407.71875x22] baseline: 17 + "This placeholder should also be visisble" TextNode <#text> TextNode <#text> TextNode <#text> @@ -53,16 +47,16 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] 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] + PaintableWithLines (BlockContainer) [220,8 202x26] overflow: [221,9 346.4375x24] + PaintableBox (Box
) [221,9 200x24] overflow: [221,9 346.4375x24] + PaintableWithLines (BlockContainer
) [223,10 196x22] overflow: [223,10 344.4375x22] TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer) [432,8 202x26] PaintableBox (Box
) [433,9 200x24] PaintableWithLines (BlockContainer
) [435,10 196x22] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer#placeholder) [8,34 202x26] overflow: [9,35 200x67] - PaintableBox (Box
) [9,35 200x24] overflow: [9,35 200x67] - PaintableWithLines (BlockContainer
) [11,36 196x22] overflow: [11,36 196x66] + PaintableWithLines (BlockContainer#placeholder) [8,34 202x26] overflow: [9,35 409.71875x24] + PaintableBox (Box
) [9,35 200x24] overflow: [9,35 409.71875x24] + PaintableWithLines (BlockContainer
) [11,36 196x22] overflow: [11,36 407.71875x22] TextPaintable (TextNode<#text>) diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp index 34674e8119..f303f82834 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp @@ -809,9 +809,14 @@ 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); + + // 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; )~~~"_string)); MUST(element->append_child(*m_placeholder_element)); @@ -820,10 +825,14 @@ void HTMLInputElement::create_text_input_shadow_tree() m_placeholder_text_node->set_editable_text_node_owner(Badge {}, *this); MUST(m_placeholder_element->append_child(*m_placeholder_text_node)); + // https://www.w3.org/TR/css-ui-4/#input-rules 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"~~~( width: 100%; height: 1lh; + align-items: center; + text-overflow: clip; + white-space: nowrap; )~~~"_string)); MUST(element->append_child(*m_inner_text_element));