LibWeb: Add support for justify-items property in CSS parser

Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/f060f89220
Pull-request: https://github.com/SerenityOS/serenity/pull/20024

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -66,6 +66,7 @@ public:
     static CSS::FlexBasis flex_basis() { return CSS::Size::make_auto(); }
     static CSS::ImageRendering image_rendering() { return CSS::ImageRendering::Auto; }
     static CSS::JustifyContent justify_content() { return CSS::JustifyContent::FlexStart; }
+    static CSS::JustifyItems justify_items() { return CSS::JustifyItems::Legacy; }
     static CSS::JustifySelf justify_self() { return CSS::JustifySelf::Auto; }
     static CSS::AlignContent align_content() { return CSS::AlignContent::Stretch; }
     static CSS::AlignItems align_items() { return CSS::AlignItems::Stretch; }
@@ -255,6 +256,7 @@ public:
     CSS::ImageRendering image_rendering() const { return m_inherited.image_rendering; }
     CSS::JustifyContent justify_content() const { return m_noninherited.justify_content; }
     CSS::JustifySelf justify_self() const { return m_noninherited.justify_self; }
+    CSS::JustifyItems justify_items() const { return m_noninherited.justify_items; }
     CSS::BackdropFilter const& backdrop_filter() const { return m_noninherited.backdrop_filter; }
     Vector<ShadowData> const& box_shadow() const { return m_noninherited.box_shadow; }
     CSS::BoxSizing box_sizing() const { return m_noninherited.box_sizing; }
@@ -403,6 +405,7 @@ protected:
         CSS::AlignSelf align_self { InitialValues::align_self() };
         CSS::Appearance appearance { InitialValues::appearance() };
         CSS::JustifyContent justify_content { InitialValues::justify_content() };
+        CSS::JustifyItems justify_items { InitialValues::justify_items() };
         CSS::JustifySelf justify_self { InitialValues::justify_self() };
         CSS::Overflow overflow_x { InitialValues::overflow() };
         CSS::Overflow overflow_y { InitialValues::overflow() };
@@ -505,6 +508,7 @@ public:
     void set_appearance(CSS::Appearance value) { m_noninherited.appearance = value; }
     void set_opacity(float value) { m_noninherited.opacity = value; }
     void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; }
+    void set_justify_items(CSS::JustifyItems value) { m_noninherited.justify_items = value; }
     void set_justify_self(CSS::JustifySelf value) { m_noninherited.justify_self = value; }
     void set_box_shadow(Vector<ShadowData>&& value) { m_noninherited.box_shadow = move(value); }
     void set_transformations(Vector<CSS::Transformation> value) { m_noninherited.transformations = move(value); }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -176,6 +176,21 @@
         "space-around",
         "space-evenly"
     ],
+    "justify-items": [
+        "baseline",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "legacy",
+        "normal",
+        "safe",
+        "self-end",
+        "self-start",
+        "start",
+        "stretch",
+        "unsafe"
+    ],
     "justify-self": [
         "auto",
         "baseline",

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -174,6 +174,7 @@
   "landscape",
   "large",
   "larger",
+  "legacy",
   "left",
   "less",
   "light",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -1260,6 +1260,13 @@
       "justify-content"
     ]
   },
+  "justify-items": {
+    "inherited": false,
+    "initial": "legacy",
+    "valid-types": [
+      "justify-items"
+    ]
+  },
   "justify-self": {
     "inherited": false,
     "initial": "auto",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -691,6 +691,8 @@ ErrorOr<RefPtr<StyleValue const>> ResolvedCSSStyleDeclaration::style_value_for_p
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().image_rendering()));
     case PropertyID::JustifyContent:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().justify_content()));
+    case PropertyID::JustifyItems:
+        return TRY(IdentifierStyleValue::create(to_value_id(layout_node.computed_values().justify_items())));
     case PropertyID::JustifySelf:
         return TRY(IdentifierStyleValue::create(to_value_id(layout_node.computed_values().justify_self())));
     case PropertyID::Left:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -405,6 +405,12 @@ Optional<CSS::JustifyContent> StyleProperties::justify_content() const
     return value_id_to_justify_content(value->to_identifier());
 }
 
+Optional<CSS::JustifyItems> StyleProperties::justify_items() const
+{
+    auto value = property(CSS::PropertyID::JustifyItems);
+    return value_id_to_justify_items(value->to_identifier());
+}
+
 Optional<CSS::JustifySelf> StyleProperties::justify_self() const
 {
     auto value = property(CSS::PropertyID::JustifySelf);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -83,6 +83,7 @@ public:
     Optional<CSS::Visibility> visibility() const;
     Optional<CSS::ImageRendering> image_rendering() const;
     Optional<CSS::JustifyContent> justify_content() const;
+    Optional<CSS::JustifyItems> justify_items() const;
     Optional<CSS::JustifySelf> justify_self() const;
     Optional<CSS::Overflow> overflow_x() const;
     Optional<CSS::Overflow> overflow_y() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -491,6 +491,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (justify_content.has_value())
         computed_values.set_justify_content(justify_content.value());
 
+    auto justify_items = computed_style.justify_items();
+    if (justify_items.has_value())
+        computed_values.set_justify_items(justify_items.value());
+
     auto justify_self = computed_style.justify_self();
     if (justify_self.has_value())
         computed_values.set_justify_self(justify_self.value());