Fix alignment of gradients and patterns on strokes in PNG (#4634)

5 files changed, 39 insertions, 1 deletions

diff --git a/tests/ref/gradient-linear-stroke-relative-parent.png b/tests/ref/gradient-linear-stroke-relative-parent.png
new file mode 100644
index 00000000..60da4ee8
--- /dev/null
+++ b/tests/ref/gradient-linear-stroke-relative-parent.png
diff --git a/tests/ref/pattern-stroke-relative-parent.png b/tests/ref/pattern-stroke-relative-parent.png
new file mode 100644
index 00000000..fe9b1174
--- /dev/null
+++ b/tests/ref/pattern-stroke-relative-parent.png
diff --git a/tests/ref/pattern-stroke.png b/tests/ref/pattern-stroke.png
index 8b03783b..a9f30aa8 100644
--- a/tests/ref/pattern-stroke.png
+++ b/tests/ref/pattern-stroke.png
diff --git a/tests/suite/visualize/gradient.typ b/tests/suite/visualize/gradient.typ
index c3794150..61f6b6d0 100644
--- a/tests/suite/visualize/gradient.typ
+++ b/tests/suite/visualize/gradient.typ
@@ -175,6 +175,22 @@
   )
 )
 
+--- gradient-linear-stroke-relative-parent ---
+// The image should look as if there is a single gradient that is being used for
+// both the circle stroke and the block fill.
+#align(
+  center + horizon,
+  block(
+    width: 50pt,
+    height: 50pt,
+    fill: gradient.linear(red, blue).sharp(4),
+    circle(
+      radius: 18pt,
+      stroke: 5pt + gradient.linear(red, blue, relative: "parent").sharp(4),
+    )
+  )
+)
+
 --- gradient-linear-line ---
 // Test gradient on lines
 #set page(width: 100pt, height: 100pt)
diff --git a/tests/suite/visualize/pattern.typ b/tests/suite/visualize/pattern.typ
index b0c92efa..b87b7755 100644
--- a/tests/suite/visualize/pattern.typ
+++ b/tests/suite/visualize/pattern.typ
@@ -101,13 +101,35 @@
   center + top,
   square(
     size: 50pt,
-    stroke: 5pt + pattern(
+    fill: pattern(
       size: (5pt, 5pt),
       align(horizon + center, circle(fill: blue, radius: 2.5pt))
+    ),
+    stroke: 7.5pt + pattern(
+      size: (5pt, 5pt),
+      align(horizon + center, circle(fill: red, radius: 2.5pt))
     )
   )
 )
 
+--- pattern-stroke-relative-parent ---
+// Test pattern on strokes with relative set to `"parent"`
+// The pattern on the circle should align with the pattern on the square.
+#align(
+  center + top,
+  block(
+    width: 50pt,
+    height: 50pt,
+    fill: pattern(size: (5pt, 5pt), circle(radius: 2.5pt, fill: blue)),
+    align(center + horizon, circle(
+      radius: 15pt,
+      stroke: 7.5pt + pattern(
+        size: (5pt, 5pt), circle(radius: 2.5pt, fill: red), relative: "parent"
+      ),
+    ))
+  )
+)
+
 --- pattern-text ---
 // Test a pattern on some text
 // You shouldn't be able to see the text, if you can then