LibWeb/SVG: Resolve fill URI reference values

Libraries/LibWeb/SVG/SVGGraphicsElement.cpp

@@ -161,13 +161,19 @@ Optional<Gfx::Color> SVGGraphicsElement::fill_color() const
 {
     if (!layout_node())
         return {};
-    // FIXME: In the working-draft spec, `fill` is intended to be a shorthand, with `fill-color`
-    //        being what we actually want to use. But that's not final or widely supported yet.
-    return layout_node()->computed_values().fill().map([&](auto& paint) -> Gfx::Color {
-        if (!paint.is_color())
-            return Color::Black;
-        return paint.as_color();
-    });
+
+    auto paint = layout_node()->computed_values().fill();
+    if (!paint.has_value())
+        return {};
+
+    if (paint->is_url()) {
+        if (auto referenced_element = try_resolve_url_to<SVGGraphicsElement const>(paint->as_url()))
+            return referenced_element->fill_color();
+
+        return {};
+    }
+
+    return paint->as_color();
 }
 
 Optional<Gfx::Color> SVGGraphicsElement::stroke_color() const

Tests/LibWeb/Ref/expected/wpt-import/svg/pservers/reftests/reference/green-100x100.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" fill="green"/>
+</svg>

Tests/LibWeb/Ref/input/wpt-import/svg/painting/reftests/fallback-001.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG paint server: without fallback color nothing is painted</title>
+  <h:link rel="match" href="../../../../../expected/wpt-import/svg/painting/reftests/../../pservers/reftests/reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="url(#null)"/>
+</svg>

Tests/LibWeb/Ref/input/wpt-import/svg/pservers/reftests/fill-fallback-invalid-uri.svg

@@ -0,0 +1,5 @@
+<svg fill="red" xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="../../../../../expected/wpt-import/svg/pservers/reftests/reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="url(#nonexisting)"/>
+</svg>

Tests/LibWeb/Ref/input/wpt-import/svg/pservers/reftests/fill-fallback-none-2.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="../../../../../expected/wpt-import/svg/pservers/reftests/reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="#008000"/>
+  <!-- Test that 'fill' on the 'rect' falls back to 'none'. -->
+  <g fill="#ff0000">
+    <rect width="100" height="100" fill="url(#notfound) none"/>
+  </g>
+</svg>

Tests/LibWeb/Ref/input/wpt-import/svg/pservers/reftests/fill-fallback-none-3.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" fill="red">
+  <h:link rel="match" href="../../../../../expected/wpt-import/svg/pservers/reftests/reference/green-100x100.svg"/>
+  <linearGradient id="working">
+    <stop stop-color="green"/>
+  </linearGradient>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="url(#broken) none" stroke="url(#working)" stroke-width="0"/>
+</svg>