LibWeb: Make things aware of box-sizing

Of course, we don't actually *use* the box-sizing property yet, but the
value is applied and shows up in the computed style.

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<float> const& opacity() const { return m_noninherited.opacity; }
     CSS::JustifyContent justify_content() const { return m_noninherited.justify_content; }
     Optional<BoxShadowData> 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<float> opacity;
         Optional<BoxShadowData> box_shadow {};
         Vector<CSS::Transformation> 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<BoxShadowData> value) { m_noninherited.box_shadow = move(value); }
     void set_transformations(Vector<CSS::Transformation> 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; }

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<StyleValue> 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:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -728,4 +728,20 @@ Optional<CSS::BoxShadowData> 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 {};
+    }
+}
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -66,6 +66,7 @@ public:
     Optional<CSS::Repeat> background_repeat_x() const;
     Optional<CSS::Repeat> background_repeat_y() const;
     Optional<CSS::BoxShadowData> box_shadow() const;
+    CSS::BoxSizing box_sizing() const;
 
     Vector<CSS::Transformation> transformations() const;
 

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -39,6 +39,11 @@ enum class AlignItems {
     Stretch,
 };
 
+enum class BoxSizing {
+    BorderBox,
+    ContentBox,
+};
+
 enum class Clear {
     None,
     Left,

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())