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.
This commit is contained in:
Andi Gallo
Alexander Kalenik
parent
d32bf4cd41
commit
7b0b501418
Notes:
sideshowbarker
2024-07-17 07:43:44 +09:00
Author: https://github.com/axgallo Commit: https://github.com/SerenityOS/serenity/commit/7b0b501418 Pull-request: https://github.com/SerenityOS/serenity/pull/20376
5 changed files with 99 additions and 34 deletions
|
|
@ -1,33 +1,33 @@
|
|||
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 784x22.46875 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 88.328125x22.46875 [BFC] children: not-inline
|
||||
Box <table> 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 <table> at (9,9) content-size 87x20.46875 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tbody> at (9,9) content-size 86.328125x20.46875 table-row-group children: not-inline
|
||||
Box <tbody> at (9,9) content-size 86.984375x20.46875 table-row-group children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (9,9) content-size 86.328125x20.46875 table-row children: not-inline
|
||||
Box <tr> at (9,9) content-size 86.984375x20.46875 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (10.5,10.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline
|
||||
BlockContainer <td> 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 <td> at (27.765625,10.5) content-size 48.796875x17.46875 table-cell [BFC] children: inline
|
||||
BlockContainer <td> 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 <td> at (79.5625,10.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline
|
||||
BlockContainer <td> 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<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x22.46875]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 88.328125x22.46875]
|
||||
PaintableBox (Box<TABLE>) [8,8 88.328125x22.46875]
|
||||
PaintableBox (Box<TBODY>) [9,9 86.328125x20.46875]
|
||||
PaintableBox (Box<TR>) [9,9 86.328125x20.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [9,9 17.265625x20.46875]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 89x22.46875]
|
||||
PaintableBox (Box<TABLE>) [8,8 89x22.46875]
|
||||
PaintableBox (Box<TBODY>) [9,9 86.984375x20.46875]
|
||||
PaintableBox (Box<TR>) [9,9 86.984375x20.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [9,9 17.390625x20.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [26.265625,9 51.796875x20.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [26.390625,9 52.203125x20.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [78.0625,9 17.265625x20.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [78.59375,9 17.390625x20.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
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 784x20.46875 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 116x20.46875 [BFC] children: not-inline
|
||||
Box <table> at (8,8) content-size 116x20.46875 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tbody> at (8,8) content-size 115.984375x20.46875 table-row-group children: not-inline
|
||||
Box <tr> at (8,8) content-size 115.984375x20.46875 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> 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 <td> 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 <td> 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<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x20.46875]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 116x20.46875]
|
||||
PaintableBox (Box<TABLE>) [8,8 116x20.46875]
|
||||
PaintableBox (Box<TBODY>) [8,8 115.984375x20.46875]
|
||||
PaintableBox (Box<TR>) [8,8 115.984375x20.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [8,8 34.796875x20.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [42.796875,8 46.390625x20.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [89.1875,8 34.796875x20.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
@ -1,31 +1,31 @@
|
|||
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 784x27.46875 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 93.328125x27.46875 [BFC] children: not-inline
|
||||
Box <table> 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 <table> at (9,9) content-size 92x25.46875 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tbody> at (9,9) content-size 83.3125x21.46875 table-row-group children: not-inline
|
||||
Box <tr> at (11,11) content-size 83.3125x21.46875 table-row children: not-inline
|
||||
Box <tbody> at (9,9) content-size 83.984375x21.46875 table-row-group children: not-inline
|
||||
Box <tr> at (11,11) content-size 83.984375x21.46875 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (13,13) content-size 18.03125x17.46875 table-cell [BFC] children: inline
|
||||
BlockContainer <td> 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 <td> at (37.03125,13) content-size 36.859375x17.46875 table-cell [BFC] children: inline
|
||||
BlockContainer <td> 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 <td> at (79.890625,13) content-size 16.421875x17.46875 table-cell [BFC] children: inline
|
||||
BlockContainer <td> 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<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x27.46875]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 93.328125x27.46875]
|
||||
PaintableBox (Box<TABLE>) [8,8 93.328125x27.46875]
|
||||
PaintableBox (Box<TBODY>) [9,9 83.3125x21.46875] overflow: [9,9 89.3125x23.46875]
|
||||
PaintableBox (Box<TR>) [11,11 83.3125x21.46875] overflow: [11,11 87.3125x21.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [11,11 22.03125x21.46875]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 94x27.46875]
|
||||
PaintableBox (Box<TABLE>) [8,8 94x27.46875]
|
||||
PaintableBox (Box<TBODY>) [9,9 83.984375x21.46875] overflow: [9,9 89.984375x23.46875]
|
||||
PaintableBox (Box<TR>) [11,11 83.984375x21.46875] overflow: [11,11 87.984375x21.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [11,11 22.09375x21.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [35.03125,11 40.859375x21.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [35.09375,11 41.265625x21.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [77.890625,11 20.421875x21.46875]
|
||||
PaintableWithLines (BlockContainer<TD>) [78.359375,11 20.625x21.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td style="width: 30%;">A B</td>
|
||||
<td style="width: 40%;">C</td>
|
||||
<td style="width: 30%;">D</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue