diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-04-27 10:21:55 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-04-27 13:57:52 +0200 |
| commit | d053cb6faebe18879e99fd4aea727bee52a03b15 (patch) | |
| tree | c54307bdc92b4658382cf9dfc4d1e0bc475d57b0 | |
| parent | 824d23570a25ef271d6cc60aea911835dd7b39fe (diff) | |
| download | serenity-d053cb6faebe18879e99fd4aea727bee52a03b15.zip | |
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.
3 files changed, 45 insertions, 1 deletions
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 0000000000..0186c643a1 --- /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 <html> at (1,1) content-size 798x245.09375 children: not-inline + BlockContainer <body> at (10,10) content-size 780x227.09375 children: not-inline + Box <div.outer.flex.flex-wrap> at (11,11) content-size 778x225.09375 flex-container(row) children: not-inline + BlockContainer <div.inner> 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 0000000000..508f59f4c6 --- /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 @@ +<!doctype html><style> + * { + border: 1px solid black !important; + font: 16px SerenitySans; + } + .outer { + display: flex; + flex-wrap: wrap; + background: pink; + } + .inner { + background: rgba(0, 0, 255, 0.5); + padding-top: 50px; + padding-bottom: 50px; + box-sizing: border-box; + } +</style><div class="outer flex flex-wrap"><div class="inner">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.</div>
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index bd6d2f9289..8b4eb49771 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); } |