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

LibWeb: Don't let input element placeholders influence line-height
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Details
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
Details
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
Details
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Details
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Details
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
Before this change, we transferred the input element's line-height to
both the editable text *and* the placeholder. This caused some strange
doubling of the effective line-height when the editable text was empty,
pushing down the placeholder.
This commit is contained in:
Andreas Kling 2024-10-08 07:45:22 +02:00 • committed by Andreas Kling
parent e1eeb93cc6
commit 13ba491924
Notes: github-actions[bot] 2024-10-08 06:12:59 +00:00
5 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt Normal file
View file

@ -0,0 +1,25 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x100 [BFC] children: not-inline
BlockContainer <body> 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 <input> at (9,8) content-size 200x82 inline-block [BFC] children: not-inline
Box <div> at (11,9) content-size 196x80 flex-container(row) [FFC] children: not-inline
BlockContainer <div> 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 <div> at (109,9) content-size 98x80 flex-item [BFC] children: inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x100]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x84]
PaintableWithLines (BlockContainer<INPUT>) [8,7 202x84]
PaintableBox (Box<DIV>) [9,8 200x82]
PaintableWithLines (BlockContainer<DIV>) [11,40.5 98x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [109,9 98x80]
TextPaintable (TextNode<#text>)

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

@ -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 <div> at (419,10) content-size 0x22 flex-item [BFC] children: inline
TextNode <#text>
TextNode <#text>
BlockContainer <input> at (433,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> 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 <div> 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<DIV>) [221,9 200x24] overflow: [221,9 346.546875x25]
PaintableWithLines (BlockContainer<DIV>) [223,10 196x22] overflow: [223,10 344.546875x22]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [419,10 0x22]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [432,8 202x26]
PaintableBox (Box<DIV>) [433,9 200x24]
@ -60,3 +65,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableBox (Box<DIV>) [9,35 200x24] overflow: [9,35 409.859375x25]
PaintableWithLines (BlockContainer<DIV>) [11,36 196x22] overflow: [11,36 407.859375x22]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [207,36 0x22]

7
Tests/LibWeb/Layout/input/input-placeholder-with-line-height.html Normal file
View file

@ -0,0 +1,7 @@
<!doctype html><style>
* { outline: 1px solid black; }
input {
line-height: 5em;
vertical-align: middle;
}
</style><body><input placeholder="placeholder"/>text

1
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -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 {

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

@ -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;