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 new file mode 100644 index 0000000000..438df89ca1 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt @@ -0,0 +1,34 @@ +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 + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + Box at (9,9) content-size 83.328125x21.46875 table-row-group children: not-inline + Box at (11,11) content-size 83.328125x21.46875 table-row children: not-inline + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer
at (13,13) content-size 18.032031x17.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.032031,13) content-size 36.864062x17.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.032031,13 9.34375x17.46875] + "B" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer at (79.896093,13) content-size 16.432031x17.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.896093,13 10.3125x17.46875] + "C" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> + BlockContainer <(anonymous)> (not painted) children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/table/sum-of-percentage-column-widths-less-than-100.html b/Tests/LibWeb/Layout/input/table/sum-of-percentage-column-widths-less-than-100.html new file mode 100644 index 0000000000..67d844c815 --- /dev/null +++ b/Tests/LibWeb/Layout/input/table/sum-of-percentage-column-widths-less-than-100.html @@ -0,0 +1,7 @@ + + + + + + +
ABC
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp index a25a4782c1..e9f16c6958 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp @@ -180,6 +180,7 @@ void TableFormattingContext::calculate_row_column_grid(Box const& box) } for (auto const& cell : m_cells) { m_cells_by_coordinate[cell.row_index][cell.column_index] = cell; + m_columns[cell.column_index].has_originating_cells = true; } } @@ -525,6 +526,111 @@ void TableFormattingContext::compute_table_width() table_box_state.set_content_width(used_width); } +CSSPixels TableFormattingContext::compute_columns_total_used_width() const +{ + CSSPixels total_used_width = 0; + for (auto& column : m_columns) { + total_used_width += column.used_width; + } + return total_used_width; +} + +static CSSPixels compute_columns_total_candidate_width(Vector const& candidate_widths) +{ + CSSPixels total_candidate_width = 0; + for (auto width : candidate_widths) { + total_candidate_width += width; + } + return total_candidate_width; +} + +void TableFormattingContext::commit_candidate_column_widths(Vector const& candidate_widths) +{ + VERIFY(candidate_widths.size() == m_columns.size()); + for (size_t i = 0; i < m_columns.size(); ++i) { + m_columns[i].used_width = candidate_widths[i]; + } +} + +void TableFormattingContext::assign_columns_width_linear_combination(Vector const& candidate_widths, CSSPixels available_width) +{ + auto columns_total_candidate_width = compute_columns_total_candidate_width(candidate_widths); + auto columns_total_used_width = compute_columns_total_used_width(); + if (columns_total_candidate_width == columns_total_used_width) { + return; + } + auto candidate_weight = ((available_width - columns_total_used_width) / (columns_total_candidate_width - columns_total_used_width)).to_double(); + for (size_t i = 0; i < m_columns.size(); ++i) { + auto& column = m_columns[i]; + column.used_width = candidate_weight * candidate_widths[i] + (1 - candidate_weight) * column.used_width; + } +} + +template +bool TableFormattingContext::distribute_excess_width_proportionally_to_max_width(CSSPixels excess_width, ColumnFilter column_filter) +{ + bool found_matching_columns = false; + CSSPixels total_max_width = 0; + for (auto const& column : m_columns) { + if (column_filter(column)) { + total_max_width += column.max_size; + found_matching_columns = true; + } + } + if (!found_matching_columns) { + return false; + } + VERIFY(total_max_width > 0); + for (auto& column : m_columns) { + if (column_filter(column)) { + column.used_width += excess_width * column.max_size / total_max_width; + } + } + return true; +} + +template +bool TableFormattingContext::distribute_excess_width_equally(CSSPixels excess_width, ColumnFilter column_filter) +{ + size_t matching_column_count = 0; + for (auto const& column : m_columns) { + if (column_filter(column)) { + ++matching_column_count; + } + } + if (matching_column_count == 0) { + return false; + } + for (auto& column : m_columns) { + if (column_filter(column)) { + column.used_width += excess_width / matching_column_count; + } + } + return matching_column_count; +} + +template +bool TableFormattingContext::distribute_excess_width_by_intrinsic_percentage(CSSPixels excess_width, ColumnFilter column_filter) +{ + bool found_matching_columns = false; + double total_percentage_width = 0; + for (auto const& column : m_columns) { + if (column_filter(column)) { + found_matching_columns = true; + total_percentage_width += column.percentage_width; + } + } + if (!found_matching_columns) { + return false; + } + for (auto& column : m_columns) { + if (column_filter(column)) { + column.used_width += excess_width * column.percentage_width / total_percentage_width; + } + } + return true; +} + void TableFormattingContext::distribute_width_to_columns() { // Implements https://www.w3.org/TR/css-tables-3/#width-distribution-algorithm @@ -536,46 +642,11 @@ void TableFormattingContext::distribute_width_to_columns() // The assignable table width is the used width of the table minus the total horizontal border spacing (if any). // This is the width that we will be able to allocate to the columns. - CSSPixels available_width = m_state.get(table_box()).content_width() - total_horizontal_border_spacing; + const CSSPixels available_width = m_state.get(table_box()).content_width() - total_horizontal_border_spacing; Vector candidate_widths; candidate_widths.resize(m_columns.size()); - auto compute_columns_total_used_width = [&]() { - CSSPixels total_used_width = 0; - for (auto& column : m_columns) { - total_used_width += column.used_width; - } - return total_used_width; - }; - - auto compute_columns_total_candidate_width = [&]() { - CSSPixels total_candidate_width = 0; - for (auto width : candidate_widths) { - total_candidate_width += width; - } - return total_candidate_width; - }; - - auto commit_candidate_widths = [&]() { - for (size_t i = 0; i < m_columns.size(); ++i) { - auto& column = m_columns[i]; - column.used_width = candidate_widths[i]; - } - }; - - auto compute_linear_combination = [&](CSSPixels columns_total_candidate_width) { - auto columns_total_used_width = compute_columns_total_used_width(); - if (columns_total_candidate_width == columns_total_used_width) { - return; - } - auto candidate_weight = ((available_width - columns_total_used_width) / (columns_total_candidate_width - columns_total_used_width)).to_double(); - for (size_t i = 0; i < m_columns.size(); ++i) { - auto& column = m_columns[i]; - column.used_width = candidate_weight * candidate_widths[i] + (1 - candidate_weight) * column.used_width; - } - }; - // 1. The min-content sizing-guess is the set of column width assignments where each column is assigned its min-content width. for (size_t i = 0; i < m_columns.size(); ++i) { auto& column = m_columns[i]; @@ -595,14 +666,13 @@ void TableFormattingContext::distribute_width_to_columns() } } - auto columns_total_candidate_width = compute_columns_total_candidate_width(); // If the assignable table width is less than or equal to the max-content sizing-guess, the used widths of the columns must be the // linear combination (with weights adding to 1) of the two consecutive sizing-guesses whose width sums bound the available width. - if (available_width < columns_total_candidate_width) { - compute_linear_combination(columns_total_candidate_width); + if (available_width < compute_columns_total_candidate_width(candidate_widths)) { + assign_columns_width_linear_combination(candidate_widths, available_width); return; } else { - commit_candidate_widths(); + commit_candidate_column_widths(candidate_widths); } // 3. The min-content-specified sizing-guess is the set of column width assignments where: @@ -618,12 +688,11 @@ void TableFormattingContext::distribute_width_to_columns() } } - columns_total_candidate_width = compute_columns_total_candidate_width(); - if (available_width < columns_total_candidate_width) { - compute_linear_combination(columns_total_candidate_width); + if (available_width < compute_columns_total_candidate_width(candidate_widths)) { + assign_columns_width_linear_combination(candidate_widths, available_width); return; } else { - commit_candidate_widths(); + commit_candidate_column_widths(candidate_widths); } // 4. The max-content sizing-guess is the set of column width assignments where: @@ -638,51 +707,91 @@ void TableFormattingContext::distribute_width_to_columns() } } - columns_total_candidate_width = compute_columns_total_candidate_width(); - if (available_width < columns_total_candidate_width) { - compute_linear_combination(columns_total_candidate_width); + if (available_width < compute_columns_total_candidate_width(candidate_widths)) { + assign_columns_width_linear_combination(candidate_widths, available_width); return; } else { - commit_candidate_widths(); + commit_candidate_column_widths(candidate_widths); } // Otherwise, the used widths of the columns are the result of starting from the max-content sizing-guess and distributing // the excess width to the columns of the table according to the rules for distributing excess width to columns (for used width). + distribute_excess_width_to_columns(available_width); +} - // Implements steps 1 and 2 of https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns - // FIXME: Implement steps 3-6 as well, which distribute excess width to constrained columns. +void TableFormattingContext::distribute_excess_width_to_columns(CSSPixels available_width) +{ + // Implements https://www.w3.org/TR/css-tables-3/#distributing-width-to-columns auto columns_total_used_width = compute_columns_total_used_width(); - 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 / 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; - } - } + if (columns_total_used_width >= available_width) { + return; } + auto excess_width = available_width - columns_total_used_width; + if (excess_width == 0) { + return; + } + + // 1. If there are non-constrained columns that have originating cells with intrinsic percentage width of 0% and with nonzero + // max-content width (aka the columns allowed to grow by this rule), the distributed widths of the columns allowed to grow + // by this rule are increased in proportion to max-content width so the total increase adds to the excess width. + if (distribute_excess_width_proportionally_to_max_width( + excess_width, + [](auto const& column) { + return !column.is_constrained && column.has_originating_cells && column.percentage_width == 0 && column.max_size > 0; + })) { + excess_width = available_width - compute_columns_total_used_width(); + } + if (excess_width == 0) { + return; + } + // 2. Otherwise, if there are non-constrained columns that have originating cells with intrinsic percentage width of 0% (aka the columns + // allowed to grow by this rule, which thanks to the previous rule must have zero max-content width), the distributed widths of the + // columns allowed to grow by this rule are increased by equal amounts so the total increase adds to the excess width. + if (distribute_excess_width_equally(excess_width, + [](auto const& column) { + return !column.is_constrained && column.has_originating_cells && column.percentage_width == 0; + })) { + excess_width = available_width - compute_columns_total_used_width(); + } + if (excess_width == 0) { + return; + } + // 3. Otherwise, if there are constrained columns with intrinsic percentage width of 0% and with nonzero max-content width + // (aka the columns allowed to grow by this rule, which, due to other rules, must have originating cells), the distributed widths of the + // columns allowed to grow by this rule are increased in proportion to max-content width so the total increase adds to the excess width. + if (distribute_excess_width_proportionally_to_max_width( + excess_width, + [](auto const& column) { + return column.is_constrained && column.percentage_width == 0 && column.max_size > 0; + })) { + excess_width = available_width - compute_columns_total_used_width(); + } + if (excess_width == 0) { + return; + } + // 4. Otherwise, if there are columns with intrinsic percentage width greater than 0% (aka the columns allowed to grow by this rule, + // which, due to other rules, must have originating cells), the distributed widths of the columns allowed to grow by this rule are + // increased in proportion to intrinsic percentage width so the total increase adds to the excess width. + if (distribute_excess_width_by_intrinsic_percentage(excess_width, [](auto const& column) { + return column.percentage_width > 0; + })) { + excess_width = available_width - compute_columns_total_used_width(); + } + if (excess_width == 0) { + return; + } + // 5. Otherwise, if there is any such column, the distributed widths of all columns that have originating cells are increased by equal amounts + // so the total increase adds to the excess width. + if (distribute_excess_width_equally( + excess_width, + [](auto const& column) { return column.has_originating_cells; })) { + excess_width = available_width - compute_columns_total_used_width(); + } + if (excess_width == 0) { + return; + } + // 6. Otherwise, the distributed widths of all columns are increased by equal amounts so the total increase adds to the excess width. + distribute_excess_width_equally(excess_width, [](auto const&) { return true; }); } void TableFormattingContext::compute_table_height(LayoutMode layout_mode) diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h index 4c36b7f8e6..c8ff58f62c 100644 --- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h @@ -47,6 +47,7 @@ private: void compute_table_measures(); void compute_table_width(); void distribute_width_to_columns(); + void distribute_excess_width_to_columns(CSSPixels available_width); void compute_table_height(LayoutMode layout_mode); void distribute_height_to_rows(); void position_row_boxes(); @@ -55,6 +56,17 @@ private: CSSPixels border_spacing_horizontal() const; CSSPixels border_spacing_vertical() const; + CSSPixels compute_columns_total_used_width() const; + void commit_candidate_column_widths(Vector const& candidate_widths); + void assign_columns_width_linear_combination(Vector const& candidate_widths, CSSPixels available_width); + + template + bool distribute_excess_width_proportionally_to_max_width(CSSPixels excess_width, ColumnFilter column_filter); + template + bool distribute_excess_width_equally(CSSPixels excess_width, ColumnFilter column_filter); + template + bool distribute_excess_width_by_intrinsic_percentage(CSSPixels excess_width, ColumnFilter column_filter); + CSSPixels m_table_height { 0 }; CSSPixels m_automatic_content_height { 0 }; @@ -69,6 +81,8 @@ private: double percentage_width { 0 }; // Store whether the column is constrained: https://www.w3.org/TR/css-tables-3/#constrainedness bool is_constrained { false }; + // Store whether the column has originating cells, defined in https://www.w3.org/TR/css-tables-3/#terminology. + bool has_originating_cells { false }; }; struct Row {