RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 20:22:45 +00:00
Code Issues Activity Actions

LibWeb: Fix inline-block percentage height calculation

Browse source 
If an inline-block has a percentage height that relies on the auto
height of the containing block, it should always resolve to the
automatic height of the box, regardless of the percentage value. This
change may seem confusing, but it aligns with the behavior of other
engines.
This commit is contained in:
Aliaksandr Kalenik 2023-07-15 22:50:38 +02:00 • committed by Andreas Kling
parent 4e911cb40e
commit 07f451044b
3 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-percentage-height-and-auto-height-of-containing-block.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
BlockContainer <div.pure-menu-list> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 36.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 36.453125x17.46875]
BlockContainer <div.pure-menu-item> at (8,8) content-size 36.453125x17.46875 inline-block [BFC] children: inline
line 0 width: 36.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [8,8 36.453125x17.46875]
"docs"
TextNode <#text>

12
Tests/LibWeb/Layout/input/block-and-inline/inline-block-with-percentage-height-and-auto-height-of-containing-block.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<style>
.pure-menu-list {
background-color: blueviolet;
}
.pure-menu-item {
display: inline-block;
background-color: chartreuse;
height: 5%;
}
</style>
<div class="pure-menu-list"><div class="pure-menu-item">docs</div></div>

2
Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
View file

@ -165,7 +165,7 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
auto independent_formatting_context = layout_inside(box, layout_mode, box_state.available_inner_space_or_constraints_from(*m_available_space));
auto const& height_value = box.computed_values().height();
if (height_value.is_auto()) {
if (should_treat_height_as_auto(box, *m_available_space)) {
// FIXME: (10.6.6) If 'height' is 'auto', the height depends on the element's descendants per 10.6.7.
parent().compute_height(box, AvailableSpace(AvailableSize::make_indefinite(), AvailableSize::make_indefinite()));
} else {