0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Use correct reference for abspos elements with % height sizes

Browse source 
Absolutely positioned elements should have their percentage sizes
resolved against the padding box of the containing block, not the
content box.

From CSS-POSITION-3 <https://www.w3.org/TR/css-position-3/#def-cb>

"..the containing block is formed by the padding edge of the ancestor.."
This commit is contained in:
Andreas Kling 2023-06-17 20:06:41 +02:00
parent 357174d8fd
commit c374541711
Notes: sideshowbarker 2024-07-17 23:02:37 +09:00
3 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-percentage-height-resolved-against-padding-box-of-containing-block.txt Normal file
View file

@ -0,0 +1,4 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x256 [BFC] children: not-inline
BlockContainer <body> at (8,248) content-size 784x0 positioned children: not-inline
BlockContainer <div.abspos> at (8,8) content-size 784x240 positioned [BFC] children: not-inline

14
Tests/LibWeb/Layout/input/block-and-inline/abspos-with-percentage-height-resolved-against-padding-box-of-containing-block.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><style>
body {
position: relative;
padding-top: 30%;
}
.abspos {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: orange;
}
</style><body><div class="abspos">

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

@ -1390,9 +1390,9 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
return width.resolved(box, width_of_containing_block_as_length_for_resolve);
}
CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const&, CSS::Size const& height) const
CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const& available_height, CSS::Size const& height) const
{
auto height_of_containing_block = m_state.get(*box.non_anonymous_containing_block()).content_height();
auto height_of_containing_block = available_height.to_px();
auto height_of_containing_block_as_length_for_resolve = CSS::Length::make_px(height_of_containing_block);
if (height.is_auto()) {
return height.resolved(box, height_of_containing_block_as_length_for_resolve);