diff --git a/Tests/LibWeb/Layout/expected/grid/justify-self.txt b/Tests/LibWeb/Layout/expected/grid/justify-self.txt new file mode 100644 index 0000000000..09e9a18d95 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/justify-self.txt @@ -0,0 +1,26 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x76.40625 [BFC] children: not-inline + Box at (10,10) content-size 780x58.40625 [GFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (11,11) content-size 43.859375x17.46875 [BFC] children: inline + line 0 width: 43.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [11,11 43.859375x17.46875] + "Start" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (373.476562,30.46875) content-size 53.046875x17.46875 [BFC] children: inline + line 0 width: 53.046875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [373.476562,30.46875 53.046875x17.46875] + "Center" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (759.671875,49.9375) content-size 29.328125x17.46875 [BFC] children: inline + line 0 width: 29.328125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 3, rect: [759.671875,49.9375 29.328125x17.46875] + "End" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/justify-self.html b/Tests/LibWeb/Layout/input/grid/justify-self.html new file mode 100644 index 0000000000..0de58dac13 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/justify-self.html @@ -0,0 +1,15 @@ + + + +
Start
+
Center
+
End
+ diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index df1bf79f18..c22dac3a2c 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1426,17 +1426,39 @@ void GridFormattingContext::resolve_grid_item_widths() auto try_compute_width = [&](CSSPixels a_width) { CSSPixels width = a_width; - auto underflow_px = containing_block_width - width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right - box_state.margin_left - box_state.margin_right; + + // Auto margins absorb positive free space prior to alignment via the box alignment properties. + auto free_space_left_for_margins = containing_block_width - width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right - box_state.margin_left - box_state.margin_right; if (computed_values.margin().left().is_auto() && computed_values.margin().right().is_auto()) { - auto half_of_the_underflow = underflow_px / 2; - box_state.margin_left = half_of_the_underflow; - box_state.margin_right = half_of_the_underflow; + box_state.margin_left = free_space_left_for_margins / 2; + box_state.margin_right = free_space_left_for_margins / 2; } else if (computed_values.margin().left().is_auto()) { - box_state.margin_left = underflow_px; + box_state.margin_left = free_space_left_for_margins; } else if (computed_values.margin().right().is_auto()) { - box_state.margin_right = underflow_px; + box_state.margin_right = free_space_left_for_margins; } else if (computed_values.width().is_auto()) { - width += underflow_px; + width += free_space_left_for_margins; + } + + auto free_space_left_for_alignment = containing_block_width - a_width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right - box_state.margin_left - box_state.margin_right; + switch (computed_values.justify_self()) { + case CSS::JustifySelf::Normal: + case CSS::JustifySelf::Stretch: + return width; + case CSS::JustifySelf::Center: + box_state.margin_left += free_space_left_for_alignment / 2; + box_state.margin_right += free_space_left_for_alignment / 2; + return a_width; + case CSS::JustifySelf::Start: + case CSS::JustifySelf::FlexStart: + box_state.margin_right += free_space_left_for_alignment; + return a_width; + case CSS::JustifySelf::End: + case CSS::JustifySelf::FlexEnd: + box_state.margin_left += free_space_left_for_alignment; + return a_width; + default: + break; } return width;