diff --git a/Tests/LibWeb/Layout/expected/grid/justify-items.txt b/Tests/LibWeb/Layout/expected/grid/justify-items.txt new file mode 100644 index 0000000000..62d877d848 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/justify-items.txt @@ -0,0 +1,27 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x82.40625 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x64.40625 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box at (11,11) content-size 778x19.46875 [GFC] children: not-inline + BlockContainer
at (12,12) 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: [12,12 43.859375x17.46875] + "Start" + TextNode <#text> + BlockContainer <(anonymous)> at (10,31.46875) content-size 780x0 children: inline + TextNode <#text> + Box at (11,32.46875) content-size 778x19.46875 [GFC] children: not-inline + BlockContainer
at (373.476562,33.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,33.46875 53.046875x17.46875] + "Center" + TextNode <#text> + BlockContainer <(anonymous)> at (10,52.9375) content-size 780x0 children: inline + TextNode <#text> + Box at (11,53.9375) content-size 778x19.46875 [GFC] children: not-inline + BlockContainer
at (758.671875,54.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: [758.671875,54.9375 29.328125x17.46875] + "End" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/justify-items.html b/Tests/LibWeb/Layout/input/grid/justify-items.html new file mode 100644 index 0000000000..5d4800dada --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/justify-items.html @@ -0,0 +1,11 @@ + + +
Start
+
Center
+
End
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index c22dac3a2c..02b886fcf9 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1414,6 +1414,40 @@ void GridFormattingContext::determine_grid_container_height() m_automatic_content_height = total_y; } +CSS::JustifyItems GridFormattingContext::justification_for_item(Box const& box) const +{ + switch (box.computed_values().justify_self()) { + case CSS::JustifySelf::Auto: + return grid_container().computed_values().justify_items(); + case CSS::JustifySelf::End: + return CSS::JustifyItems::End; + case CSS::JustifySelf::Normal: + return CSS::JustifyItems::Normal; + case CSS::JustifySelf::SelfStart: + return CSS::JustifyItems::SelfStart; + case CSS::JustifySelf::SelfEnd: + return CSS::JustifyItems::SelfEnd; + case CSS::JustifySelf::FlexStart: + return CSS::JustifyItems::FlexStart; + case CSS::JustifySelf::FlexEnd: + return CSS::JustifyItems::FlexEnd; + case CSS::JustifySelf::Center: + return CSS::JustifyItems::Center; + case CSS::JustifySelf::Baseline: + return CSS::JustifyItems::Baseline; + case CSS::JustifySelf::Start: + return CSS::JustifyItems::Start; + case CSS::JustifySelf::Stretch: + return CSS::JustifyItems::Stretch; + case CSS::JustifySelf::Safe: + return CSS::JustifyItems::Safe; + case CSS::JustifySelf::Unsafe: + return CSS::JustifyItems::Unsafe; + default: + VERIFY_NOT_REACHED(); + } +} + void GridFormattingContext::resolve_grid_item_widths() { for (auto& item : m_grid_items) { @@ -1441,20 +1475,20 @@ void GridFormattingContext::resolve_grid_item_widths() } 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: + switch (justification_for_item(item.box)) { + case CSS::JustifyItems::Normal: + case CSS::JustifyItems::Stretch: return width; - case CSS::JustifySelf::Center: + case CSS::JustifyItems::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: + case CSS::JustifyItems::Start: + case CSS::JustifyItems::FlexStart: box_state.margin_right += free_space_left_for_alignment; return a_width; - case CSS::JustifySelf::End: - case CSS::JustifySelf::FlexEnd: + case CSS::JustifyItems::End: + case CSS::JustifyItems::FlexEnd: box_state.margin_left += free_space_left_for_alignment; return a_width; default: diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index b42a53ab8e..3717e00fc6 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -103,6 +103,8 @@ public: Box const& grid_container() const { return context_box(); } private: + CSS::JustifyItems justification_for_item(Box const& box) const; + void resolve_items_box_metrics(GridDimension const dimension); CSSPixels m_automatic_content_height { 0 };