LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-11 05:25:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Honor box-sizing in flex item "specified size suggestion"

Browse Source 
Although the spec doesn't mention it, if a flex item has box-sizing:
border-box, and the specified size suggestion is a definite size, we
have to subtract the borders and padding from the size before using it.

This fixes an issue seen in "This Week in Ladybird #4" where the
screenshots ended up in one long vertical stack instead of paired up
2 by 2.
This commit is contained in:
Andreas Kling 2023-04-17 17:31:18 +02:00
parent 7f79208759
commit c710575f88
Notes: sideshowbarker 2024-07-17 09:47:09 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/c710575f88
Pull-request: https://github.com/SerenityOS/serenity/pull/18414
3 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt Normal file
View File

@ -0,0 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x100 children: not-inline
Box <body> at (0,0) content-size 800x100 flex-container(row) children: not-inline
ImageBox <img> at (0,0) content-size 400x100 flex-item children: not-inline
ImageBox <img.padded> at (600,0) content-size 200x100 flex-item children: not-inline

21
Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html Normal file
View File

@ -0,0 +1,21 @@
<!doctype html><style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: 16px SerenitySans;
}
body {
width: 800px;
display: flex;
flex-wrap: wrap;
}
img {
width: 50%;
height: 100px;
background: pink;
}
.padded {
padding-left: 200px;
}
</style><body><img><img class="padded" alt="hello this text is here to make the img have a wide intrinsic size" />

6
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File

@ -705,8 +705,10 @@ Optional<CSSPixels> FlexFormattingContext::specified_size_suggestion(FlexItem co
{
// If the item’s preferred main size is definite and not automatic,
// then the specified size suggestion is that size. It is otherwise undefined.
if (has_definite_main_size(item.box))
return inner_main_size(item.box);
if (has_definite_main_size(item.box)) {
// NOTE: We use get_pixel_{width,height} to ensure that CSS box-sizing is respected.
return is_row_layout() ? get_pixel_width(item.box, computed_main_size(item.box)) : get_pixel_height(item.box, computed_main_size(item.box));
}
return {};
}