mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-24 21:45:20 +00:00
LibWeb: Honor box-sizing in flex item "specified size suggestion"
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:
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
|
@ -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
|
|
@ -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" />
|
|
@ -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 {};
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue