From e7443abfe681a27ee47993d192f8a82953d43b73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20d=27Herbais=20de=20Thun?=
 <sebastien.d.herbais@gmail.com>
Date: Fri, 6 Oct 2023 16:47:20 +0200
Subject: Gradient Part 3 - Radial gradients (#2312)

---
 tests/typ/visualize/gradient-radial.typ          | 49 ++++++++++++++++++++++++
 tests/typ/visualize/gradient-relative-linear.typ | 29 ++++++++++++++
 tests/typ/visualize/gradient-relative-radial.typ | 29 ++++++++++++++
 tests/typ/visualize/gradient-relative.typ        | 30 ---------------
 tests/typ/visualize/gradient-sharp.typ           |  8 ++++
 tests/typ/visualize/gradient-stroke.typ          | 12 +++++-
 6 files changed, 125 insertions(+), 32 deletions(-)
 create mode 100644 tests/typ/visualize/gradient-radial.typ
 create mode 100644 tests/typ/visualize/gradient-relative-linear.typ
 create mode 100644 tests/typ/visualize/gradient-relative-radial.typ
 delete mode 100644 tests/typ/visualize/gradient-relative.typ

(limited to 'tests/typ/visualize')

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-linear.typ b/tests/typ/visualize/gradient-relative-linear.typ
new file mode 100644
index 00000000..8e1d04dc
--- /dev/null
+++ b/tests/typ/visualize/gradient-relative-linear.typ
@@ -0,0 +1,29 @@
+// 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
+// both the page and the rectangles.
+#let grad = gradient.linear(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.linear(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-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-relative.typ b/tests/typ/visualize/gradient-relative.typ
deleted file mode 100644
index 549a05b4..00000000
--- a/tests/typ/visualize/gradient-relative.typ
+++ /dev/null
@@ -1,30 +0,0 @@
-// Test whether `relative: "parent"` works correctly.
-
-
----
-// 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.linear(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.linear(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
-- 
cgit v1.2.3