Gradient Part 6 - Pattern fills (#2740)

8 files changed, 112 insertions, 3 deletions

diff --git a/tests/typ/layout/table.typ b/tests/typ/layout/table.typ
index 5ddc8503..529f2720 100644
--- a/tests/typ/layout/table.typ
+++ b/tests/typ/layout/table.typ
@@ -66,5 +66,5 @@
 #table()
 
 ---
-// Error: 14-19 expected color, gradient, none, array, or function, found string
+// Error: 14-19 expected color, gradient, pattern, none, array, or function, found string
 #table(fill: "hey")
diff --git a/tests/typ/visualize/gradient-text.typ b/tests/typ/visualize/gradient-text.typ
index a233ba6b..671172e1 100644
--- a/tests/typ/visualize/gradient-text.typ
+++ b/tests/typ/visualize/gradient-text.typ
@@ -9,7 +9,7 @@
 // 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
+// Error: 17-61 gradients and patterns on text must be relative to the parent
 #set text(fill: gradient.linear(red, blue, relative: "self"))
 
 ---
diff --git a/tests/typ/visualize/pattern-relative.typ b/tests/typ/visualize/pattern-relative.typ
new file mode 100644
index 00000000..78517e1e
--- /dev/null
+++ b/tests/typ/visualize/pattern-relative.typ
@@ -0,0 +1,23 @@
+// Test pattern with different `relative`.
+
+---
+// Test with relative set to `"self"`
+#let pat(..args) = pattern(size: (30pt, 30pt), ..args)[
+  #place(top + left, line(start: (0%, 0%), end: (100%, 100%), stroke: 1pt))
+  #place(top + left, line(start: (0%, 100%), end: (100%, 0%), stroke: 1pt))
+]
+
+#set page(fill: pat(), width: 100pt, height: 100pt)
+
+#rect(fill: pat(relative: "self"), width: 100%, height: 100%, stroke: 1pt)
+
+---
+// Test with relative set to `"parent"`
+#let pat(..args) = pattern(size: (30pt, 30pt), ..args)[
+  #place(top + left, line(start: (0%, 0%), end: (100%, 100%), stroke: 1pt))
+  #place(top + left, line(start: (0%, 100%), end: (100%, 0%), stroke: 1pt))
+]
+
+#set page(fill: pat(), width: 100pt, height: 100pt)
+
+#rect(fill: pat(relative: "parent"), width: 100%, height: 100%, stroke: 1pt)
diff --git a/tests/typ/visualize/pattern-small.typ b/tests/typ/visualize/pattern-small.typ
new file mode 100644
index 00000000..888cfee1
--- /dev/null
+++ b/tests/typ/visualize/pattern-small.typ
@@ -0,0 +1,14 @@
+// Tests small patterns for pixel accuracy.
+
+---
+#box(
+  width: 8pt,
+  height: 1pt,
+  fill: pattern(size: (1pt, 1pt), square(size: 1pt, fill: black))
+)
+#v(-1em)
+#box(
+  width: 8pt,
+  height: 1pt,
+  fill: pattern(size: (2pt, 1pt), square(size: 1pt, fill: black))
+)
diff --git a/tests/typ/visualize/pattern-spacing.typ b/tests/typ/visualize/pattern-spacing.typ
new file mode 100644
index 00000000..f8f5f9fd
--- /dev/null
+++ b/tests/typ/visualize/pattern-spacing.typ
@@ -0,0 +1,31 @@
+// Test pattern with different `spacing`.
+
+---
+// Test with spacing set to `(-10pt, -10pt)`
+#let pat(..args) = pattern(size: (30pt, 30pt), ..args)[
+  #square(width: 100%, height: 100%, stroke: 1pt, fill: blue)
+]
+
+#set page(width: 100pt, height: 100pt)
+
+#rect(fill: pat(spacing: (-10pt, -10pt)), width: 100%, height: 100%, stroke: 1pt)
+
+---
+// Test with spacing set to `(0pt, 0pt)`
+#let pat(..args) = pattern(size: (30pt, 30pt), ..args)[
+  #square(width: 100%, height: 100%, stroke: 1pt, fill: blue)
+]
+
+#set page(width: 100pt, height: 100pt)
+
+#rect(fill: pat(spacing: (0pt, 0pt)), width: 100%, height: 100%, stroke: 1pt)
+
+---
+// Test with spacing set to `(10pt, 10pt)`
+#let pat(..args) = pattern(size: (30pt, 30pt), ..args)[
+  #square(width: 100%, height: 100%, stroke: 1pt, fill: blue)
+]
+
+#set page(width: 100pt, height: 100pt)
+
+#rect(fill: pat(spacing: (10pt, 10pt,)), width: 100%, height: 100%, stroke: 1pt)
diff --git a/tests/typ/visualize/pattern-stroke.typ b/tests/typ/visualize/pattern-stroke.typ
new file mode 100644
index 00000000..3cc43a70
--- /dev/null
+++ b/tests/typ/visualize/pattern-stroke.typ
@@ -0,0 +1,13 @@
+// Test pattern on strokes
+
+---
+#align(
+  center + top,
+  square(
+    size: 50pt,
+    stroke: 5pt + pattern(
+      size: (5pt, 5pt),
+      align(horizon + center, circle(fill: blue, radius: 2.5pt))
+    )
+  )
+)
diff --git a/tests/typ/visualize/pattern-text.typ b/tests/typ/visualize/pattern-text.typ
new file mode 100644
index 00000000..a9fbfb37
--- /dev/null
+++ b/tests/typ/visualize/pattern-text.typ
@@ -0,0 +1,28 @@
+// Test a pattern on some text
+
+---
+// You shouldn't be able to see the text, if you can then
+// that means that the transform matrices are not being
+// applied to the text correctly.
+#let pat = pattern(
+  size: (30pt, 30pt),
+  relative: "parent",
+  square(size: 30pt, fill: gradient.conic(..color.map.rainbow))
+);
+
+#set page(
+  width: 140pt,
+  height: 140pt,
+  fill: pat
+)
+
+#rotate(45deg, scale(x: 50%, y: 70%, rect(
+  width: 100%,
+  height: 100%,
+  stroke: 1pt,
+)[
+  #lorem(10)
+
+  #set text(fill: pat)
+  #lorem(10)
+]))
diff --git a/tests/typ/visualize/shape-rect.typ b/tests/typ/visualize/shape-rect.typ
index 6447b55d..ea0e66b0 100644
--- a/tests/typ/visualize/shape-rect.typ
+++ b/tests/typ/visualize/shape-rect.typ
@@ -51,7 +51,7 @@
 #rect(radius: (left: 10pt, cake: 5pt))
 
 ---
-// Error: 15-21 expected length, color, gradient, dictionary, stroke, none, or auto, found array
+// Error: 15-21 expected length, color, gradient, pattern, dictionary, stroke, none, or auto, found array
 #rect(stroke: (1, 2))
 
 ---