瀏覽代碼

LibWeb: Make button flex wrapper inherit `min-height` property

This ensures that the vertical positioning of button text is correct
if a `min-height` property is present.
Tim Ledbetter 1 年之前
父節點
當前提交
99fbd33d7d

+ 19 - 0
Tests/LibWeb/Layout/expected/block-and-inline/button-with-min-height.txt

@@ -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 - 0
Tests/LibWeb/Layout/input/block-and-inline/button-with-min-height.html

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

+ 1 - 0
Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp

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