mirror of
https://github.com/SerenityOS/serenity
synced 2024-09-16 06:30:41 +00:00
LibWeb: Set max-width for inline child boxes after inside layout
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:
parent
24c848607c
commit
1f28fdacf0
|
@ -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>
|
|
@ -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
|
|
@ -505,8 +505,17 @@ void BlockFormattingContext::layout_inline_children(BlockContainer const& block_
|
|||
layout_mode,
|
||||
available_space);
|
||||
|
||||
if (!block_container_state.has_definite_width())
|
||||
block_container_state.set_content_width(context.automatic_content_width());
|
||||
if (!block_container_state.has_definite_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())
|
||||
block_container_state.set_content_height(context.automatic_content_height());
|
||||
}
|
||||
|
|
|
@ -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())
|
||||
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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue