beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 15:40:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Fix bug where box-sizing: border-box made flex items too small

Browse source 
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.
This commit is contained in:
Andreas Kling 2023-04-27 10:21:55 +02:00
parent 824d23570a
commit d053cb6fae
Notes: sideshowbarker 2024-07-18 01:43:16 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/d053cb6fae
Pull-request: https://github.com/SerenityOS/serenity/pull/18533
3 changed files with 45 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt Normal file
View file

@ -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>

17
Tests/LibWeb/Layout/input/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.html Normal file
View file

@ -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>

2
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

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