RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 19:07:35 +00:00
Code Issues Activity Actions

LibWeb: Fix for absolutely positioned elements with specified height

Browse source 
Use inner height since the paintable adds padding back.

Fixes #18842.
This commit is contained in:
Andi Gallo 2023-05-15 06:33:06 +00:00 • committed by Andreas Kling
parent 3e12d84f0f
commit 9a6a635e51
3 changed files with 55 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/height-of-absolute-position-box-with-padding.txt Normal file
View file

@ -0,0 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <h1> at (76.590553,103.754333) content-size 126x38 positioned [BFC] children: inline
line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [120.590553,103.754333 37.21875x17.46875]
"Test"
TextNode <#text>
TextNode <#text>

27
Tests/LibWeb/Layout/input/height-of-absolute-position-box-with-padding.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<head>
<style>
* {
box-sizing: border-box;
}
h1 {
position: absolute;
top: 12mm;
left: 20mm;
width: 128px;
height: 128px;
font-size: 20px;
text-align: center;
padding: 44px 0;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>

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

@ -876,14 +876,25 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
} }
} }
auto used_height = height.to_px(box, height_of_containing_block); // Compute the height based on box type and CSS properties:
// https://www.w3.org/TR/css-sizing-3/#box-sizing
CSSPixels used_height = 0;
if (should_treat_height_as_auto(box, available_space)) {
used_height = height.to_px(box, height_of_containing_block);
} else {
used_height = calculate_inner_height(box, available_space.height, height).to_px(box);
}
auto const& computed_min_height = box.computed_values().min_height(); auto const& computed_min_height = box.computed_values().min_height();
auto const& computed_max_height = box.computed_values().max_height(); auto const& computed_max_height = box.computed_values().max_height();
if (!computed_max_height.is_none()) if (!computed_max_height.is_none()) {
used_height = min(used_height, computed_max_height.to_px(box, height_of_containing_block)); auto inner_max_height = calculate_inner_height(box, available_space.height, computed_max_height);
if (!computed_min_height.is_auto()) used_height = min(used_height, inner_max_height.to_px(box));
used_height = max(used_height, computed_min_height.to_px(box, height_of_containing_block)); }
if (!computed_min_height.is_auto()) {
auto inner_min_height = calculate_inner_height(box, available_space.height, computed_min_height);
used_height = max(used_height, inner_min_height.to_px(box));
}
// NOTE: The following is not directly part of any spec, but this is where we resolve // NOTE: The following is not directly part of any spec, but this is where we resolve
// the final used values for vertical margin/border/padding. // the final used values for vertical margin/border/padding.