system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-04 15:09:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Make button flex wrapper inherit min-height property

Browse source 
This ensures that the vertical positioning of button text is correct
if a `min-height` property is present.
This commit is contained in:
Tim Ledbetter 2024-01-28 11:39:01 +00:00 committed by Andreas Kling
parent 0bf82f748f
commit 99fbd33d7d
3 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
Tests/LibWeb/Layout/expected/block-and-inline/button-with-min-height.txt Normal file
View file

@ -0,0 +1,19 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x104 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 143.515625x100] baseline: 54.796875
BlockContainer <button> at (13,10) content-size 143.515625x100 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 143.515625x100 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,51.5) content-size 143.515625x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 19, rect: [13,51.5 143.515625x17] baseline: 13.296875
"Middle-aligned text"
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x120]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x104]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 153.515625x104]
PaintableWithLines (BlockContainer(anonymous)) [13,10 143.515625x100]
PaintableWithLines (BlockContainer(anonymous)) [13,51.5 143.515625x17]
TextPaintable (TextNode<#text>)

6
Tests/LibWeb/Layout/input/block-and-inline/button-with-min-height.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html><style>
button {
min-height: 100px;
}
</style><body><button>Middle-aligned text</button>

1
Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
View file

@ -416,6 +416,7 @@ ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::
mutable_flex_computed_values.set_justify_content(CSS::JustifyContent::Center);
mutable_flex_computed_values.set_flex_direction(CSS::FlexDirection::Column);
mutable_flex_computed_values.set_height(CSS::Size::make_percentage(CSS::Percentage(100)));
mutable_flex_computed_values.set_min_height(parent.computed_values().min_height());
auto flex_wrapper = parent.heap().template allocate_without_realm<BlockContainer>(parent.document(), nullptr, move(flex_computed_values));
auto content_box_computed_values = parent.computed_values().clone_inherited_values();