From 0ef07383e5616e5d9bd31eb5fffdccfbc0e034ab Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Fri, 10 Mar 2023 11:54:52 +0100 Subject: [PATCH] LibWeb: Fix bogus min/max-height for box-sizing:border-box flex items When resolving these constraints to CSS pixel sizes, we have to resolve padding-top and padding-bottom against the flex container's *width*, not its height. --- ...dding-relative-to-flex-container-width.txt | 15 ++++++++++++++ ...ding-relative-to-flex-container-width.html | 20 +++++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 5 +++-- 3 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt create mode 100644 Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html diff --git a/Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt b/Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt new file mode 100644 index 0000000000..41282e4fb6 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt @@ -0,0 +1,15 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x30 children: not-inline + BlockContainer at (10,10) content-size 780x12 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box at (11,11) content-size 600x10 flex-container(row) children: not-inline + BlockContainer <(anonymous)> at (11,11) content-size 0x0 children: inline + TextNode <#text> + BlockContainer at (12,72) content-size 24.859375x18.000007 flex-item children: inline + line 0 width: 24.859375, height: 19.359375, bottom: 19.359375, baseline: 15.5 + frag 0 from TextNode start: 0, length: 3, rect: [12,72 24.859375x19.359375] + "foo" + TextNode <#text> + BlockContainer <(anonymous)> at (11,11) content-size 0x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html b/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html new file mode 100644 index 0000000000..355b973447 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html @@ -0,0 +1,20 @@ + + +
+
foo
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 6d946e2065..8db71fc121 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -55,10 +55,11 @@ CSSPixels FlexFormattingContext::get_pixel_height(Box const& box, CSS::Size cons { auto containing_block_height = CSS::Length::make_px(containing_block_height_for(box)); if (box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) { + auto containing_block_width = CSS::Length::make_px(containing_block_width_for(box)); auto border_top = box.computed_values().border_top().width; auto border_bottom = box.computed_values().border_bottom().width; - auto padding_top = box.computed_values().padding().top().resolved(box, containing_block_height).to_px(box); - auto padding_bottom = box.computed_values().padding().bottom().resolved(box, containing_block_height).to_px(box); + auto padding_top = box.computed_values().padding().top().resolved(box, containing_block_width).to_px(box); + auto padding_bottom = box.computed_values().padding().bottom().resolved(box, containing_block_width).to_px(box); return size.resolved(box, containing_block_height).to_px(box) - border_top - border_bottom - padding_top - padding_bottom; }