From 328f3e265efe9c431ebae1ed3d7fd47dcd547b29 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Tue, 4 Jan 2022 17:41:04 -0800 Subject: [PATCH] test: add a failing canvas screenshot test (#11180) --- tests/page/page-screenshot.spec.ts | 28 ++++++++++++++++++ .../screenshot-canvas-text-chromium.png | Bin 0 -> 7439 bytes .../screenshot-canvas-text-firefox.png | Bin 0 -> 7057 bytes .../screenshot-canvas-text-webkit.png | Bin 0 -> 20896 bytes 4 files changed, 28 insertions(+) create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-chromium.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-firefox.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-webkit.png diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts index 97c635dff9..06e110f64e 100644 --- a/tests/page/page-screenshot.spec.ts +++ b/tests/page/page-screenshot.spec.ts @@ -321,4 +321,32 @@ it.describe('page screenshot', () => { screenshotSeveralTimes() ]); }); + + it('should work for text on canvas', async ({ page, headless, browserName, platform }) => { + it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/11177' }); + it.skip(platform !== 'darwin', 'Only test mac for font consistency'); + it.fixme(browserName === 'chromium' && !headless, 'Text is misaligned in headed vs headless Chromium'); + + await page.setContent(` + + `); + await page.evaluate('draw()'); + const screenshot = await page.screenshot(); + expect(screenshot).toMatchSnapshot('screenshot-canvas-text.png', { threshold: 0 }); + }); }); diff --git a/tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-chromium.png new file mode 100644 index 0000000000000000000000000000000000000000..0971000b5f1e1d4467b7052a8064798018e7f9ed GIT binary patch literal 7439 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 D#rB(t literal 0 HcmV?d00001 diff --git a/tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-text-webkit.png new file mode 100644 index 0000000000000000000000000000000000000000..4ec99b0555652f6dc78efa7f5ca7f376275b112f GIT binary patch literal 20896 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