LibWeb: Parse spread-distance and inset parts of box-shadow

We do not actually use these when rendering the shadow yet.

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -3169,11 +3169,13 @@ RefPtr<StyleValue> Parser::parse_box_shadow_value(Vector<StyleComponentValueRule
             return ident;
     }
 
-    // FIXME: Also support inset, spread-radius and multiple comma-separated box-shadows
+    // FIXME: Also support multiple comma-separated box-shadows
     Optional<Color> color;
     Optional<Length> offset_x;
     Optional<Length> offset_y;
     Optional<Length> blur_radius;
+    Optional<Length> spread_distance;
+    Optional<BoxShadowPlacement> placement;
 
     for (size_t i = 0; i < component_values.size(); ++i) {
         if (auto maybe_color = parse_color(component_values[i]); maybe_color.has_value()) {
@@ -3206,6 +3208,22 @@ RefPtr<StyleValue> Parser::parse_box_shadow_value(Vector<StyleComponentValueRule
             ++i;
             blur_radius = maybe_blur_radius.release_value();
 
+            // spread distance (optional)
+            if (i + 1 >= component_values.size())
+                break;
+            auto maybe_spread_distance = parse_length(component_values[i + 1]);
+            if (!maybe_spread_distance.has_value())
+                continue;
+            ++i;
+            spread_distance = maybe_spread_distance.release_value();
+
+            continue;
+        }
+
+        if (component_values[i].is(Token::Type::Ident) && component_values[i].token().ident().equals_ignoring_case("inset"sv)) {
+            if (placement.has_value())
+                return nullptr;
+            placement = BoxShadowPlacement::Inner;
             continue;
         }
 
@@ -3224,8 +3242,14 @@ RefPtr<StyleValue> Parser::parse_box_shadow_value(Vector<StyleComponentValueRule
     // Other lengths default to 0
     if (!blur_radius.has_value())
         blur_radius = Length::make_px(0);
+    if (!spread_distance.has_value())
+        spread_distance = Length::make_px(0);
 
-    return BoxShadowStyleValue::create(offset_x.release_value(), offset_y.release_value(), blur_radius.release_value(), color.release_value());
+    // Placement is outer by default
+    if (!placement.has_value())
+        placement = BoxShadowPlacement::Outer;
+
+    return BoxShadowStyleValue::create(color.release_value(), offset_x.release_value(), offset_y.release_value(), blur_radius.release_value(), spread_distance.release_value(), placement.release_value());
 }
 
 RefPtr<StyleValue> Parser::parse_flex_value(Vector<StyleComponentValueRule> const& component_values)

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -522,7 +522,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         if (!maybe_box_shadow.has_value())
             return {};
         auto box_shadow_data = maybe_box_shadow.release_value();
-        return BoxShadowStyleValue::create(box_shadow_data.offset_x, box_shadow_data.offset_y, box_shadow_data.blur_radius, box_shadow_data.color);
+        // FIXME: Add extra properties to BoxShadowData so we can include them here!
+        return BoxShadowStyleValue::create(box_shadow_data.color, box_shadow_data.offset_x, box_shadow_data.offset_y, box_shadow_data.blur_radius, Length::make_px(0), BoxShadowPlacement::Outer);
     }
     case CSS::PropertyID::Width:
         return style_value_for_length_percentage(layout_node.computed_values().width());

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -271,7 +271,11 @@ String BorderRadiusStyleValue::to_string() const
 
 String BoxShadowStyleValue::to_string() const
 {
-    return String::formatted("{} {} {} {}", m_offset_x.to_string(), m_offset_y.to_string(), m_blur_radius.to_string(), m_color.to_string());
+    StringBuilder builder;
+    builder.appendff("{} {} {} {} {}", m_color.to_string(), m_offset_x.to_string(), m_offset_y.to_string(), m_blur_radius.to_string(), m_spread_distance.to_string());
+    if (m_placement == BoxShadowPlacement::Inner)
+        builder.append(" inset");
+    return builder.to_string();
 }
 
 void CalculatedStyleValue::CalculationResult::add(CalculationResult const& other, Layout::Node const* layout_node, Length const& percentage_basis)

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -64,6 +64,11 @@ enum class BoxSizing {
     ContentBox,
 };
 
+enum class BoxShadowPlacement {
+    Outer,
+    Inner,
+};
+
 enum class Clear {
     None,
     Left,
@@ -616,27 +621,31 @@ private:
 
 class BoxShadowStyleValue final : public StyleValue {
 public:
-    static NonnullRefPtr<BoxShadowStyleValue> create(Length const& offset_x, Length const& offset_y, Length const& blur_radius, Color const& color)
+    static NonnullRefPtr<BoxShadowStyleValue>
+    create(Color const& color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, BoxShadowPlacement placement)
     {
-        return adopt_ref(*new BoxShadowStyleValue(offset_x, offset_y, blur_radius, color));
+        return adopt_ref(*new BoxShadowStyleValue(color, offset_x, offset_y, blur_radius, spread_distance, placement));
     }
     virtual ~BoxShadowStyleValue() override { }
 
-    // FIXME: Spread-distance and "inset" flag
+    Color const& color() const { return m_color; }
     Length const& offset_x() const { return m_offset_x; }
     Length const& offset_y() const { return m_offset_y; }
     Length const& blur_radius() const { return m_blur_radius; }
-    Color const& color() const { return m_color; }
+    Length const& spread_distance() const { return m_spread_distance; }
+    BoxShadowPlacement placement() const { return m_placement; }
 
     virtual String to_string() const override;
 
 private:
-    explicit BoxShadowStyleValue(Length const& offset_x, Length const& offset_y, Length const& blur_radius, Color const& color)
+    explicit BoxShadowStyleValue(Color const& color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, BoxShadowPlacement placement)
         : StyleValue(Type::BoxShadow)
+        , m_color(color)
         , m_offset_x(offset_x)
         , m_offset_y(offset_y)
         , m_blur_radius(blur_radius)
-        , m_color(color)
+        , m_spread_distance(spread_distance)
+        , m_placement(placement)
     {
     }
 
@@ -645,12 +654,15 @@ private:
         visitor(m_offset_x);
         visitor(m_offset_y);
         visitor(m_blur_radius);
+        visitor(m_spread_distance);
     }
 
+    Color m_color;
     Length m_offset_x;
     Length m_offset_y;
     Length m_blur_radius;
-    Color m_color;
+    Length m_spread_distance;
+    BoxShadowPlacement m_placement;
 };
 
 class CalculatedStyleValue : public StyleValue {