1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 08:57:34 +00:00

LibWeb: Apply min/max-widths to block container during intrinsic layout

Fixes https://github.com/SerenityOS/serenity/issues/22430
This commit is contained in:
Aliaksandr Kalenik 2023-12-26 05:49:45 +01:00 committed by Andreas Kling
parent 9258d7b98a
commit b172c29d9a
5 changed files with 116 additions and 2 deletions

View file

@ -0,0 +1,35 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x121.15625 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x105.15625 children: not-inline
BlockContainer <div.wrapper> at (8,8) content-size 270x105.15625 children: not-inline
BlockContainer <div.constrained> at (8,8) content-size 270x105.15625 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 270x105.15625 children: inline
line 0 width: 261.0625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 35, rect: [8,8 261.0625x17.46875]
"hello hello hello hello hello hello"
line 1 width: 261.0625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 37, length: 35, rect: [8,25 261.0625x17.46875]
"hello hello hello hello hello hello"
line 2 width: 261.0625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 73, length: 35, rect: [8,42 261.0625x17.46875]
"hello hello hello hello hello hello"
line 3 width: 261.0625, height: 17.875, bottom: 70.28125, baseline: 13.53125
frag 0 from TextNode start: 109, length: 35, rect: [8,60 261.0625x17.46875]
"hello hello hello hello hello hello"
line 4 width: 261.0625, height: 18.34375, bottom: 88.21875, baseline: 13.53125
frag 0 from TextNode start: 145, length: 35, rect: [8,77 261.0625x17.46875]
"hello hello hello hello hello hello"
line 5 width: 81.6875, height: 17.8125, bottom: 105.15625, baseline: 13.53125
frag 0 from TextNode start: 181, length: 11, rect: [8,95 81.6875x17.46875]
"hello hello"
TextNode <#text>
BlockContainer <div> at (8,113.15625) content-size 270x0 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x121.15625]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x105.15625]
PaintableWithLines (BlockContainer<DIV>.wrapper) [8,8 270x105.15625]
PaintableWithLines (BlockContainer<DIV>.constrained) [8,8 270x105.15625]
PaintableWithLines (BlockContainer(anonymous)) [8,8 270x105.15625]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [8,113.15625 270x0]

View file

@ -0,0 +1,43 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x127.15625 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x111.15625 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 276x111.15625 [BFC] children: not-inline
Box <table> at (8,8) content-size 276x111.15625 table-box [TFC] children: not-inline
Box <tbody> at (8,8) content-size 272x107.15625 table-row-group children: not-inline
Box <tr> at (10,10) content-size 272x107.15625 table-row children: not-inline
BlockContainer <td> at (11,11) content-size 270x105.15625 table-cell [BFC] children: not-inline
BlockContainer <div> at (11,11) content-size 270x105.15625 children: not-inline
BlockContainer <(anonymous)> at (11,11) content-size 270x105.15625 children: inline
line 0 width: 261.0625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 35, rect: [11,11 261.0625x17.46875]
"hello hello hello hello hello hello"
line 1 width: 261.0625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 37, length: 35, rect: [11,28 261.0625x17.46875]
"hello hello hello hello hello hello"
line 2 width: 261.0625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 73, length: 35, rect: [11,45 261.0625x17.46875]
"hello hello hello hello hello hello"
line 3 width: 261.0625, height: 17.875, bottom: 70.28125, baseline: 13.53125
frag 0 from TextNode start: 109, length: 35, rect: [11,63 261.0625x17.46875]
"hello hello hello hello hello hello"
line 4 width: 261.0625, height: 18.34375, bottom: 88.21875, baseline: 13.53125
frag 0 from TextNode start: 145, length: 35, rect: [11,80 261.0625x17.46875]
"hello hello hello hello hello hello"
line 5 width: 81.6875, height: 17.8125, bottom: 105.15625, baseline: 13.53125
frag 0 from TextNode start: 181, length: 11, rect: [11,98 81.6875x17.46875]
"hello hello"
TextNode <#text>
BlockContainer <div> at (11,116.15625) content-size 270x0 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x127.15625]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x111.15625]
PaintableWithLines (TableWrapper(anonymous)) [8,8 276x111.15625]
PaintableBox (Box<TABLE>) [8,8 276x111.15625]
PaintableBox (Box<TBODY>) [8,8 272x107.15625] overflow: [8,8 274x109.15625]
PaintableBox (Box<TR>) [10,10 272x107.15625]
PaintableWithLines (BlockContainer<TD>) [10,10 272x107.15625]
PaintableWithLines (BlockContainer<DIV>) [11,11 270x105.15625]
PaintableWithLines (BlockContainer(anonymous)) [11,11 270x105.15625]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [11,116.15625 270x0]

View file

@ -0,0 +1,8 @@
<!doctype html><style>
* { outline: 1px solid black; }
.constrained { max-width: 270px; }
.wrapper { background: yellow; width: max-content }
</style><body><div class="wrapper"><div class="constrained">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
<div></div></div></div>

View file

@ -0,0 +1,8 @@
<!doctype html><style>
* { outline: 1px solid black; }
div { max-width: 270px; }
table { background: pink; }
</style><body><table><tr><td><div>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
<div>

View file

@ -751,8 +751,28 @@ void BlockFormattingContext::layout_block_level_children(BlockContainer const& b
if (layout_mode == LayoutMode::IntrinsicSizing) {
auto& block_container_state = m_state.get_mutable(block_container);
if (!block_container_state.has_definite_width())
block_container_state.set_content_width(greatest_child_width(block_container));
if (!block_container_state.has_definite_width()) {
auto width = greatest_child_width(block_container);
auto computed_values = block_container.computed_values();
// NOTE: Min and max constraints are not applied to a box that is being sized as intrinsic because
// according to css-sizing-3 spec:
// The min-content size of a box in each axis is the size it would have if it was a float given an
// auto size in that axis (and no minimum or maximum size in that axis) and if its containing block
// was zero-sized in that axis.
if (block_container_state.width_constraint == SizeConstraint::None) {
if (!should_treat_max_width_as_none(block_container, available_space.width)) {
auto max_width = calculate_inner_width(block_container, available_space.width,
computed_values.max_width());
width = min(width, max_width.to_px(block_container));
}
if (!computed_values.min_width().is_auto()) {
auto min_width = calculate_inner_width(block_container, available_space.width,
computed_values.min_width());
width = max(width, min_width.to_px(block_container));
}
}
block_container_state.set_content_width(width);
}
if (!block_container_state.has_definite_height())
block_container_state.set_content_height(bottom_of_lowest_margin_box);
}