diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 3ae07316af..a7456e241f 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -42,6 +42,7 @@ public: static CSS::FlexWrap flex_wrap() { return CSS::FlexWrap::Nowrap; } static CSS::ImageRendering image_rendering() { return CSS::ImageRendering::Auto; } static CSS::JustifyContent justify_content() { return CSS::JustifyContent::FlexStart; } + static CSS::AlignContent align_content() { return CSS::AlignContent::Stretch; } static CSS::AlignItems align_items() { return CSS::AlignItems::Stretch; } static CSS::AlignSelf align_self() { return CSS::AlignSelf::Auto; } static CSS::Appearance appearance() { return CSS::Appearance::Auto; } @@ -163,6 +164,7 @@ public: float flex_grow() const { return m_noninherited.flex_grow; } float flex_shrink() const { return m_noninherited.flex_shrink; } int order() const { return m_noninherited.order; } + CSS::AlignContent align_content() const { return m_noninherited.align_content; } CSS::AlignItems align_items() const { return m_noninherited.align_items; } CSS::AlignSelf align_self() const { return m_noninherited.align_self; } CSS::Appearance appearance() const { return m_noninherited.appearance; } @@ -288,6 +290,7 @@ protected: float flex_grow { InitialValues::flex_grow() }; float flex_shrink { InitialValues::flex_shrink() }; int order { InitialValues::order() }; + CSS::AlignContent align_content { InitialValues::align_content() }; CSS::AlignItems align_items { InitialValues::align_items() }; CSS::AlignSelf align_self { InitialValues::align_self() }; CSS::Appearance appearance { InitialValues::appearance() }; @@ -367,6 +370,7 @@ public: void set_flex_grow(float value) { m_noninherited.flex_grow = value; } void set_flex_shrink(float value) { m_noninherited.flex_shrink = value; } void set_order(int value) { m_noninherited.order = value; } + void set_align_content(CSS::AlignContent value) { m_noninherited.align_content = value; } void set_align_items(CSS::AlignItems value) { m_noninherited.align_items = value; } void set_align_self(CSS::AlignSelf value) { m_noninherited.align_self = value; } void set_appearance(CSS::Appearance value) { m_noninherited.appearance = value; } diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json index 20cd77adbd..0ddd90f0ce 100644 --- a/Userland/Libraries/LibWeb/CSS/Enums.json +++ b/Userland/Libraries/LibWeb/CSS/Enums.json @@ -1,4 +1,12 @@ { + "align-content": [ + "flex-start", + "flex-end", + "center", + "space-between", + "space-around", + "stretch" + ], "align-items": [ "baseline", "center", diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 5550db5357..dc5d4bc74c 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -1,4 +1,11 @@ { + "align-content": { + "inherited": false, + "initial": "stretch", + "valid-types": [ + "align-content" + ] + }, "align-items": { "inherited": false, "initial": "stretch", diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index ed2d2bafbd..68a726d8cb 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -349,6 +349,12 @@ CSS::TransformOrigin StyleProperties::transform_origin() const return { x_value.value(), y_value.value() }; } +Optional StyleProperties::align_content() const +{ + auto value = property(CSS::PropertyID::AlignContent); + return value_id_to_align_content(value->to_identifier()); +} + Optional StyleProperties::align_items() const { auto value = property(CSS::PropertyID::AlignItems); diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h index 81dbe2619b..316709dca7 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -68,6 +68,7 @@ public: float flex_grow() const; float flex_shrink() const; int order() const; + Optional align_content() const; Optional align_items() const; Optional align_self() const; Optional appearance() const; diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index af6662d0e8..bcca562761 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -398,6 +398,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) if (justify_content.has_value()) computed_values.set_justify_content(justify_content.value()); + auto align_content = computed_style.align_content(); + if (align_content.has_value()) + computed_values.set_align_content(align_content.value()); + auto align_items = computed_style.align_items(); if (align_items.has_value()) computed_values.set_align_items(align_items.value());