test(Pixelate): add a test for the fixed filter (#10083)

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)

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],

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) {