Tests/LibWeb: Add ref test for SVG gradients with various spreadMethods

Note: The final three gradients in this test are currently incorrectly
rendered.

Tests/LibWeb/Ref/manifest.json

@@ -5,5 +5,6 @@
     "css-gradient-currentcolor.html": "css-gradient-currentcolor-ref.html",
     "css-lang-selector.html": "css-lang-selector-ref.html",
     "css-gradients.html": "css-gradients-ref.html",
-    "svg-symbol.html": "svg-symbol-ref.html"
+    "svg-symbol.html": "svg-symbol-ref.html",
+    "svg-gradient-spreadMethod.html": "svg-gradient-spreadMethod-ref.html"
 }

Tests/LibWeb/Ref/svg-gradient-spreadMethod-ref.html

@@ -0,0 +1,15 @@
+<style>
+  * {
+    margin: 0;
+  }
+  body {
+    background-color: white;
+  }
+</style>
+<!-- To rebase:
+  1. Open svg-gradient-spreadMethod.html in Ladybird
+  2. Resize the window just above the width of the largest gradient
+  3. Right click > "Take Full Screenshot"
+  4. Update the image below:
+-->
+<img src="./images/svg-gradient-spreadMethod-ref.png">

Tests/LibWeb/Ref/svg-gradient-spreadMethod.html

@@ -0,0 +1,62 @@
+<style>
+  * {
+    margin: 0;
+  }
+  body {
+    background-color: white;
+  }
+</style>
+<svg width="220" height="590" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="LinearPad" x1="33%" x2="67%">
+      <stop offset="0%" stop-color="fuchsia" />
+      <stop offset="100%" stop-color="orange" />
+    </linearGradient>
+    <linearGradient id="LinearReflect" spreadMethod="reflect" x1="33%" x2="67%">
+      <stop offset="0%" stop-color="fuchsia" />
+      <stop offset="100%" stop-color="orange" />
+    </linearGradient>
+    <linearGradient id="LinearRepeat" spreadMethod="repeat" x1="33%" x2="67%">
+      <stop offset="0%" stop-color="fuchsia" />
+      <stop offset="100%" stop-color="orange" />
+    </linearGradient>
+    <radialGradient id="RadialPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="pad">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient id="RadialRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="repeat">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient id="RadialReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="reflect">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </radialGradient>
+    <radialGradient id="RadialPadFocalOffCenter" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%">
+      <stop offset="0%" stop-color="fuchsia" />
+      <stop offset="100%" stop-color="orange" />
+    </radialGradient>
+    <radialGradient id="RadialReflectFocalOffCenter" spreadMethod="reflect" cx="75%" cy="25%" r="33%" fx="64%" fy="18%"
+      fr="17%">
+      <stop offset="0%" stop-color="fuchsia" />
+      <stop offset="100%" stop-color="orange" />
+    </radialGradient>
+    <radialGradient id="RadialRepeatFocalOffCenter" spreadMethod="repeat" cx="75%" cy="25%" r="33%" fx="64%" fy="18%"
+      fr="17%">
+      <stop offset="0%" stop-color="fuchsia" />
+      <stop offset="100%" stop-color="orange" />
+    </radialGradient>
+  </defs>
+  <rect x="10" y="10" width="100" height="100" fill="url(#RadialPad)" />
+  <rect x="10" y="120" width="100" height="100" fill="url(#RadialRepeat)" />
+  <rect x="120" y="120" width="100" height="100" fill="url(#RadialReflect)" />
+  <rect x="10" y="230" width="200" height="40" fill="url(#LinearPad)" />
+  <rect x="10" y="280" width="200" height="40" fill="url(#LinearReflect)" />
+  <rect x="10" y="330" width="200" height="40" fill="url(#LinearRepeat)" />
+  <!-- FIXME: The following three gradients are not correctly rendered
+    (see FIXME in GradientPainting.cpp/create_radial_gradient_between_two_circles())
+  -->
+  <rect fill="url(#RadialPadFocalOffCenter)" x="10" y="380" width="100" height="100" />
+  <rect fill="url(#RadialReflectFocalOffCenter)" x="10" y="490" width="100" height="100" />
+  <rect fill="url(#RadialRepeatFocalOffCenter)" x="120" y="490" width="100" height="100" />
+</svg>