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.

1 files changed, 4 insertions, 2 deletions

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 803c62a8b1..57100e1ac6 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -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 {};
 }