From c710575f886dbca9fed966edf35ed53d400f8189 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Mon, 17 Apr 2023 17:31:18 +0200 Subject: [PATCH] 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. --- ...-suggestion-with-box-sizing-border-box.txt | 5 +++++ ...suggestion-with-box-sizing-border-box.html | 21 +++++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 6 ++++-- 3 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt create mode 100644 Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html diff --git a/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt b/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt new file mode 100644 index 00000000000..c41d592c1c2 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt @@ -0,0 +1,5 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x100 children: not-inline + Box at (0,0) content-size 800x100 flex-container(row) children: not-inline + ImageBox at (0,0) content-size 400x100 flex-item children: not-inline + ImageBox at (600,0) content-size 200x100 flex-item children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html b/Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html new file mode 100644 index 00000000000..0d8afc12309 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/specified-size-suggestion-with-box-sizing-border-box.html @@ -0,0 +1,21 @@ +hello this text is here to make the img have a wide intrinsic size \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 803c62a8b11..57100e1ac6d 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -705,8 +705,10 @@ Optional 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 {}; }