LibWeb: Support calc(...) in box-shadow's values of type Length

The CSS box-shadow property takes 2-4 properties that are `<length>`s,
those being:
  - offset-x
  - offset-y
  - blur-radius
  - spread-radius

Previously these were resolved directly to concrete Lengths at parse
time, but now they will be parsed as LengthStyleValues and/or
CalculatedStyleValues and be stored that way until styles are later
resolved.

Tests/LibWeb/Text/expected/css/box-shadow-resolves-length-functions.txt

@@ -0,0 +1 @@
+0 calc(5px - 10px) 0 calc(2px + 3px) => #000000ff 0px calc(5px + (0 - 10px)) 0px calc(2px + 3px)

Tests/LibWeb/Text/input/css/box-shadow-resolves-length-functions.html

@@ -0,0 +1,13 @@
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        const e = document.createElement("div");
+        document.body.appendChild(e);
+        const definition = "0 calc(5px - 10px) 0 calc(2px + 3px)";
+        e.style.boxShadow = definition;
+        const computedStyle = getComputedStyle(e);
+        const serialized = computedStyle.boxShadow;
+        println(definition + " => " + serialized);
+        e.remove();
+    });
+</script>

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

@@ -5849,12 +5849,27 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_shadow_value(TokenStream<Compon
     auto transaction = tokens.begin_transaction();
 
     Optional<Color> color;
-    Optional<Length> offset_x;
-    Optional<Length> offset_y;
-    Optional<Length> blur_radius;
-    Optional<Length> spread_distance;
+    RefPtr<StyleValue> offset_x;
+    RefPtr<StyleValue> offset_y;
+    RefPtr<StyleValue> blur_radius;
+    RefPtr<StyleValue> spread_distance;
     Optional<ShadowPlacement> placement;
 
+    auto possibly_dynamic_length = [&](ComponentValue const& token) -> ErrorOr<RefPtr<StyleValue>> {
+        if (auto maybe_dynamic_value = TRY(parse_dynamic_value(token))) {
+            if (!maybe_dynamic_value->is_calculated())
+                return nullptr;
+            auto const& calculated_value = maybe_dynamic_value->as_calculated();
+            if (!calculated_value.resolves_to_length())
+                return nullptr;
+            return calculated_value;
+        }
+        auto maybe_length = parse_length(token);
+        if (!maybe_length.has_value())
+            return nullptr;
+        return LengthStyleValue::create(maybe_length.release_value());
+    };
+
     while (tokens.has_next_token()) {
         auto const& token = tokens.peek_token();
 
@@ -5866,38 +5881,38 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_shadow_value(TokenStream<Compon
             continue;
         }
 
-        if (auto maybe_offset_x = parse_length(token); maybe_offset_x.has_value()) {
+        if (auto maybe_offset_x = TRY(possibly_dynamic_length(token)); maybe_offset_x) {
             // horizontal offset
-            if (offset_x.has_value())
+            if (offset_x)
                 return nullptr;
-            offset_x = maybe_offset_x.release_value();
+            offset_x = maybe_offset_x;
             tokens.next_token();
 
             // vertical offset
             if (!tokens.has_next_token())
                 return nullptr;
-            auto maybe_offset_y = parse_length(tokens.peek_token());
-            if (!maybe_offset_y.has_value())
+            auto maybe_offset_y = TRY(possibly_dynamic_length(tokens.peek_token()));
+            if (!maybe_offset_y)
                 return nullptr;
-            offset_y = maybe_offset_y.release_value();
+            offset_y = maybe_offset_y;
             tokens.next_token();
 
             // blur radius (optional)
             if (!tokens.has_next_token())
                 break;
-            auto maybe_blur_radius = parse_length(tokens.peek_token());
-            if (!maybe_blur_radius.has_value())
+            auto maybe_blur_radius = TRY(possibly_dynamic_length(tokens.peek_token()));
+            if (!maybe_blur_radius)
                 continue;
-            blur_radius = maybe_blur_radius.release_value();
+            blur_radius = maybe_blur_radius;
             tokens.next_token();
 
             // spread distance (optional)
             if (!tokens.has_next_token())
                 break;
-            auto maybe_spread_distance = parse_length(tokens.peek_token());
-            if (!maybe_spread_distance.has_value())
+            auto maybe_spread_distance = TRY(possibly_dynamic_length(tokens.peek_token()));
+            if (!maybe_spread_distance)
                 continue;
-            spread_distance = maybe_spread_distance.release_value();
+            spread_distance = maybe_spread_distance;
             tokens.next_token();
 
             continue;
@@ -5923,21 +5938,21 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_shadow_value(TokenStream<Compon
         color = Color::NamedColor::Black;
 
     // x/y offsets are required
-    if (!offset_x.has_value() || !offset_y.has_value())
+    if (!offset_x || !offset_y)
         return nullptr;
 
     // 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);
+    if (!blur_radius)
+        blur_radius = TRY(LengthStyleValue::create(Length::make_px(0)));
+    if (!spread_distance)
+        spread_distance = TRY(LengthStyleValue::create(Length::make_px(0)));
 
     // Placement is outer by default
     if (!placement.has_value())
         placement = ShadowPlacement::Outer;
 
     transaction.commit();
-    return ShadowStyleValue::create(color.release_value(), offset_x.release_value(), offset_y.release_value(), blur_radius.release_value(), spread_distance.release_value(), placement.release_value());
+    return ShadowStyleValue::create(color.release_value(), offset_x.release_nonnull(), offset_y.release_nonnull(), blur_radius.release_nonnull(), spread_distance.release_nonnull(), placement.release_value());
 }
 
 ErrorOr<RefPtr<StyleValue>> Parser::parse_content_value(Vector<ComponentValue> const& component_values)

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -523,8 +523,12 @@ ErrorOr<RefPtr<StyleValue const>> ResolvedCSSStyleDeclaration::style_value_for_p
         if (box_shadow_layers.is_empty())
             return nullptr;
 
-        auto make_box_shadow_style_value = [](ShadowData const& data) {
-            return ShadowStyleValue::create(data.color, data.offset_x, data.offset_y, data.blur_radius, data.spread_distance, data.placement);
+        auto make_box_shadow_style_value = [](ShadowData const& data) -> ErrorOr<NonnullRefPtr<ShadowStyleValue>> {
+            auto offset_x = TRY(LengthStyleValue::create(data.offset_x));
+            auto offset_y = TRY(LengthStyleValue::create(data.offset_y));
+            auto blur_radius = TRY(LengthStyleValue::create(data.blur_radius));
+            auto spread_distance = TRY(LengthStyleValue::create(data.spread_distance));
+            return ShadowStyleValue::create(data.color, offset_x, offset_y, blur_radius, spread_distance, data.placement);
         };
 
         if (box_shadow_layers.size() == 1)

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -751,41 +751,74 @@ Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) c
     return value_id_to_overflow(value->to_identifier());
 }
 
-Vector<ShadowData> StyleProperties::shadow(PropertyID property_id) const
+Vector<ShadowData> StyleProperties::shadow(PropertyID property_id, Layout::Node const& layout_node) const
 {
     auto value = property(property_id);
 
-    auto make_shadow_data = [](ShadowStyleValue const& value) {
-        return ShadowData { value.color(), value.offset_x(), value.offset_y(), value.blur_radius(), value.spread_distance(), value.placement() };
+    auto resolve_to_length = [&layout_node](NonnullRefPtr<StyleValue const> const& value) -> Optional<Length> {
+        if (value->is_length())
+            return value->as_length().length();
+        if (value->is_calculated())
+            return value->as_calculated().resolve_length(layout_node);
+        return {};
+    };
+
+    auto make_shadow_data = [resolve_to_length](ShadowStyleValue const& value) -> Optional<ShadowData> {
+        auto maybe_offset_x = resolve_to_length(value.offset_x());
+        if (!maybe_offset_x.has_value())
+            return {};
+        auto maybe_offset_y = resolve_to_length(value.offset_y());
+        if (!maybe_offset_y.has_value())
+            return {};
+        auto maybe_blur_radius = resolve_to_length(value.blur_radius());
+        if (!maybe_blur_radius.has_value())
+            return {};
+        auto maybe_spread_distance = resolve_to_length(value.spread_distance());
+        if (!maybe_spread_distance.has_value())
+            return {};
+        return ShadowData {
+            value.color(),
+            maybe_offset_x.release_value(),
+            maybe_offset_y.release_value(),
+            maybe_blur_radius.release_value(),
+            maybe_spread_distance.release_value(),
+            value.placement()
+        };
     };
 
     if (value->is_value_list()) {
-        auto& value_list = value->as_value_list();
+        auto const& value_list = value->as_value_list();
 
         Vector<ShadowData> shadow_data;
         shadow_data.ensure_capacity(value_list.size());
-        for (auto const& layer_value : value_list.values())
-            shadow_data.append(make_shadow_data(layer_value->as_shadow()));
+        for (auto const& layer_value : value_list.values()) {
+            auto maybe_shadow_data = make_shadow_data(layer_value->as_shadow());
+            if (!maybe_shadow_data.has_value())
+                return {};
+            shadow_data.append(maybe_shadow_data.release_value());
+        }
 
         return shadow_data;
     }
 
     if (value->is_shadow()) {
-        auto& box = value->as_shadow();
-        return { make_shadow_data(box) };
+        auto maybe_shadow_data = make_shadow_data(value->as_shadow());
+        if (!maybe_shadow_data.has_value())
+            return {};
+        return { maybe_shadow_data.release_value() };
     }
 
     return {};
 }
 
-Vector<ShadowData> StyleProperties::box_shadow() const
+Vector<ShadowData> StyleProperties::box_shadow(Layout::Node const& layout_node) const
 {
-    return shadow(PropertyID::BoxShadow);
+    return shadow(PropertyID::BoxShadow, layout_node);
 }
 
-Vector<ShadowData> StyleProperties::text_shadow() const
+Vector<ShadowData> StyleProperties::text_shadow(Layout::Node const& layout_node) const
 {
-    return shadow(PropertyID::TextShadow);
+    return shadow(PropertyID::TextShadow, layout_node);
 }
 
 Optional<CSS::BoxSizing> StyleProperties::box_sizing() const

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -64,7 +64,7 @@ class StyleProperties : public RefCounted<StyleProperties> {
     Vector<CSS::TextDecorationLine> text_decoration_line() const;
     Optional<CSS::TextDecorationStyle> text_decoration_style() const;
     Optional<CSS::TextTransform> text_transform() const;
-    Vector<CSS::ShadowData> text_shadow() const;
+    Vector<CSS::ShadowData> text_shadow(Layout::Node const&) const;
     Optional<CSS::ListStyleType> list_style_type() const;
     Optional<CSS::ListStylePosition> list_style_position() const;
     Optional<CSS::FlexDirection> flex_direction() const;
@@ -85,7 +85,7 @@ class StyleProperties : public RefCounted<StyleProperties> {
     Optional<CSS::JustifyContent> justify_content() const;
     Optional<CSS::Overflow> overflow_x() const;
     Optional<CSS::Overflow> overflow_y() const;
-    Vector<CSS::ShadowData> box_shadow() const;
+    Vector<CSS::ShadowData> box_shadow(Layout::Node const&) const;
     Optional<CSS::BoxSizing> box_sizing() const;
     Optional<CSS::PointerEvents> pointer_events() const;
     Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() const;
@@ -141,7 +141,7 @@ class StyleProperties : public RefCounted<StyleProperties> {
     };
     Array<Optional<StyleAndSourceDeclaration>, to_underlying(CSS::last_property_id) + 1> m_property_values;
     Optional<CSS::Overflow> overflow(CSS::PropertyID) const;
-    Vector<CSS::ShadowData> shadow(CSS::PropertyID) const;
+    Vector<CSS::ShadowData> shadow(CSS::PropertyID, Layout::Node const&) const;
 
     mutable RefPtr<Gfx::Font const> m_font;
 };

Userland/Libraries/LibWeb/CSS/StyleValues/ShadowStyleValue.cpp

@@ -14,18 +14,18 @@ namespace Web::CSS {
 ErrorOr<String> ShadowStyleValue::to_string() const
 {
     StringBuilder builder;
-    TRY(builder.try_appendff("{} {} {} {} {}", m_properties.color.to_deprecated_string(), TRY(m_properties.offset_x.to_string()), TRY(m_properties.offset_y.to_string()), TRY(m_properties.blur_radius.to_string()), TRY(m_properties.spread_distance.to_string())));
+    TRY(builder.try_appendff("{} {} {} {} {}", m_properties.color.to_deprecated_string(), TRY(m_properties.offset_x->to_string()), TRY(m_properties.offset_y->to_string()), TRY(m_properties.blur_radius->to_string()), TRY(m_properties.spread_distance->to_string())));
     if (m_properties.placement == ShadowPlacement::Inner)
         TRY(builder.try_append(" inset"sv));
     return builder.to_string();
 }
 
 ErrorOr<ValueComparingNonnullRefPtr<StyleValue const>> ShadowStyleValue::absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
 {
-    auto absolutized_offset_x = m_properties.offset_x.absolutized(viewport_rect, font_metrics, root_font_metrics);
-    auto absolutized_offset_y = m_properties.offset_y.absolutized(viewport_rect, font_metrics, root_font_metrics);
-    auto absolutized_blur_radius = m_properties.blur_radius.absolutized(viewport_rect, font_metrics, root_font_metrics);
-    auto absolutized_spread_distance = m_properties.spread_distance.absolutized(viewport_rect, font_metrics, root_font_metrics);
+    auto absolutized_offset_x = TRY(m_properties.offset_x->absolutized(viewport_rect, font_metrics, root_font_metrics));
+    auto absolutized_offset_y = TRY(m_properties.offset_y->absolutized(viewport_rect, font_metrics, root_font_metrics));
+    auto absolutized_blur_radius = TRY(m_properties.blur_radius->absolutized(viewport_rect, font_metrics, root_font_metrics));
+    auto absolutized_spread_distance = TRY(m_properties.spread_distance->absolutized(viewport_rect, font_metrics, root_font_metrics));
     return ShadowStyleValue::create(m_properties.color, absolutized_offset_x, absolutized_offset_y, absolutized_blur_radius, absolutized_spread_distance, m_properties.placement);
 }
 

Userland/Libraries/LibWeb/CSS/StyleValues/ShadowStyleValue.h

@@ -22,38 +22,57 @@ enum class ShadowPlacement {
 
 class ShadowStyleValue final : public StyleValueWithDefaultOperators<ShadowStyleValue> {
 public:
-    static ErrorOr<ValueComparingNonnullRefPtr<ShadowStyleValue>> create(Color color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, ShadowPlacement placement)
+    static ErrorOr<ValueComparingNonnullRefPtr<ShadowStyleValue>> create(
+        Color color,
+        ValueComparingNonnullRefPtr<StyleValue const> offset_x,
+        ValueComparingNonnullRefPtr<StyleValue const> offset_y,
+        ValueComparingNonnullRefPtr<StyleValue const> blur_radius,
+        ValueComparingNonnullRefPtr<StyleValue const> spread_distance,
+        ShadowPlacement placement)
     {
-        return adopt_nonnull_ref_or_enomem(new (nothrow) ShadowStyleValue(color, offset_x, offset_y, blur_radius, spread_distance, placement));
+        return adopt_nonnull_ref_or_enomem(new (nothrow) ShadowStyleValue(color, move(offset_x), move(offset_y), move(blur_radius), move(spread_distance), placement));
     }
     virtual ~ShadowStyleValue() override = default;
 
     Color color() const { return m_properties.color; }
-    Length const& offset_x() const { return m_properties.offset_x; }
-    Length const& offset_y() const { return m_properties.offset_y; }
-    Length const& blur_radius() const { return m_properties.blur_radius; }
-    Length const& spread_distance() const { return m_properties.spread_distance; }
+    ValueComparingNonnullRefPtr<StyleValue const> const& offset_x() const { return m_properties.offset_x; }
+    ValueComparingNonnullRefPtr<StyleValue const> const& offset_y() const { return m_properties.offset_y; }
+    ValueComparingNonnullRefPtr<StyleValue const> const& blur_radius() const { return m_properties.blur_radius; }
+    ValueComparingNonnullRefPtr<StyleValue const> const& spread_distance() const { return m_properties.spread_distance; }
     ShadowPlacement placement() const { return m_properties.placement; }
 
     virtual ErrorOr<String> to_string() const override;
 
     bool properties_equal(ShadowStyleValue const& other) const { return m_properties == other.m_properties; }
 
 private:
-    explicit ShadowStyleValue(Color color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, ShadowPlacement placement)
+    ShadowStyleValue(
+        Color color,
+        ValueComparingNonnullRefPtr<StyleValue const> offset_x,
+        ValueComparingNonnullRefPtr<StyleValue const> offset_y,
+        ValueComparingNonnullRefPtr<StyleValue const> blur_radius,
+        ValueComparingNonnullRefPtr<StyleValue const> spread_distance,
+        ShadowPlacement placement)
         : StyleValueWithDefaultOperators(Type::Shadow)
-        , m_properties { .color = color, .offset_x = offset_x, .offset_y = offset_y, .blur_radius = blur_radius, .spread_distance = spread_distance, .placement = placement }
+        , m_properties {
+            .color = color,
+            .offset_x = move(offset_x),
+            .offset_y = move(offset_y),
+            .blur_radius = move(blur_radius),
+            .spread_distance = move(spread_distance),
+            .placement = placement
+        }
     {
     }
 
     virtual ErrorOr<ValueComparingNonnullRefPtr<StyleValue const>> absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const override;
 
     struct Properties {
         Color color;
-        Length offset_x;
-        Length offset_y;
-        Length blur_radius;
-        Length spread_distance;
+        ValueComparingNonnullRefPtr<StyleValue const> offset_x;
+        ValueComparingNonnullRefPtr<StyleValue const> offset_y;
+        ValueComparingNonnullRefPtr<StyleValue const> blur_radius;
+        ValueComparingNonnullRefPtr<StyleValue const> spread_distance;
         ShadowPlacement placement;
         bool operator==(Properties const&) const = default;
     } m_properties;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -594,7 +594,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
         computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
 
-    computed_values.set_text_shadow(computed_style.text_shadow());
+    computed_values.set_text_shadow(computed_style.text_shadow(*this));
 
     computed_values.set_z_index(computed_style.z_index());
     computed_values.set_opacity(computed_style.opacity());
@@ -616,7 +616,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0)));
     computed_values.set_padding(computed_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, CSS::Length::make_px(0)));
 
-    computed_values.set_box_shadow(computed_style.box_shadow());
+    computed_values.set_box_shadow(computed_style.box_shadow(*this));
 
     computed_values.set_transformations(computed_style.transformations());
     computed_values.set_transform_origin(computed_style.transform_origin());