From 7b0b5014187deb4d5a36f859f07156c2a24a288c Mon Sep 17 00:00:00 2001 From: Andi Gallo Date: Fri, 4 Aug 2023 23:09:02 +0000 Subject: [PATCH] LibWeb: Improve adjustment of automatic table width with percentages Use the max-width of percentage cells instead of min-width as the reference to be used to compute the total table width. The specification only suggests that the UA should try to satisfy percentage constraints and this behavior is more consistent with other browsers. --- .../table/percentage-width-columns.txt | 34 ++++++------- .../percentage-width-max-width-columns.txt | 48 +++++++++++++++++++ ...percentage-column-widths-less-than-100.txt | 32 ++++++------- .../percentage-width-max-width-columns.html | 17 +++++++ .../LibWeb/Layout/TableFormattingContext.cpp | 2 +- 5 files changed, 99 insertions(+), 34 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/table/percentage-width-max-width-columns.txt create mode 100644 Tests/LibWeb/Layout/input/table/percentage-width-max-width-columns.html diff --git a/Tests/LibWeb/Layout/expected/table/percentage-width-columns.txt b/Tests/LibWeb/Layout/expected/table/percentage-width-columns.txt index 0c3bc56baa..f986eb5ae0 100644 --- a/Tests/LibWeb/Layout/expected/table/percentage-width-columns.txt +++ b/Tests/LibWeb/Layout/expected/table/percentage-width-columns.txt @@ -1,33 +1,33 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer at (8,8) content-size 784x22.46875 children: not-inline - TableWrapper <(anonymous)> at (8,8) content-size 88.328125x22.46875 [BFC] children: not-inline - Box at (9,9) content-size 86.328125x20.46875 table-box [TFC] children: not-inline + TableWrapper <(anonymous)> at (8,8) content-size 89x22.46875 [BFC] children: not-inline + Box
at (9,9) content-size 87x20.46875 table-box [TFC] children: not-inline BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - Box at (9,9) content-size 86.328125x20.46875 table-row-group children: not-inline + Box at (9,9) content-size 86.984375x20.46875 table-row-group children: not-inline BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - Box at (9,9) content-size 86.328125x20.46875 table-row children: not-inline + Box at (9,9) content-size 86.984375x20.46875 table-row children: not-inline BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer
at (10.5,10.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline + BlockContainer at (10.5,10.5) content-size 14.390625x17.46875 table-cell [BFC] children: inline line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [10.5,10.5 14.265625x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [10.5625,10.5 14.265625x17.46875] "A" TextNode <#text> BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer at (27.765625,10.5) content-size 48.796875x17.46875 table-cell [BFC] children: inline + BlockContainer at (27.890625,10.5) content-size 49.203125x17.46875 table-cell [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [47.484375,10.5 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [47.8125,10.5 9.34375x17.46875] "B" TextNode <#text> BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer at (79.5625,10.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline + BlockContainer at (80.09375,10.5) content-size 14.390625x17.46875 table-cell [BFC] children: inline line 0 width: 10.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [81.53125,10.5 10.3125x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [82.125,10.5 10.3125x17.46875] "C" TextNode <#text> BlockContainer <(anonymous)> (not painted) children: inline @@ -40,13 +40,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline PaintableWithLines (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [0,0 800x600] PaintableWithLines (BlockContainer) [8,8 784x22.46875] - PaintableWithLines (TableWrapper(anonymous)) [8,8 88.328125x22.46875] - PaintableBox (Box) [8,8 88.328125x22.46875] - PaintableBox (Box) [9,9 86.328125x20.46875] - PaintableBox (Box) [9,9 86.328125x20.46875] - PaintableWithLines (BlockContainer
) [9,9 17.265625x20.46875] + PaintableWithLines (TableWrapper(anonymous)) [8,8 89x22.46875] + PaintableBox (Box) [8,8 89x22.46875] + PaintableBox (Box) [9,9 86.984375x20.46875] + PaintableBox (Box) [9,9 86.984375x20.46875] + PaintableWithLines (BlockContainer
) [9,9 17.390625x20.46875] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer) [26.265625,9 51.796875x20.46875] + PaintableWithLines (BlockContainer) [26.390625,9 52.203125x20.46875] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer) [78.0625,9 17.265625x20.46875] + PaintableWithLines (BlockContainer) [78.59375,9 17.390625x20.46875] TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/expected/table/percentage-width-max-width-columns.txt b/Tests/LibWeb/Layout/expected/table/percentage-width-max-width-columns.txt new file mode 100644 index 0000000000..24552d4ece --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/percentage-width-max-width-columns.txt @@ -0,0 +1,48 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x20.46875 children: not-inline + TableWrapper <(anonymous)> at (8,8) content-size 116x20.46875 [BFC] children: not-inline + Box at (8,8) content-size 116x20.46875 table-box [TFC] children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + Box at (8,8) content-size 115.984375x20.46875 table-row-group children: not-inline + Box at (8,8) content-size 115.984375x20.46875 table-row children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer
at (9.5,9.5) content-size 31.796875x17.46875 table-cell [BFC] children: inline + line 0 width: 31.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 3, rect: [9.5,9.5 31.609375x17.46875] + "A B" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer at (44.296875,9.5) content-size 43.390625x17.46875 table-cell [BFC] children: inline + line 0 width: 10.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 1, rect: [44.296875,9.5 10.3125x17.46875] + "C" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer at (90.6875,9.5) content-size 31.796875x17.46875 table-cell [BFC] children: inline + line 0 width: 11.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 1, rect: [90.6875,9.5 11.140625x17.46875] + "D" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + +PaintableWithLines (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x600] + PaintableWithLines (BlockContainer) [8,8 784x20.46875] + PaintableWithLines (TableWrapper(anonymous)) [8,8 116x20.46875] + PaintableBox (Box) [8,8 116x20.46875] + PaintableBox (Box) [8,8 115.984375x20.46875] + PaintableBox (Box) [8,8 115.984375x20.46875] + PaintableWithLines (BlockContainer
) [8,8 34.796875x20.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer) [42.796875,8 46.390625x20.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer) [89.1875,8 34.796875x20.46875] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt b/Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt index 4a02ed4a87..3254354297 100644 --- a/Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt +++ b/Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt @@ -1,31 +1,31 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer at (8,8) content-size 784x27.46875 children: not-inline - TableWrapper <(anonymous)> at (8,8) content-size 93.328125x27.46875 [BFC] children: not-inline - Box at (9,9) content-size 91.328125x25.46875 table-box [TFC] children: not-inline + TableWrapper <(anonymous)> at (8,8) content-size 94x27.46875 [BFC] children: not-inline + Box
at (9,9) content-size 92x25.46875 table-box [TFC] children: not-inline BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - Box at (9,9) content-size 83.3125x21.46875 table-row-group children: not-inline - Box at (11,11) content-size 83.3125x21.46875 table-row children: not-inline + Box at (9,9) content-size 83.984375x21.46875 table-row-group children: not-inline + Box at (11,11) content-size 83.984375x21.46875 table-row children: not-inline BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer
at (13,13) content-size 18.03125x17.46875 table-cell [BFC] children: inline + BlockContainer at (13,13) content-size 18.09375x17.46875 table-cell [BFC] children: inline line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [13,13 14.265625x17.46875] "A" TextNode <#text> BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer at (37.03125,13) content-size 36.859375x17.46875 table-cell [BFC] children: inline + BlockContainer at (37.09375,13) content-size 37.265625x17.46875 table-cell [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [37.03125,13 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [37.09375,13 9.34375x17.46875] "B" TextNode <#text> BlockContainer <(anonymous)> (not painted) children: inline TextNode <#text> - BlockContainer at (79.890625,13) content-size 16.421875x17.46875 table-cell [BFC] children: inline + BlockContainer at (80.359375,13) content-size 16.625x17.46875 table-cell [BFC] children: inline line 0 width: 10.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [79.890625,13 10.3125x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [80.359375,13 10.3125x17.46875] "C" TextNode <#text> BlockContainer <(anonymous)> (not painted) children: inline @@ -36,13 +36,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline PaintableWithLines (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [0,0 800x600] PaintableWithLines (BlockContainer) [8,8 784x27.46875] - PaintableWithLines (TableWrapper(anonymous)) [8,8 93.328125x27.46875] - PaintableBox (Box) [8,8 93.328125x27.46875] - PaintableBox (Box) [9,9 83.3125x21.46875] overflow: [9,9 89.3125x23.46875] - PaintableBox (Box) [11,11 83.3125x21.46875] overflow: [11,11 87.3125x21.46875] - PaintableWithLines (BlockContainer
) [11,11 22.03125x21.46875] + PaintableWithLines (TableWrapper(anonymous)) [8,8 94x27.46875] + PaintableBox (Box) [8,8 94x27.46875] + PaintableBox (Box) [9,9 83.984375x21.46875] overflow: [9,9 89.984375x23.46875] + PaintableBox (Box) [11,11 83.984375x21.46875] overflow: [11,11 87.984375x21.46875] + PaintableWithLines (BlockContainer
) [11,11 22.09375x21.46875] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer) [35.03125,11 40.859375x21.46875] + PaintableWithLines (BlockContainer) [35.09375,11 41.265625x21.46875] TextPaintable (TextNode<#text>) - PaintableWithLines (BlockContainer) [77.890625,11 20.421875x21.46875] + PaintableWithLines (BlockContainer) [78.359375,11 20.625x21.46875] TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/table/percentage-width-max-width-columns.html b/Tests/LibWeb/Layout/input/table/percentage-width-max-width-columns.html new file mode 100644 index 0000000000..d2c47521fd --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/percentage-width-max-width-columns.html @@ -0,0 +1,17 @@ + + + + + + + + +
A BCD
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp index 3d55d81181..39ec7d44bb 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp @@ -598,7 +598,7 @@ void TableFormattingContext::compute_table_width() for (auto& cell : m_cells) { auto const& cell_width = cell.box->computed_values().width(); if (cell_width.is_percentage()) { - adjusted_used_width = 100 / cell_width.percentage().value() * cell.outer_min_width; + adjusted_used_width = ceil(100 / cell_width.percentage().value() * cell.outer_max_width.to_double()); used_width = min(max(used_width, adjusted_used_width), width_of_table_containing_block); } }