From d053cb6faebe18879e99fd4aea727bee52a03b15 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Thu, 27 Apr 2023 10:21:55 +0200 Subject: [PATCH] LibWeb: Fix bug where `box-sizing: border-box` made flex items too small If a flex item has a preferred cross size of "auto", we should not be subtracting padding and border in the cross axis when computing the cross size. --- ...-sizing-border-box-and-nonzero-padding.txt | 27 +++++++++++++++++++ ...sizing-border-box-and-nonzero-padding.html | 17 ++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 2 +- 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt create mode 100644 Tests/LibWeb/Layout/input/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.html diff --git a/Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt b/Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt new file mode 100644 index 00000000000..0186c643a12 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt @@ -0,0 +1,27 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x245.09375 children: not-inline + BlockContainer at (10,10) content-size 780x227.09375 children: not-inline + Box at (11,11) content-size 778x225.09375 flex-container(row) children: not-inline + BlockContainer at (12,62) content-size 776x123.09375 flex-item children: inline + line 0 width: 741.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 90, rect: [12,62 741.640625x17.46875] + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum libero et urna" + line 1 width: 765.03125, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 91, length: 95, rect: [12,79 765.03125x17.46875] + "sodales auctor. Nullam sodales bibendum turpis quis blandit. Ut fringilla erat et erat laoreet," + line 2 width: 747.5625, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 187, length: 90, rect: [12,96 747.5625x17.46875] + "faucibus rhoncus orci hendrerit. Etiam at sagittis diam. Etiam nec neque non dolor iaculis" + line 3 width: 732.109375, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 278, length: 90, rect: [12,114 732.109375x17.46875] + "finibus euismod eget erat. Pellentesque vitae purus vitae nisi vehicula vestibulum quis ut" + line 4 width: 759.453125, height: 18.34375, bottom: 88.21875, baseline: 13.53125 + frag 0 from TextNode start: 369, length: 95, rect: [12,131 759.453125x17.46875] + "diam. Integer convallis, justo ullamcorper sollicitudin varius, enim enim pellentesque erat, eu" + line 5 width: 767.1875, height: 17.8125, bottom: 105.15625, baseline: 13.53125 + frag 0 from TextNode start: 465, length: 94, rect: [12,149 767.1875x17.46875] + "pellentesque sem arcu eu purus. Phasellus id erat sed felis luctus mollis eget sit amet dolor." + line 6 width: 765.578125, height: 18.28125, bottom: 123.09375, baseline: 13.53125 + frag 0 from TextNode start: 560, length: 95, rect: [12,166 765.578125x17.46875] + "Pellentesque eget justo nulla. Duis consectetur imperdiet nisi, ac tincidunt urna blandit quis." + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.html b/Tests/LibWeb/Layout/input/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.html new file mode 100644 index 00000000000..508f59f4c6d --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.html @@ -0,0 +1,17 @@ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum libero et urna sodales auctor. Nullam sodales bibendum turpis quis blandit. Ut fringilla erat et erat laoreet, faucibus rhoncus orci hendrerit. Etiam at sagittis diam. Etiam nec neque non dolor iaculis finibus euismod eget erat. Pellentesque vitae purus vitae nisi vehicula vestibulum quis ut diam. Integer convallis, justo ullamcorper sollicitudin varius, enim enim pellentesque erat, eu pellentesque sem arcu eu purus. Phasellus id erat sed felis luctus mollis eget sit amet dolor. Pellentesque eget justo nulla. Duis consectetur imperdiet nisi, ac tincidunt urna blandit quis.
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index bd6d2f92894..8b4eb497710 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1099,7 +1099,7 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem& } auto cross_size = [&]() { - if (item.box->computed_values().box_sizing() == CSS::BoxSizing::BorderBox) { + if (item.box->computed_values().box_sizing() == CSS::BoxSizing::BorderBox && !should_treat_cross_size_as_auto(item.box)) { return max(CSSPixels(0.0f), resolved_definite_cross_size(item) - item.padding.cross_before - item.padding.cross_after - item.borders.cross_before - item.borders.cross_after); }