LibWeb: Add parsing for flex-wrap property

Author: https://github.com/TobyAsE
Commit: https://github.com/SerenityOS/serenity/commit/e6545d5259f
Pull-request: https://github.com/SerenityOS/serenity/pull/7669
Reviewed-by: https://github.com/alimpfard
Reviewed-by: https://github.com/awesomekling

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -28,6 +28,7 @@ public:
     static CSS::Repeat background_repeat() { return CSS::Repeat::Repeat; }
     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::Overflow overflow() { return CSS::Overflow::Visible; }
 };
 
@@ -51,6 +52,7 @@ public:
     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; }
+    CSS::FlexWrap flex_wrap() const { return m_noninherited.flex_wrap; }
     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; }
@@ -127,6 +129,7 @@ protected:
         CSS::Repeat background_repeat_x { InitialValues::background_repeat() };
         CSS::Repeat background_repeat_y { InitialValues::background_repeat() };
         CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
+        CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
         CSS::Overflow overflow_x { InitialValues::overflow() };
         CSS::Overflow overflow_y { InitialValues::overflow() };
     } m_noninherited;
@@ -172,6 +175,7 @@ public:
     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; }
+    void set_flex_wrap(CSS::FlexWrap value) { m_noninherited.flex_wrap = value; }
 };
 
 }

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -165,6 +165,8 @@
   "visible",
   "vertical-text",
   "wait",
+  "wrap",
+  "wrap-reverse",
   "w-resize",
   "x-large",
   "x-small",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -207,6 +207,10 @@
     "inherited": false,
     "initial": "row"
   },
+  "flex-wrap": {
+    "inherited": false,
+    "initial": "nowrap"
+  },
   "float": {
     "inherited": false,
     "initial": "none"

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -240,6 +240,23 @@ Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
     }
 }
 
+Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
+{
+    auto value = property(CSS::PropertyID::FlexWrap);
+    if (!value.has_value())
+        return {};
+    switch (value.value()->to_identifier()) {
+    case CSS::ValueID::Wrap:
+        return CSS::FlexWrap::Wrap;
+    case CSS::ValueID::Nowrap:
+        return CSS::FlexWrap::Nowrap;
+    case CSS::ValueID::WrapReverse:
+        return CSS::FlexWrap::WrapReverse;
+    default:
+        return {};
+    }
+}
+
 Optional<CSS::Position> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -51,6 +51,7 @@ public:
     Optional<CSS::TextTransform> text_transform() const;
     Optional<CSS::ListStyleType> list_style_type() const;
     Optional<CSS::FlexDirection> flex_direction() const;
+    Optional<CSS::FlexWrap> flex_wrap() const;
     Optional<CSS::Overflow> overflow_x() const;
     Optional<CSS::Overflow> overflow_y() const;
     Optional<CSS::Repeat> background_repeat_x() const;

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -80,6 +80,12 @@ enum class FlexDirection {
     ColumnReverse,
 };
 
+enum class FlexWrap {
+    Nowrap,
+    Wrap,
+    WrapReverse
+};
+
 enum class WhiteSpace {
     Normal,
     Pre,

Userland/Libraries/LibWeb/Layout/Node.cpp

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