5 files changed, 46 insertions, 1 deletions
diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
index 35ce14d154..7c1e6d8407 100644
--- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -59,6 +59,8 @@ public:
     CSS::FlexDirection flex_direction() const { return m_noninherited.flex_direction; }
     CSS::FlexWrap flex_wrap() const { return m_noninherited.flex_wrap; }
     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; }
     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; }
@@ -137,6 +139,8 @@ protected:
         CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
         CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
         CSS::FlexBasisData flex_basis {};
+        Optional<float> flex_grow_factor;
+        Optional<float> flex_shrink_factor;
         CSS::Overflow overflow_x { InitialValues::overflow() };
         CSS::Overflow overflow_y { InitialValues::overflow() };
     } m_noninherited;
@@ -184,6 +188,8 @@ public:
     void set_flex_direction(CSS::FlexDirection value) { m_noninherited.flex_direction = value; }
     void set_flex_wrap(CSS::FlexWrap value) { m_noninherited.flex_wrap = value; }
     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; }
 };
 
 }
diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
index 56bdb2952c..07d58d07e1 100644
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -217,6 +217,14 @@
       "flex-wrap"
     ]
   },
+  "flex-grow": {
+    "inherited": false,
+    "initial": 0
+  },
+  "flex-shrink": {
+    "inherited": false,
+    "initial": 0
+  },
   "flex-wrap": {
     "inherited": false,
     "initial": "nowrap"
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
index 6358e02613..0140059dcf 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <AK/TypeCasts.h>
 #include <LibCore/DirIterator.h>
 #include <LibGfx/FontDatabase.h>
 #include <LibWeb/CSS/StyleProperties.h>
@@ -272,6 +273,32 @@ Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
     return {};
 }
 
+Optional<float> StyleProperties::flex_grow_factor() const
+{
+    auto value = property(CSS::PropertyID::FlexGrow);
+    if (!value.has_value())
+        return {};
+    if (value.value()->is_length() && downcast<CSS::LengthStyleValue>(value.value().ptr())->to_length().raw_value() == 0)
+        return { 0 };
+    if (!value.value()->is_numeric())
+        return {};
+    auto numeric = downcast<CSS::NumericStyleValue>(value.value().ptr());
+    return numeric->value();
+}
+
+Optional<float> StyleProperties::flex_shrink_factor() const
+{
+    auto value = property(CSS::PropertyID::FlexShrink);
+    if (!value.has_value())
+        return {};
+    if (value.value()->is_length() && downcast<CSS::LengthStyleValue>(value.value().ptr())->to_length().raw_value() == 0)
+        return { 0 };
+    if (!value.value()->is_numeric())
+        return {};
+    auto numeric = downcast<CSS::NumericStyleValue>(value.value().ptr());
+    return numeric->value();
+}
+
 Optional<CSS::Position> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);
@@ -694,5 +721,4 @@ Optional<CSS::Repeat> StyleProperties::background_repeat_y() const
         return {};
     }
 }
-
 }
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
index 3fe51836da..048be88d50 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
@@ -54,6 +54,8 @@ public:
     Optional<CSS::FlexDirection> flex_direction() const;
     Optional<CSS::FlexWrap> flex_wrap() const;
     Optional<CSS::FlexBasisData> flex_basis() const;
+    Optional<float> flex_grow_factor() const;
+    Optional<float> flex_shrink_factor() 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/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
index 2142b0a24d..3b167b6ba1 100644
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -267,6 +267,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
     if (flex_basis.has_value())
         computed_values.set_flex_basis(flex_basis.value());
 
+    computed_values.set_flex_grow_factor(specified_style.flex_grow_factor());
+    computed_values.set_flex_shrink_factor(specified_style.flex_shrink_factor());
+
     auto position = specified_style.position();
     if (position.has_value()) {
         computed_values.set_position(position.value());