diff --git a/Tests/LibWeb/Layout/expected/grid/implicit-lines.txt b/Tests/LibWeb/Layout/expected/grid/implicit-lines.txt new file mode 100644 index 0000000000..ec2e27aadd --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/implicit-lines.txt @@ -0,0 +1,30 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x236 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x220 children: not-inline + Box at (8,8) content-size 784x220 [GFC] children: not-inline + BlockContainer at (405,8) content-size 387x100 [BFC] children: inline + line 0 width: 49.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [405,8 49.1875x17.46875] + "Item 2" + TextNode <#text> + BlockContainer at (8,8) content-size 387x210 [BFC] children: inline + line 0 width: 46.71875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [8,8 46.71875x17.46875] + "Item 1" + TextNode <#text> + BlockContainer at (405,118) content-size 387x100 [BFC] children: inline + line 0 width: 49.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [405,118 49.1875x17.46875] + "Item 2" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x236] + PaintableWithLines (BlockContainer) [8,8 784x220] + PaintableBox (Box
.grid-container) [8,8 784x220] + PaintableWithLines (BlockContainer
.item2) [405,8 387x100] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.item1) [8,8 387x210] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.item3) [405,118 387x100] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/grid/implicit-lines.html b/Tests/LibWeb/Layout/input/grid/implicit-lines.html new file mode 100644 index 0000000000..2279fd1109 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/implicit-lines.html @@ -0,0 +1,34 @@ + +
Item 2
Item 1
Item 2
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index b3238c06cd..7f44715182 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1406,6 +1406,32 @@ void GridFormattingContext::build_grid_areas() find_area_rectangle(x, y, name); } } + + size_t max_column_line_index_of_area = 0; + size_t max_row_line_index_of_area = 0; + for (auto const& grid_area : m_grid_areas) { + max_column_line_index_of_area = max(max_column_line_index_of_area, grid_area.value.column_end); + max_row_line_index_of_area = max(max_row_line_index_of_area, grid_area.value.row_end); + } + + if (max_column_line_index_of_area >= m_column_lines.size()) + m_column_lines.resize(max_column_line_index_of_area + 1); + if (max_row_line_index_of_area >= m_row_lines.size()) + m_row_lines.resize(max_row_line_index_of_area + 1); + + // https://www.w3.org/TR/css-grid-2/#implicitly-assigned-line-name + // 7.3.2. Implicitly-Assigned Line Names + // The grid-template-areas property generates implicitly-assigned line names from the named grid areas in the + // template. For each named grid area foo, four implicitly-assigned line names are created: two named foo-start, + // naming the row-start and column-start lines of the named grid area, and two named foo-end, naming the row-end + // and column-end lines of the named grid area. + for (auto const& it : m_grid_areas) { + auto const& grid_area = it.value; + m_column_lines[grid_area.column_start].names.append(MUST(String::formatted("{}-start", grid_area.name))); + m_column_lines[grid_area.column_end].names.append(MUST(String::formatted("{}-end", grid_area.name))); + m_row_lines[grid_area.row_start].names.append(MUST(String::formatted("{}-start", grid_area.name))); + m_row_lines[grid_area.row_end].names.append(MUST(String::formatted("{}-end", grid_area.name))); + } } void GridFormattingContext::place_grid_items() @@ -1439,8 +1465,6 @@ void GridFormattingContext::place_grid_items() m_occupation_grid = OccupationGrid(column_tracks_count, row_tracks_count); - build_grid_areas(); - // https://drafts.csswg.org/css-grid/#auto-placement-algo // 8.5. Grid Item Placement Algorithm @@ -1927,6 +1951,8 @@ void GridFormattingContext::run(Box const&, LayoutMode, AvailableSpace const& av init_grid_lines(GridDimension::Column); init_grid_lines(GridDimension::Row); + build_grid_areas(); + auto const& grid_computed_values = grid_container().computed_values(); // NOTE: We store explicit grid sizes to later use in determining the position of items with negative index.