LibWeb: Parse the CSS "flex-direction" property

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -45,6 +45,7 @@ public:
     static Color color() { return Color::Black; }
     static Color background_color() { return Color::Transparent; }
     static CSS::ListStyleType list_style_type() { return CSS::ListStyleType::Disc; }
+    static CSS::FlexDirection flex_direction() { return CSS::FlexDirection::Row; }
 };
 
 struct BorderData {
@@ -65,6 +66,7 @@ public:
     CSS::TextTransform text_transform() const { return m_inherited.text_transform; }
     CSS::Position position() const { return m_noninherited.position; }
     CSS::WhiteSpace white_space() const { return m_inherited.white_space; }
+    CSS::FlexDirection flex_direction() const { return m_noninherited.flex_direction; }
     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; }
@@ -123,6 +125,7 @@ protected:
         BorderData border_right;
         BorderData border_bottom;
         Color background_color { InitialValues::background_color() };
+        CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
     } m_noninherited;
 };
 
@@ -156,6 +159,7 @@ public:
     BorderData& border_top() { return m_noninherited.border_top; }
     BorderData& border_right() { return m_noninherited.border_right; }
     BorderData& border_bottom() { return m_noninherited.border_bottom; }
+    void set_flex_direction(CSS::FlexDirection value) { m_noninherited.flex_direction = value; }
 };
 
 }

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -64,6 +64,8 @@
   "capitalize",
   "center",
   "circle",
+  "column",
+  "column-reverse",
   "dashed",
   "decimal",
   "disc",
@@ -98,6 +100,8 @@
   "relative",
   "ridge",
   "right",
+  "row",
+  "row-reverse",
   "small",
   "smaller",
   "solid",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -168,6 +168,10 @@
     "inherited": false,
     "initial": "inline"
   },
+  "flex-direction": {
+    "inherited": false,
+    "initial": "row"
+  },
   "float": {
     "inherited": false,
     "initial": "none"

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -225,6 +225,25 @@ Optional<int> StyleProperties::z_index() const
     return static_cast<int>(value.value()->to_length().raw_value());
 }
 
+Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
+{
+    auto value = property(CSS::PropertyID::FlexDirection);
+    if (!value.has_value())
+        return {};
+    switch (value.value()->to_identifier()) {
+    case CSS::ValueID::Row:
+        return CSS::FlexDirection::Row;
+    case CSS::ValueID::RowReverse:
+        return CSS::FlexDirection::RowReverse;
+    case CSS::ValueID::Column:
+        return CSS::FlexDirection::Column;
+    case CSS::ValueID::ColumnReverse:
+        return CSS::FlexDirection::ColumnReverse;
+    default:
+        return {};
+    }
+}
+
 Optional<CSS::Position> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -69,6 +69,7 @@ public:
     Optional<CSS::TextDecorationLine> text_decoration_line() const;
     Optional<CSS::TextTransform> text_transform() const;
     Optional<CSS::ListStyleType> list_style_type() const;
+    Optional<CSS::FlexDirection> flex_direction() const;
 
     const Gfx::Font& font() const
     {

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -93,6 +93,13 @@ enum class Display {
     Flex,
 };
 
+enum class FlexDirection {
+    Row,
+    RowReverse,
+    Column,
+    ColumnReverse,
+};
+
 enum class WhiteSpace {
     Normal,
     Pre,

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -239,6 +239,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
 
     computed_values.set_display(specified_style.display());
 
+    auto flex_direction = specified_style.flex_direction();
+    if (flex_direction.has_value())
+        computed_values.set_flex_direction(flex_direction.value());
+
     auto position = specified_style.position();
     if (position.has_value())
         computed_values.set_position(position.value());