From 11575c9811e396bf88a83d8e158c639a0944b1c8 Mon Sep 17 00:00:00 2001
From: Lynnnnnnxx <jcignorance@outlook.com>
Date: Mon, 4 Nov 2024 03:33:24 +0800
Subject: [PATCH] fix: background-clip:text should compatible with transform
 and mask (#639)

---
 src/builder/rect.ts                           |   8 +-
 ...uld-render-background-clip-text-1-snap.png | Bin 0 -> 1614 bytes
 ...-clip-text-compatible-with-mask-1-snap.png | Bin 0 -> 1205 bytes
 ...-text-compatible-with-transform-1-snap.png | Bin 0 -> 1610 bytes
 test/background-clip.test.tsx                 | 105 ++++++++++++++++++
 5 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-1-snap.png
 create mode 100644 test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-compatible-with-mask-1-snap.png
 create mode 100644 test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-compatible-with-transform-1-snap.png
 create mode 100644 test/background-clip.test.tsx

diff --git a/src/builder/rect.ts b/src/builder/rect.ts
index 1db7732b..49686cdf 100644
--- a/src/builder/rect.ts
+++ b/src/builder/rect.ts
@@ -298,11 +298,13 @@ export default async function rect(
     (imageBorderRadius ? imageBorderRadius[0] : '') +
     clip +
     (opacity !== 1 ? `<g opacity="${opacity}">` : '') +
-    (style.transform && currentClipPath && maskId
-      ? `<g clip-path="${currentClipPath}" mask="${maskId}">`
+    (style.transform && (currentClipPath || maskId)
+      ? `<g${currentClipPath ? ` clip-path="${currentClipPath}"` : ''}${
+          maskId ? ` mask="${maskId}"` : ''
+        }>`
       : '') +
     (backgroundShapes || shape) +
-    (style.transform && currentClipPath && maskId ? '</g>' : '') +
+    (style.transform && (currentClipPath || maskId) ? '</g>' : '') +
     (opacity !== 1 ? `</g>` : '') +
     (shadow ? shadow[1] : '') +
     extra
diff --git a/test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-1-snap.png b/test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..c89b761b43cdc8b080d67a01d906cfe01a7e219c
GIT binary patch
literal 1614
zcmd6o`8N~_6vv%1Gj<-v*a?j#Yh#(jlr5udLsYV-F~b-$k}MC|6<Mm69)oA>64{Cp
z(J*8QW2YQL%<!zyOcQzY-cS7r?}vNu_uO;Oxj%fq=iYnHj<&)AvI0CjJi>NJYZq<}
z_&4}~+)SYVahZn)2)47fxEx8^m<_gfy(3NCQQ9P1DfBSfg{)?#dG#9LOJuTgV%~-g
zv7mqg|3IHFxG4!C7hKYY3KEA=;-zok2@pIqh=KNWw!O=ww?hCk=}l=-UAg={)yTW8
ztMU04PYo@%$IO})mra_Pua5uhWcJW5d{R$$MkUvE-{<wakf^U}@ibR?(2Q^FutdRJ
zc%M<8=37%!V#h93+{1JaBq@7cV=@r#X+<aAJw40O_!}k4-_5_DqfB!CMVyvah!4hu
z1}D7EqhPUnmBdQj3FZ$cX>fKc3Y~0eu5t>=0+=*sO2&R;8wx&*L)g+rv;wK*^(+X=
zz@YEUS~)+#zw&tJrk17N#?fbls3{%;Z!P7CkDBM$E4*4Y@SP>$rV$!edjyFMur|y@
z;BB)5I!Jf-3Vg@QK~pP;gxUJGcI&oKi%*w7XtHdDrg&Io8vsD*e$-#uY>|pZd@lo8
zsps#!m<)nst?1DpXNYbHG}sg?E3fu_!joj~S)ycX<J|PFlbQ)z`dV++d__M#hs|a(
z<it}lrapBXGRP|&Bd>AdBszq`u?HPg*)9XVufjlhoX*&)#H9g!j)R<HM8|a2!kxS|
z!KQ$%Gnx4TC0K%3i|>0X^+sIL@%~#)JL7y3!%BA+-?2n6I{TcRg_6Mj1AsB_E(rDN
z*}zy^Ti-Q|tqTcoWzI-Gh~PKi2bzsB{Y@dn^3YV&KlM+HQ#66g?SpF4p6BQ`b&xj}
zK?k4mW>4DCeA61mM`mjLFrH?$Zn6i*lB}K5scT+%p;EB~{7dZBqq;5j+TrpehZa6b
z>E%Q4$-e$(n&Gs&Kx5l$<iZNo$mnTajz~(hwYS(8msG%!@x;2|qp*hK+2=yY)gPZj
zO=^6cMp-d&ZU}FW)v{_QU$J1~N$Ai(1@ruM<Fe8ne+B!cAp)K?QdWE}J-WYUno-ez
zo_bW9vcC@Cbo$Nho~|YNC2^eqLsE;vFo39z6iv<duz`^6;Dhljbab1`kDD83)27t~
z9b%6qwYNM6?mP)kri+rjCnL55J3`}gs{66i?pHIMk0nW>@f50{f-{#ekh#7`|J|jw
zLti!TYHl;l#<kd|(Us6N^I)-`)`00OfF7!)6O#nUp2GvZL#pQ(uRaECzs245qB$4l
z{-wA4IQ!x@UF&Sfj8met2}8NiP1msAyJF$zJmjV{D^=K|O+vT_z_HXdrFU%y4)Lj3
zWXgq$eZe*Ivo^z3&<$YM4&vhShw$dYI;*{9W?xk}O{$B#Ff}n!0EhYHQxf`h*FZD~
zqQ=N5Y%bxw7dnT{@D-=Ptt>W;UoU#+lS5%)j<U0k6U>aa>~K(#G?uKBXeYKL1V9ZB
z8ZSizXLKNg=0>l%56*9ruLB<{_sWQbl~WQ1%569*)ghHQ-S?C!9G^|1bRZnbaue<>
zhcYtCUV25Qde<>j2^!**R*=P>PvHnNq9wAT#^azEc1dU3cuF-Q7YvJN#fW>*y23o!
z)$*~;+A<O9y-*K~=}1vw1SWs0LkW@B@)BM+ygO#Q5t$LkF@M~<j>o}$r{WDB!Dv!4
zm5#t?tS1n47YW8vJ;b%MmNH$7%ipy&S2>5A`y6HnUKyon0I_&I2R2y|6%KY60x(Mh
z(_-ud@IF)e=qO!is3s_IT=o8chOXMO8V7nk*l)d9{KAwO{wDhC<s$=msX!oiVmFaD
z?nV`2qbm5QO?#6|9n|KuB}XhESuCUxE|{z6rH9pbJvd<iHIt!(L`bOYZ9z*&SNbp4
p4Jn3J<AaGO%kXz+{@>e!@v7aE4`H!GdfY$3V`t-NU1#Z=_zyB)@-YAa

literal 0
HcmV?d00001

diff --git a/test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-compatible-with-mask-1-snap.png b/test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-compatible-with-mask-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..e47358aa4014accbbd13a8dcf82614679f41fcbe
GIT binary patch
literal 1205
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$}jSV5#wRaSW-L^Y+&3?C4UN;~)L~
ziq4%}>UrzNjk4&QGqnBYE`FnCbd)_P!0`e*^IzkdNB5O~xCqQyU?iy}ysY@qs^IIK
z+S-fnrremd<?P>A-~TvWOIhN1rtsI=ntQ4$HN_fF_E@MtpX3mH=>L`m75{3jCXH@|
zQ%W71I2Ns`7hO{KvG|JlwTnEh59U>StM!|GRPflJ^?rZ*t-ZT5EX)?Y-=jU*eRhSw
zl6V$L8OJHE0;z&7kt~7N>iHhYvOU+U=~<S0c$Say$4}WtZ)4Lk1vfBlkP$z5*#9)k
ziYI1)nokp1ojZE`nLZUteYMiD+_G(rg5$5N+()v1|6yMdeyT~x>Csekfu3V2w_;Uy
zH{Q9G%aY>SuD)Dw=A4Nu&saOWIWeQcgypbXfE<hDg*=6&^Th*q{p@D!oNLFO{!Kt`
z-G*&VL1lLvRQT*$7YI+wH19~YW>Z#q&&gIE*?fz4$;8{ouBFRM3Pc+mV|n_}X#c;4
zWq(+e16Af%xT&qRa<oxVm-?>oMD}OFB%8M@LmDb_<NvU1y)$jWjTseReQyfo%-pt0
zwCKj4w^mGj%>`9#7gsVH<zD3!>hqtWyJRjXO#V8Y(mt*6r{ZeE5kDLD^8b!Ax1G8l
z>6ZC;AEW0vS?3GAC$@x&dnl#OyWPnS^f&*K$dwAeU$(Oyxo6(}<K*+yTUnovnO-@i
zdZV*YrSHv~b$d7-Ev{3D+o>JDcvIc|7+yc!J$Yr(yp1Pf_H&)kDf_^2sNeVGBx}JV
z?#&Kb-@_*EE<4)Lb9R24wQ={Q_p48=zh|cK__*Im@$K5)?_31rd6_<*im~W#lkv4Q
zW*3-m-@I13d&RTuf?g^UZLIXYOWc7<m?!;zS$$LM+8Hs!kB^v)y6?}rzR|gu!+xLt
zv=@B}c2aCh_DyyDHhVo!)7*JZp?sBludke(F8Cti=3Ag!6CL(!n*Jm#e=F08q6wSx
z&24)(?tHg+bs5XYiyIV<KAo+x=1vvEqr?i0y-FSZZLFCh+$UoGJ!15Db;i4hW6$PA
z*2*3IXV&{&`|seqF0%FfUfs!ePuG=mek~F__oeR0d>g&V_d>fXEi-jaefJi~(`jso
z3CU5HWBI9`b!}A|cjl>AJ@(aHep<Sh_s_35QGX+PC5z_$z0G$f#rX8NOsGn9R9mbn
z$MSLZ_R<vn`p!0))Sa7)H2=MLw|liCFh1N)?v_`|=Kp$Dhim(^Gf&Ij-#Kh;xaE*w
zWYU%+%?gXJR35*u`_}DB-P8V$947?6Vrjf1*du4(c<#62Vl`lT+*<X_pCv{-tY6-u
sXI8}<TY*XgS8(1CLu8Y|&iu=IXk$UMBkSxfz~YF()78&qol`;+05s?f6#xJL

literal 0
HcmV?d00001

diff --git a/test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-compatible-with-transform-1-snap.png b/test/__image_snapshots__/background-clip-test-tsx-test-background-clip-test-tsx-background-clip-should-render-background-clip-text-compatible-with-transform-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..60a73f5e07720075843778ca14f934b17146b8e2
GIT binary patch
literal 1610
zcmd6o{WlW|7{^CrHfhPrM#a>6aq}|QtPr=M%}%9AR*Pod72Q=TZ%ww<)Vxd=F{*i~
zk;uzvBXaGYZRy3>;!+X9gzJ5U%GJHU+&|&|@I2phzUO?-dCvKs^L=g{@xtptOd$XO
zK#$<*;j^kCKSoD;byEkkeE|S%eS!zpH@0B1Hz4ZhMYwc^yxR~s;<Tm+RpaN4k;^T9
z=c(Fcu^mifqcpn~Q^LHPJIq27OPSH~EgCP<FaV9)Ah%yFhp7y~`3U`w!)q~ob|FZE
zwetjsVb_)1zJlJ!52h5?4fV_>-Wti`k8Y}8x!p{~yfC6;+uS1Td7kUTkUI7om?q%X
zgU_@h6JD{^y`~-!d5^N4BX9XD8Q&iy-zPH!#(O&I8%-xITU2w;SI(5NfFd(+r!%-U
z6-dF+QT7oG^tXzk%^B}a3YYICvQPKEtC}EY^3yX)26O*nrPHVihG26CZ*<hO)&lCp
z`6jmDsvia6v`OtO3gNJHuCW!Zq0U*FR!EMe$Y*S$!G&X4>Cxlt>2Oc`uuo4X%l6@a
zqE8yfYGOU0=)5K%F{0y~rPgr8=IJ1Kj-vXMQ`f^0!Ld<@qU&=zDNAlaxS(L{#PfTp
z10U^zT_edl?$WpNfT486C2Ml2v9^J+t#m${#+7J4k2`O<jz&IPfZu<l_Uz|{S;R!l
z@zmFd`B=U8$}6DgH}~GuZf&@q?*x5MHlmrkBEf9L3QZ+0%kVRqo7ol$Ux>13aDFOb
z_c!mfGY;z;aTf*`F&<Q7mGm^Bvu;L0qAX6CHV|o&LmUwwVt*=@@=NCwuWHA30Rw{|
zLGM&FN0*adFOKtio>m2T6<#?0p?Hq3sI^Lc8wg#F$Ol@{1?Jr|%jiZs^F^la=V+Zy
zbk}9AOX%I7;M_bd;{9~55rkM8M(M%niE*Sc{iP9|=;@k`^|DZ=a&gS>5Vini2NH!~
zJHGpTiQE)C0fF42KT%zmt$%qs4tC5_(-@oe%k1VoMDm(Cl;|0TBAfK%;_g&*R}GD+
zmR~l_pI?xV)3~@ihOo;wa4`5R7v~M#no<*`@lf?;?-H@{*ItNoT0<^fIne_ErB!B%
zG+);nPLy1cW7}&kln37nU4db++~&3WY-i!vnwu}EqeX5p4-?wi+VLVEsZo?8Gj*c;
zOxU{FcYNo}VQP`VLX}(+2+@ReIuIM^B}MUvEell1j-JduJjqYYLIxU?6g#GhdrWW~
zL7Yv<ZS6?Yg<@w|xG6eSmPdCy>A>~hhTTAILbQ2jYz(hYir(wmgjuS26YnEUPi!Pv
z9i$b*KijH1?-B_d;Jk5(=;xH{p}J|(sYT)1%PvQCTt46@xm)Uv=hnI~^@pNRzahXX
z>y+~-=}q=%ex_^pwdeOh)l*tKyrv#YrU^$m<iZZKYNV&;(gvijZ;GU1SmFwuT32{F
zC%_s|({CkVZadYxH3vx8N2dFiDtNEj9n^#bB$S_2=BImAw46^pz|B^ttez~tjc7|Y
z!3fZ1_O9p3uHcP?sOSKWndl#uvB_3F5COKXAt8G&&w@hXE4~)-TUMcNMD&iBuX`1J
zMj>jAcu`SCi%TW~jG~P*ZJsE01J8sSRgShKf?D+)WVu7F$^|TU{t@jY0N)JeF>?0w
zk4tmG>wZMa#We{5w1$rZJoa@J&3ac7_@VFmr3Q3E%;5bF2T4Uqu=R8~BIa%jPZ-ll
z%&etM+==98JfrNLKA|Ns6h_7mmEwt<WO^t^k-w&tJXXl}cA6ES4h_1ySP4vy{HZm@
z3uj?$Vb)1w@TLgM?G<{6Q%bR0zQ(ov9QBZs64pT?G7RRy<#{$w%DYc5n2RZSm_OL@
zo}Ad+q@dD1|2Oq>B)=`CEZ_~6qs%D2UzYgRd~S{t>kS2Oc+9Rd_35k-*0IRc6xaeh
t7OUD0&qTcZPqqD9Q(LjQ|9g88dZ1$X7VQW(ZS_Y02>ZP}D%}F<e*=L-=?DM-

literal 0
HcmV?d00001

diff --git a/test/background-clip.test.tsx b/test/background-clip.test.tsx
new file mode 100644
index 00000000..08e67a23
--- /dev/null
+++ b/test/background-clip.test.tsx
@@ -0,0 +1,105 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('backgroundClip', () => {
+  let fonts
+  initFonts((f) => (fonts = f))
+
+  it('should render background-clip:text', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 30,
+          flexDirection: 'column',
+          background: '#ffffff',
+        }}
+      >
+        <div
+          style={{
+            backgroundImage: 'linear-gradient(to right, red, green)',
+            WebkitBackgroundClip: 'text',
+            backgroundClip: 'text',
+            color: 'transparent',
+          }}
+        >
+          lynn
+        </div>
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+
+    expect(toImage(svg)).toMatchImageSnapshot()
+  })
+
+  it('should render background-clip:text compatible with transform', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 30,
+          flexDirection: 'column',
+          background: '#ffffff',
+        }}
+      >
+        <div
+          style={{
+            transform: 'translateX(25px)',
+            backgroundImage: 'linear-gradient(to right, red, green)',
+            WebkitBackgroundClip: 'text',
+            backgroundClip: 'text',
+            color: 'transparent',
+          }}
+        >
+          lynn
+        </div>
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+
+    expect(toImage(svg)).toMatchImageSnapshot()
+  })
+
+  it('should render background-clip:text compatible with mask', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 30,
+          flexDirection: 'column',
+          background: '#ffffff',
+        }}
+      >
+        <div
+          style={{
+            transform: 'translateX(25px)',
+            backgroundImage: 'linear-gradient(to right, red, green)',
+            WebkitBackgroundClip: 'text',
+            backgroundClip: 'text',
+            maskImage: 'linear-gradient(to right, blue, transparent)',
+            color: 'transparent',
+          }}
+        >
+          lynn
+        </div>
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+
+    expect(toImage(svg)).toMatchImageSnapshot()
+  })
+})