system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-09-30 21:24:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb/HTML: Update Text Input Styling

Browse source 
So that it is closer to the spec.
https://www.w3.org/TR/css-ui-4/#input-rules

(cherry picked from commit 13cd653d1ccf9ef486f4622e350614361e275a0c)
This commit is contained in:
Aziz Berkay Yesilyurt 2024-07-05 09:41:23 +02:00 committed by Nico Weber
parent fd35cb2730
commit 32f513fc1c
2 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
Tests/LibWeb/Layout/expected/input-placeholder.txt
View file

@ -19,10 +19,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <input> at (221,9) content-size 200x24 inline-block [BFC] children: not-inline BlockContainer <input> at (221,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (223,10) content-size 196x22 flex-container(row) [FFC] children: not-inline Box <div> at (223,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (223,10) content-size 196x22 flex-item [BFC] children: inline BlockContainer <div> 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 frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.4375x22] baseline: 17
"This placeholder" "This placeholder should be visible"
frag 1 from TextNode start: 17, length: 17, rect: [223,32 167.6875x22] baseline: 17
"should be visible"
TextNode <#text> TextNode <#text>
TextNode <#text> TextNode <#text>
BlockContainer <input> at (433,9) content-size 200x24 inline-block [BFC] children: not-inline BlockContainer <input> 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 <input#placeholder> at (9,35) content-size 200x24 inline-block [BFC] children: not-inline BlockContainer <input#placeholder> at (9,35) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (11,36) content-size 196x22 flex-container(row) [FFC] children: not-inline Box <div> at (11,36) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,36) content-size 196x22 flex-item [BFC] children: inline BlockContainer <div> 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 frag 0 from TextNode start: 0, length: 40, rect: [11,36 407.71875x22] baseline: 17
"This placeholder" "This placeholder should also be visisble"
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"
TextNode <#text> TextNode <#text>
TextNode <#text> TextNode <#text>
TextNode <#text> TextNode <#text>
@ -53,16 +47,16 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>) [11,10 196x22] PaintableWithLines (BlockContainer<DIV>) [11,10 196x22]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [220,8 202x26] overflow: [221,9 200x45] PaintableWithLines (BlockContainer<INPUT>) [220,8 202x26] overflow: [221,9 346.4375x24]
PaintableBox (Box<DIV>) [221,9 200x24] overflow: [221,9 200x45] PaintableBox (Box<DIV>) [221,9 200x24] overflow: [221,9 346.4375x24]
PaintableWithLines (BlockContainer<DIV>) [223,10 196x22] overflow: [223,10 196x44] PaintableWithLines (BlockContainer<DIV>) [223,10 196x22] overflow: [223,10 344.4375x22]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [432,8 202x26] PaintableWithLines (BlockContainer<INPUT>) [432,8 202x26]
PaintableBox (Box<DIV>) [433,9 200x24] PaintableBox (Box<DIV>) [433,9 200x24]
PaintableWithLines (BlockContainer<DIV>) [435,10 196x22] PaintableWithLines (BlockContainer<DIV>) [435,10 196x22]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>#placeholder) [8,34 202x26] overflow: [9,35 200x67] PaintableWithLines (BlockContainer<INPUT>#placeholder) [8,34 202x26] overflow: [9,35 409.71875x24]
PaintableBox (Box<DIV>) [9,35 200x24] overflow: [9,35 200x67] PaintableBox (Box<DIV>) [9,35 200x24] overflow: [9,35 409.71875x24]
PaintableWithLines (BlockContainer<DIV>) [11,36 196x22] overflow: [11,36 196x66] PaintableWithLines (BlockContainer<DIV>) [11,36 196x22] overflow: [11,36 407.71875x22]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)

9
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -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 = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_placeholder_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Placeholder); 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"~~~( MUST(m_placeholder_element->set_attribute(HTML::AttributeNames::style, R"~~~(
width: 100%; width: 100%;
height: 1lh; height: 1lh;
align-items: center;
text-overflow: clip;
white-space: nowrap;
)~~~"_string)); )~~~"_string));
MUST(element->append_child(*m_placeholder_element)); 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<HTMLInputElement> {}, *this); m_placeholder_text_node->set_editable_text_node_owner(Badge<HTMLInputElement> {}, *this);
MUST(m_placeholder_element->append_child(*m_placeholder_text_node)); 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)); 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"~~~( MUST(m_inner_text_element->set_attribute(HTML::AttributeNames::style, R"~~~(
width: 100%; width: 100%;
height: 1lh; height: 1lh;
align-items: center;
text-overflow: clip;
white-space: nowrap;
)~~~"_string)); )~~~"_string));
MUST(element->append_child(*m_inner_text_element)); MUST(element->append_child(*m_inner_text_element));