system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 10:36:24 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Don't distribute excess width to constrained columns

Browse source 
Bring our implementation closer to the specification, which distributes
excess width to unconstrained columns first.
This commit is contained in:
Andi Gallo 2023-06-28 03:06:03 +00:00 committed by Andreas Kling
parent 6bd4d44f73
commit 9cb4fe6a6f
4 changed files with 49 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Tests/LibWeb/Layout/expected/table/width-distribution-and-constrained-columns.txt Normal file
View file

@ -0,0 +1,27 @@
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 420x27.46875 [BFC] children: not-inline
Box <table> at (9,9) content-size 418x25.46875 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tbody> at (9,9) content-size 412x21.46875 table-row-group children: not-inline
Box <tr> at (11,11) content-size 412x21.46875 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (13,13) content-size 14.265625x17.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 (33.265625,13) content-size 389.734375x17.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: [33.265625,13 9.34375x17.46875]
"B"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>

6
Tests/LibWeb/Layout/input/table/width-distribution-and-constrained-columns.html Normal file
View file

@ -0,0 +1,6 @@
<table style="width:420px;border:1px solid;">
<tr>
<td style="border:1px solid; width:1px">A</td>
<td style="border:1px solid">B</td>
</tr>
</table>

15
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
View file

@ -211,6 +211,8 @@ void TableFormattingContext::compute_cell_measures(AvailableSpace const& availab
m_columns[cell.column_index].percentage_width = max(m_columns[cell.column_index].percentage_width, computed_values.width().percentage().value());
} else {
m_columns[cell.column_index].type = SizeType::Pixel;
if (computed_values.width().is_length())
m_columns[cell.column_index].is_constrained = true;
}
auto cell_intrinsic_height_offsets = padding_top + padding_bottom + border_top + border_bottom;
@ -508,24 +510,35 @@ void TableFormattingContext::distribute_width_to_columns()
expand_columns_to_fill_available_width(SizeType::Percent);
}
// Implements steps 1 and 2 of https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns
// FIXME: Implement steps 3-5 as well, which distribute excess width to constrained columns.
if (columns_total_used_width() < available_width) {
// NOTE: if all columns got their max width and there is still width to distribute left
// it should be assigned to columns proportionally to their max width
CSSPixels grid_max = 0.0f;
size_t unconstrained_column_count = 0;
for (auto& column : m_columns) {
if (column.is_constrained) {
continue;
}
grid_max += column.max_size;
++unconstrained_column_count;
}
auto width_to_distribute = available_width - columns_total_used_width();
if (grid_max == 0) {
// If total max width of columns is zero then divide distributable width equally among them
auto column_width = width_to_distribute / m_columns.size();
auto column_width = width_to_distribute / unconstrained_column_count;
for (auto& column : m_columns) {
if (column.is_constrained)
continue;
column.used_width = column_width;
}
} else {
// Distribute width to columns proportionally to their max width
for (auto& column : m_columns) {
if (column.is_constrained)
continue;
column.used_width += width_to_distribute * column.max_size / grid_max;
}
}

2
Userland/Libraries/LibWeb/Layout/TableFormattingContext.h
View file

@ -69,6 +69,8 @@ private:
CSSPixels max_size { 0 };
CSSPixels used_width { 0 };
double percentage_width { 0 };
// Store whether the column is constrained: https://www.w3.org/TR/css-tables-3/#constrainedness
bool is_constrained { false };
};
struct Row {