mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-30 08:41:15 +00:00
LibWeb: Some row span fixes when combined with nested tables
Add logic to compute {min, max}-height and use min-height when
calculating table height, per specifications.
Fixes some issues with phylogenetic tree visualizations on Wikipedia.
This commit is contained in:
Andi Gallo
Andreas Kling
parent
75e87c32f2
commit
6a7a7e2337
Notes:
sideshowbarker
2024-07-17 07:20:49 +09:00
Author: https://github.com/axgallo Commit: https://github.com/SerenityOS/serenity/commit/6a7a7e2337 Pull-request: https://github.com/SerenityOS/serenity/pull/19319 Reviewed-by: https://github.com/kalenikaliaksandr ✅
|
|
@ -0,0 +1,94 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120.40625 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <body> at (8,8) content-size 784x104.40625 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 59.828125x104.40625 [BFC] children: not-inline
|
||||
Box <table> at (9,9) content-size 57.828125x102.40625 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tbody> at (9,9) content-size 57.828125x102.40625 table-row-group children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (9,9) content-size 57.828125x51.203125 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (15,25.867187) content-size 11.5625x17.46875 table-cell [BFC] children: inline
|
||||
line 0 width: 11.5625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [15,25.867187 11.5625x17.46875]
|
||||
"X"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (38.5625,15) content-size 22.265625x90.40625 table-cell [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (38.5625,15) content-size 22.265625x0 children: inline
|
||||
TextNode <#text>
|
||||
TableWrapper <(anonymous)> at (38.5625,15) content-size 22.265625x90.40625 [BFC] children: not-inline
|
||||
Box <table> at (39.5625,16) content-size 24.265625x88.40625 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tbody> at (39.5625,16) content-size 26.265625x88.40625 table-row-group children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (39.5625,16) content-size 26.265625x29.46875 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (45.5625,22) 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: [45.5625,22 14.265625x17.46875]
|
||||
"A"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (39.5625,45.46875) content-size 26.265625x29.46875 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (45.5625,51.46875) content-size 14.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: [45.5625,51.46875 9.34375x17.46875]
|
||||
"B"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (39.5625,74.9375) content-size 26.265625x29.46875 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (45.5625,80.9375) content-size 14.265625x17.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: [45.5625,80.9375 10.3125x17.46875]
|
||||
"C"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (38.5625,105.40625) content-size 22.265625x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
Box <tr> at (9,60.203125) content-size 57.828125x51.203125 table-row children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <td> at (15,77.070312) content-size 11.5625x17.46875 table-cell [BFC] children: inline
|
||||
line 0 width: 11.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [15,77.070312 11.09375x17.46875]
|
||||
"Y"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112.40625) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Rowspan interaction with nested tables</title>
|
||||
|
||||
<style>
|
||||
table {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid blue;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>X</td>
|
||||
<td rowspan="2">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Y</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -152,107 +152,140 @@ void TableFormattingContext::calculate_row_column_grid(Box const& box)
|
|||
m_columns.resize(x_width);
|
||||
}
|
||||
|
||||
void TableFormattingContext::compute_table_measures()
|
||||
void TableFormattingContext::compute_cell_measures(AvailableSpace const& available_space)
|
||||
{
|
||||
size_t max_cell_column_span = 1;
|
||||
auto const& containing_block = m_state.get(*table_wrapper().containing_block());
|
||||
|
||||
for (auto& cell : m_cells) {
|
||||
auto width_of_containing_block = m_state.get(*table_wrapper().containing_block()).content_width();
|
||||
auto& computed_values = cell.box->computed_values();
|
||||
CSSPixels padding_left = computed_values.padding().left().to_px(cell.box, width_of_containing_block);
|
||||
CSSPixels padding_right = computed_values.padding().right().to_px(cell.box, width_of_containing_block);
|
||||
auto const& computed_values = cell.box->computed_values();
|
||||
CSSPixels padding_top = computed_values.padding().top().to_px(cell.box, containing_block.content_height());
|
||||
CSSPixels padding_bottom = computed_values.padding().bottom().to_px(cell.box, containing_block.content_height());
|
||||
CSSPixels padding_left = computed_values.padding().left().to_px(cell.box, containing_block.content_width());
|
||||
CSSPixels padding_right = computed_values.padding().right().to_px(cell.box, containing_block.content_width());
|
||||
|
||||
auto const& cell_state = m_state.get(cell.box);
|
||||
auto is_collapse = cell.box->computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
|
||||
CSSPixels border_top = is_collapse ? cell_state.border_top : computed_values.border_top().width;
|
||||
CSSPixels border_bottom = is_collapse ? cell_state.border_bottom : computed_values.border_bottom().width;
|
||||
CSSPixels border_left = is_collapse ? cell_state.border_left : computed_values.border_left().width;
|
||||
CSSPixels border_right = is_collapse ? cell_state.border_right : computed_values.border_right().width;
|
||||
|
||||
CSSPixels width = computed_values.width().to_px(cell.box, width_of_containing_block);
|
||||
auto cell_intrinsic_offsets = padding_left + padding_right + border_left + border_right;
|
||||
auto height = computed_values.height().to_px(cell.box, containing_block.content_height());
|
||||
auto width = computed_values.width().to_px(cell.box, containing_block.content_width());
|
||||
auto min_content_height = calculate_min_content_height(cell.box, available_space.width);
|
||||
auto max_content_height = calculate_max_content_height(cell.box, available_space.width);
|
||||
auto min_content_width = calculate_min_content_width(cell.box);
|
||||
auto max_content_width = calculate_max_content_width(cell.box);
|
||||
|
||||
CSSPixels min_height = min_content_height;
|
||||
CSSPixels min_width = min_content_width;
|
||||
if (!computed_values.min_height().is_auto())
|
||||
min_height = max(min_height, computed_values.min_height().to_px(cell.box, containing_block.content_height()));
|
||||
if (!computed_values.min_width().is_auto())
|
||||
min_width = max(min_width, computed_values.min_width().to_px(cell.box, width_of_containing_block));
|
||||
min_width = max(min_width, computed_values.min_width().to_px(cell.box, containing_block.content_width()));
|
||||
|
||||
CSSPixels max_height = computed_values.height().is_auto() ? max_content_height.value() : height;
|
||||
CSSPixels max_width = computed_values.width().is_auto() ? max_content_width.value() : width;
|
||||
if (!computed_values.max_height().is_none())
|
||||
max_height = min(max_height, computed_values.max_height().to_px(cell.box, containing_block.content_height()));
|
||||
if (!computed_values.max_width().is_none())
|
||||
max_width = min(max_width, computed_values.max_width().to_px(cell.box, width_of_containing_block));
|
||||
max_width = min(max_width, computed_values.max_width().to_px(cell.box, containing_block.content_width()));
|
||||
|
||||
auto computed_width = computed_values.width();
|
||||
if (computed_width.is_percentage()) {
|
||||
m_columns[cell.column_index].type = ColumnType::Percent;
|
||||
m_columns[cell.column_index].percentage_width = max(m_columns[cell.column_index].percentage_width, computed_width.percentage().value());
|
||||
} else if (computed_width.is_length()) {
|
||||
m_columns[cell.column_index].type = ColumnType::Pixel;
|
||||
if (computed_values.height().is_percentage()) {
|
||||
m_rows[cell.row_index].type = SizeType::Percent;
|
||||
m_rows[cell.row_index].percentage_height = max(m_rows[cell.row_index].percentage_height, computed_values.height().percentage().value());
|
||||
} else {
|
||||
m_rows[cell.row_index].type = SizeType::Pixel;
|
||||
}
|
||||
if (computed_values.width().is_percentage()) {
|
||||
m_columns[cell.column_index].type = SizeType::Percent;
|
||||
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;
|
||||
}
|
||||
|
||||
cell.min_width = min_width + cell_intrinsic_offsets;
|
||||
cell.max_width = max(max(width, min_width), max_width) + cell_intrinsic_offsets;
|
||||
auto cell_intrinsic_height_offsets = padding_top + padding_bottom + border_top + border_bottom;
|
||||
cell.min_height = min_height + cell_intrinsic_height_offsets;
|
||||
cell.max_height = max(max(height, min_height), max_height) + cell_intrinsic_height_offsets;
|
||||
|
||||
max_cell_column_span = max(max_cell_column_span, cell.column_span);
|
||||
auto cell_intrinsic_width_offsets = padding_left + padding_right + border_left + border_right;
|
||||
cell.min_width = min_width + cell_intrinsic_width_offsets;
|
||||
cell.max_width = max(max(width, min_width), max_width) + cell_intrinsic_width_offsets;
|
||||
}
|
||||
}
|
||||
|
||||
template<class RowOrColumn>
|
||||
void TableFormattingContext::compute_table_measures()
|
||||
{
|
||||
auto& rows_or_columns = table_rows_or_columns<RowOrColumn>();
|
||||
for (auto& cell : m_cells) {
|
||||
if (cell.column_span == 1) {
|
||||
m_columns[cell.column_index].min_width = max(m_columns[cell.column_index].min_width, cell.min_width);
|
||||
m_columns[cell.column_index].max_width = max(m_columns[cell.column_index].max_width, cell.max_width);
|
||||
if (cell_span<RowOrColumn>(cell) == 1) {
|
||||
auto rc_index = cell_index<RowOrColumn>(cell);
|
||||
rows_or_columns[rc_index].min_size = max(rows_or_columns[rc_index].min_size, cell_min_size<RowOrColumn>(cell));
|
||||
rows_or_columns[rc_index].max_size = max(rows_or_columns[rc_index].max_size, cell_max_size<RowOrColumn>(cell));
|
||||
}
|
||||
}
|
||||
|
||||
for (size_t current_column_span = 2; current_column_span <= max_cell_column_span; current_column_span++) {
|
||||
size_t max_cell_span = 1;
|
||||
for (auto& cell : m_cells) {
|
||||
max_cell_span = max(max_cell_span, cell_span<RowOrColumn>(cell));
|
||||
}
|
||||
|
||||
for (size_t current_span = 2; current_span <= max_cell_span; current_span++) {
|
||||
// https://www.w3.org/TR/css-tables-3/#min-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
|
||||
Vector<Vector<CSSPixels>> cell_min_contributions_by_column_index;
|
||||
cell_min_contributions_by_column_index.resize(m_columns.size());
|
||||
Vector<Vector<CSSPixels>> cell_min_contributions_by_rc_index;
|
||||
cell_min_contributions_by_rc_index.resize(rows_or_columns.size());
|
||||
// https://www.w3.org/TR/css-tables-3/#max-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
|
||||
Vector<Vector<CSSPixels>> cell_max_contributions_by_column_index;
|
||||
cell_max_contributions_by_column_index.resize(m_columns.size());
|
||||
Vector<Vector<CSSPixels>> cell_max_contributions_by_rc_index;
|
||||
cell_max_contributions_by_rc_index.resize(rows_or_columns.size());
|
||||
for (auto& cell : m_cells) {
|
||||
if (cell.column_span == current_column_span) {
|
||||
// Define the baseline max-content width as the sum of the max-content widths based on cells of span up to N-1 of all columns that the cell spans.
|
||||
CSSPixels baseline_max_content_width = 0;
|
||||
auto cell_start_column_index = cell.column_index;
|
||||
auto cell_end_column_index = cell.column_index + cell.column_span;
|
||||
for (auto column_index = cell_start_column_index; column_index < cell_end_column_index; column_index++) {
|
||||
baseline_max_content_width += m_columns[column_index].max_width;
|
||||
auto cell_span_value = cell_span<RowOrColumn>(cell);
|
||||
if (cell_span_value == current_span) {
|
||||
// Define the baseline max-content size as the sum of the max-content sizes based on cells of span up to N-1 of all columns that the cell spans.
|
||||
CSSPixels baseline_max_content_size = 0;
|
||||
auto cell_start_rc_index = cell_index<RowOrColumn>(cell);
|
||||
auto cell_end_rc_index = cell_start_rc_index + cell_span_value;
|
||||
for (auto rc_index = cell_start_rc_index; rc_index < cell_end_rc_index; rc_index++) {
|
||||
baseline_max_content_size += rows_or_columns[rc_index].max_size;
|
||||
}
|
||||
|
||||
// The contribution of the cell is the sum of:
|
||||
// the min-content width of the column based on cells of span up to N-1
|
||||
auto cell_min_contribution = m_columns[cell.column_index].min_width;
|
||||
// the min-content size of the column based on cells of span up to N-1
|
||||
auto cell_min_contribution = rows_or_columns[cell_start_rc_index].min_size;
|
||||
// and the product of:
|
||||
// - the ratio of the max-content width based on cells of span up to N-1 of the column to the baseline max-content width
|
||||
// - the outer min-content width of the cell minus the baseline max-content width and baseline border spacing, or 0 if this is negative
|
||||
cell_min_contribution += (m_columns[cell.column_index].max_width / baseline_max_content_width) * max(CSSPixels(0), cell.min_width - baseline_max_content_width);
|
||||
// - the ratio of the max-content size based on cells of span up to N-1 of the column to the baseline max-content size
|
||||
// - the outer min-content size of the cell minus the baseline max-content size and baseline border spacing, or 0 if this is negative
|
||||
cell_min_contribution += (rows_or_columns[cell_start_rc_index].max_size / baseline_max_content_size) * max(CSSPixels(0), cell_min_size<RowOrColumn>(cell) - baseline_max_content_size);
|
||||
|
||||
// The contribution of the cell is the sum of:
|
||||
// the max-content width of the column based on cells of span up to N-1
|
||||
auto cell_max_contribution = m_columns[cell.column_index].max_width;
|
||||
// the max-content size of the column based on cells of span up to N-1
|
||||
auto cell_max_contribution = rows_or_columns[cell_start_rc_index].max_size;
|
||||
// and the product of:
|
||||
// - the ratio of the max-content width based on cells of span up to N-1 of the column to the baseline max-content width
|
||||
// - the outer max-content width of the cell minus the baseline max-content width and the baseline border spacing, or 0 if this is negative
|
||||
cell_max_contribution += (m_columns[cell.column_index].max_width / baseline_max_content_width) * max(CSSPixels(0), cell.max_width - baseline_max_content_width);
|
||||
// - the ratio of the max-content size based on cells of span up to N-1 of the column to the baseline max-content size
|
||||
// - the outer max-content size of the cell minus the baseline max-content size and the baseline border spacing, or 0 if this is negative
|
||||
cell_max_contribution += (rows_or_columns[cell_start_rc_index].max_size / baseline_max_content_size) * max(CSSPixels(0), cell_max_size<RowOrColumn>(cell) - baseline_max_content_size);
|
||||
|
||||
// Spread contribution to all columns, since we've weighted the gap to the desired spanned width by the the
|
||||
// ratio of the max-content width based on cells of span up to N-1 of the column to the baseline max-content width.
|
||||
for (auto column_index = cell_start_column_index; column_index < cell_end_column_index; column_index++) {
|
||||
cell_min_contributions_by_column_index[column_index].append(cell_min_contribution);
|
||||
cell_max_contributions_by_column_index[column_index].append(cell_max_contribution);
|
||||
// Spread contribution to all rows / columns, since we've weighted the gap to the desired spanned size by the the
|
||||
// ratio of the max-content size based on cells of span up to N-1 of the row / column to the baseline max-content width.
|
||||
for (auto rc_index = cell_start_rc_index; rc_index < cell_end_rc_index; rc_index++) {
|
||||
cell_min_contributions_by_rc_index[rc_index].append(cell_min_contribution);
|
||||
cell_max_contributions_by_rc_index[rc_index].append(cell_max_contribution);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (size_t column_index = 0; column_index < m_columns.size(); column_index++) {
|
||||
// min-content width of a column based on cells of span up to N (N > 1) is
|
||||
// the largest of the min-content width of the column based on cells of span up to N-1 and the contributions of the cells in the column whose colSpan is N
|
||||
for (auto min_contribution : cell_min_contributions_by_column_index[column_index])
|
||||
m_columns[column_index].min_width = max(m_columns[column_index].min_width, min_contribution);
|
||||
for (size_t rc_index = 0; rc_index < rows_or_columns.size(); rc_index++) {
|
||||
// min-content size of a row / column based on cells of span up to N (N > 1) is
|
||||
// the largest of the min-content size of the row / column based on cells of span up to N-1 and
|
||||
// the contributions of the cells in the row / column whose rowSpan / colSpan is N
|
||||
for (auto min_contribution : cell_min_contributions_by_rc_index[rc_index])
|
||||
rows_or_columns[rc_index].min_size = max(rows_or_columns[rc_index].min_size, min_contribution);
|
||||
|
||||
// max-content width of a column based on cells of span up to N (N > 1) is
|
||||
// the largest of the max-content width based on cells of span up to N-1 and the contributions of the cells in the column whose colSpan is N
|
||||
for (auto max_contribution : cell_max_contributions_by_column_index[column_index])
|
||||
m_columns[column_index].max_width = max(m_columns[column_index].max_width, max_contribution);
|
||||
// max-content size of a row / column based on cells of span up to N (N > 1) is
|
||||
// the largest of the max-content size based on cells of span up to N-1 and the contributions of
|
||||
// the cells in the row / column whose rowSpan / colSpan is N
|
||||
for (auto max_contribution : cell_max_contributions_by_rc_index[rc_index])
|
||||
rows_or_columns[rc_index].max_size = max(rows_or_columns[rc_index].max_size, max_contribution);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -290,14 +323,14 @@ void TableFormattingContext::compute_table_width()
|
|||
// of all the columns plus cell spacing or borders.
|
||||
CSSPixels grid_min = 0.0f;
|
||||
for (auto& column : m_columns) {
|
||||
grid_min += column.min_width;
|
||||
grid_min += column.min_size;
|
||||
}
|
||||
|
||||
// The row/column-grid width maximum (GRIDMAX) width is the sum of the max-content width
|
||||
// of all the columns plus cell spacing or borders.
|
||||
CSSPixels grid_max = 0.0f;
|
||||
for (auto& column : m_columns) {
|
||||
grid_max += column.max_width;
|
||||
grid_max += column.max_size;
|
||||
}
|
||||
|
||||
// The used min-width of a table is the greater of the resolved min-width, CAPMIN, and GRIDMIN.
|
||||
|
|
@ -342,12 +375,12 @@ void TableFormattingContext::distribute_width_to_columns()
|
|||
|
||||
auto column_preferred_width = [&](Column& column) {
|
||||
switch (column.type) {
|
||||
case ColumnType::Percent: {
|
||||
return max(column.min_width, column.percentage_width / 100 * available_width);
|
||||
case SizeType::Percent: {
|
||||
return max(column.min_size, column.percentage_width / 100 * available_width);
|
||||
}
|
||||
case ColumnType::Pixel:
|
||||
case ColumnType::Auto: {
|
||||
return column.max_width;
|
||||
case SizeType::Pixel:
|
||||
case SizeType::Auto: {
|
||||
return column.max_size;
|
||||
}
|
||||
default: {
|
||||
VERIFY_NOT_REACHED();
|
||||
|
|
@ -355,13 +388,13 @@ void TableFormattingContext::distribute_width_to_columns()
|
|||
}
|
||||
};
|
||||
|
||||
auto expand_columns_to_fill_available_width = [&](ColumnType column_type) {
|
||||
auto expand_columns_to_fill_available_width = [&](SizeType column_type) {
|
||||
CSSPixels remaining_available_width = available_width;
|
||||
CSSPixels total_preferred_width_increment = 0;
|
||||
for (auto& column : m_columns) {
|
||||
remaining_available_width -= column.used_width;
|
||||
if (column.type == column_type) {
|
||||
total_preferred_width_increment += column_preferred_width(column) - column.min_width;
|
||||
total_preferred_width_increment += column_preferred_width(column) - column.min_size;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -370,57 +403,57 @@ void TableFormattingContext::distribute_width_to_columns()
|
|||
|
||||
for (auto& column : m_columns) {
|
||||
if (column.type == column_type) {
|
||||
CSSPixels preferred_width_increment = column_preferred_width(column) - column.min_width;
|
||||
CSSPixels preferred_width_increment = column_preferred_width(column) - column.min_size;
|
||||
column.used_width += preferred_width_increment * remaining_available_width / total_preferred_width_increment;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
auto shrink_columns_to_fit_available_width = [&](ColumnType column_type) {
|
||||
auto shrink_columns_to_fit_available_width = [&](SizeType column_type) {
|
||||
for (auto& column : m_columns) {
|
||||
if (column.type == column_type)
|
||||
column.used_width = column.min_width;
|
||||
column.used_width = column.min_size;
|
||||
}
|
||||
|
||||
expand_columns_to_fill_available_width(column_type);
|
||||
};
|
||||
|
||||
for (auto& column : m_columns) {
|
||||
column.used_width = column.min_width;
|
||||
column.used_width = column.min_size;
|
||||
}
|
||||
|
||||
for (auto& column : m_columns) {
|
||||
if (column.type == ColumnType::Percent) {
|
||||
column.used_width = max(column.min_width, column.percentage_width / 100 * available_width);
|
||||
if (column.type == SizeType::Percent) {
|
||||
column.used_width = max(column.min_size, column.percentage_width / 100 * available_width);
|
||||
}
|
||||
}
|
||||
|
||||
if (columns_total_used_width() > available_width) {
|
||||
shrink_columns_to_fit_available_width(ColumnType::Percent);
|
||||
shrink_columns_to_fit_available_width(SizeType::Percent);
|
||||
return;
|
||||
}
|
||||
|
||||
for (auto& column : m_columns) {
|
||||
if (column.type == ColumnType::Pixel) {
|
||||
column.used_width = column.max_width;
|
||||
if (column.type == SizeType::Pixel) {
|
||||
column.used_width = column.max_size;
|
||||
}
|
||||
}
|
||||
|
||||
if (columns_total_used_width() > available_width) {
|
||||
shrink_columns_to_fit_available_width(ColumnType::Pixel);
|
||||
shrink_columns_to_fit_available_width(SizeType::Pixel);
|
||||
return;
|
||||
}
|
||||
|
||||
if (columns_total_used_width() < available_width) {
|
||||
expand_columns_to_fill_available_width(ColumnType::Auto);
|
||||
expand_columns_to_fill_available_width(SizeType::Auto);
|
||||
}
|
||||
|
||||
if (columns_total_used_width() < available_width) {
|
||||
expand_columns_to_fill_available_width(ColumnType::Pixel);
|
||||
expand_columns_to_fill_available_width(SizeType::Pixel);
|
||||
}
|
||||
|
||||
if (columns_total_used_width() < available_width) {
|
||||
expand_columns_to_fill_available_width(ColumnType::Percent);
|
||||
expand_columns_to_fill_available_width(SizeType::Percent);
|
||||
}
|
||||
|
||||
if (columns_total_used_width() < available_width) {
|
||||
|
|
@ -428,7 +461,7 @@ void TableFormattingContext::distribute_width_to_columns()
|
|||
// it should be assigned to columns proportionally to their max width
|
||||
CSSPixels grid_max = 0.0f;
|
||||
for (auto& column : m_columns) {
|
||||
grid_max += column.max_width;
|
||||
grid_max += column.max_size;
|
||||
}
|
||||
|
||||
auto width_to_distribute = available_width - columns_total_used_width();
|
||||
|
|
@ -441,7 +474,7 @@ void TableFormattingContext::distribute_width_to_columns()
|
|||
} else {
|
||||
// Distribute width to columns proportionally to their max width
|
||||
for (auto& column : m_columns) {
|
||||
column.used_width += width_to_distribute * column.max_width / grid_max;
|
||||
column.used_width += width_to_distribute * column.max_size / grid_max;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -455,7 +488,7 @@ void TableFormattingContext::determine_intrisic_size_of_table_container(Availabl
|
|||
// The min-content width of a table is the width required to fit all of its columns min-content widths and its undistributable spaces.
|
||||
CSSPixels grid_min = 0.0f;
|
||||
for (auto& column : m_columns)
|
||||
grid_min += column.min_width;
|
||||
grid_min += column.min_size;
|
||||
table_box_state.set_content_width(grid_min);
|
||||
}
|
||||
|
||||
|
|
@ -463,7 +496,7 @@ void TableFormattingContext::determine_intrisic_size_of_table_container(Availabl
|
|||
// The max-content width of a table is the width required to fit all of its columns max-content widths and its undistributable spaces.
|
||||
CSSPixels grid_max = 0.0f;
|
||||
for (auto& column : m_columns)
|
||||
grid_max += column.max_width;
|
||||
grid_max += column.max_size;
|
||||
table_box_state.set_content_width(grid_max);
|
||||
}
|
||||
}
|
||||
|
|
@ -522,11 +555,17 @@ void TableFormattingContext::compute_table_height(LayoutMode layout_mode)
|
|||
|
||||
cell.baseline = box_baseline(cell.box);
|
||||
|
||||
// Only cells spanning the current row exclusively are part of computing minimum height of a row,
|
||||
// as described in https://www.w3.org/TR/css-tables-3/#computing-the-table-height
|
||||
// Implements https://www.w3.org/TR/css-tables-3/#computing-the-table-height
|
||||
|
||||
// The minimum height of a row is the maximum of:
|
||||
// - the computed height (if definite, percentages being considered 0px) of its corresponding table-row (if nay)
|
||||
// - the computed height of each cell spanning the current row exclusively (if definite, percentages being treated as 0px), and
|
||||
// - the minimum height (ROWMIN) required by the cells spanning the row.
|
||||
// Note that we've already applied the first rule at the top of the method.
|
||||
if (cell.row_span == 1) {
|
||||
row.base_height = max(row.base_height, cell_state.border_box_height());
|
||||
}
|
||||
row.base_height = max(row.base_height, m_rows[cell.row_index].min_size);
|
||||
row.baseline = max(row.baseline, cell.baseline);
|
||||
}
|
||||
|
||||
|
|
@ -904,7 +943,16 @@ void TableFormattingContext::run(Box const& box, LayoutMode layout_mode, Availab
|
|||
border_conflict_resolution();
|
||||
|
||||
// Compute the minimum width of each column.
|
||||
compute_table_measures();
|
||||
compute_cell_measures(available_space);
|
||||
compute_table_measures<Column>();
|
||||
|
||||
// https://www.w3.org/TR/css-tables-3/#row-layout
|
||||
// Since during row layout the specified heights of cells in the row were ignored and cells that were spanning more than one rows
|
||||
// have not been sized correctly, their height will need to be eventually distributed to the set of rows they spanned. This is done
|
||||
// by running the same algorithm as the column measurement, with the span=1 value being initialized (for min-content) with the largest
|
||||
// of the resulting height of the previous row layout, the height specified on the corresponding table-row (if any), and the largest
|
||||
// height specified on cells that span this row only (the algorithm starts by considering cells of span 2 on top of that assignment).
|
||||
compute_table_measures<Row>();
|
||||
|
||||
if (available_space.width.is_intrinsic_sizing_constraint() && !available_space.height.is_intrinsic_sizing_constraint()) {
|
||||
determine_intrisic_size_of_table_container(available_space);
|
||||
|
|
@ -947,4 +995,64 @@ CSSPixels TableFormattingContext::automatic_content_height() const
|
|||
return m_automatic_content_height;
|
||||
}
|
||||
|
||||
template<>
|
||||
size_t TableFormattingContext::cell_span<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.row_span;
|
||||
}
|
||||
|
||||
template<>
|
||||
size_t TableFormattingContext::cell_span<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.column_span;
|
||||
}
|
||||
|
||||
template<>
|
||||
size_t TableFormattingContext::cell_index<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.row_index;
|
||||
}
|
||||
|
||||
template<>
|
||||
size_t TableFormattingContext::cell_index<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.column_index;
|
||||
}
|
||||
|
||||
template<>
|
||||
CSSPixels TableFormattingContext::cell_min_size<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.min_height;
|
||||
}
|
||||
|
||||
template<>
|
||||
CSSPixels TableFormattingContext::cell_min_size<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.min_width;
|
||||
}
|
||||
|
||||
template<>
|
||||
CSSPixels TableFormattingContext::cell_max_size<TableFormattingContext::Row>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.max_height;
|
||||
}
|
||||
|
||||
template<>
|
||||
CSSPixels TableFormattingContext::cell_max_size<TableFormattingContext::Column>(TableFormattingContext::Cell const& cell)
|
||||
{
|
||||
return cell.max_width;
|
||||
}
|
||||
|
||||
template<>
|
||||
Vector<TableFormattingContext::Row>& TableFormattingContext::table_rows_or_columns()
|
||||
{
|
||||
return m_rows;
|
||||
}
|
||||
|
||||
template<>
|
||||
Vector<TableFormattingContext::Column>& TableFormattingContext::table_rows_or_columns()
|
||||
{
|
||||
return m_columns;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@
|
|||
|
||||
namespace Web::Layout {
|
||||
|
||||
enum class TableDimension {
|
||||
Row,
|
||||
Column
|
||||
};
|
||||
|
||||
class TableFormattingContext final : public FormattingContext {
|
||||
public:
|
||||
explicit TableFormattingContext(LayoutState&, Box const&, FormattingContext* parent);
|
||||
|
|
@ -31,6 +36,8 @@ private:
|
|||
CSSPixels run_caption_layout(LayoutMode, CSS::CaptionSide);
|
||||
CSSPixels compute_capmin();
|
||||
void calculate_row_column_grid(Box const&);
|
||||
void compute_cell_measures(AvailableSpace const& available_space);
|
||||
template<class RowOrColumn>
|
||||
void compute_table_measures();
|
||||
void compute_table_width();
|
||||
void distribute_width_to_columns();
|
||||
|
|
@ -46,17 +53,17 @@ private:
|
|||
|
||||
Optional<AvailableSpace> m_available_space;
|
||||
|
||||
enum class ColumnType {
|
||||
enum class SizeType {
|
||||
Percent,
|
||||
Pixel,
|
||||
Auto
|
||||
};
|
||||
|
||||
struct Column {
|
||||
ColumnType type { ColumnType::Auto };
|
||||
SizeType type { SizeType::Auto };
|
||||
CSSPixels left_offset { 0 };
|
||||
CSSPixels min_width { 0 };
|
||||
CSSPixels max_width { 0 };
|
||||
CSSPixels min_size { 0 };
|
||||
CSSPixels max_size { 0 };
|
||||
CSSPixels used_width { 0 };
|
||||
double percentage_width { 0 };
|
||||
};
|
||||
|
|
@ -67,6 +74,10 @@ private:
|
|||
CSSPixels reference_height { 0 };
|
||||
CSSPixels final_height { 0 };
|
||||
CSSPixels baseline { 0 };
|
||||
SizeType type { SizeType::Auto };
|
||||
CSSPixels min_size { 0 };
|
||||
CSSPixels max_size { 0 };
|
||||
double percentage_height { 0 };
|
||||
};
|
||||
|
||||
struct Cell {
|
||||
|
|
@ -78,8 +89,27 @@ private:
|
|||
CSSPixels baseline { 0 };
|
||||
CSSPixels min_width { 0 };
|
||||
CSSPixels max_width { 0 };
|
||||
CSSPixels min_height { 0 };
|
||||
CSSPixels max_height { 0 };
|
||||
};
|
||||
|
||||
// Accessors to enable direction-agnostic table measurement.
|
||||
|
||||
template<class RowOrColumn>
|
||||
static size_t cell_span(Cell const& cell);
|
||||
|
||||
template<class RowOrColumn>
|
||||
static size_t cell_index(Cell const& cell);
|
||||
|
||||
template<class RowOrColumn>
|
||||
static CSSPixels cell_min_size(Cell const& cell);
|
||||
|
||||
template<class RowOrColumn>
|
||||
static CSSPixels cell_max_size(Cell const& cell);
|
||||
|
||||
template<class RowOrColumn>
|
||||
Vector<RowOrColumn>& table_rows_or_columns();
|
||||
|
||||
CSSPixels compute_row_content_height(Cell const& cell) const;
|
||||
|
||||
enum class ConflictingEdge {
|
||||
|
|
|
|||
Loading…
Reference in a new issue