From 14819024d4d9a38509656329877f200a753d504a Mon Sep 17 00:00:00 2001
From: AioiLight <info@aioilight.space>
Date: Tue, 19 Nov 2024 09:23:33 +0900
Subject: [PATCH] feat: add ability to add text stroke  (#645)

![af8e1b7b-0c8a-4722-833c-df1b38b0df26](https://github.com/user-attachments/assets/af7d0862-a31e-43f9-9415-acab1ea98dd5)

This PR is adding ability to stroke to texts.

fixes: #578

Added 2 properties (`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`)
and 1 shorthands (`WebkitTextStroke`). When stroke is enabled,
`paint-order: stroke;` and `stroke-linejoin: round;` are automatically
set to prevent the stroke from obscuring the text.

I don't have a deep understanding of all the code so further
improvements may be needed.
---
 README.md                                     |  12 +++
 src/builder/text.ts                           |   8 ++
 src/handler/expand.ts                         |  15 ++++
 src/handler/inheritable.ts                    |   2 +
 src/text/index.ts                             |  12 +++
 ...e-should-work-basic-text-stroke-1-snap.png | Bin 0 -> 2333 bytes
 ...-nested-and-complex-text-stroke-1-snap.png | Bin 0 -> 3115 bytes
 ...-should-work-nested-text-stroke-1-snap.png | Bin 0 -> 2424 bytes
 test/webkit-text-stroke.test.tsx              |  83 ++++++++++++++++++
 9 files changed, 132 insertions(+)
 create mode 100644 test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-basic-text-stroke-1-snap.png
 create mode 100644 test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-nested-and-complex-text-stroke-1-snap.png
 create mode 100644 test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-nested-text-stroke-1-snap.png
 create mode 100644 test/webkit-text-stroke.test.tsx

diff --git a/README.md b/README.md
index 1340126a..b96a313a 100644
--- a/README.md
+++ b/README.md
@@ -270,6 +270,18 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 <tr><td><code>maskSize</code></td><td>Support two-value size i.e. `10px 20%`</td><td><a href="https://og-playground.vercel.app/?share=pVLfb9MwEP5XLEvLhpQ2P0a3LlpAAiYxJEATk_rSF8e-JNc6drAd2lD1f8duV8H6yoN19ved7j7ffTvKtQBa0HuBv5aKEOtGCeVuF-6EtIBN6wpymaXpxWV8BDcoXHuGCbS9ZKNHawnbExrun9AAd6iV57iWQ6dOLJPYqEcHnQ0UKAfmRK0G67AeP2oPqtD_NV17_Af-hoJc5_9Aixe1N2n6glaMrxujByV8jcHIq9a53hZJgh1rwE4HFWTbdsp1l_StdnqSzfJ5Pr-9e5tnt9mkruD6ZiYyccf4e9xKrEpTTbJpPs2in-V8FtVdueqbiBvdl16jD2O0KbM8TSNuS2uaKsItihLGLy3__KFmiyf8vnpIvz03s_rpzelHHbPrx6DJ6zRMIJOTJkRf8oqj4RIIc2SWXoQTk0oOEBNnmNfPjE96Veg4Gr-ffkvyvztaQLVG9_X_O5EkOWzID90QAzV4nANBRVrXyfNm52oCv98v1buluk-863ykMdV98IilxY4e_EWLMMOYHh1Ii7BTKqAaGlrUTFqIKXR6hc9jH-zrNoeXLxSM8NBVIGjhzAD7mDpW-YwWpNQbbaSg-z8">Example</a></td></tr>
 <tr><td><code>maskRepeat</code></td><td><code>repeat</code>, <code>repeat-x</code>, <code>repeat-y</code>, <code>no-repeat</code>, defaults to <code>repeat</code></td><td><a href="https://og-playground.vercel.app/?share=nVbpjqNIEn6VkqXVzMg1AhtjQ-3MStwGA-Ywl9U_hssJ5jSHAbf63TdxdfXUzh4_FhllHF8cGZkm4usirKJ48bb4LUrvX8qXl7ab8vj3r19n-uUliVOQdG8vP61Q9G8_vb4LhzTqkr_IorStc3-C0ksejx_SmWbTJg67tCqhLqzyvig_tH6eglLs4qKdVXHZxc2H6tq3XXqZmAoKyzn-v6ovUG6mj_jtBVt_Ejnfs92i6Hdp4IcZaKq-jKCPvsl_jvzOf0sLH8RIXYK_B34bbzevqU0fjQE9CKCi4KOaVsJZAFK0PvMaQ3lwYbPiSNqzgHJV00BFqmk34XaGiEbucHlxslDqMNtRAJpyJkUpM0NTFAcXzqco6ztPUSbggs-8BTgY_AMvwl9UU9Qz_lPvPP0-WaiEz6zinkKoPwLIs9_lkGcATGEO-o6jTUANn3iKeJJ2F-6CJ58PJp8_ICFzA7QeFZqSbqHwBOW1zSeow62UY6HeAxNPzgKZnk18E7jfU2LHzbFMulBY5ZHAgVhYtUGpbGMWTT3HuHuFtZ35wLFRzyRScQ-2EDNEQkuKeaJaDM0GmJSLrNcrzGYQr5uDyFBA20vZ-VqbBuf98BkWRqGZUhXtjeGYEvcIizC5DB9yQU7niRiPpwyXH9QkP8RJdqF9unrEDo56Luig_fXD9yf_3NlVr2GRw3zye5DS01nwtp4j3SNXJ8VU_IH_eD9ygfjifEVTf2-gIVvd5TUO8-CzYC3l8rNWJOo750J-cHBfRKqB6rMf4t2-1mDsPCiN5Bn_uhk15t3umJGT79h9JPCQJ_tP9oSM_YfcP-rGwFrAPViZIUAbiH2v97P-p81BsHcJDc-ZWvGSwfHWkRZUm-8UDuWsMsJM7ITXvl8YYxpVaWIcDFuQMp-lDYZXUyUzNVLX4KYTMBgGNxwFaEUoF84QWe6mXMYz13GVeU91ISF0sPF8oDNpbYtxHVWOmSxRzOXLyHCzEenHcHk5as7liJUdRl2SjhWUE3PZ2gdM43nDPrEUGwnJxHISvL6WuHksd8qjuK66bTDEQyKKHu5qIGNFxvAo5byyizvKZ1y7x28hf-CjZXAw2EGzWn_bP04b2lbtMx3Y0jpXaDNktVtXbPH7o8A3k8q5jhVNxsBWhe0F8jqqYqJnr17XAO9o1UZrAcDRo3tY7Zc5wGhikM4Wilz3YTH1akMOy1XMMGOVEZokexWWlo7HMrJ4mBzVqM7u8aSyN7SWb870cAKdUCqJ6c2z3xr6gV61QqrD22-O_pRosq3iHQHGzFRQ5Yisjo61Tseq0VByWxKmdVrHa9fRk122bBpiUHnDCTG_OR28OudwcW0E4qGozUaOdnHZRLesiUbXkbg1bku7lGdSrNTYBlHqgxtVdr9RjvZyd8xXd4BUYBvou7VvXLoxGkldoSrXdvmzRHnurQiLi9WfDPsgi_dJE5cB4pIZG6gaVm1qkrxQVSUqZU3d0bDMtxfdU3kSiVwJKVrPXy8HaWAJzNBDjq4entTprFOeWL32HNwX1u2dXVfSQJQeeyMecFNHn6ezUUmaO9md4uaKL3twybpTNuQ1QYGym8gitAjRu7DoFaQkWHI7miNzZ2UUsuEE2LlmjNrpp5XTh3mM-eXt_mi2O1kor9tBsfwbxgILhzkJ68PRPh25nlhRkxTTuWQq6dWVpp3BVPWq6ree34P7ivDPAljuwsQbB8fxjnTSn-lsx7sPMdwQe48zB3lI0rI02Vgz2kBmsColkI3M3QuwOSUEzZuCd99fNIykkP0YINFwL6LNUiQmKiAPoo5PqkVFGc1fEaQtxrW6psdO4C5IhRxC1916J3mrxeDerWKcRC_0etLjCiR7IexI2eG0w57VB4S0zd53hq0xZI7sNuqZ2ka4KhmHvBQke2sbO_gn013TtlADlAmPyZEcSqsdVrqFl8IbmAgqnY9pFukjifCFN1mcGPOEFPsIAi-V0rgqfdMZSlIkpEGa4ua3J44SQ4thMqQRr8ujjuxUKgCIq3Iaheg6fbOvF2qN895725IMC-eaTAIA_P77Lx_NvfDbTJw79NvLH3laxn7zK2j8KIUTwM9d9dLMPf71Jcj7-PWla_yyrf0G6n7545P9-3AwTyj1-LJaz8tn90Zcx_48VjRP4tcfSicOsrRTPmXwl6GhvYPlWOQfg4O2V9fnicZ8x0B92OyOLDWIKV2dnbz097B5XMGgMCKICnsK1_MHGk0VczNCzBp-2DG9IDeaKQ4iSwHlJEIsNSrXp49N4Ix9-PjUXGCjiyYcUyb8HhbhfcYpDPmIijDVruPguUYlCjBmho4KMzxUk6Yhpn2-zDDILNeqJ0g_LKDDWDI7v0_dKLMZpJWVyHM45NeqOazgikMfhgJt1KvVzuts66QiOBd5G8D9RuukjgQrFRliCZvOnMvyx0H8ezH_n-P808v_ONQ_Qf_laL99-1L-40v5GwLHXLguXhdVPQ-l7eLt6-I50C7eZpevi_eRd_E2D5GLKA56sHi7-Hkbvy7iorqmp6me5-VueHLQ0Tx5ckUQR4u3runjb6-Lzg8gIonzvBqqJo8W3_4J">Example</a></td></tr>
 
+<tr>
+<td rowspan="2"><code>WebkitTextStroke</code>
+<td><code>WebkitTextStrokeWidth</code></td>
+<td>Supported</td>
+<td></td>
+</tr>
+<tr>
+<td><code>WebkitTextStrokeColor</code></td>
+<td>Supported</td>
+<td></td>
+</tr>
+
 </tbody>
 </table>
 
diff --git a/src/builder/text.ts b/src/builder/text.ts
index 26eddbae..6ab354b8 100644
--- a/src/builder/text.ts
+++ b/src/builder/text.ts
@@ -132,6 +132,14 @@ export default function buildText(
     transform: matrix || undefined,
     'clip-path': clipPathId ? `url(#${clipPathId})` : undefined,
     style: style.filter ? `filter:${style.filter}` : undefined,
+    'stroke-width': style.WebkitTextStrokeWidth
+      ? `${style.WebkitTextStrokeWidth}px`
+      : undefined,
+    stroke: style.WebkitTextStrokeWidth
+      ? style.WebkitTextStrokeColor
+      : undefined,
+    'stroke-linejoin': style.WebkitTextStrokeWidth ? 'round' : undefined,
+    'paint-order': style.WebkitTextStrokeWidth ? 'stroke' : undefined,
   }
   return [
     (filter ? `${filter}<g filter="url(#satori_s-${id})">` : '') +
diff --git a/src/handler/expand.ts b/src/handler/expand.ts
index 92fbc775..a1f39ba0 100644
--- a/src/handler/expand.ts
+++ b/src/handler/expand.ts
@@ -195,6 +195,19 @@ function handleSpecialCase(
     return result
   }
 
+  if (name === 'WebkitTextStroke') {
+    value = value.toString().trim()
+    const values = value.split(' ')
+    if (values.length !== 2) {
+      throw new Error('Invalid `WebkitTextStroke` value.')
+    }
+
+    return {
+      WebkitTextStrokeWidth: purify(name, values[0]),
+      WebkitTextStrokeColor: purify(name, values[1]),
+    }
+  }
+
   return
 }
 
@@ -267,6 +280,8 @@ type MainStyle = {
   }[]
   textShadowColor: string[]
   textShadowRadius: number[]
+  WebkitTextStrokeWidth: number
+  WebkitTextStrokeColor: string
 }
 
 type OtherStyle = Exclude<Record<PropertyKey, string | number>, keyof MainStyle>
diff --git a/src/handler/inheritable.ts b/src/handler/inheritable.ts
index 07996e72..fefa84ae 100644
--- a/src/handler/inheritable.ts
+++ b/src/handler/inheritable.ts
@@ -14,6 +14,8 @@ const list = new Set([
   'textShadowOffset',
   'textShadowColor',
   'textShadowRadius',
+  'WebkitTextStrokeWidth',
+  'WebkitTextStrokeColor',
   'textDecorationLine',
   'textDecorationStyle',
   'textDecorationColor',
diff --git a/src/text/index.ts b/src/text/index.ts
index 7149a84b..d40242bb 100644
--- a/src/text/index.ts
+++ b/src/text/index.ts
@@ -734,6 +734,18 @@ export default async function* buildTextNodes(
             mask: overflowMaskId ? `url(#${overflowMaskId})` : undefined,
 
             style: cssFilter ? `filter:${cssFilter}` : undefined,
+            'stroke-width': inheritedStyle.WebkitTextStrokeWidth
+              ? `${inheritedStyle.WebkitTextStrokeWidth}px`
+              : undefined,
+            stroke: inheritedStyle.WebkitTextStrokeWidth
+              ? inheritedStyle.WebkitTextStrokeColor
+              : undefined,
+            'stroke-linejoin': inheritedStyle.WebkitTextStrokeWidth
+              ? 'round'
+              : undefined,
+            'paint-order': inheritedStyle.WebkitTextStrokeWidth
+              ? 'stroke'
+              : undefined,
           })
         : ''
 
diff --git a/test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-basic-text-stroke-1-snap.png b/test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-basic-text-stroke-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..40a5755157036fc32c8d9b4329aae0212185a878
GIT binary patch
literal 2333
zcmcImX*84#8=h=UvOHrQ`;2`rV$5qFW-ttclqE@qQW;wzTQoy6B*qw91~0OUjL4EC
zN|B*LLZNI~D@!rG_351VobSi?`}=V(=Un%X>)hwM?sKO&JJ|~IOY?(3AVI7h+I7GB
z{|PYPeh&SZ?FIsY=dfs$+g0WoQ?FnUC)Rhl3zRJ+C?{>KscCQ}Fvu2@%qK4GR$F>X
zP}88QYAI0No$T~fvUOv3(0uVxQ`==#qZft#tL%;F;NZwCoD(~Nou7q`RO?FkU34-z
zNS)+w15rN45}(`MTpXQz5K?QA@asALM03=}hvliZ%cG5izM2dLi<3uu9#&oZ`2&8c
z=Heo|aJ2e(WzFW|&;b57!U@n_ecut)baRmlUu62332;;5IXjMH2;|i-e_zI(xwrT{
zQ;CHb+S_ZNtZ3P*yL<OUCB8VPIU)B2MOdMtFGC@BbP&cb84~vOBSy`x&>>g%#P{|0
zS<UOF*M7FPN37)34PO3dZ+p3$e2|3@o(!I9g<txuE80e_j=0|7(;2Rz*js<P!~ZW~
zm+jrn^PVg0e>mUEoHB@7Bp#Z9`oOvvD($c~NnmJ(bkz6v-gfOoBY~pDWpzhn?oB10
zRae7(P^eW;-<A);1Cck6^Dv9u!CjjWSlfh{%vB2JsDQJf$p<+EvM}L&ky)%agnm3A
z$D5{xFLE;q`M_vKGAXR=q7DI+dY}8rlM6}Uu-$I~QQC|01$Ri^oiT<`aS7zyKBM)D
zVHS4vR<JeDi;Uf=yGg_Rb!EwU``f(3`JOy9@9ecF{hR06%*+5NPxR)(t(6kuY;b{_
z-#g_Un+LBZ@l0f+v;WBKREE46z4<GZ|F!tKb*O!T{4$w9r2~E;ZU7s5do^`Ry`V4@
zOb3U5Uq8L+)N$kw&}+%4r<Gzy37Kf%+t;@ZX99@wEqc?KBDK5Cm{mjG65`6kt(a84
z8ZA||{JmYy_lBT+3d2MK%Y#iBzr-&>h=^!z51l2|5iRF!4U%D2REFL-f;19q=3=EH
zQL6ia7IX?_mtW!;JR{2(A^_sb677u~8iU&D08y5JGt0m%m|ut*>T1iU=`ErbDi3*I
z6IvtJqO~uzD+=>VugchAFHy-rtRpJ$t#L@acWd~3YIK9OAtE2=?ZqAJRxQw|Wr*eJ
zt~PG+qNJFvSL};(O<v|$$o#ZX=quT243OT$cIcQ&{^Y$=($DfeGp(8|<I}&uP==r<
z3<}3`Jtl+7-f|#sC3u?B7jNXU8FXdR(L~qoz~@Iq8;vx<J6?ny#bKMee?|xn`Y1p0
zInlIZIeC5|Wj%R6ly#ah#kV{nFL5+H+hGEA(_IO<%|9lUByievgmyvihb4rp&9A=d
zoGLi<z7zp@gJ3N{XN`@GRcJjki0*XTYIGG5ntvj;Q&Ku>!e{jnr<)gl!GZ@NXC8<2
za2(ar;OBENRZt|`3O@F=SYV{ax}+Da;<w;j=_+wLq0)W3LvmG?q3RlyLY(llYhpX|
z-doP;?&H&}l<8wvMGx_Joj2j^(u}uzqEFbd9ZuZnjPaRh@_C|ku`6y@@zRAb((@=3
z6+@}$84*L7+TBI_$d!^0x^FKzpdh_ux2K6t7dJD*#>#u)>Li}w5ljgxU|y2HT7v`y
zbgb`G8DnTK|Gg0{3>fYmM_j}xVJfuctQ2wU>;Skl+eNNMdHtDW_r;!KFYI6rBuPU!
zLE83g%-r_MTh>_GDBp1{Q>HXYM~Q04nX&<D1p$i}`eqnF_<y>xLss<*_{mTY_dxRJ
zE1K|u{QC-`NoqG&xlhW#uF(TxRQ1h{2HXZgA6BXVtVt4~QA|zApq;kJwTX(|!aeiH
z{<6o%kPc^6vo$MzSs4&ry~2aX;sbL(g__?hL_|L-i5xI|IkqwrbOzYz;p=jwc2)_J
z4=EP6flEqfo?L&2*L}oR<a~Kdt)zgT9mh@|fQPOYnna!RYqH43E5xBBnw5I1NP%nV
zvpLpFgCh%Dt^2MX2wCWsqK0#Jh!3Vqmv$jijhsY5FbR5p^qEkx3-7C&GkP`KbS^l1
znwws+6afcrC5XIvddRekk2!v@Q(^)&Q=g^@_O*PoVsJ+Xt)xbQ@kT(n0p?b+5+@O6
z8nZSj^b5*$94MlDnw^0+0|y$r?+M>A;hQ#xfj2(yqzFMz1AIZxXwa>Xx_-_oa8(F8
zDI&}mzgabR^@E@r0S+ij%#U~1nt{)ipNHarwtE`QKWVgOz<btAYbD<6u>D2XOpy-C
zJs4LtSGI@D{z7aVJGO@FhY3>t@pYbK&;cOnK8~T$h~N|TkBErqPw@6oMZUKe4XQoN
zT9Ub8zK`3dUn%dMfZ}M|+uPL<3a`Y!v9dE%6phLcsgr(Y6bxL{44HfaMdeFLOWG&(
zhLM~<dzekw@`H@>CCN3EC|{k->N+4TB>7!pMQS};pQqaPQk~$}EbTX+c+Prt$4q*o
z1a$wt@MV6TsgXTyIq038cAC}VQZE80db$CM`XhRYPTh~47`|GFQ`BPre0eo$oKa2@
zwfm=QR;V{D`*4KWg<9d4pv~7PDuR@#(qH;#swf{ecJo=PaXS`y0iPrD<u_WJf<U2N
zWj(}wWl-Y{A&Xxcv{a6v{IZgew!bw~@2Nht9xf|3kJr2;b5s{_as1>2?wv{h5biI7
zQdg|gBf9kBS-2q_pnBl$x7;h`<TE%V)6Q#i)}r6#=zR!gNYWve$a|KFW*{Pe{7b;M
z9O~%a|0teAlC;^L!>6bt$&BYwqF!Pkhz+j<sp~C_BsLH!E{RN#bXm?UraO{mKrt3K
zxT{kSyB^d)AL{h!6R|(7NY3De*hM=wG*k+)$uqJWCQ^2pX~bppd-uY+VO>P^n&qk0
zz6T_^)jq?(0?Uq7+xhv!0~^#h%|`gR@^jh@l1a`hsgmYGC+QKZj@^bOAN{ZEQ(^fo
qJTKA|?aqmz^vl3>ss9J`Ls(Jvb=P&OP163`1HxjQ(Dhcnr2hbxcR1nz

literal 0
HcmV?d00001

diff --git a/test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-nested-and-complex-text-stroke-1-snap.png b/test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-nested-and-complex-text-stroke-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b3dc04c9a6eb9a5f629be9208b3ec2690ae36fd
GIT binary patch
literal 3115
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
N;AS?aZ;d@r{{l7S1=Iil

literal 0
HcmV?d00001

diff --git a/test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-nested-text-stroke-1-snap.png b/test/__image_snapshots__/webkit-text-stroke-test-tsx-test-webkit-text-stroke-test-tsx-webkit-text-stroke-should-work-nested-text-stroke-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a4fa0fc53303ef852730ac4440c417d7af3d0c2
GIT binary patch
literal 2424
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

literal 0
HcmV?d00001

diff --git a/test/webkit-text-stroke.test.tsx b/test/webkit-text-stroke.test.tsx
new file mode 100644
index 00000000..d0ec457a
--- /dev/null
+++ b/test/webkit-text-stroke.test.tsx
@@ -0,0 +1,83 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('webkit-text-stroke', () => {
+  let fonts
+  initFonts((f) => (fonts = f))
+
+  it('should work basic text stroke', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: 100,
+          height: 100,
+          fontSize: 30,
+          background: '#ebebeb',
+          color: '#ffffff',
+          WebkitTextStroke: '4px #000000',
+        }}
+      >
+        Hello, world
+      </div>,
+      { width: 100, height: 100, fonts }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should work nested text stroke', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          width: 100,
+          height: 100,
+          fontSize: 30,
+          background: '#ebebeb',
+          color: '#ffffff',
+          WebkitTextStroke: '4px #000000',
+        }}
+      >
+        Hello, <span style={{ WebkitTextStrokeColor: '#ff0000' }}>world</span>
+      </div>,
+      { width: 100, height: 100, fonts }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should work nested and complex text stroke', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          width: 100,
+          height: 100,
+          fontSize: 30,
+          background: '#ebebeb',
+          color: '#ffffff',
+          WebkitTextStroke: '4px #000000',
+        }}
+      >
+        Hello,
+        <span style={{ WebkitTextStrokeColor: '#f00' }}>w</span>
+        <span style={{ WebkitTextStrokeColor: '#ff0' }}>o</span>
+        <span style={{ WebkitTextStrokeColor: '#0f0' }}>r</span>
+        <span style={{ WebkitTextStrokeColor: '#0ff' }}>l</span>
+        <span style={{ WebkitTextStrokeColor: '#00f' }}>d</span>
+        <span
+          style={{
+            WebkitTextStrokeColor: '#f0f',
+            WebkitTextStrokeWidth: '6px',
+          }}
+        >
+          !
+        </span>
+      </div>,
+      { width: 100, height: 100, fonts }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+})