test(#9409): ellipse rendering edge case

.github/workflows/tests.yml

@@ -120,7 +120,7 @@ jobs:
         uses: ./.github/actions/build-fabric-cached
         # Playwright suggests against caching the browser install
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps chromium
+        run: npx playwright install --with-deps chromium firefox
       - name: Run Playwright tests
         run: xvfb-run npm run test:e2e
       - name: Upload Test Output

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- test(#9409): ellipse rendering edge case [#9443](https://github.com/fabricjs/fabric.js/pull/9443)
 - fix(#9172): dep export `Object`, `Text`, `Image` [#9433](https://github.com/fabricjs/fabric.js/pull/9433)
 
 ## [6.0.0-beta13]

e2e/tests/9409/common.ts

@@ -0,0 +1,25 @@
+/**
+ * Runs from both the browser and node
+ */
+
+import type { StaticCanvas } from 'fabric';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+export function render(canvas: StaticCanvas, fabric: typeof import('fabric')) {
+  canvas.setDimensions({ width: 640, height: 100 });
+
+  const ellipse = new fabric.Ellipse({
+    originX: 'center',
+    originY: 'center',
+    rx: 300,
+    ry: 30,
+    fill: 'green',
+    stroke: 'black',
+    strokeWidth: 40,
+    top: 20,
+  });
+
+  canvas.add(ellipse);
+  canvas.centerObject(ellipse);
+  canvas.renderAll();
+}

e2e/tests/9409/index.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import setup from '../../setup';
+import { CanvasUtil } from '../../utils/CanvasUtil';
+import { createNodeSnapshot } from '../../utils/createNodeSnapshot';
+import { render } from './common';
+
+setup();
+
+test('#9409 Ellipse stroke edge case', async ({ page }, config) => {
+  await test.step('browser', async () => {
+    expect(
+      await new CanvasUtil(page).screenshot(),
+      'browser snapshot'
+    ).toMatchSnapshot({
+      name: 'ellipse.png',
+      maxDiffPixelRatio: 0.05,
+    });
+  });
+
+  await test.step('node', async () => {
+    // we want the browser snapshot of a test to be committed and not the node snapshot
+    config.config.updateSnapshots = 'none';
+    expect(
+      await createNodeSnapshot(render),
+      'node snapshot should match browser snapshot'
+    ).toMatchSnapshot({ name: 'ellipse.png', maxDiffPixelRatio: 0.05 });
+  });
+});

e2e/tests/9409/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Runs in the **BROWSER**
+ */
+
+import * as fabric from 'fabric';
+import { beforeAll } from '../test';
+import { render } from './common';
+
+beforeAll((canvas) => render(canvas, fabric), { enableRetinaScaling: false });

package.json

@@ -79,7 +79,7 @@
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-typescript": "^7.22.5",
-    "@playwright/test": "^1.31.2",
+    "@playwright/test": "^1.39.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-terser": "^0.4.1",

playwright.config.ts

@@ -58,10 +58,11 @@ const config: PlaywrightTestConfig = {
   projects: [
     {
       name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-        browserName: 'chromium',
-      },
+      use: devices['Desktop Chrome'],
+    },
+    {
+      name: 'firefox',
+      use: devices['Desktop Firefox'],
     },
   ],