diff options
3 files changed, 38 insertions, 2 deletions
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 <html> at (1,1) content-size 798x30 children: not-inline + BlockContainer <body> at (10,10) content-size 780x12 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box <div.flex-container> 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 <div.flex-item> 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 @@ +<style> +* { + border: 1px solid black; +} +.flex-container { + display: flex; + width: 600px; + height: 10px; +} +.flex-item { + background: orange; + box-sizing: border-box; + min-height: 200px; + padding-top: 10%; + padding-bottom: 20%; +} +</style> +<body> +<div class="flex-container"> +<div class="flex-item">foo</div> 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; } |