LibWeb: Parse flex-basis

Flex-basis accepts either 'content' or a Length.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -39,6 +39,11 @@ public:
     float width { 0 };
 };
 
+struct FlexBasisData {
+    CSS::FlexBasis type { CSS::FlexBasis::Content };
+    CSS::Length length {};
+};
+
 class ComputedValues {
 public:
     CSS::Float float_() const { return m_noninherited.float_; }
@@ -53,6 +58,7 @@ public:
     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; }
+    FlexBasisData flex_basis() const { return m_noninherited.flex_basis; }
     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; }
@@ -130,6 +136,7 @@ protected:
         CSS::Repeat background_repeat_y { InitialValues::background_repeat() };
         CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
         CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
+        CSS::FlexBasisData flex_basis {};
         CSS::Overflow overflow_x { InitialValues::overflow() };
         CSS::Overflow overflow_y { InitialValues::overflow() };
     } m_noninherited;
@@ -176,6 +183,7 @@ public:
     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; }
+    void set_flex_basis(FlexBasisData value) { m_noninherited.flex_basis = value; }
 };
 
 }

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -72,6 +72,7 @@
   "col-resize",
   "column",
   "column-reverse",
+  "content",
   "context-menu",
   "copy",
   "crosshair",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -203,6 +203,10 @@
     "inherited": false,
     "initial": "inline"
   },
+  "flex-basis": {
+    "inherited": false,
+    "initial": "content"
+  },
   "flex-direction": {
     "inherited": false,
     "initial": "row"

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -257,6 +257,21 @@ Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
     }
 }
 
+Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
+{
+    auto value = property(CSS::PropertyID::FlexBasis);
+    if (!value.has_value())
+        return {};
+
+    if (value.value()->is_identifier() && value.value()->to_identifier() == CSS::ValueID::Content)
+        return { { CSS::FlexBasis::Content, {} } };
+
+    if (value.value()->is_length())
+        return { { CSS::FlexBasis::Length, value.value()->to_length() } };
+
+    return {};
+}
+
 Optional<CSS::Position> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -10,6 +10,7 @@
 #include <AK/NonnullRefPtr.h>
 #include <LibGfx/Font.h>
 #include <LibGfx/Forward.h>
+#include <LibWeb/CSS/ComputedValues.h>
 #include <LibWeb/CSS/LengthBox.h>
 #include <LibWeb/CSS/StyleValue.h>
 
@@ -52,6 +53,7 @@ public:
     Optional<CSS::ListStyleType> list_style_type() const;
     Optional<CSS::FlexDirection> flex_direction() const;
     Optional<CSS::FlexWrap> flex_wrap() const;
+    Optional<CSS::FlexBasisData> flex_basis() 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

@@ -86,6 +86,11 @@ enum class FlexWrap {
     WrapReverse
 };
 
+enum class FlexBasis {
+    Content,
+    Length
+};
+
 enum class WhiteSpace {
     Normal,
     Pre,

Userland/Libraries/LibWeb/Layout/Node.cpp

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