Part 5a: Gradients on text with `relative: auto` or `relative: "parent"` (#2364)

3 files changed, 68 insertions, 3 deletions

diff --git a/tests/typ/visualize/gradient-text-decorations.typ b/tests/typ/visualize/gradient-text-decorations.typ
new file mode 100644
index 00000000..a4e861d8
--- /dev/null
+++ b/tests/typ/visualize/gradient-text-decorations.typ
@@ -0,0 +1,9 @@
+// Tests gradients on text decorations.
+
+---
+
+#set text(fill: gradient.linear(red, blue))
+
+Hello #underline[World]! \
+Hello #overline[World]! \
+Hello #strike[World]! \
diff --git a/tests/typ/visualize/gradient-text-other.typ b/tests/typ/visualize/gradient-text-other.typ
new file mode 100644
index 00000000..04b84cb6
--- /dev/null
+++ b/tests/typ/visualize/gradient-text-other.typ
@@ -0,0 +1,14 @@
+// Test text gradients with radial and conic gradients.
+
+---
+#set page(width: 200pt, height: auto, margin: 10pt)
+#set par(justify: true)
+#set text(fill: gradient.radial(red, blue))
+#lorem(30)
+
+
+---
+#set page(width: 200pt, height: auto, margin: 10pt)
+#set par(justify: true)
+#set text(fill: gradient.conic(red, blue, angle: 45deg))
+#lorem(30)
diff --git a/tests/typ/visualize/gradient-text.typ b/tests/typ/visualize/gradient-text.typ
index e9316083..a233ba6b 100644
--- a/tests/typ/visualize/gradient-text.typ
+++ b/tests/typ/visualize/gradient-text.typ
@@ -1,7 +1,49 @@
-// Test that gradient fills on text don't work (for now).
+// Test that gradient fills on text.
+// The solid bar gradients are used to make sure that all transforms are
+// correct: if you can see the text through the bar, then the gradient is
+// misaligned to its reference container.
+// Ref: true
+
+---
 // Ref: false
+// Make sure they don't work when `relative: "self"`.
+
+// Hint: 17-61 make sure to set `relative: auto` on your text fill
+// Error: 17-61 gradients on text must be relative to the parent
+#set text(fill: gradient.linear(red, blue, relative: "self"))
 
 ---
-// Hint: 17-43 gradients on text will be supported soon
-// Error: 17-43 text fill must be a solid color
+// Test that gradient fills on text work for globally defined gradients.
+
+#set page(width: 200pt, height: auto, margin: 10pt, background: {
+  rect(width: 100%, height: 30pt, fill: gradient.linear(red, blue))
+})
+#set par(justify: true)
 #set text(fill: gradient.linear(red, blue))
+#lorem(30)
+
+---
+// Sanity check that the direction works on text.
+
+#set page(width: 200pt, height: auto, margin: 10pt, background: {
+  rect(height: 100%, width: 30pt, fill: gradient.linear(dir: btt, red, blue))
+})
+#set par(justify: true)
+#set text(fill: gradient.linear(dir: btt, red, blue))
+#lorem(30)
+
+---
+// Test that gradient fills on text work for locally defined gradients.
+
+#set page(width: auto, height: auto, margin: 10pt)
+#show box: set text(fill: gradient.linear(..color.map.rainbow))
+
+Hello, #box[World]!
+
+---
+// Test that gradients fills on text work with transforms.
+
+#set page(width: auto, height: auto, margin: 10pt)
+#show box: set text(fill: gradient.linear(..color.map.rainbow))
+
+#rotate(45deg, box[World])