LibWeb: Parse `background-attachment` as part of `background` property

4 files changed, 39 insertions, 8 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index 7753082394..1269e5d251 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -2398,7 +2398,7 @@ RefPtr<StyleValue> Parser::parse_background_value(ParsingContext const& context,
     RefPtr<StyleValue> repeat_y;
     RefPtr<StyleValue> background_position;
     // FIXME: Implement background-size.
-    // FIXME: Implement background-attachment.
+    RefPtr<StyleValue> background_attachment;
     // FIXME: Implement background-clip.
     // FIXME: Implement background-origin.
 
@@ -2416,6 +2416,12 @@ RefPtr<StyleValue> Parser::parse_background_value(ParsingContext const& context,
         if (!value)
             return nullptr;
 
+        if (property_accepts_value(PropertyID::BackgroundAttachment, *value)) {
+            if (background_attachment)
+                return nullptr;
+            background_attachment = value.release_nonnull();
+            continue;
+        }
         if (property_accepts_value(PropertyID::BackgroundColor, *value)) {
             if (background_color)
                 return nullptr;
@@ -2479,8 +2485,10 @@ RefPtr<StyleValue> Parser::parse_background_value(ParsingContext const& context,
         repeat_x = property_initial_value(PropertyID::BackgroundRepeatX);
     if (!repeat_y)
         repeat_y = property_initial_value(PropertyID::BackgroundRepeatY);
+    if (!background_attachment)
+        background_attachment = property_initial_value(PropertyID::BackgroundAttachment);
 
-    return BackgroundStyleValue::create(background_color.release_nonnull(), background_image.release_nonnull(), background_position.release_nonnull(), repeat_x.release_nonnull(), repeat_y.release_nonnull());
+    return BackgroundStyleValue::create(background_color.release_nonnull(), background_image.release_nonnull(), background_position.release_nonnull(), repeat_x.release_nonnull(), repeat_y.release_nonnull(), background_attachment.release_nonnull());
 }
 
 RefPtr<StyleValue> Parser::parse_background_image_value(ParsingContext const& context, Vector<StyleComponentValueRule> const& component_values)
diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
index 53d4b908b9..aacf14405b 100644
--- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
+++ b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
@@ -675,13 +675,15 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         auto maybe_background_position = property(CSS::PropertyID::BackgroundPosition);
         auto maybe_background_repeat_x = property(CSS::PropertyID::BackgroundRepeatX);
         auto maybe_background_repeat_y = property(CSS::PropertyID::BackgroundRepeatY);
+        auto maybe_background_attachment = property(CSS::PropertyID::BackgroundAttachment);
 
         return BackgroundStyleValue::create(
             value_or_default(maybe_background_color, InitialStyleValue::the()),
             value_or_default(maybe_background_image, IdentifierStyleValue::create(CSS::ValueID::None)),
             value_or_default(maybe_background_position, PositionStyleValue::create(PositionEdge::Left, Length::make_px(0), PositionEdge::Top, Length::make_px(0))),
             value_or_default(maybe_background_repeat_x, IdentifierStyleValue::create(CSS::ValueID::RepeatX)),
-            value_or_default(maybe_background_repeat_y, IdentifierStyleValue::create(CSS::ValueID::RepeatX)));
+            value_or_default(maybe_background_repeat_y, IdentifierStyleValue::create(CSS::ValueID::RepeatX)),
+            value_or_default(maybe_background_attachment, IdentifierStyleValue::create(CSS::ValueID::Scroll)));
     }
     case CSS::PropertyID::ListStyleType:
         return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().list_style_type()));
diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index 45abbe9f4e..ffbcb8a68b 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -304,6 +304,7 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
             set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundPosition, background.position(), document);
             set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, background.repeat_x(), document, true);
             set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, background.repeat_y(), document, true);
+            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundAttachment, background.attachment(), document);
         };
 
         if (value.is_background()) {
@@ -327,6 +328,22 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
         set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundPosition, value, document);
         set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, value, document, true);
         set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, value, document, true);
+        set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundAttachment, value, document);
+        return;
+    }
+
+    if (property_id == CSS::PropertyID::BackgroundAttachment) {
+        if (value.is_value_list()) {
+            auto& background_attachment_list = value.as_value_list().values();
+            // FIXME: Handle multiple backgrounds.
+            if (!background_attachment_list.is_empty()) {
+                auto& background_attachment = background_attachment_list.first();
+                style.set_property(CSS::PropertyID::BackgroundAttachment, background_attachment);
+            }
+            return;
+        }
+
+        style.set_property(CSS::PropertyID::BackgroundAttachment, value);
         return;
     }
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h
index ffe5568ab1..0f920c2724 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@@ -379,12 +379,14 @@ public:
         NonnullRefPtr<StyleValue> image,
         NonnullRefPtr<StyleValue> position,
         NonnullRefPtr<StyleValue> repeat_x,
-        NonnullRefPtr<StyleValue> repeat_y)
+        NonnullRefPtr<StyleValue> repeat_y,
+        NonnullRefPtr<StyleValue> attachment)
     {
-        return adopt_ref(*new BackgroundStyleValue(color, image, position, repeat_x, repeat_y));
+        return adopt_ref(*new BackgroundStyleValue(color, image, position, repeat_x, repeat_y, attachment));
     }
     virtual ~BackgroundStyleValue() override { }
 
+    NonnullRefPtr<StyleValue> attachment() const { return m_attachment; }
     NonnullRefPtr<StyleValue> color() const { return m_color; }
     NonnullRefPtr<StyleValue> image() const { return m_image; }
     NonnullRefPtr<StyleValue> position() const { return m_position; }
@@ -393,7 +395,7 @@ public:
 
     virtual String to_string() const override
     {
-        return String::formatted("{} {} {} {} {}", m_color->to_string(), m_image->to_string(), m_position->to_string(), m_repeat_x->to_string(), m_repeat_y->to_string());
+        return String::formatted("{} {} {} {} {} {}", m_color->to_string(), m_image->to_string(), m_position->to_string(), m_repeat_x->to_string(), m_repeat_y->to_string(), m_attachment->to_string());
     }
 
 private:
@@ -402,13 +404,15 @@ private:
         NonnullRefPtr<StyleValue> image,
         NonnullRefPtr<StyleValue> position,
         NonnullRefPtr<StyleValue> repeat_x,
-        NonnullRefPtr<StyleValue> repeat_y)
+        NonnullRefPtr<StyleValue> repeat_y,
+        NonnullRefPtr<StyleValue> attachment)
         : StyleValue(Type::Background)
         , m_color(color)
         , m_image(image)
         , m_position(position)
         , m_repeat_x(repeat_x)
         , m_repeat_y(repeat_y)
+        , m_attachment(attachment)
     {
     }
     NonnullRefPtr<StyleValue> m_color;
@@ -417,7 +421,7 @@ private:
     // FIXME: background-size
     NonnullRefPtr<StyleValue> m_repeat_x;
     NonnullRefPtr<StyleValue> m_repeat_y;
-    // FIXME: background-attachment
+    NonnullRefPtr<StyleValue> m_attachment;
     // FIXME: background-clip
     // FIXME: background-origin
 };