LibWeb: Take box-sizing into account when sizing replaced elements

awesomekling · awesomekling · commit c197fb40374b · 2023-06-05T09:00:00.000+02:00
This fixes an issue where images with padding and/or border did not have
their size adjusted for `border-box`, thereby becoming larger than
intended by the author.
diff --git a/Tests/LibWeb/Layout/expected/img-with-box-sizing-border-box-and-padding.txt b/Tests/LibWeb/Layout/expected/img-with-box-sizing-border-box-and-padding.txt
@@ -0,0 +1,9 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x100 children: inline
+      line 0 width: 200, height: 100, bottom: 100, baseline: 100
+        frag 0 from ImageBox start: 0, length: 0, rect: [29,29 58x58]
+        frag 1 from ImageBox start: 0, length: 0, rect: [129,29 58x58]
+      ImageBox <img.with-height> at (29,29) content-size 58x58 children: not-inline
+      ImageBox <img.with-width> at (129,29) content-size 58x58 children: not-inline
+      TextNode <#text>
diff --git a/Tests/LibWeb/Layout/input/img-with-box-sizing-border-box-and-padding.html b/Tests/LibWeb/Layout/input/img-with-box-sizing-border-box-and-padding.html
@@ -0,0 +1,13 @@
+<!doctype html><style>
+img {
+    padding: 20px;
+    box-sizing: border-box;
+    border: 1px solid black;
+}
+.with-height {
+    height: 100px;
+}
+.with-width {
+    width: 100px;
+}
+</style><img class="with-height" src="120.png"><img class="with-width" src="120.png">
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -374,7 +374,7 @@ CSSPixels FormattingContext::tentative_width_for_replaced_element(ReplacedBox co
     auto height_of_containing_block = CSS::Length::make_px(containing_block_height_for(box));
     auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
 
-    CSSPixels used_width = computed_width.to_px(box, available_space.width.to_px());
+    CSSPixels used_width = calculate_inner_width(box, available_space.width, computed_width).to_px(box);
 
     // If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
     // then that intrinsic width is the used value of 'width'.
@@ -497,7 +497,7 @@ CSSPixels FormattingContext::tentative_height_for_replaced_element(ReplacedBox c
         return 150;
 
     // FIXME: Handle cases when available_space is not definite.
-    return computed_height.to_px(box, available_space.height.to_px_or_zero());
+    return calculate_inner_height(box, available_space.height, computed_height).to_px(box);
 }
 
 CSSPixels FormattingContext::compute_height_for_replaced_element(ReplacedBox const& box, AvailableSpace const& available_space) const
