LibWeb: Apply the CSS background-image property to elements

Previously we'd only pick up background-image when it was part of the
background shorthand.

CSS property application remains hackish, lots of room for improvement
in this area. :^)

1 files changed, 16 insertions, 8 deletions

diff --git a/Libraries/LibWeb/CSS/StyleResolver.cpp b/Libraries/LibWeb/CSS/StyleResolver.cpp
index 4d26c66828..2d3f083b7e 100644
--- a/Libraries/LibWeb/CSS/StyleResolver.cpp
+++ b/Libraries/LibWeb/CSS/StyleResolver.cpp
@@ -402,18 +402,26 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
                 continue;
             if (!string.ends_with(')'))
                 continue;
-            auto url = string.substring_view(4, string.length() - 5);
-            if (url.length() >= 2 && url.starts_with('"') && url.ends_with('"'))
-                url = url.substring_view(1, url.length() - 2);
-            else if (url.length() >= 2 && url.starts_with('\'') && url.ends_with('\''))
-                url = url.substring_view(1, url.length() - 2);
-
-            auto background_image_value = ImageStyleValue::create(document.complete_url(url), document);
-            style.set_property(CSS::PropertyID::BackgroundImage, move(background_image_value));
+            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, value, document);
         }
         return;
     }
 
+    if (property_id == CSS::PropertyID::BackgroundImage) {
+        if (!value.is_string())
+            return;
+        auto string = value.to_string();
+        auto url = string.substring_view(4, string.length() - 5);
+        if (url.length() >= 2 && url.starts_with('"') && url.ends_with('"'))
+            url = url.substring_view(1, url.length() - 2);
+        else if (url.length() >= 2 && url.starts_with('\'') && url.ends_with('\''))
+            url = url.substring_view(1, url.length() - 2);
+
+        auto background_image_value = ImageStyleValue::create(document.complete_url(url), document);
+        style.set_property(CSS::PropertyID::BackgroundImage, move(background_image_value));
+        return;
+    }
+
     if (property_id == CSS::PropertyID::Margin) {
         if (value.is_length()) {
             style.set_property(CSS::PropertyID::MarginTop, value);