Skip to content

Commit

Permalink
LibWeb/Layout: Account for box-sizing in table width/height calculations
Browse files Browse the repository at this point in the history 
Fixes SerenityOS#1726

Fixes
wpt/css/CSS2/abspos/abspos-containing-block-initial-004c.xht
wpt/css/CSS2/abspos/abspos-containing-block-initial-004d.xht
wpt/css/CSS2/abspos/abspos-containing-block-initial-005b.xht
wpt/css/CSS2/abspos/abspos-containing-block-initial-005d.xht

(cherry picked from commit a90b7026fb8939a773a6c5339364ea1a7d508fde)
  • Loading branch information
@stasoid @nico
stasoid authored and nico committed Nov 29, 2024
1 parent 972738c commit 7cb0775
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 39 deletions.
32 changes: 16 additions & 16 deletions Tests/LibWeb/Layout/expected/table/absolute-positioning-alignment.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.container> at (24,24) content-size 500x500 positioned flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (24,199) content-size 100x150 positioned [BFC] children: not-inline
Box <div.table.left> at (27,202) content-size 94x144 table-box [TFC] children: not-inline
TableWrapper <(anonymous)> at (24,196) content-size 106x156 positioned [BFC] children: not-inline
Box <div.table.left> at (27,199) content-size 100x150 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (424,199) content-size 100x150 positioned [BFC] children: not-inline
Box <div.table.right> at (427,202) content-size 94x144 table-box [TFC] children: not-inline
TableWrapper <(anonymous)> at (418,196) content-size 106x156 positioned [BFC] children: not-inline
Box <div.table.right> at (421,199) content-size 100x150 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (199,24) content-size 150x100 positioned [BFC] children: not-inline
Box <div.table.top> at (202,27) content-size 144x94 table-box [TFC] children: not-inline
TableWrapper <(anonymous)> at (196,24) content-size 156x106 positioned [BFC] children: not-inline
Box <div.table.top> at (199,27) content-size 150x100 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (199,424) content-size 150x100 positioned [BFC] children: not-inline
Box <div.table.bottom> at (202,427) content-size 144x94 table-box [TFC] children: not-inline
TableWrapper <(anonymous)> at (196,418) content-size 156x106 positioned [BFC] children: not-inline
Box <div.table.bottom> at (199,421) content-size 150x100 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (16,532) content-size 768x0 children: inline
Expand All @@ -27,12 +27,12 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [5,5 790x538]
PaintableWithLines (BlockContainer<BODY>) [13,13 774x522]
PaintableBox (Box<DIV>.container) [21,21 506x506]
PaintableWithLines (TableWrapper(anonymous)) [24,199 100x150]
PaintableBox (Box<DIV>.table.left) [24,199 100x150]
PaintableWithLines (TableWrapper(anonymous)) [424,199 100x150]
PaintableBox (Box<DIV>.table.right) [424,199 100x150]
PaintableWithLines (TableWrapper(anonymous)) [199,24 150x100]
PaintableBox (Box<DIV>.table.top) [199,24 150x100]
PaintableWithLines (TableWrapper(anonymous)) [199,424 150x100]
PaintableBox (Box<DIV>.table.bottom) [199,424 150x100]
PaintableWithLines (TableWrapper(anonymous)) [24,196 106x156]
PaintableBox (Box<DIV>.table.left) [24,196 106x156]
PaintableWithLines (TableWrapper(anonymous)) [418,196 106x156]
PaintableBox (Box<DIV>.table.right) [418,196 106x156]
PaintableWithLines (TableWrapper(anonymous)) [196,24 156x106]
PaintableBox (Box<DIV>.table.top) [196,24 156x106]
PaintableWithLines (TableWrapper(anonymous)) [196,418 156x106]
PaintableBox (Box<DIV>.table.bottom) [196,418 156x106]
PaintableWithLines (BlockContainer(anonymous)) [16,532 768x0]
11 changes: 11 additions & 0 deletions Tests/LibWeb/Layout/expected/table/display-table-size.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 50x50 [BFC] children: not-inline
Box <div> at (18,18) content-size 30x30 table-box [TFC] children: not-inline

ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x66]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x50]
PaintableWithLines (TableWrapper(anonymous)) [8,8 50x50]
PaintableBox (Box<DIV>) [8,8 50x50]
38 changes: 19 additions & 19 deletions Tests/LibWeb/Layout/expected/table/table-header-and-footer-groups.txt
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x216 [BFC] children: not-inline
TableWrapper <(anonymous)> at (9,9) content-size 300x200 [BFC] children: not-inline
Box <body.table> at (10,10) content-size 298x198 table-box [TFC] children: not-inline
Box <div.bottom> at (10,10) content-size 298x99 table-footer-group children: inline
Box <(anonymous)> at (10,10) content-size 298x99 table-row children: inline
BlockContainer <(anonymous)> at (10,10) content-size 298x17 table-cell [BFC] children: inline
BlockContainer <html> at (1,1) content-size 798x218 [BFC] children: not-inline
TableWrapper <(anonymous)> at (9,9) content-size 302x202 [BFC] children: not-inline
Box <body.table> at (10,10) content-size 300x200 table-box [TFC] children: not-inline
Box <div.bottom> at (10,10) content-size 300x100 table-footer-group children: inline
Box <(anonymous)> at (10,10) content-size 300x100 table-row children: inline
BlockContainer <(anonymous)> at (10,10) content-size 300x17 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [10,10 56.109375x17] baseline: 13.296875
"bottom"
TextNode <#text>
Box <div.top> at (10,109) content-size 298x99 table-header-group children: inline
Box <(anonymous)> at (10,109) content-size 298x99 table-row children: inline
BlockContainer <(anonymous)> at (10,109) content-size 298x17 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [10,109 26.640625x17] baseline: 13.296875
Box <div.top> at (10,110) content-size 300x100 table-header-group children: inline
Box <(anonymous)> at (10,110) content-size 300x100 table-row children: inline
BlockContainer <(anonymous)> at (10,110) content-size 300x17 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [10,110 26.640625x17] baseline: 13.296875
"top"
TextNode <#text>

ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x218]
PaintableWithLines (TableWrapper(anonymous)) [9,9 300x200]
PaintableBox (Box<BODY>.table) [9,9 300x200]
PaintableBox (Box<DIV>.bottom) [10,10 298x99]
PaintableBox (Box(anonymous)) [10,10 298x99]
PaintableWithLines (BlockContainer(anonymous)) [10,10 298x99]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x220]
PaintableWithLines (TableWrapper(anonymous)) [9,9 302x202]
PaintableBox (Box<BODY>.table) [9,9 302x202]
PaintableBox (Box<DIV>.bottom) [10,10 300x100]
PaintableBox (Box(anonymous)) [10,10 300x100]
PaintableWithLines (BlockContainer(anonymous)) [10,10 300x100]
TextPaintable (TextNode<#text>)
PaintableBox (Box<DIV>.top) [10,109 298x99]
PaintableBox (Box(anonymous)) [10,109 298x99]
PaintableWithLines (BlockContainer(anonymous)) [10,109 298x99]
PaintableBox (Box<DIV>.top) [10,110 300x100]
PaintableBox (Box(anonymous)) [10,110 300x100]
PaintableWithLines (BlockContainer(anonymous)) [10,110 300x100]
TextPaintable (TextNode<#text>)
2 changes: 2 additions & 0 deletions Tests/LibWeb/Layout/input/table/display-table-size.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<!doctype html>
<div style="width:30px; height:30px; border:10px solid black; display:table;">
13 changes: 9 additions & 4 deletions Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -516,8 +516,10 @@ void TableFormattingContext::compute_table_width()
// resolved-table-width) other than auto, the used width is the greater
// of resolved-table-width, and the used min-width of the table.
CSSPixels resolved_table_width = computed_values.width().to_px(table_box(), width_of_table_wrapper_containing_block);
// Since used_width is content width, we need to subtract the border spacing from the specified width for a consistent comparison.
used_width = max(resolved_table_width - table_box_state.border_box_left() - table_box_state.border_box_right(), used_min_width);
// Since used_width is content width, we need to subtract the border and padding spacing from the specified width for a consistent comparison.
if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox)
resolved_table_width -= table_box_state.border_box_left() + table_box_state.border_box_right();
used_width = max(resolved_table_width, used_min_width);
if (!should_treat_max_width_as_none(table_box(), m_available_space->width))
used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
}
Expand Down Expand Up @@ -912,8 +914,11 @@ void TableFormattingContext::compute_table_height()
// ends up smaller than this number.
CSSPixels height_of_table_containing_block = m_state.get(*table_wrapper().containing_block()).content_height();
auto specified_table_height = table_box().computed_values().height().to_px(table_box(), height_of_table_containing_block);
auto const& table_state = m_state.get(table_box());
m_table_height = max(m_table_height, specified_table_height - table_state.border_box_top() - table_state.border_box_bottom());
if (table_box().computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
auto const& table_state = m_state.get(table_box());
specified_table_height -= table_state.border_box_top() + table_state.border_box_bottom();
}
m_table_height = max(m_table_height, specified_table_height);
}

for (auto& row : m_rows) {
Expand Down

0 comments on commit 7cb0775

Please sign in to comment.