Gradient Part 2 - Linear gradients (#2279)

8 files changed, 147 insertions, 0 deletions

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)))