RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 04:17:34 +00:00
Code Issues Activity Actions

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

Browse source 
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.
This commit is contained in:
Andreas Kling 2023-06-04 16:01:30 +02:00
parent 9531abcb1a
commit c197fb4037
3 changed files with 24 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/img-with-box-sizing-border-box-and-padding.txt Normal file
View file

@ -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>

13
Tests/LibWeb/Layout/input/img-with-box-sizing-border-box-and-padding.html Normal file
View file

@ -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">

4
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -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