Gradient Part 3 - Radial gradients (#2312)

5 files changed, 97 insertions, 4 deletions

diff --git a/tests/typ/visualize/gradient-radial.typ b/tests/typ/visualize/gradient-radial.typ
new file mode 100644
index 00000000..5d83e71f
--- /dev/null
+++ b/tests/typ/visualize/gradient-radial.typ
@@ -0,0 +1,49 @@
+// Test the different radial gradient features.
+---
+
+#square(
+  size: 100pt,
+  fill: gradient.radial(..color.map.rainbow, space: color.hsl),
+)
+---
+
+#grid(
+  columns: 2,
+  square(
+    size: 50pt,
+    fill: gradient.radial(..color.map.rainbow, space: color.hsl, center: (0%, 0%)),
+  ),
+  square(
+    size: 50pt,
+    fill: gradient.radial(..color.map.rainbow, space: color.hsl, center: (0%, 100%)),
+  ),
+  square(
+    size: 50pt,
+    fill: gradient.radial(..color.map.rainbow, space: color.hsl, center: (100%, 0%)),
+  ),
+  square(
+    size: 50pt,
+    fill: gradient.radial(..color.map.rainbow, space: color.hsl, center: (100%, 100%)),
+  ),
+)
+
+---
+
+#square(
+  size: 50pt,
+  fill: gradient.radial(..color.map.rainbow, space: color.hsl, radius: 10%),
+)
+#square(
+  size: 50pt,
+  fill: gradient.radial(..color.map.rainbow, space: color.hsl, radius: 72%),
+)
+
+---
+#circle(
+  radius: 25pt,
+  fill: gradient.radial(white, rgb("#8fbc8f"), focal-center: (35%, 35%), focal-radius: 5%),
+)
+#circle(
+  radius: 25pt,
+  fill: gradient.radial(white, rgb("#8fbc8f"), focal-center: (75%, 35%), focal-radius: 5%),
+)
\ No newline at end of file
diff --git a/tests/typ/visualize/gradient-relative.typ b/tests/typ/visualize/gradient-relative-linear.typ
index 549a05b4..8e1d04dc 100644
--- a/tests/typ/visualize/gradient-relative.typ
+++ b/tests/typ/visualize/gradient-relative-linear.typ
@@ -1,5 +1,4 @@
-// Test whether `relative: "parent"` works correctly.
-
+// Test whether `relative: "parent"` works correctly on linear gradients.
 
 ---
 // The image should look as if there is a single gradient that is being used for
diff --git a/tests/typ/visualize/gradient-relative-radial.typ b/tests/typ/visualize/gradient-relative-radial.typ
new file mode 100644
index 00000000..87686896
--- /dev/null
+++ b/tests/typ/visualize/gradient-relative-radial.typ
@@ -0,0 +1,29 @@
+// Test whether `relative: "parent"` works correctly on radial gradients.
+
+---
+// The image should look as if there is a single gradient that is being used for
+// both the page and the rectangles.
+#let grad = gradient.radial(red, blue, green, purple, relative: "parent");
+#let my-rect = rect(width: 50%, height: 50%, fill: grad)
+#set page(
+  height: 200pt,
+  width: 200pt,
+  fill: grad,
+  background: place(top + left, my-rect),
+)
+#place(top + right, my-rect)
+#place(bottom + center, rotate(45deg, my-rect))
+
+---
+// The image should look as if there are multiple gradients, one for each
+// rectangle.
+#let grad = gradient.radial(red, blue, green, purple, relative: "self");
+#let my-rect = rect(width: 50%, height: 50%, fill: grad)
+#set page(
+  height: 200pt,
+  width: 200pt,
+  fill: grad,
+  background: place(top + left, my-rect),
+)
+#place(top + right, my-rect)
+#place(bottom + center, rotate(45deg, my-rect))
diff --git a/tests/typ/visualize/gradient-sharp.typ b/tests/typ/visualize/gradient-sharp.typ
index 424beb8b..1f090f7e 100644
--- a/tests/typ/visualize/gradient-sharp.typ
+++ b/tests/typ/visualize/gradient-sharp.typ
@@ -5,9 +5,17 @@
   size: 100pt,
   fill: gradient.linear(..color.map.rainbow, space: color.hsl).sharp(10),
 )
+#square(
+  size: 100pt,
+  fill: gradient.radial(..color.map.rainbow, space: color.hsl).sharp(10),
+)
 
 ---
 #square(
   size: 100pt,
   fill: gradient.linear(..color.map.rainbow, space: color.hsl).sharp(10, smoothness: 40%),
 )
+#square(
+  size: 100pt,
+  fill: gradient.radial(..color.map.rainbow, space: color.hsl).sharp(10, smoothness: 40%),
+)
diff --git a/tests/typ/visualize/gradient-stroke.typ b/tests/typ/visualize/gradient-stroke.typ
index a156dde7..01616fe3 100644
--- a/tests/typ/visualize/gradient-stroke.typ
+++ b/tests/typ/visualize/gradient-stroke.typ
@@ -1,8 +1,16 @@
 // Test gradients on strokes.
 
 ---
-#set page(width: 100pt, height: 100pt)
-#align(center + horizon, square(size: 50pt, fill: black, stroke: 5pt + gradient.linear(red, blue)))
+#set page(width: 100pt, height: auto, margin: 10pt)
+#align(center + top, square(size: 50pt, fill: black, stroke: 5pt + gradient.linear(red, blue)))
+#align(
+  center + bottom,
+  square(
+    size: 50pt,
+    fill: gradient.radial(red, blue, radius: 70.7%, focal-center: (10%, 10%)),
+    stroke: 10pt + gradient.radial(red, blue, radius: 70.7%, focal-center: (10%, 10%))
+  )
+)
 
 ---
 // Test gradient on lines