LibWeb: Use available space to resolve table container width

Using avilable space directly while resolving table container width
allows to avoid assigning it to table wrapper box content width which
sometimes involves infinite (saturated) values.

Also this allows to get rid of set_max_content_width() which is a hack
that allows to bypass set_content_width() to assign infinite
(saturated) width to a box.

Closes https://github.com/SerenityOS/serenity/issues/19521
This commit is contained in:
Aliaksandr Kalenik 2023-08-11 18:02:23 +02:00 committed by Andreas Kling
parent fb60db7b00
commit 9101c8d079
Notes: sideshowbarker 2024-07-17 08:42:05 +09:00
7 changed files with 42 additions and 35 deletions

View file

@ -2,14 +2,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x113.15625 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 784x113.15625 [BFC] children: not-inline
Box <table.ambox> at (9,9) content-size 784x111.15625 table-box [TFC] children: not-inline
Box <table.ambox> at (9,9) content-size 782x111.15625 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tbody> at (9,9) content-size 778x107.15625 table-row-group children: not-inline
Box <tr> at (11,11) content-size 778x107.15625 table-row children: not-inline
Box <tbody> at (9,9) content-size 776x107.15625 table-row-group children: not-inline
Box <tr> at (11,11) content-size 776x107.15625 table-row children: not-inline
BlockContainer <td.mbox-image> at (12,39.578125) content-size 50x50 table-cell [BFC] children: not-inline
BlockContainer <div.mbox-image-div> at (12,39.578125) content-size 50x50 children: not-inline
BlockContainer <td.mbox-text> at (66,12) content-size 724x105.15625 table-cell [BFC] children: inline
BlockContainer <td.mbox-text> at (66,12) content-size 722x105.15625 table-cell [BFC] children: inline
line 0 width: 689.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 84, rect: [66,12 689.640625x17.46875]
"In a scene set in a lawyer's office, the lawyer sits alone and bounces a rubber ball"
@ -32,12 +32,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
PaintableWithLines (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x113.15625] overflow: [8,8 786x113.15625]
PaintableWithLines (TableWrapper(anonymous)) [8,8 784x113.15625] overflow: [8,8 786x113.15625]
PaintableBox (Box<TABLE>.ambox) [8,8 786x113.15625]
PaintableBox (Box<TBODY>) [9,9 778x107.15625] overflow: [9,9 782x109.15625]
PaintableBox (Box<TR>) [11,11 778x107.15625] overflow: [11,11 780x107.15625]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x113.15625]
PaintableWithLines (TableWrapper(anonymous)) [8,8 784x113.15625]
PaintableBox (Box<TABLE>.ambox) [8,8 784x113.15625]
PaintableBox (Box<TBODY>) [9,9 776x107.15625] overflow: [9,9 780x109.15625]
PaintableBox (Box<TR>) [11,11 776x107.15625] overflow: [11,11 778x107.15625]
PaintableWithLines (BlockContainer<TD>.mbox-image) [11,11 52x107.15625]
PaintableWithLines (BlockContainer<DIV>.mbox-image-div) [12,39.578125 50x50]
PaintableWithLines (BlockContainer<TD>.mbox-text) [65,11 726x107.15625]
PaintableWithLines (BlockContainer<TD>.mbox-text) [65,11 724x107.15625]
TextPaintable (TextNode<#text>)

View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 0x0 [BFC] children: not-inline
Box <div#box1> at (8,8) content-size 0x0 table-box [TFC] children: not-inline
Box <(anonymous)> at (8,8) content-size 0x0 table-row children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 table-cell [BFC] children: not-inline
BlockContainer <div> at (8,8) content-size 0x0 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 0x0 [BFC] children: not-inline
Box <div#box2> at (8,8) content-size 0x0 table-box [TFC] children: not-inline
PaintableWithLines (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
PaintableWithLines (TableWrapper(anonymous)) [8,8 0x0]
PaintableBox (Box<DIV>#box1) [8,8 0x0]
PaintableBox (Box(anonymous)) [8,8 0x0]
PaintableWithLines (BlockContainer(anonymous)) [8,8 0x0]
PaintableWithLines (BlockContainer<DIV>) [8,8 0x0]
PaintableWithLines (TableWrapper(anonymous)) [8,8 0x0]
PaintableBox (Box<DIV>#box2) [8,8 0x0]

View file

@ -0,0 +1,10 @@
<!DOCTYPE html><html><head><style>
#box1 {
display: table;
}
#box2 {
display: table;
padding: 100%;
}
</style></head><body><div id="box1"><div><div id="box2">

View file

@ -421,14 +421,6 @@ CSSPixels BlockFormattingContext::compute_table_box_width_inside_table_wrapper(B
auto available_width = width_of_containing_block - margin_left.to_px(box) - margin_right.to_px(box);
LayoutState throwaway_state(&m_state);
if (available_space.width.is_definite())
throwaway_state.get_mutable(box).set_content_width(available_width);
else if (available_space.width.is_min_content())
throwaway_state.get_mutable(box).set_min_content_width();
else {
VERIFY(available_space.width.is_max_content());
throwaway_state.get_mutable(box).set_max_content_width();
}
auto context = create_independent_formatting_context_if_needed(throwaway_state, box);
VERIFY(context);
context->run(box, LayoutMode::IntrinsicSizing, m_state.get(box).available_inner_space_or_constraints_from(available_space));

View file

@ -426,18 +426,4 @@ void LayoutState::UsedValues::set_indefinite_content_height()
m_has_definite_height = false;
}
void LayoutState::UsedValues::set_min_content_width()
{
width_constraint = SizeConstraint::MinContent;
m_content_width = 0;
m_has_definite_height = false;
}
void LayoutState::UsedValues::set_max_content_width()
{
width_constraint = SizeConstraint::MaxContent;
m_content_width = INFINITY;
m_has_definite_width = false;
}
}

View file

@ -51,8 +51,6 @@ struct LayoutState {
void set_indefinite_content_width();
void set_indefinite_content_height();
void set_min_content_width();
void set_max_content_width();
// NOTE: These are used by FlexFormattingContext to assign a temporary main size to items
// early on, so that descendants have something to resolve percentages against.

View file

@ -567,7 +567,7 @@ void TableFormattingContext::compute_table_width()
auto& computed_values = table_box().computed_values();
CSSPixels width_of_table_containing_block = m_state.get(*table_box().containing_block()).content_width();
CSSPixels width_of_table_containing_block = m_available_space->width.to_px();
// Percentages on 'width' and 'height' on the table are relative to the table wrapper box's containing block,
// not the table wrapper box itself.