mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 08:37:46 +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
Andreas Kling
parent
9258d7b98a
commit
b172c29d9a
5 changed files with 116 additions and 2 deletions
|
|
@ -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]
|
||||
43
Tests/LibWeb/Layout/expected/table/cell-with-max-width.txt
Normal file
43
Tests/LibWeb/Layout/expected/table/cell-with-max-width.txt
Normal 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]
|
||||
|
|
@ -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>
|
||||
8
Tests/LibWeb/Layout/input/table/cell-with-max-width.html
Normal file
8
Tests/LibWeb/Layout/input/table/cell-with-max-width.html
Normal 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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue