mirror of
https://github.com/SerenityOS/serenity
synced 2024-10-15 12:23:15 +00:00
LibWeb: Don't distribute excess width to constrained columns
Bring our implementation closer to the specification, which distributes excess width to unconstrained columns first.
This commit is contained in:
parent
6bd4d44f73
commit
9cb4fe6a6f
|
@ -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>
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue