eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-25 17:25:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Let flexbox stretch auto-width text inputs

Browse Source 
Don't rewrite text input 'width: auto' to 'size()ch' in
'HTMLInputElement::adjust_computed_style()'. That turns the control into
a definite-width flex item and prevents 'align-items: stretch' from
expanding it across the flex container.

Fixes the layout of the input element on the element matrix login page.
This commit is contained in:
Shannon Booth
2026-04-11 16:59:12 +02:00
committed by Jelle Raaijmakers
parent 46fcf51bf7
commit 482e5e770f
Notes: github-actions[bot] 2026-04-13 07:58:05 +00:00 
Author: https://github.com/shannonbooth
Commit: https://github.com/LadybirdBrowser/ladybird/commit/482e5e770fd
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8873
Reviewed-by: https://github.com/gmta ✅
7 changed files with 70 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Libraries/LibWeb/HTML/HTMLInputElement.cpp
View File

@@ -185,11 +185,6 @@ void HTMLInputElement::adjust_computed_style(CSS::ComputedProperties& style)
if (style.display().is_inline_outside() && style.display().is_flow_inside())
style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::InlineBlock)));
if (type_state() != TypeAttributeState::FileUpload) {
if (style.property(CSS::PropertyID::Width).has_auto())
style.set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length(size(), CSS::LengthUnit::Ch)));
}
// NOTE: Other browsers apply a minimum height of a single line's line-height to single-line input elements.
if (is_single_line() && style.property(CSS::PropertyID::Height).has_auto()) {
auto current_line_height = style.line_height().to_double();

26
Tests/LibWeb/Layout/expected/flex/text-input-stretches-in-column-flex.txt Normal file
View File

@@ -0,0 +1,26 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 38 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 22 0+0+8] children: not-inline
Box <div.layout-container> at [8,8] flex-container(column) [0+0+0 784 0+0+0] [0+0+0 22 0+0+0] [FFC] children: not-inline
Box <div.cpd-form-field> at [8,8] flex-container(column) flex-item [0+0+0 784 0+0+0] [0+0+0 22 0+0+0] [FFC] children: not-inline
TextInputBox <input> at [9,9] flex-item [0+1+0 782 0+1+0] [0+1+0 20 0+1+0] [BFC] children: not-inline
Box <div> at [11,10] flex-container(row) [0+0+2 778 2+0+0] [0+0+1 18 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [11,10] flex-item [0+0+0 778 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 0, rect: [11,10 0x18] baseline: 13.796875
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [8,30] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x38]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x22]
PaintableBox (Box<DIV>.layout-container) [8,8 784x22]
PaintableBox (Box<DIV>.cpd-form-field) [8,8 784x22]
PaintableWithLines (TextInputBox<INPUT>) [8,8 784x22]
PaintableBox (Box<DIV>) [9,9 782x20]
PaintableWithLines (BlockContainer<DIV>) [11,10 778x18]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,30 784x0]
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x38] [children: 0] (z-index: auto)

24
Tests/LibWeb/Layout/expected/input-max-height-border-box.txt
View File

@@ -1,21 +1,21 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 48 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 32 0+0+8] children: inline
frag 0 from TextInputBox start: 0, length: 0, rect: [12,22 52x4] baseline: 21
TextInputBox <input> at [12,22] inline-block [0+4+0 52 0+4+0] [0+4+10 4 10+4+0] [BFC] children: not-inline
Box <div> at [14,23] flex-container(row) [0+0+2 48 2+0+0] [0+0+1 6 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [14,23] flex-item [0+0+0 48 0+0+0] [0+0+0 6 0+0+0] [BFC] children: inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 52 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 36 0+0+8] children: inline
frag 0 from TextInputBox start: 0, length: 0, rect: [12,22 60x8] baseline: 21
TextInputBox <input> at [12,22] inline-block [0+4+0 60 0+4+0] [0+4+10 8 10+4+0] [BFC] children: not-inline
Box <div> at [14,23] flex-container(row) [0+0+2 56 2+0+0] [0+0+1 6 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [14,23] flex-item [0+0+0 56 0+0+0] [0+0+0 6 0+0+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 0, rect: [14,23 0x6] baseline: 4.5
TextNode <#text> (not painted)
TextNode <#text> (not painted)
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x48]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x32]
PaintableWithLines (TextInputBox<INPUT>) [8,8 60x32]
PaintableBox (Box<DIV>) [12,22 52x8]
PaintableWithLines (BlockContainer<DIV>) [14,23 48x6]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x52]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x36]
PaintableWithLines (TextInputBox<INPUT>) [8,8 68x36]
PaintableBox (Box<DIV>) [12,22 60x8]
PaintableWithLines (BlockContainer<DIV>) [14,23 56x6]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x48] [children: 0] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x52] [children: 0] (z-index: auto)

24
Tests/LibWeb/Layout/expected/input-min-height-border-box.txt
View File

@@ -1,21 +1,21 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 66 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 50 0+0+8] children: inline
frag 0 from TextInputBox start: 0, length: 0, rect: [11,19 54x28] baseline: 18
TextInputBox <input> at [11,19] inline-block [0+3+0 54 0+3+0] [0+3+8 28 8+3+0] [BFC] children: not-inline
Box <div> at [13,20] flex-container(row) [0+0+2 50 2+0+0] [0+0+1 6 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [13,20] flex-item [0+0+0 50 0+0+0] [0+0+0 6 0+0+0] [BFC] children: inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 46 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 30 0+0+8] children: inline
frag 0 from TextInputBox start: 0, length: 0, rect: [11,19 60x8] baseline: 18
TextInputBox <input> at [11,19] inline-block [0+3+0 60 0+3+0] [0+3+8 8 8+3+0] [BFC] children: not-inline
Box <div> at [13,20] flex-container(row) [0+0+2 56 2+0+0] [0+0+1 6 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [13,20] flex-item [0+0+0 56 0+0+0] [0+0+0 6 0+0+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 0, rect: [13,20 0x6] baseline: 4.5
TextNode <#text> (not painted)
TextNode <#text> (not painted)
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x66]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x50]
PaintableWithLines (TextInputBox<INPUT>) [8,8 60x50]
PaintableBox (Box<DIV>) [11,19 54x8]
PaintableWithLines (BlockContainer<DIV>) [13,20 50x6]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x46]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x30]
PaintableWithLines (TextInputBox<INPUT>) [8,8 66x30]
PaintableBox (Box<DIV>) [11,19 60x8]
PaintableWithLines (BlockContainer<DIV>) [13,20 56x6]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x66] [children: 0] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x46] [children: 0] (z-index: auto)

14
Tests/LibWeb/Layout/expected/quirks/input-in-pre-quirks-mode.txt
View File

@@ -4,10 +4,10 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children
BlockContainer <(anonymous)> at [8,13] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
BlockContainer <pre> at [8,13] [0+0+0 784 0+0+0] [13+0+0 19 0+0+13] children: inline
frag 0 from TextInputBox start: 0, length: 0, rect: [9,14 158x17] baseline: 17
TextInputBox <input> at [9,14] inline-block [0+1+0 158 0+1+0] [0+1+0 17 0+1+0] [BFC] children: not-inline
Box <div> at [11,15] flex-container(row) [0+0+2 154 2+0+0] [0+0+1 15 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [11,15] flex-item [0+0+0 154 0+0+0] [0+0+0 15 0+0+0] [BFC] children: inline
frag 0 from TextInputBox start: 0, length: 0, rect: [9,14 160x17] baseline: 17
TextInputBox <input> at [9,14] inline-block [0+1+0 160 0+1+0] [0+1+0 17 0+1+0] [BFC] children: not-inline
Box <div> at [11,15] flex-container(row) [0+0+2 156 2+0+0] [0+0+1 15 1+0+0] [FFC] children: not-inline
BlockContainer <div> at [11,15] flex-item [0+0+0 156 0+0+0] [0+0+0 15 0+0+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 0, rect: [11,15 0x15] baseline: 11.390625
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [8,45] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
@@ -18,9 +18,9 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x610]
PaintableWithLines (BlockContainer<BODY>) [8,13 784x584]
PaintableWithLines (BlockContainer(anonymous)) [8,13 784x0]
PaintableWithLines (BlockContainer<PRE>) [8,13 784x19]
PaintableWithLines (TextInputBox<INPUT>) [8,13 160x19]
PaintableBox (Box<DIV>) [9,14 158x17]
PaintableWithLines (BlockContainer<DIV>) [11,15 154x15]
PaintableWithLines (TextInputBox<INPUT>) [8,13 162x19]
PaintableBox (Box<DIV>) [9,14 160x17]
PaintableWithLines (BlockContainer<DIV>) [11,15 156x15]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,45 784x0]

11
Tests/LibWeb/Layout/input/flex/text-input-stretches-in-column-flex.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html><style>
.layout-container {
display: flex;
flex-direction: column;
}
.cpd-form-field {
display: flex;
flex-direction: column;
}
</style><div class="layout-container"><div class="cpd-form-field"><input type="text"></div></div>

5
Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/input-text-size.txt
View File

@@ -2,10 +2,9 @@ Harness status: OK
Found 5 tests
4 Pass
1 Fail
5 Pass
Pass A misssing attribute is equivalent to size=20
Pass An invalid attribute value is equivalent to size=20
Pass The width depends on a size attribute
Pass Size attribute value affects layout-dependent computed style
Fail Size attribute value is not a presentational hint
Pass Size attribute value is not a presentational hint