diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 14934a4def..35ce14d154 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/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; } }; } diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json index 083f1049e2..6696b50cbc 100644 --- a/Userland/Libraries/LibWeb/CSS/Identifiers.json +++ b/Userland/Libraries/LibWeb/CSS/Identifiers.json @@ -72,6 +72,7 @@ "col-resize", "column", "column-reverse", + "content", "context-menu", "copy", "crosshair", diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 28b52c2d26..56bdb2952c 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/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" diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index ca29bfd631..6358e02613 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -257,6 +257,21 @@ Optional StyleProperties::flex_wrap() const } } +Optional 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 StyleProperties::position() const { auto value = property(CSS::PropertyID::Position); diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h index 3a14c745d7..3fe51836da 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -10,6 +10,7 @@ #include #include #include +#include #include #include @@ -52,6 +53,7 @@ public: Optional list_style_type() const; Optional flex_direction() const; Optional flex_wrap() const; + Optional flex_basis() const; Optional overflow_x() const; Optional overflow_y() const; Optional background_repeat_x() const; diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h index 303513d250..b307a24a96 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleValue.h +++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h @@ -86,6 +86,11 @@ enum class FlexWrap { WrapReverse }; +enum class FlexBasis { + Content, + Length +}; + enum class WhiteSpace { Normal, Pre, diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index e7d09efb1f..2142b0a24d 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/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());