diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index da5b23b0ca6..efa80e1e96c 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -32,6 +32,7 @@ public: static CSS::JustifyContent justify_content() { return CSS::JustifyContent::FlexStart; } static CSS::AlignItems align_items() { return CSS::AlignItems::FlexStart; } static CSS::Overflow overflow() { return CSS::Overflow::Visible; } + static CSS::BoxSizing box_sizing() { return CSS::BoxSizing::ContentBox; } }; struct BorderData { @@ -79,6 +80,7 @@ public: Optional const& opacity() const { return m_noninherited.opacity; } CSS::JustifyContent justify_content() const { return m_noninherited.justify_content; } Optional const& box_shadow() const { return m_noninherited.box_shadow; } + CSS::BoxSizing box_sizing() const { return m_noninherited.box_sizing; } 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; } @@ -176,6 +178,7 @@ protected: Optional opacity; Optional box_shadow {}; Vector transformations {}; + CSS::BoxSizing box_sizing { InitialValues::box_sizing() }; } m_noninherited; }; @@ -228,6 +231,7 @@ public: void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; } void set_box_shadow(Optional value) { m_noninherited.box_shadow = move(value); } void set_transformations(Vector value) { m_noninherited.transformations = move(value); } + void set_box_sizing(CSS::BoxSizing value) { m_noninherited.box_sizing = value; } void set_fill(Color value) { m_inherited.fill = value; } void set_stroke(Color value) { m_inherited.stroke = value; } diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp index 89dbc77f356..6ab3388d13c 100644 --- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp +++ b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp @@ -33,6 +33,17 @@ String ResolvedCSSStyleDeclaration::item(size_t index) const return {}; } +static CSS::ValueID to_css_value_id(CSS::BoxSizing value) +{ + switch (value) { + case CSS::BoxSizing::BorderBox: + return CSS::ValueID::BorderBox; + case CSS::BoxSizing::ContentBox: + return CSS::ValueID::ContentBox; + } + VERIFY_NOT_REACHED(); +} + static CSS::ValueID to_css_value_id(CSS::Display value) { switch (value) { @@ -546,6 +557,8 @@ RefPtr ResolvedCSSStyleDeclaration::style_value_for_property(Layout: } case CSS::PropertyID::ListStyleType: return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().list_style_type())); + case CSS::PropertyID::BoxSizing: + return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().box_sizing())); case CSS::PropertyID::Invalid: return IdentifierStyleValue::create(CSS::ValueID::Invalid); case CSS::PropertyID::Custom: diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index ae022f05dc6..872af5b496d 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -728,4 +728,20 @@ Optional StyleProperties::box_shadow() const auto& box = value->as_box_shadow(); return { { box.offset_x(), box.offset_y(), box.blur_radius(), box.color() } }; } + +CSS::BoxSizing StyleProperties::box_sizing() const +{ + auto value = property(CSS::PropertyID::BoxSizing); + if (!value.has_value()) + return {}; + + switch (value.value()->to_identifier()) { + case CSS::ValueID::BorderBox: + return CSS::BoxSizing::BorderBox; + case CSS::ValueID::ContentBox: + return CSS::BoxSizing::ContentBox; + default: + return {}; + } +} } diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h index 36e1e26d562..b78782889fe 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -66,6 +66,7 @@ public: Optional background_repeat_x() const; Optional background_repeat_y() const; Optional box_shadow() const; + CSS::BoxSizing box_sizing() const; Vector transformations() const; diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h index f12954a846c..a250980b992 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleValue.h +++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h @@ -39,6 +39,11 @@ enum class AlignItems { Stretch, }; +enum class BoxSizing { + BorderBox, + ContentBox, +}; + enum class Clear { None, Left, diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 98d1437310e..8602ea25bfb 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -223,6 +223,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style) m_background_image = bgimage.value()->as_image(); } + computed_values.set_box_sizing(specified_style.box_sizing()); + // FIXME: BorderXRadius properties are now BorderRadiusStyleValues, so make use of that. auto border_bottom_left_radius = specified_style.property(CSS::PropertyID::BorderBottomLeftRadius); if (border_bottom_left_radius.has_value())