From cbfba616bf9b6740efb38312b01d16d59472cec5 Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Wed, 21 Aug 2024 23:56:08 +0200
Subject: [PATCH] test(Pixelate): add a test for the fixed filter (#10083)

---
 CHANGELOG.md                                  |   1 +
 .../pixelate-filter.png                       | Bin 0 -> 1086 bytes
 e2e/tests/visual-output/rendering/index.ts    |   1 +
 .../visual-output/rendering/renderingCases.ts |  28 ++++++++++++++++++
 4 files changed, 30 insertions(+)
 create mode 100644 e2e/tests/visual-output/rendering/index.spec.ts-snapshots/pixelate-filter.png

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62943af384c..dd7a75b6d4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(filter): pixelate filter has non square pixels in webgl (#10081)
 - feat(Canvas): Avoid styling the lower canvas with absolute positioning [#10077](https://github.com/fabricjs/fabric.js/pull/10077)
 - chore(TS): Add missing export type for Text events [#10076](https://github.com/fabricjs/fabric.js/pull/10076)
 - chore(CI): Move test actions to Node 20 [#10073](https://github.com/fabricjs/fabric.js/pull/10073)
diff --git a/e2e/tests/visual-output/rendering/index.spec.ts-snapshots/pixelate-filter.png b/e2e/tests/visual-output/rendering/index.spec.ts-snapshots/pixelate-filter.png
new file mode 100644
index 0000000000000000000000000000000000000000..e50891249ee8071dfef8a17a72bf699e4cccab11
GIT binary patch
literal 1086
zcmeAS@N?(olHy`uVBq!ia0y~yU_1n5-{D{ak~tU6e1Q~Wage(c!@6@aFBuq^e|Wk$
zhE&XXd)F}UwgZE!qh^BR>M8H)U8Fsg1A8ZGEfr0c&zW@1=l^CA8JnE#$G?9+ykYzH
zk8fYUwtD{S*?Y_HH|yTNw?F>z<5Q!3w)4Mlzx()o?T@qjkNuBjND)z(6xiV6#waAo
z>H*|TB$|^FHSOcZx8JsZ|84c$?)JA2pFYLhzMMI?*!<_&yu}QiJxnS_ToX=cI4F_I
z@!5X+$B&!ap01r|`|qA@-sNbY?~i}{*mL;%lzF+<=i^J(-6q3OghTEnZQA-bz5hM;
z-yP+>-*%Krljv`huu9pwea5uZxy8Bm`P1tcKee#4%l|l6{`TAayJUnY!sMCju7BLP
z_U*N8?Ui!(*L^*AUT*)-o7?#RyHOajr;Y5kZM}QzTY+V7{`Vhl6W)H$@$df^zq6O@
z$O49|QSAE1$<eph-&kf|{Hzij7X9^$+wZ?IBQO3TQFU^Q&f~{hw?R^u`TDK4bIO10
zoACDeT))?Iey2unCpw)XLKTs=m)*{-$;tk`(0AX=<lUWbZPpjB+dhL~n<x2^w(NB&
u*u>9b_s{(7x7{bW<#_(TLJFPvkE!P=Uynh}om^mnz~JfX=d#Wzp$Pz`Z<q7{

literal 0
HcmV?d00001

diff --git a/e2e/tests/visual-output/rendering/index.ts b/e2e/tests/visual-output/rendering/index.ts
index ee185149c17..700eb1c0153 100644
--- a/e2e/tests/visual-output/rendering/index.ts
+++ b/e2e/tests/visual-output/rendering/index.ts
@@ -12,6 +12,7 @@ beforeRenderTest(
       return {
         boundFunction: async () => {
           canvas.clear();
+          canvas.setZoom(1);
           canvas.setDimensions({
             width: renderTest.size[0],
             height: renderTest.size[1],
diff --git a/e2e/tests/visual-output/rendering/renderingCases.ts b/e2e/tests/visual-output/rendering/renderingCases.ts
index 20caf6b6f8c..137b0d281a9 100644
--- a/e2e/tests/visual-output/rendering/renderingCases.ts
+++ b/e2e/tests/visual-output/rendering/renderingCases.ts
@@ -228,6 +228,34 @@ export const renderTests: renderTestType[] = [
       canvas.setZoom(0.4);
     },
   },
+  {
+    size: [450, 220],
+    percentage: 0.01,
+    title: 'pixelate filter',
+    golden: 'pixelate-filter.png',
+    renderFunction: async function render(
+      canvas: Canvas,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+      fabric: typeof import('fabric'),
+    ) {
+      const imgSource = fabric.getFabricDocument().createElement('canvas');
+      imgSource.width = 450;
+      imgSource.height = 220;
+      const ctx = imgSource.getContext('2d');
+      const gradient = ctx.createLinearGradient(0, 0, 450, 220);
+      gradient.addColorStop(0, 'yellow');
+      gradient.addColorStop(0.5, 'black');
+      gradient.addColorStop(1, 'cyan');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, imgSource.width, imgSource.height);
+      const img = new fabric.FabricImage(imgSource);
+      canvas.add(img);
+      img.filters[0] = new fabric.filters.Pixelate({
+        blocksize: 20,
+      });
+      img.applyFilters();
+    },
+  },
 ];
 
 // function polygonWithStroke(canvas, callback) {