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

LibWeb: Use padding box of containing block to resolve % height size

Browse source 
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.."

Fixes crash on Acid2 test.
This commit is contained in:
Aliaksandr Kalenik 2023-06-18 19:18:49 +03:00 • committed by Andreas Kling
parent 14ae0524e9
commit ca0c2339f4
5 changed files with 47 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-height-with-containing-block-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 800x616 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x600 children: not-inline
BlockContainer <div.container> at (8,108) content-size 784x500 children: not-inline
BlockContainer <div.hmm> at (18,118) content-size 764x250 children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [18,118 36.84375x17.46875]
"hello"
TextNode <#text>

8
Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-height.txt Normal file
View file

@ -0,0 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x53.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x37.46875 children: not-inline
BlockContainer <div.hmm> at (18,18) content-size 764x17.46875 children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [18,18 36.84375x17.46875]
"hello"
TextNode <#text>

13
Tests/LibWeb/Layout/input/block-and-inline/percentage-min-height-with-containing-block-padding.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<style type="text/css">
.container {
padding-top: 100px;
height: 500px;
background-color: cadetblue;
}
.hmm {
min-height: 50%;
background-color: pink;
border: 10px solid rebeccapurple
}
</style><div class="container"><div class="hmm">hello</div></div>

8
Tests/LibWeb/Layout/input/block-and-inline/percentage-min-height.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<style type="text/css">
.hmm {
min-height: 50%;
background-color: pink;
border: 10px solid rebeccapurple
}
</style><div class="hmm">hello</div>

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

@ -1390,9 +1390,16 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
return width.resolved(box, width_of_containing_block_as_length_for_resolve); return width.resolved(box, width_of_containing_block_as_length_for_resolve);
} }
CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const& available_height, CSS::Size const& height) const CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const&, CSS::Size const& height) const
{ {
auto height_of_containing_block = available_height.to_px(); auto const* containing_block = box.non_anonymous_containing_block();
auto const& containing_block_state = m_state.get(*containing_block);
auto height_of_containing_block = containing_block_state.content_height();
if (box.computed_values().position() == CSS::Position::Absolute) {
// https://www.w3.org/TR/css-position-3/#def-cb
// If the box has position: absolute, then the containing block is formed by the padding edge of the ancestor
height_of_containing_block += containing_block_state.padding_top + containing_block_state.padding_bottom;
}
auto height_of_containing_block_as_length_for_resolve = CSS::Length::make_px(height_of_containing_block); auto height_of_containing_block_as_length_for_resolve = CSS::Length::make_px(height_of_containing_block);
if (height.is_auto()) { if (height.is_auto()) {
return height.resolved(box, height_of_containing_block_as_length_for_resolve); return height.resolved(box, height_of_containing_block_as_length_for_resolve);