From 9bc47fd41937be1bc96db2c91420323d034bebef Mon Sep 17 00:00:00 2001
From: Paul Golmann <mail@pje-web.de>
Date: Tue, 30 Jan 2024 02:21:25 +0100
Subject: [PATCH] fix: positioned mask image (#566)

Resolves #565

---------

Co-authored-by: Shu Ding <g@shud.in>
---
 src/builder/mask-image.ts                     |   4 +--
 ...sk-image-on-positioned-elements-1-snap.png | Bin 0 -> 367 bytes
 test/mask-image.test.tsx                      |  29 ++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 test/__image_snapshots__/mask-image-test-tsx-test-mask-image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png

diff --git a/src/builder/mask-image.ts b/src/builder/mask-image.ts
index 6bd72c69..46a24112 100644
--- a/src/builder/mask-image.ts
+++ b/src/builder/mask-image.ts
@@ -37,8 +37,8 @@ export default async function buildMaskImage(
     mask +=
       def +
       buildXMLString('rect', {
-        x: 0,
-        y: 0,
+        x: left,
+        y: top,
         width,
         height,
         fill: `url(#${_id})`,
diff --git a/test/__image_snapshots__/mask-image-test-tsx-test-mask-image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png b/test/__image_snapshots__/mask-image-test-tsx-test-mask-image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..c66aa945db60b02d8c915b9407b8aa67e42dc89b
GIT binary patch
literal 367
zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P1|%(0%q}r7Fq(O~IEGZrd3&*u^MC>av*X=6
zXLDcjh(6h=Jb|%}?-EO&u!Y|Pi^j(U89VMXzt6w($m79IHt`$Y4@`*ALX5G4P0fzv
d#`}+j_z&=OAJBWCAPo#i22WQ%mvv4FO#szdjoAPI

literal 0
HcmV?d00001

diff --git a/test/mask-image.test.tsx b/test/mask-image.test.tsx
index 5afafa6e..488274a0 100644
--- a/test/mask-image.test.tsx
+++ b/test/mask-image.test.tsx
@@ -209,4 +209,33 @@ describe('Mask-*', () => {
     )
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('should support mask-image on positioned elements', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 20,
+            left: 20,
+            height: 100,
+            width: 100,
+            display: 'flex',
+            background: 'green',
+            maskImage:
+              "url(data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' width='100' height='100' /%3E%3C/svg%3E)",
+            border: '1px solid red',
+          }}
+        ></div>
+      </div>,
+      { width: 120, height: 120, fonts }
+    )
+    expect(toImage(svg, 120)).toMatchImageSnapshot()
+  })
 })