diff --git a/Tests/LibWeb/Layout/expected/grid/align-items.txt b/Tests/LibWeb/Layout/expected/grid/align-items.txt new file mode 100644 index 0000000000..85e7dd84a8 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/align-items.txt @@ -0,0 +1,42 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x262.40625 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x244.40625 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box at (31,31) content-size 738x39.46875 [GFC] children: not-inline + BlockContainer
at (32,32) content-size 367x17.46875 [BFC] children: inline + line 0 width: 50.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [32,32 50.203125x17.46875] + "Start1" + TextNode <#text> + BlockContainer at (411,42) content-size 347x17.46875 [BFC] children: inline + line 0 width: 52.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [411,42 52.671875x17.46875] + "Start2" + TextNode <#text> + BlockContainer <(anonymous)> at (10,91.46875) content-size 780x0 children: inline + TextNode <#text> + Box at (31,112.46875) content-size 738x39.46875 [GFC] children: not-inline + BlockContainer
at (32,123.46875) content-size 367x17.46875 [BFC] children: inline + line 0 width: 59.390625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [32,123.46875 59.390625x17.46875] + "Center1" + TextNode <#text> + BlockContainer at (411,123.46875) content-size 347x17.46875 [BFC] children: inline + line 0 width: 61.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [411,123.46875 61.859375x17.46875] + "Center2" + TextNode <#text> + BlockContainer <(anonymous)> at (10,172.9375) content-size 780x0 children: inline + TextNode <#text> + Box at (31,193.9375) content-size 738x39.46875 [GFC] children: not-inline + BlockContainer
at (32,214.9375) content-size 367x17.46875 [BFC] children: inline + line 0 width: 35.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [32,214.9375 35.671875x17.46875] + "End1" + TextNode <#text> + BlockContainer at (411,204.9375) content-size 347x17.46875 [BFC] children: inline + line 0 width: 38.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [411,204.9375 38.140625x17.46875] + "End2" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/grid/align-self.txt b/Tests/LibWeb/Layout/expected/grid/align-self.txt new file mode 100644 index 0000000000..178ea2f7a5 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/align-self.txt @@ -0,0 +1,42 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x262.40625 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x244.40625 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box at (31,31) content-size 738x39.46875 [GFC] children: not-inline + BlockContainer at (32,32) content-size 367x17.46875 [BFC] children: inline + line 0 width: 50.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [32,32 50.203125x17.46875] + "Start1" + TextNode <#text> + BlockContainer at (411,42) content-size 347x17.46875 [BFC] children: inline + line 0 width: 52.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [411,42 52.671875x17.46875] + "Start2" + TextNode <#text> + BlockContainer <(anonymous)> at (10,91.46875) content-size 780x0 children: inline + TextNode <#text> + Box at (31,112.46875) content-size 738x39.46875 [GFC] children: not-inline + BlockContainer at (32,123.46875) content-size 367x17.46875 [BFC] children: inline + line 0 width: 59.390625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [32,123.46875 59.390625x17.46875] + "Center1" + TextNode <#text> + BlockContainer at (411,123.46875) content-size 347x17.46875 [BFC] children: inline + line 0 width: 61.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [411,123.46875 61.859375x17.46875] + "Center2" + TextNode <#text> + BlockContainer <(anonymous)> at (10,172.9375) content-size 780x0 children: inline + TextNode <#text> + Box at (31,193.9375) content-size 738x39.46875 [GFC] children: not-inline + BlockContainer at (32,214.9375) content-size 367x17.46875 [BFC] children: inline + line 0 width: 35.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [32,214.9375 35.671875x17.46875] + "End1" + TextNode <#text> + BlockContainer at (411,204.9375) content-size 347x17.46875 [BFC] children: inline + line 0 width: 38.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [411,204.9375 38.140625x17.46875] + "End2" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/align-items.html b/Tests/LibWeb/Layout/input/grid/align-items.html new file mode 100644 index 0000000000..ef7156502c --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/align-items.html @@ -0,0 +1,12 @@ + + +
Start1
Start2
+
Center1
Center2
+
End1
End2
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/align-self.html b/Tests/LibWeb/Layout/input/grid/align-self.html new file mode 100644 index 0000000000..eb416e2a98 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/align-self.html @@ -0,0 +1,12 @@ + + +
Start1
Start2
+
Center1
Center2
+
End1
End2
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index c21fdd9115..edf3a2b586 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1452,6 +1452,40 @@ CSS::JustifyItems GridFormattingContext::justification_for_item(Box const& box) } } +CSS::AlignItems GridFormattingContext::alignment_for_item(Box const& box) const +{ + switch (box.computed_values().align_self()) { + case CSS::AlignSelf::Auto: + return grid_container().computed_values().align_items(); + case CSS::AlignSelf::End: + return CSS::AlignItems::End; + case CSS::AlignSelf::Normal: + return CSS::AlignItems::Normal; + case CSS::AlignSelf::SelfStart: + return CSS::AlignItems::SelfStart; + case CSS::AlignSelf::SelfEnd: + return CSS::AlignItems::SelfEnd; + case CSS::AlignSelf::FlexStart: + return CSS::AlignItems::FlexStart; + case CSS::AlignSelf::FlexEnd: + return CSS::AlignItems::FlexEnd; + case CSS::AlignSelf::Center: + return CSS::AlignItems::Center; + case CSS::AlignSelf::Baseline: + return CSS::AlignItems::Baseline; + case CSS::AlignSelf::Start: + return CSS::AlignItems::Start; + case CSS::AlignSelf::Stretch: + return CSS::AlignItems::Stretch; + case CSS::AlignSelf::Safe: + return CSS::AlignItems::Safe; + case CSS::AlignSelf::Unsafe: + return CSS::AlignItems::Unsafe; + default: + VERIFY_NOT_REACHED(); + } +} + void GridFormattingContext::resolve_grid_item_widths() { for (auto& item : m_grid_items) { @@ -1539,6 +1573,30 @@ void GridFormattingContext::resolve_grid_item_heights() height += underflow_px; } + switch (alignment_for_item(item.box)) { + case CSS::AlignItems::Baseline: + // FIXME: Not implemented + case CSS::AlignItems::Stretch: + case CSS::AlignItems::Normal: + break; + case CSS::AlignItems::Start: + case CSS::AlignItems::FlexStart: + case CSS::AlignItems::SelfStart: + box_state.margin_bottom += underflow_px; + return a_height; + case CSS::AlignItems::End: + case CSS::AlignItems::SelfEnd: + case CSS::AlignItems::FlexEnd: + box_state.margin_top += underflow_px; + return a_height; + case CSS::AlignItems::Center: + box_state.margin_top += underflow_px / 2; + box_state.margin_bottom += underflow_px / 2; + return a_height; + default: + break; + } + return height; }; diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index dbdd6a3fd2..142193317e 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -104,6 +104,7 @@ public: private: CSS::JustifyItems justification_for_item(Box const& box) const; + CSS::AlignItems alignment_for_item(Box const& box) const; void resolve_items_box_metrics(GridDimension const dimension);