From 0896c5f2619e2b55624ca618886814b42443f119 Mon Sep 17 00:00:00 2001 From: TreehouseNorris Date: Wed, 7 Dec 2022 15:59:21 -0500 Subject: [PATCH 1/4] use dynamic repeat type for bkgImg rendering --- src/render/canvas/canvas-renderer.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 6efb648bf..7449c4730 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -584,6 +584,7 @@ export class CanvasRenderer extends Renderer { async renderBackgroundImage(container: ElementContainer): Promise { let index = container.styles.backgroundImage.length - 1; + const repeatTypes = ['repeat', 'no-repeat', 'repeat-x', 'repeat-y']; for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) { if (backgroundImage.type === CSSImageType.URL) { let image; @@ -602,7 +603,7 @@ export class CanvasRenderer extends Renderer { ]); const pattern = this.ctx.createPattern( this.resizeImage(image, width, height), - 'repeat' + repeatTypes[+container.styles.backgroundRepeat] ) as CanvasPattern; this.renderRepeat(path, pattern, x, y); } @@ -623,7 +624,7 @@ export class CanvasRenderer extends Renderer { ctx.fillStyle = gradient; ctx.fillRect(0, 0, width, height); if (width > 0 && height > 0) { - const pattern = this.ctx.createPattern(canvas, 'repeat') as CanvasPattern; + const pattern = this.ctx.createPattern(canvas, repeatTypes[+container.styles.backgroundRepeat]) as CanvasPattern; this.renderRepeat(path, pattern, x, y); } } else if (isRadialGradient(backgroundImage)) { From 2f567d4970963f046a33072ca192574bda51f810 Mon Sep 17 00:00:00 2001 From: TreehouseNorris Date: Thu, 8 Dec 2022 11:55:24 -0500 Subject: [PATCH 2/4] format --- src/render/canvas/canvas-renderer.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 7449c4730..60bc3ab01 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -624,7 +624,10 @@ export class CanvasRenderer extends Renderer { ctx.fillStyle = gradient; ctx.fillRect(0, 0, width, height); if (width > 0 && height > 0) { - const pattern = this.ctx.createPattern(canvas, repeatTypes[+container.styles.backgroundRepeat]) as CanvasPattern; + const pattern = this.ctx.createPattern( + canvas, + repeatTypes[+container.styles.backgroundRepeat] + ) as CanvasPattern; this.renderRepeat(path, pattern, x, y); } } else if (isRadialGradient(backgroundImage)) { From 0a671a48a221716b007e99c820ee8b403c232a61 Mon Sep 17 00:00:00 2001 From: TreehouseNorris Date: Thu, 8 Dec 2022 11:55:38 -0500 Subject: [PATCH 3/4] add test case --- tests/assets/edges.png | Bin 0 -> 2998 bytes tests/reftests/background/repeat.html | 28 ++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 tests/assets/edges.png diff --git a/tests/assets/edges.png b/tests/assets/edges.png new file mode 100644 index 0000000000000000000000000000000000000000..dfe7584451b8882cb079a866cfef78eb44ae9d77 GIT binary patch literal 2998 zcmd5;dpwls9)IV;jFD&yA&g5M*%%GWF%5>5$|9jKZZj*!ZOpijk-W6jZVnZ~N@z^E zr9wo;Ws`DgN#s7H++zsq8t0w%cFrH?|MR?`&-4DC-{t$eJ8qkDjGysQv1t1^_20g%KUjX@q1^@^N8i-uj z-_l(8pHdhp7x58>fo>q7v$Fr0QgCi~W`n?1k0W*3s5cHO64ESYq&bZ-Sk< z#UJL-%1G5GG?Yoe;UXd;v?Fx28NoE%QA0yRoDLp`$7?|vS|O2vp;VSuV2Il9Ab;YR zdxdxg`!Yj)8G%?KF7d=@%}PsxgL$`>Slm7&-TMC;$)xPnnxK zuwZk;F;@=I6kjY(W)AZ^hTN7o>Db3cSyH}!+<4V7WmOCAIwz0(0IfB5knR~QI$Ow% z*+)HYTM*O7)aYBbD(SOO|j5iTGgh)3k1R`BSo2fX<~$^z!I*6HdiIUgC7GW`@{fcC<~gN6cuy z$17_=_2k_P$A=je)%J4I8r;(&nimRbANx#nElk6tNTc%b4f#RdKtO_VPteh-iDHZ5 zJ%`usn!lsv->KKLP-u8!^!Q5eO}hQBZG9>n3ErF5sT*D1#qEOHja6(olmW(8|HtTSk;q6iv!?t(moqsu`XQLdTYu3bfJxq z`kmss_+;gbWuHuVxb<0fZ{4tivurCJVpdJX2RruhBTKug!p+!;XOi^8h{sewQX6K! zrwx6uaxSj|u0M=8B6D@P+I7CPLN>V0I3`>3!Gn6iqciMF3R#-=+7DW11FuB5;dE!m z`&gNW;b_*8+?Ae9R%SJ7DoEi>C{l{4P67yVlND&}s5=ORj)h!S}|~q@cuB;f|lF%Z-g@E{vUJ*XY)-&C1gD!z^i}6e;%`kr_tZE(u9SYuInn zsrno{2Zf7NqC9tkT~m`>=`F1x4M$@acErqKKDfvwO_RHi*Ar^n$2OxGr!x5Td0(7bCy zGJ=A&?_-+DT09$4Q=3(iQ*!Pt{V9dtn~K3g1;2{? zlpZqClBC0Wy+7s6(z-#jai4)_RCKaL%-n8{=IOR=16k|srlzJrTmYZ=aEd9j2Z|y_ zDX0m7QPveK*Cf&4u%baNf8F?a(1HQgI{XzQX07euk^Jk}ys;s5Ob2Uh@3?i@e*Z$`H#*^_mjc-$SA}$NqElW?+ds{6%AW-AI?3^Cf8Kuv9t&9zHjnI?mNlhbq~b zNGgZ*wfjGkgchS|BsOqP0Art(!$4;Py@i8Icw8A^QZ7hd!v;{OFc@-cPl1Ex`tYVj z;C0CmWM0>CU4zg3ch4?QzL(EOQMR;oIuOn0toD!^bYsQK%d-$}>zsX0weGbi&dhvX z;&?=E-80}n{4H#~$t6Px43g|Tm*JjEdu0;@SzuDz#EtONrG8Uk_+izNpqkIwg-fST z0(H!lC@^T@wRp+KqKB{?4aTp#a3hyC?#JY0uWJ~QMzT^qsez;-aA-3{5D~cM#2A_$ z{7Qa_y9`+I5&5VLOuHyj%Et@FTa%mEDBBY4dhuS*m5fke2Q55L|K+>Y?+fuQ|Tpz!&QN?TE+%nI@i zE_Uy+9!Z-z{F1N}C^&h#WuqscthTF>gUUcsp&sH7=8juv%*BN1XwNMK+I{EyIg+bQu?V$30zC)vZP%)FU+HMNodGVx7Ap~;#w4n?Z?nB8{&s=c)F@9$7`QqO0@amw4 zZQDtUW`aSMSc#N!gJaL qZ&^s{J$fAa?g=k}|2@_2Tf+st*ZGH4_+H_UH*o5>jd`gVCGOwa#Qfm^ literal 0 HcmV?d00001 diff --git a/tests/reftests/background/repeat.html b/tests/reftests/background/repeat.html index ed3ae6a25..d60fa90eb 100644 --- a/tests/reftests/background/repeat.html +++ b/tests/reftests/background/repeat.html @@ -35,6 +35,26 @@ display:block; } + .shared-area { + text-align: center; + border: solid .5em #0d47a1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + background-color: white; + } + + .edges { + width: 80%; + height: 50%; + background-size: contain; + background-position: center center; + background-image: url('../../assets/edges.png'); + background-color: white; + background-repeat: no-repeat; + } + @@ -45,12 +65,20 @@
+
+

+

Edges

+
+
+

+

Edges

+
From 13f75e8fb0be3d36879f4d92095703e7646b4633 Mon Sep 17 00:00:00 2001 From: TreehouseNorris Date: Thu, 8 Dec 2022 12:08:47 -0500 Subject: [PATCH 4/4] pass linear-gradient2 test for undefined case --- src/render/canvas/canvas-renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index 60bc3ab01..c49b6d6f2 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -603,7 +603,7 @@ export class CanvasRenderer extends Renderer { ]); const pattern = this.ctx.createPattern( this.resizeImage(image, width, height), - repeatTypes[+container.styles.backgroundRepeat] + repeatTypes[+container.styles.backgroundRepeat || 0] ) as CanvasPattern; this.renderRepeat(path, pattern, x, y); } @@ -626,7 +626,7 @@ export class CanvasRenderer extends Renderer { if (width > 0 && height > 0) { const pattern = this.ctx.createPattern( canvas, - repeatTypes[+container.styles.backgroundRepeat] + repeatTypes[+container.styles.backgroundRepeat || 0] ) as CanvasPattern; this.renderRepeat(path, pattern, x, y); }