RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 03:37:43 +00:00
Code Issues Activity Actions

LibWeb: Size table cells using a combination of min- and max-widths

Browse source 
This gets us a bit closer to the recommended algorithms in CSS 2.2 and
CSS Table Module 3.

A couple of table heavy websites (e.g. news.ycombinator.com,
html5test.com, etc.) now look quite okay. :^)
This commit is contained in:
Simon Wanner 2022-03-29 00:10:59 +02:00 • committed by Andreas Kling
parent bc4974648c
commit 7e4793df63
2 changed files with 78 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,6 +29,7 @@ void TableFormattingContext::run(Box const& box, LayoutMode)
compute_width(box); compute_width(box);
auto table_width = CSS::Length::make_px(box_state.content_width); auto table_width = CSS::Length::make_px(box_state.content_width);
auto table_width_is_auto = box.computed_values().width().has_value() && box.computed_values().width()->is_length() && box.computed_values().width()->length().is_auto();
float total_content_width = 0; float total_content_width = 0;
float total_content_height = 0; float total_content_height = 0;
@ -38,18 +39,48 @@ void TableFormattingContext::run(Box const& box, LayoutMode)
compute_width(row_group_box); compute_width(row_group_box);
auto column_count = row_group_box.column_count(); auto column_count = row_group_box.column_count();
Vector<float> column_widths; Vector<ColumnWidth> column_widths;
column_widths.resize(column_count); column_widths.resize(column_count);
row_group_box.template for_each_child_of_type<TableRowBox>([&](auto& row) { row_group_box.template for_each_child_of_type<TableRowBox>([&](auto& row) {
calculate_column_widths(row, table_width, column_widths); calculate_column_widths(row, table_width, column_widths);
}); });
float missing_width = box_state.content_width; float remaining_for_max = box_state.content_width;
for (auto column_width : column_widths) float remaining_for_min = box_state.content_width;
missing_width -= column_width; for (auto& column_width : column_widths) {
if (missing_width > 0) remaining_for_max -= column_width.max;
column_widths[column_widths.size() - 1] += missing_width; remaining_for_min -= column_width.min;
}
bool max_fits = remaining_for_max >= 0;
bool min_fits = remaining_for_min >= 0;
if (max_fits) {
for (auto& column_width : column_widths)
column_width.used = column_width.max;
} else {
for (auto& column_width : column_widths)
column_width.used = column_width.min;
}
if (!table_width_is_auto || (min_fits && !max_fits)) {
float missing_width = max_fits ? remaining_for_max : remaining_for_min;
if (missing_width > 0) {
size_t num_auto_columns = 0;
for (auto& column_width : column_widths) {
if (column_width.is_auto)
num_auto_columns++;
}
if (num_auto_columns) {
float extra = missing_width / (float)num_auto_columns;
for (auto& column_width : column_widths) {
if (column_width.is_auto)
column_width.used += extra;
}
}
}
}
float content_width = 0; float content_width = 0;
float content_height = 0; float content_height = 0;
@ -71,51 +102,63 @@ void TableFormattingContext::run(Box const& box, LayoutMode)
total_content_width = max(total_content_width, row_group_box_state.content_width); total_content_width = max(total_content_width, row_group_box_state.content_width);
}); });
if (box.computed_values().width().has_value() && box.computed_values().width()->is_length() && box.computed_values().width()->length().is_auto()) if (table_width_is_auto)
box_state.content_width = total_content_width; box_state.content_width = total_content_width;
// FIXME: This is a total hack, we should respect the 'height' property. // FIXME: This is a total hack, we should respect the 'height' property.
box_state.content_height = total_content_height; box_state.content_height = total_content_height;
} }
void TableFormattingContext::calculate_column_widths(Box const& row, CSS::Length const& table_width, Vector<float>& column_widths) void TableFormattingContext::calculate_column_widths(Box const& row, CSS::Length const& table_width, Vector<ColumnWidth>& column_widths)
{ {
m_state.get_mutable(row); m_state.get_mutable(row);
size_t column_index = 0; size_t column_index = 0;
bool use_auto_layout = table_width.is_auto();
row.for_each_child_of_type<TableCellBox>([&](auto& cell) { row.for_each_child_of_type<TableCellBox>([&](auto& cell) {
auto& cell_state = m_state.get_mutable(cell); auto& cell_state = m_state.get_mutable(cell);
auto const& computed_values = cell.computed_values(); auto const& computed_values = cell.computed_values();
auto specified_width = computed_values.width().has_value() ? computed_values.width()->resolved(cell, table_width).resolved(cell) : CSS::Length::make_auto(); auto specified_width = computed_values.width().has_value() ? computed_values.width()->resolved(cell, table_width).resolved(cell) : CSS::Length::make_auto();
compute_width(cell, specified_width.is_auto() ? LayoutMode::MinContent : LayoutMode::Normal); compute_width(cell, specified_width.is_auto() ? LayoutMode::MinContent : LayoutMode::Normal);
if (use_auto_layout) { (void)layout_inside(cell, LayoutMode::Normal);
(void)layout_inside(cell, LayoutMode::MaxContent);
} else { if (cell.colspan() == 1) {
(void)layout_inside(cell, LayoutMode::Normal); auto [min_width, max_width] = calculate_min_and_max_content_width(cell);
min_width = max(min_width, cell_state.border_box_width());
max_width = max(max_width, cell_state.border_box_width());
column_widths[column_index].min = max(column_widths[column_index].min, min_width);
column_widths[column_index].max = max(column_widths[column_index].max, max_width);
column_widths[column_index].is_auto &= specified_width.is_auto();
} }
if (cell.colspan() == 1)
column_widths[column_index] = max(column_widths[column_index], cell_state.border_box_width());
column_index += cell.colspan(); column_index += cell.colspan();
}); });
column_index = 0; column_index = 0;
row.for_each_child_of_type<TableCellBox>([&](auto& cell) { row.for_each_child_of_type<TableCellBox>([&](auto& cell) {
auto& cell_state = m_state.get_mutable(cell);
size_t colspan = cell.colspan(); size_t colspan = cell.colspan();
if (colspan != 1) { if (colspan > 1) {
float missing = cell_state.border_box_width(); auto& cell_state = m_state.get_mutable(cell);
for (size_t i = 0; i < colspan; ++i) auto [min_width, max_width] = calculate_min_and_max_content_width(cell);
missing -= column_widths[column_index + i]; float missing_min = max(min_width, cell_state.border_box_width());
if (missing > 0) { float missing_max = max(max_width, cell_state.border_box_width());
float extra = missing / (float)colspan; for (size_t i = 0; i < colspan; ++i) {
missing_min -= column_widths[column_index + i].min;
missing_max -= column_widths[column_index + i].max;
}
if (missing_min > 0) {
float extra = missing_min / (float)colspan;
for (size_t i = 0; i < colspan; ++i) for (size_t i = 0; i < colspan; ++i)
column_widths[column_index + i] += extra; column_widths[column_index + i].min += extra;
}
if (missing_max > 0) {
float extra = missing_max / (float)colspan;
for (size_t i = 0; i < colspan; ++i)
column_widths[column_index + i].max += extra;
} }
} }
column_index += colspan; column_index += colspan;
}); });
} }
void TableFormattingContext::layout_row(Box const& row, Vector<float>& column_widths) void TableFormattingContext::layout_row(Box const& row, Vector<ColumnWidth>& column_widths)
{ {
auto& row_state = m_state.get_mutable(row); auto& row_state = m_state.get_mutable(row);
size_t column_index = 0; size_t column_index = 0;
@ -129,18 +172,14 @@ void TableFormattingContext::layout_row(Box const& row, Vector<float>& column_wi
float span_width = 0; float span_width = 0;
for (size_t i = 0; i < cell.colspan(); ++i) for (size_t i = 0; i < cell.colspan(); ++i)
span_width += column_widths[column_index++]; span_width += column_widths[column_index++].used;
cell_state.content_width = span_width - cell_state.border_box_left() - cell_state.border_box_right(); cell_state.content_width = span_width - cell_state.border_box_left() - cell_state.border_box_right();
BlockFormattingContext::compute_height(cell, m_state); BlockFormattingContext::compute_height(cell, m_state);
cell_state.offset = row_state.offset.translated(cell_state.border_box_left() + content_width, cell_state.border_box_top()); cell_state.offset = row_state.offset.translated(cell_state.border_box_left() + content_width, cell_state.border_box_top());
// Layout the cell contents a second time, now that we know its final width. // Layout the cell contents a second time, now that we know its final width.
if (use_auto_layout) { (void)layout_inside(cell, LayoutMode::Normal);
(void)layout_inside(cell, LayoutMode::MaxContent);
} else {
(void)layout_inside(cell, LayoutMode::Normal);
}
content_width += span_width; content_width += span_width;
tallest_cell_height = max(tallest_cell_height, cell_state.border_box_height()); tallest_cell_height = max(tallest_cell_height, cell_state.border_box_height());

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

@ -11,6 +11,13 @@
namespace Web::Layout { namespace Web::Layout {
struct ColumnWidth {
float min { 0 };
float max { 0 };
float used { 0 };
bool is_auto { true };
};
class TableFormattingContext final : public BlockFormattingContext { class TableFormattingContext final : public BlockFormattingContext {
public: public:
explicit TableFormattingContext(FormattingState&, BlockContainer const&, FormattingContext* parent); explicit TableFormattingContext(FormattingState&, BlockContainer const&, FormattingContext* parent);
@ -19,8 +26,8 @@ public:
virtual void run(Box const&, LayoutMode) override; virtual void run(Box const&, LayoutMode) override;
private: private:
void calculate_column_widths(Box const& row, CSS::Length const& table_width, Vector<float>& column_widths); void calculate_column_widths(Box const& row, CSS::Length const& table_width, Vector<ColumnWidth>& column_widths);
void layout_row(Box const& row, Vector<float>& column_widths); void layout_row(Box const& row, Vector<ColumnWidth>& column_widths);
}; };
} }