Gradient Part 2 - Linear gradients (#2279)

12 files changed, 203 insertions, 11 deletions

diff --git a/tests/typ/compiler/methods.typ b/tests/typ/compiler/methods.typ
index 8f70bd8c..f1017eb5 100644
--- a/tests/typ/compiler/methods.typ
+++ b/tests/typ/compiler/methods.typ
@@ -133,6 +133,39 @@
 #test-repr(oklab(rgb(1, 2, 3)).components(), (8.23%, -0.004, -0.007, 100%))
 
 ---
+// Test gradient functions.
+#test(gradient.linear(red, green, blue).kind(), gradient.linear)
+#test(gradient.linear(red, green, blue).stops(), ((red, 0%), (green, 50%), (blue, 100%)))
+#test(gradient.linear(red, green, blue, space: rgb).sample(0%), red)
+#test(gradient.linear(red, green, blue, space: rgb).sample(25%), rgb("#97873b"))
+#test(gradient.linear(red, green, blue, space: rgb).sample(50%), green)
+#test(gradient.linear(red, green, blue, space: rgb).sample(75%), rgb("#17a08c"))
+#test(gradient.linear(red, green, blue, space: rgb).sample(100%), blue)
+#test(gradient.linear(red, green, space: rgb).space(), rgb)
+#test(gradient.linear(red, green, space: oklab).space(), oklab)
+#test(gradient.linear(red, green, space: cmyk).space(), cmyk)
+#test(gradient.linear(red, green, space: luma).space(), luma)
+#test(gradient.linear(red, green, space: color.linear-rgb).space(), color.linear-rgb)
+#test(gradient.linear(red, green, space: color.hsl).space(), color.hsl)
+#test(gradient.linear(red, green, space: color.hsv).space(), color.hsv)
+#test(gradient.linear(red, green, relative: "self").relative(), "self")
+#test(gradient.linear(red, green, relative: "parent").relative(), "parent")
+#test(gradient.linear(red, green).relative(), auto)
+#test(gradient.linear(red, green).angle(), 0deg)
+#test(gradient.linear(red, green, dir: ltr).angle(), 0deg)
+#test(gradient.linear(red, green, dir: rtl).angle(), 180deg)
+#test(gradient.linear(red, green, dir: ttb).angle(), 90deg)
+#test(gradient.linear(red, green, dir: btt).angle(), 270deg)
+#test(
+  gradient.linear(red, green, blue).repeat(2).stops(),
+  ((red, 0%), (green, 25%), (blue, 50%), (red, 50%), (green, 75%), (blue, 100%))
+)
+#test(
+  gradient.linear(red, green, blue).repeat(2, mirror: true).stops(),
+  ((red, 0%), (green, 25%), (blue, 50%), (green, 75%), (red, 100%))
+)
+
+---
 // Test alignment methods.
 #test(start.axis(), "horizontal")
 #test(end.axis(), "horizontal")
diff --git a/tests/typ/compiler/repr-color-gradient.typ b/tests/typ/compiler/repr-color-gradient.typ
new file mode 100644
index 00000000..d1c639c0
--- /dev/null
+++ b/tests/typ/compiler/repr-color-gradient.typ
@@ -0,0 +1,22 @@
+// Test representation of values in the document.
+
+---
+// Colors
+#set page(width: 400pt)
+#set text(0.8em)
+#blue \
+#color.linear-rgb(blue) \
+#oklab(blue) \
+#cmyk(blue) \
+#color.hsl(blue) \
+#color.hsv(blue) \
+#luma(blue)
+
+---
+// Gradients
+#set page(width: 400pt)
+#set text(0.8em)
+#gradient.linear(blue, red) \
+#gradient.linear(blue, red, dir: ttb) \
+#gradient.linear(blue, red, angle: 45deg, relative: "self") \
+#gradient.linear(blue, red, angle: 45deg, space: rgb)
diff --git a/tests/typ/compiler/repr.typ b/tests/typ/compiler/repr.typ
index ce5b2975..13593a86 100644
--- a/tests/typ/compiler/repr.typ
+++ b/tests/typ/compiler/repr.typ
@@ -47,13 +47,3 @@
 #int \
 #type("hi") \
 #type((a: 1))
-
----
-#set text(0.8em)
-#blue \
-#color.linear-rgb(blue) \
-#oklab(blue) \
-#cmyk(blue) \
-#color.hsl(blue) \
-#color.hsv(blue) \
-#luma(blue)
diff --git a/tests/typ/layout/table.typ b/tests/typ/layout/table.typ
index 5526c4f6..d91c3fa7 100644
--- a/tests/typ/layout/table.typ
+++ b/tests/typ/layout/table.typ
@@ -34,5 +34,5 @@
 #table()
 
 ---
-// Error: 14-19 expected color, none, array, or function, found string
+// Error: 14-19 expected color, gradient, none, array, or function, found string
 #table(fill: "hey")
diff --git a/tests/typ/visualize/gradient-dir.typ b/tests/typ/visualize/gradient-dir.typ
new file mode 100644
index 00000000..92e00393
--- /dev/null
+++ b/tests/typ/visualize/gradient-dir.typ
@@ -0,0 +1,13 @@
+// Test gradients with direction.
+
+---
+#set page(width: 900pt)
+#for i in range(0, 360, step: 15){
+  box(
+    height: 100pt,
+    width: 100pt,
+    fill: gradient.linear(angle: i * 1deg, (red, 0%), (blue, 100%)),
+    align(center + horizon)[Angle: #i degrees],
+  )
+  h(30pt)
+}
diff --git a/tests/typ/visualize/gradient-presets.typ b/tests/typ/visualize/gradient-presets.typ
new file mode 100644
index 00000000..ca1a7007
--- /dev/null
+++ b/tests/typ/visualize/gradient-presets.typ
@@ -0,0 +1,33 @@
+// Test all gradient presets.
+
+---
+#set page(width: 200pt, height: auto, margin: 0pt)
+#set text(fill: white, size: 18pt)
+#set text(top-edge: "bounds", bottom-edge: "bounds")
+
+#let presets = (
+  ("turbo", color.map.turbo),
+  ("cividis", color.map.cividis),
+  ("rainbow", color.map.rainbow),
+  ("spectral", color.map.spectral),
+  ("viridis", color.map.viridis),
+  ("inferno", color.map.inferno),
+  ("magma", color.map.magma),
+  ("plasma", color.map.plasma),
+  ("rocket", color.map.rocket),
+  ("mako", color.map.mako),
+  ("vlag", color.map.vlag),
+  ("icefire", color.map.icefire),
+  ("flare", color.map.flare),
+  ("crest", color.map.crest),
+)
+
+#stack(
+  spacing: 3pt,
+  ..presets.map(((name, preset)) => block(
+    width: 100%,
+    height: 20pt,
+    fill: gradient.linear(..preset),
+    align(center + horizon, smallcaps(name)),
+  ))
+)
diff --git a/tests/typ/visualize/gradient-relative.typ b/tests/typ/visualize/gradient-relative.typ
new file mode 100644
index 00000000..549a05b4
--- /dev/null
+++ b/tests/typ/visualize/gradient-relative.typ
@@ -0,0 +1,30 @@
+// 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-repeat.typ b/tests/typ/visualize/gradient-repeat.typ
new file mode 100644
index 00000000..fd4ea279
--- /dev/null
+++ b/tests/typ/visualize/gradient-repeat.typ
@@ -0,0 +1,36 @@
+// Test repeated gradients.
+
+---
+#rect(
+  height: 40pt,
+  width: 100%,
+  fill: gradient.linear(..color.map.inferno).repeat(2, mirror: true)
+)
+
+---
+#rect(
+  height: 40pt,
+  width: 100%,
+  fill: gradient.linear(..color.map.rainbow).repeat(2, mirror: true),
+)
+
+---
+#rect(
+  height: 40pt,
+  width: 100%,
+  fill: gradient.linear(..color.map.rainbow).repeat(5, mirror: true)
+)
+
+---
+#rect(
+  height: 40pt,
+  width: 100%,
+  fill: gradient.linear(..color.map.rainbow).sharp(10).repeat(5, mirror: false)
+)
+
+---
+#rect(
+  height: 40pt,
+  width: 100%,
+  fill: gradient.linear(..color.map.rainbow).sharp(10).repeat(5, mirror: true)
+)
diff --git a/tests/typ/visualize/gradient-sharp.typ b/tests/typ/visualize/gradient-sharp.typ
new file mode 100644
index 00000000..e19df58f
--- /dev/null
+++ b/tests/typ/visualize/gradient-sharp.typ
@@ -0,0 +1,4 @@
+// Test sharp gradients.
+
+---
+#square(size: 100pt, fill: gradient.linear(..color.map.rainbow).sharp(10))
diff --git a/tests/typ/visualize/gradient-stroke.typ b/tests/typ/visualize/gradient-stroke.typ
new file mode 100644
index 00000000..a156dde7
--- /dev/null
+++ b/tests/typ/visualize/gradient-stroke.typ
@@ -0,0 +1,12 @@
+// Test gradients on strokes.
+
+---
+#set page(width: 100pt, height: 100pt)
+#align(center + horizon, square(size: 50pt, fill: black, stroke: 5pt + gradient.linear(red, blue)))
+
+---
+// Test gradient on lines
+#set page(width: 100pt, height: 100pt)
+#line(length: 100%, stroke: 1pt + gradient.linear(red, blue))
+#line(length: 100%, angle: 10deg, stroke: 1pt + gradient.linear(red, blue))
+#line(length: 100%, angle: 10deg, stroke: 1pt + gradient.linear(red, blue, relative: "parent"))
diff --git a/tests/typ/visualize/gradient-text.typ b/tests/typ/visualize/gradient-text.typ
new file mode 100644
index 00000000..e9316083
--- /dev/null
+++ b/tests/typ/visualize/gradient-text.typ
@@ -0,0 +1,7 @@
+// Test that gradient fills on text don't work (for now).
+// Ref: false
+
+---
+// Hint: 17-43 gradients on text will be supported soon
+// Error: 17-43 text fill must be a solid color
+#set text(fill: gradient.linear(red, blue))
diff --git a/tests/typ/visualize/gradient-transform.typ b/tests/typ/visualize/gradient-transform.typ
new file mode 100644
index 00000000..d33c4ac2
--- /dev/null
+++ b/tests/typ/visualize/gradient-transform.typ
@@ -0,0 +1,12 @@
+// Test whether gradients work well when they are contained within a transform.
+
+---
+#let grad = gradient.linear(red, blue, green, purple, relative: "parent");
+#let my-rect = rect(width: 50pt, height: 50pt, fill: grad)
+#set page(
+  height: 200pt,
+  width: 200pt,
+)
+#place(top + right, scale(x: 200%, y: 130%, my-rect))
+#place(bottom + center, rotate(45deg, my-rect))
+#place(horizon + center, scale(x: 200%, y: 130%, rotate(45deg, my-rect)))