diff --git a/Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt b/Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt new file mode 100644 index 0000000000..ee368af8be --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt @@ -0,0 +1,31 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x284.40625 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x266.40625 children: not-inline + Box at (11,11) content-size 500x200 flex-container(row) [FFC] children: not-inline + BlockContainer
at (12,12) content-size 136.5x17.46875 flex-item [BFC] children: inline + line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 18, rect: [12,12 136.5x17.46875] + "align-items: start" + TextNode <#text> + Box at (11,213) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline + BlockContainer
at (12,214) content-size 121.453125x17.46875 flex-item [BFC] children: inline + line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 16, rect: [12,214 121.453125x17.46875] + "align-items: end" + TextNode <#text> + BlockContainer <(anonymous)> at (10,233.46875) content-size 780x0 children: inline + TextNode <#text> + Box at (11,234.46875) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline + BlockContainer
at (12,235.46875) content-size 136.5x17.46875 flex-item [BFC] children: inline + line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 18, rect: [12,235.46875 136.5x17.46875] + "align-items: start" + TextNode <#text> + Box at (11,255.9375) content-size 500x19.46875 flex-container(column) [FFC] children: not-inline + BlockContainer
at (388.546875,256.9375) content-size 121.453125x17.46875 flex-item [BFC] children: inline + line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 16, rect: [388.546875,256.9375 121.453125x17.46875] + "align-items: end" + TextNode <#text> + BlockContainer <(anonymous)> at (10,276.40625) content-size 780x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/align-keywords-start-and-end.html b/Tests/LibWeb/Layout/input/flex/align-keywords-start-and-end.html new file mode 100644 index 0000000000..3ce709df1a --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/align-keywords-start-and-end.html @@ -0,0 +1,28 @@ + +
align-items: start
align-items: end
+
align-items: start
align-items: end
diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json index 19376e0d63..e8e31557f8 100644 --- a/Userland/Libraries/LibWeb/CSS/Enums.json +++ b/Userland/Libraries/LibWeb/CSS/Enums.json @@ -10,12 +10,14 @@ "align-items": [ "baseline", "center", + "end", "flex-end", "flex-start", "normal", "safe", "self-end", "self-start", + "start", "stretch", "unsafe" ], @@ -23,12 +25,14 @@ "auto", "baseline", "center", + "end", "flex-end", "flex-start", "normal", "safe", "self-end", "self-start", + "start", "stretch", "unsafe" ], diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 406edf019a..3577fb2ee7 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1461,6 +1461,8 @@ CSS::AlignItems FlexFormattingContext::alignment_for_item(Box const& box) const 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: @@ -1482,10 +1484,12 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis() case CSS::AlignItems::Baseline: // FIXME: Implement this // Fallthrough + case CSS::AlignItems::Start: case CSS::AlignItems::FlexStart: case CSS::AlignItems::Stretch: item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before; break; + case CSS::AlignItems::End: case CSS::AlignItems::FlexEnd: item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after; break; @@ -2136,10 +2140,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c case CSS::AlignItems::Baseline: // FIXME: Implement this // Fallthrough + case CSS::AlignItems::Start: case CSS::AlignItems::FlexStart: case CSS::AlignItems::Stretch: cross_offset = -half_line_size + cross_margin_before + cross_border_before + cross_padding_before; break; + case CSS::AlignItems::End: case CSS::AlignItems::FlexEnd: cross_offset = half_line_size - inner_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after; break;