From e2c5e312921a4fc0b72ffad042bb101807ea6cdc Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Thu, 13 Jul 2023 15:49:07 +0200 Subject: [PATCH] LibWeb: Adjust grid columns size to fit spanning items This change implements following paragraph from placement algorithm in the spec: "If the largest column span among all the items without a definite column position is larger than the width of the implicit grid, add columns to the end of the implicit grid to accommodate that column span." There were places in the grid implementation code with copies of this text, but those were completely unrelated to the code where they were being pasted so I removed them. --- .../grid/item-span-exceeds-columns-size.txt | 5 ++++ .../grid/item-span-exceeds-columns-size.html | 13 ++++++++++ .../LibWeb/Layout/GridFormattingContext.cpp | 24 +++++++++++-------- .../LibWeb/Layout/GridFormattingContext.h | 2 ++ 4 files changed, 34 insertions(+), 10 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/item-span-exceeds-columns-size.txt create mode 100644 Tests/LibWeb/Layout/input/grid/item-span-exceeds-columns-size.html diff --git a/Tests/LibWeb/Layout/expected/grid/item-span-exceeds-columns-size.txt b/Tests/LibWeb/Layout/expected/grid/item-span-exceeds-columns-size.txt new file mode 100644 index 0000000000..83508435c0 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/item-span-exceeds-columns-size.txt @@ -0,0 +1,5 @@ +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 784x100 children: not-inline + Box at (8,8) content-size 300x100 [GFC] children: not-inline + BlockContainer at (8,8) content-size 300x100 [BFC] children: not-inline diff --git a/Tests/LibWeb/Layout/input/grid/item-span-exceeds-columns-size.html b/Tests/LibWeb/Layout/input/grid/item-span-exceeds-columns-size.html new file mode 100644 index 0000000000..87b17df492 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/item-span-exceeds-columns-size.html @@ -0,0 +1,13 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 98327196e5..df1bf79f18 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -362,11 +362,6 @@ void GridFormattingContext::place_item_with_row_position(Box const& child_box) int column_start = 0; size_t column_span = child_box.computed_values().grid_column_start().is_span() ? child_box.computed_values().grid_column_start().raw_value() : 1; - // https://drafts.csswg.org/css-grid/#auto-placement-algo - // 8.5. Grid Item Placement Algorithm - // 3.3. If the largest column span among all the items without a definite column position is larger - // than the width of the implicit grid, add columns to the end of the implicit grid to accommodate - // that column span. bool found_available_column = false; for (size_t column_index = column_start; column_index < m_occupation_grid.column_count(); column_index++) { if (!m_occupation_grid.is_occupied(column_index, row_start)) { @@ -531,11 +526,6 @@ void GridFormattingContext::place_item_with_no_declared_position(Box const& chil column_span = child_box.computed_values().grid_column_start().raw_value(); else if (child_box.computed_values().grid_column_end().is_span()) column_span = child_box.computed_values().grid_column_end().raw_value(); - // https://drafts.csswg.org/css-grid/#auto-placement-algo - // 8.5. Grid Item Placement Algorithm - // 3.3. If the largest column span among all the items without a definite column position is larger - // than the width of the implicit grid, add columns to the end of the implicit grid to accommodate - // that column span. auto row_start = 0; size_t row_span = 1; if (child_box.computed_values().grid_row_start().is_span()) @@ -1371,6 +1361,20 @@ void GridFormattingContext::place_grid_items(AvailableSpace const& available_spa // and 2, respectively. Adding columns for "items not yet positioned but with a definite column" // will be done in step 4. + // 3.3. If the largest column span among all the items without a definite column position is larger + // than the width of the implicit grid, add columns to the end of the implicit grid to accommodate + // that column span. + for (auto const& child_box : m_boxes_to_place) { + int column_span = 1; + if (child_box->computed_values().grid_column_start().is_span()) + column_span = child_box->computed_values().grid_column_start().raw_value(); + else if (child_box->computed_values().grid_column_end().is_span()) + column_span = child_box->computed_values().grid_column_end().raw_value(); + + if (column_span - 1 > m_occupation_grid.max_column_index()) + m_occupation_grid.set_max_column_index(column_span - 1); + } + // 4. Position the remaining grid items. // For each grid item that hasn't been positioned by the previous steps, in order-modified document // order: diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index 5427e30b4a..b42a53ab8e 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -73,6 +73,8 @@ public: return abs(m_min_row_index) + m_max_row_index + 1; } + void set_max_column_index(size_t max_column_index) { m_max_column_index = max_column_index; } + int min_column_index() const { return m_min_column_index; } int max_column_index() const { return m_max_column_index; } int min_row_index() const { return m_min_row_index; }