Gradient Part 4 - Conic gradients (#2325)

5 files changed, 75 insertions, 2 deletions

diff --git a/tests/typ/visualize/gradient-conic.typ b/tests/typ/visualize/gradient-conic.typ
new file mode 100644
index 00000000..83fdb07c
--- /dev/null
+++ b/tests/typ/visualize/gradient-conic.typ
@@ -0,0 +1,25 @@
+// Test conic gradients
+
+---
+#square(
+  size: 50pt,
+  fill: gradient.conic(..color.map.rainbow, space: color.hsv),
+)
+
+---
+#square(
+  size: 50pt,
+  fill: gradient.conic(..color.map.rainbow, space: color.hsv, center: (10%, 10%)),
+)
+
+---
+#square(
+  size: 50pt,
+  fill: gradient.conic(..color.map.rainbow, space: color.hsv, center: (90%, 90%)),
+)
+
+---
+#square(
+  size: 50pt,
+  fill: gradient.conic(..color.map.rainbow, space: color.hsv, angle: 90deg),
+)
diff --git a/tests/typ/visualize/gradient-radial.typ b/tests/typ/visualize/gradient-radial.typ
index 5d83e71f..c0d1b249 100644
--- a/tests/typ/visualize/gradient-radial.typ
+++ b/tests/typ/visualize/gradient-radial.typ
@@ -46,4 +46,4 @@
 #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-conic.typ b/tests/typ/visualize/gradient-relative-conic.typ
new file mode 100644
index 00000000..26b509af
--- /dev/null
+++ b/tests/typ/visualize/gradient-relative-conic.typ
@@ -0,0 +1,29 @@
+// Test whether `relative: "parent"` works correctly on conic 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.conic(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.conic(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 1f090f7e..89841efd 100644
--- a/tests/typ/visualize/gradient-sharp.typ
+++ b/tests/typ/visualize/gradient-sharp.typ
@@ -9,6 +9,10 @@
   size: 100pt,
   fill: gradient.radial(..color.map.rainbow, space: color.hsl).sharp(10),
 )
+#square(
+  size: 100pt,
+  fill: gradient.conic(..color.map.rainbow, space: color.hsl).sharp(10),
+)
 
 ---
 #square(
@@ -19,3 +23,7 @@
   size: 100pt,
   fill: gradient.radial(..color.map.rainbow, space: color.hsl).sharp(10, smoothness: 40%),
 )
+#square(
+  size: 100pt,
+  fill: gradient.conic(..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 01616fe3..d4461497 100644
--- a/tests/typ/visualize/gradient-stroke.typ
+++ b/tests/typ/visualize/gradient-stroke.typ
@@ -1,8 +1,9 @@
 // Test gradients on strokes.
 
 ---
-#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(
@@ -13,6 +14,16 @@
 )
 
 ---
+#align(
+  center + bottom,
+  square(
+    size: 50pt,
+    fill: black,
+    stroke: 10pt + gradient.conic(red, blue)
+  )
+)
+
+---
 // Test gradient on lines
 #set page(width: 100pt, height: 100pt)
 #line(length: 100%, stroke: 1pt + gradient.linear(red, blue))