mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-22 09:21:57 -05:00
LibWeb/Layout: Account for box-sizing in table width/height calculations
Fixes #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)
This commit is contained in:
stasoid
Nico Weber
parent
0b198ecb54
commit
eb60c2eea1
5 changed files with 57 additions and 39 deletions
|
|
@ -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
|
||||
|
|
@ -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
Tests/LibWeb/Layout/expected/table/display-table-size.txt
Normal file
11
Tests/LibWeb/Layout/expected/table/display-table-size.txt
Normal file
|
|
@ -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]
|
||||
|
|
@ -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
Tests/LibWeb/Layout/input/table/display-table-size.html
Normal file
2
Tests/LibWeb/Layout/input/table/display-table-size.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<!doctype html>
|
||||
<div style="width:30px; height:30px; border:10px solid black; display:table;">
|
||||
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue