diff --git a/Tests/LibWeb/Layout/expected/grid/justify-content.txt b/Tests/LibWeb/Layout/expected/grid/justify-content.txt new file mode 100644 index 0000000000..4125757560 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/justify-content.txt @@ -0,0 +1,99 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x103.34375 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x87.34375 children: not-inline + Box at (8,8) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer
at (8,8) content-size 392x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [8,8 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer
at (400,8) content-size 392x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [400,8 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline + TextNode <#text> + Box at (8,25.46875) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer
at (8,25.46875) content-size 392x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [8,25.46875 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer
at (400,25.46875) content-size 392x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [400,25.46875 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline + TextNode <#text> + Box at (8,42.9375) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer
at (8,42.9375) content-size 67.96875x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [8,42.9375 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer
at (75.96875,42.9375) content-size 67.96875x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [75.96875,42.9375 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer <(anonymous)> at (8,60.40625) content-size 784x0 children: inline + TextNode <#text> + Box at (8,60.40625) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer
at (332.03125,60.40625) content-size 67.96875x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [332.03125,60.40625 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer
at (400,60.40625) content-size 67.96875x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [400,60.40625 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer <(anonymous)> at (8,77.875) content-size 784x0 children: inline + TextNode <#text> + Box at (8,77.875) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer
at (656.0625,77.875) content-size 67.96875x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [656.0625,77.875 67.96875x17.46875] + "wikipedia" + TextNode <#text> + BlockContainer
at (724.03125,77.875) content-size 67.96875x17.46875 [BFC] children: inline + line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [724.03125,77.875 67.96875x17.46875] + "wikipedia" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x103.34375] + PaintableWithLines (BlockContainer) [8,8 784x87.34375] + PaintableBox (Box
.container) [8,8 784x17.46875] + PaintableWithLines (BlockContainer
) [8,8 392x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [400,8 392x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,25.46875 784x0] + PaintableBox (Box
.container) [8,25.46875 784x17.46875] + PaintableWithLines (BlockContainer
) [8,25.46875 392x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [400,25.46875 392x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,42.9375 784x0] + PaintableBox (Box
.container) [8,42.9375 784x17.46875] + PaintableWithLines (BlockContainer
) [8,42.9375 67.96875x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [75.96875,42.9375 67.96875x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,60.40625 784x0] + PaintableBox (Box
.container) [8,60.40625 784x17.46875] + PaintableWithLines (BlockContainer
) [332.03125,60.40625 67.96875x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [400,60.40625 67.96875x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,77.875 784x0] + PaintableBox (Box
.container) [8,77.875 784x17.46875] + PaintableWithLines (BlockContainer
) [656.0625,77.875 67.96875x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [724.03125,77.875 67.96875x17.46875] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/grid/justify-content.html b/Tests/LibWeb/Layout/input/grid/justify-content.html new file mode 100644 index 0000000000..0e07971096 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/justify-content.html @@ -0,0 +1,14 @@ + +
wikipedia
wikipedia
+
wikipedia
wikipedia
+
wikipedia
wikipedia
+
wikipedia
wikipedia
+
wikipedia
wikipedia
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index a5bc92f735..3730a9d904 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1302,15 +1302,27 @@ void GridFormattingContext::stretch_auto_tracks(AvailableSpace const& available_ { // https://drafts.csswg.org/css-grid/#algo-stretch // 12.8. Stretch auto Tracks - - auto& tracks_and_gaps = dimension == GridDimension::Column ? m_grid_columns_and_gaps : m_grid_rows_and_gaps; - auto& available_size = dimension == GridDimension::Column ? available_space.width : available_space.height; - // When the content-distribution property of the grid container is normal or stretch in this axis, // this step expands tracks that have an auto max track sizing function by dividing any remaining // positive, definite free space equally amongst them. If the free space is indefinite, but the grid // container has a definite min-width/height, use that size to calculate the free space for this // step instead. + + auto content_distribution_property_is_normal_or_stretch = false; + if (dimension == GridDimension::Column) { + auto const& justify_content = grid_container().computed_values().justify_content(); + content_distribution_property_is_normal_or_stretch = justify_content == CSS::JustifyContent::Normal || justify_content == CSS::JustifyContent::Stretch; + } else { + auto const& align_content = grid_container().computed_values().align_content(); + content_distribution_property_is_normal_or_stretch = align_content == CSS::AlignContent::Normal || align_content == CSS::AlignContent::Stretch; + } + + if (!content_distribution_property_is_normal_or_stretch) + return; + + auto& tracks_and_gaps = dimension == GridDimension::Column ? m_grid_columns_and_gaps : m_grid_rows_and_gaps; + auto& available_size = dimension == GridDimension::Column ? available_space.width : available_space.height; + CSSPixels used_space = 0; for (auto& track : tracks_and_gaps) { if (!track.max_track_sizing_function.is_auto(available_size)) @@ -1876,8 +1888,24 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item int column_start = grid_item.gap_adjusted_column(grid_container()); int column_end = grid_item.gap_adjusted_column(grid_container()) + resolved_column_span; + auto grid_container_width = m_available_space->width.to_px_or_zero(); + CSSPixels sum_base_size_of_columns = 0; + for (size_t i = 0; i < m_grid_columns_and_gaps.size(); i++) + sum_base_size_of_columns += m_grid_columns_and_gaps[i].base_size; + auto const& justify_content = grid_container().computed_values().justify_content(); + CSSPixels x_start = 0; CSSPixels x_end = 0; + if (justify_content == CSS::JustifyContent::Center) { + auto free_space = grid_container_width - sum_base_size_of_columns; + x_start = free_space / 2; + x_end = free_space / 2; + } else if (justify_content == CSS::JustifyContent::End) { + auto free_space = grid_container_width - sum_base_size_of_columns; + x_start = free_space; + x_end = free_space; + } + CSSPixels y_start = 0; CSSPixels y_end = 0; for (int i = 0; i < column_start; i++)