LibWeb: Add parsing for the justify-content property

7 files changed, 45 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
index 7c1e6d8407..2e05b20529 100644
--- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -29,6 +29,7 @@ public:
     static CSS::ListStyleType list_style_type() { return CSS::ListStyleType::Disc; }
     static CSS::FlexDirection flex_direction() { return CSS::FlexDirection::Row; }
     static CSS::FlexWrap flex_wrap() { return CSS::FlexWrap::Nowrap; }
+    static CSS::JustifyContent justify_content() { return CSS::JustifyContent::FlexStart; }
     static CSS::Overflow overflow() { return CSS::Overflow::Visible; }
 };
 
@@ -61,6 +62,7 @@ public:
     FlexBasisData flex_basis() const { return m_noninherited.flex_basis; }
     Optional<float> flex_grow_factor() const { return m_noninherited.flex_grow_factor; }
     Optional<float> flex_shrink_factor() const { return m_noninherited.flex_shrink_factor; }
+    CSS::JustifyContent justify_content() const { return m_noninherited.justify_content; }
     const CSS::Length& width() const { return m_noninherited.width; }
     const CSS::Length& min_width() const { return m_noninherited.min_width; }
     const CSS::Length& max_width() const { return m_noninherited.max_width; }
@@ -141,6 +143,7 @@ protected:
         CSS::FlexBasisData flex_basis {};
         Optional<float> flex_grow_factor;
         Optional<float> flex_shrink_factor;
+        CSS::JustifyContent justify_content { InitialValues::justify_content() };
         CSS::Overflow overflow_x { InitialValues::overflow() };
         CSS::Overflow overflow_y { InitialValues::overflow() };
     } m_noninherited;
@@ -190,6 +193,7 @@ public:
     void set_flex_basis(FlexBasisData value) { m_noninherited.flex_basis = value; }
     void set_flex_grow_factor(Optional<float> value) { m_noninherited.flex_grow_factor = value; }
     void set_flex_shrink_factor(Optional<float> value) { m_noninherited.flex_shrink_factor = value; }
+    void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; }
 };
 
 }
diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json
index bbeb9aea1e..d09767a16f 100644
--- a/Userland/Libraries/LibWeb/CSS/Identifiers.json
+++ b/Userland/Libraries/LibWeb/CSS/Identifiers.json
@@ -87,6 +87,8 @@
   "ew-resize",
   "fixed",
   "flex",
+  "flex-start",
+  "flex-end",
   "full-size-kana",
   "full-width",
   "grab",
@@ -145,6 +147,8 @@
   "smaller",
   "solid",
   "space",
+  "space-around",
+  "space-between",
   "square",
   "s-resize",
   "static",
diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
index 5cd131d997..c2e84902bf 100644
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -272,6 +272,10 @@
     "inherited": false,
     "initial": "auto"
   },
+  "justify-content": {
+    "inherited": false,
+    "initial": "flex-start"
+  },
   "left": {
     "inherited": false,
     "initial": "auto"
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
index e3c9a56222..30b1e5d51a 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -298,6 +298,26 @@ Optional<float> StyleProperties::flex_shrink_factor() const
     auto numeric = verify_cast<CSS::NumericStyleValue>(value.value().ptr());
     return numeric->value();
 }
+Optional<CSS::JustifyContent> StyleProperties::justify_content() const
+{
+    auto value = property(CSS::PropertyID::JustifyContent);
+    if (!value.has_value())
+        return {};
+    switch (value.value()->to_identifier()) {
+    case CSS::ValueID::FlexStart:
+        return CSS::JustifyContent::FlexStart;
+    case CSS::ValueID::FlexEnd:
+        return CSS::JustifyContent::FlexEnd;
+    case CSS::ValueID::Center:
+        return CSS::JustifyContent::Center;
+    case CSS::ValueID::SpaceBetween:
+        return CSS::JustifyContent::SpaceBetween;
+    case CSS::ValueID::SpaceAround:
+        return CSS::JustifyContent::SpaceAround;
+    default:
+        return {};
+    }
+}
 
 Optional<CSS::Position> StyleProperties::position() const
 {
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
index 048be88d50..74c9715c36 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
@@ -56,6 +56,7 @@ public:
     Optional<CSS::FlexBasisData> flex_basis() const;
     Optional<float> flex_grow_factor() const;
     Optional<float> flex_shrink_factor() const;
+    Optional<CSS::JustifyContent> justify_content() const;
     Optional<CSS::Overflow> overflow_x() const;
     Optional<CSS::Overflow> overflow_y() const;
     Optional<CSS::Repeat> background_repeat_x() const;
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h
index 51910ff91c..c03c926a43 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@@ -195,6 +195,14 @@ enum class Repeat : u8 {
     Space,
 };
 
+enum class JustifyContent {
+    FlexStart,
+    FlexEnd,
+    Center,
+    SpaceBetween,
+    SpaceAround,
+};
+
 class StyleValue : public RefCounted<StyleValue> {
 public:
     virtual ~StyleValue();
diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
index fc3432e42e..063f9d6e46 100644
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -271,6 +271,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
     computed_values.set_flex_grow_factor(specified_style.flex_grow_factor());
     computed_values.set_flex_shrink_factor(specified_style.flex_shrink_factor());
 
+    auto justify_content = specified_style.justify_content();
+    if (justify_content.has_value())
+        computed_values.set_justify_content(justify_content.value());
+
     auto position = specified_style.position();
     if (position.has_value()) {
         computed_values.set_position(position.value());