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

LibWeb: Set max-width for inline child boxes after inside layout

Browse source 
max-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.

Fixes https://github.com/SerenityOS/serenity/issues/20235
This commit is contained in:
Aliaksandr Kalenik 2023-08-02 01:02:44 +03:00 • committed by Andreas Kling
parent 24c848607c
commit 1f28fdacf0
4 changed files with 46 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Tests/LibWeb/Layout/expected/block-and-inline/max-width-for-box-with-inline-children.txt Normal file
View file

@ -0,0 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x185.734375 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 204x167.734375 children: not-inline
BlockContainer <div.outer> at (11,11) content-size 202x165.734375 children: not-inline
BlockContainer <div.inner> at (12,12) content-size 200x163.734375 children: inline
line 0 width: 88.765625, height: 54.578125, bottom: 54.578125, baseline: 42.265625
frag 0 from TextNode start: 0, length: 4, rect: [12,12 88.765625x54.578125]
"well"
line 1 width: 115.125, height: 54.578125, bottom: 109.15625, baseline: 42.265625
frag 0 from TextNode start: 5, length: 5, rect: [12,66.578125 115.125x54.578125]
"hello"
line 2 width: 172.984375, height: 54.578125, bottom: 163.734375, baseline: 42.265625
frag 0 from TextNode start: 11, length: 7, rect: [12,121.15625 172.984375x54.578125]
"friends"
TextNode <#text>

12
Tests/LibWeb/Layout/input/block-and-inline/max-width-for-box-with-inline-children.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html><style>
* {
border: 1px solid black !important;
}
body {
width: max-content;
}
.inner {
max-width: 200px;
font-size: 50px;
}
</style><body><div class="outer"><div class="inner">well hello friends

13
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -505,8 +505,17 @@ void BlockFormattingContext::layout_inline_children(BlockContainer const& block_
layout_mode, layout_mode,
available_space); available_space);
if (!block_container_state.has_definite_width()) if (!block_container_state.has_definite_width()) {
block_container_state.set_content_width(context.automatic_content_width()); // NOTE: max-width for boxes with inline children can only be applied after inside layout is done
// and width of box content is known
auto used_width_px = context.automatic_content_width();
if (!should_treat_max_width_as_none(block_container, available_space.width)) {
auto max_width_px = calculate_inner_width(block_container, available_space.width, block_container.computed_values().max_width()).to_px(block_container);
if (used_width_px > max_width_px)
used_width_px = max_width_px;
}
block_container_state.set_content_width(used_width_px);
}
if (!block_container_state.has_definite_height()) if (!block_container_state.has_definite_height())
block_container_state.set_content_height(context.automatic_content_height()); block_container_state.set_content_height(context.automatic_content_height());
} }

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

@ -1837,6 +1837,14 @@ bool FormattingContext::should_treat_max_width_as_none(Box const& box, Available
if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_width()) if (!m_state.get(*box.non_anonymous_containing_block()).has_definite_width())
return true; return true;
} }
if (box.children_are_inline()) {
if (max_width.is_fit_content() && available_width.is_intrinsic_sizing_constraint())
return true;
if (max_width.is_max_content() && available_width.is_max_content())
return true;
if (max_width.is_min_content() && available_width.is_min_content())
return true;
}
return false; return false;
} }