test: re-base golden snapshots on Chromium macOS arm64

tests/library/chromium/oopif.spec.ts

@@ -149,12 +149,13 @@ it('should respect route', async ({ page, browser, server }) => {
   expect(intercepted).toBe(true);
 });
 
-it('should take screenshot', async ({ page, browser, server }) => {
+it('should take screenshot', async ({ page, browser, server, isMac, browserName }) => {
   await page.setViewportSize({ width: 500, height: 500 });
   await page.goto(server.PREFIX + '/dynamic-oopif.html');
   expect(page.frames().length).toBe(2);
   expect(await countOOPIFs(browser)).toBe(1);
-  expect(await page.screenshot()).toMatchSnapshot('screenshot-oopif.png');
+  const screenshotPrefix = browserName === 'chromium' && isMac && 'arm64' ? '-macOS-arm64' : '';
+  expect(await page.screenshot()).toMatchSnapshot(`screenshot-oopif${screenshotPrefix}.png`);
 });
 
 it('should load oopif iframes with subresources and route', async function({ page, browser, server }) {

tests/page/elementhandle-screenshot.spec.ts

@@ -214,18 +214,20 @@ it.describe('element screenshot', () => {
     expect(screenshot).toMatchSnapshot('screenshot-element-bounding-box.png');
   });
 
-  it('should work for an element with fractional dimensions', async ({ page }) => {
+  it('should work for an element with fractional dimensions', async ({ page, browserName, isMac }) => {
     await page.setContent('<div style="width:48.51px;height:19.8px;border:1px solid black;"></div>');
     const elementHandle = await page.$('div');
     const screenshot = await elementHandle.screenshot();
-    expect(screenshot).toMatchSnapshot('screenshot-element-fractional.png');
+    const screenshotPrefix = browserName === 'chromium' && isMac && 'arm64' ? '-macOS-arm64' : '';
+    expect(screenshot).toMatchSnapshot(`screenshot-element-fractional${screenshotPrefix}.png`);
   });
 
-  it('should work for an element with an offset', async ({ page }) => {
+  it('should work for an element with an offset', async ({ page, browserName, isMac }) => {
     await page.setContent('<div style="position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;"></div>');
     const elementHandle = await page.$('div');
     const screenshot = await elementHandle.screenshot();
-    expect(screenshot).toMatchSnapshot('screenshot-element-fractional-offset.png');
+    const screenshotPrefix = browserName === 'chromium' && isMac && 'arm64' ? '-macOS-arm64' : '';
+    expect(screenshot).toMatchSnapshot(`screenshot-element-fractional-offset${screenshotPrefix}.png`);
   });
 
   it('should wait for element to stop moving', async ({ page, server }) => {

tests/page/page-screenshot.spec.ts

@@ -280,12 +280,13 @@ it.describe('page screenshot', () => {
     expect(screenshot).toMatchSnapshot('screenshot-clip-odd-size.png');
   });
 
-  it('should work for canvas', async ({ page, server, isElectron, isMac }) => {
+  it('should work for canvas', async ({ page, server, isElectron, isMac, browserName }) => {
     it.fixme(isElectron && isMac, 'Fails on the bots');
     await page.setViewportSize({ width: 500, height: 500 });
     await page.goto(server.PREFIX + '/screenshots/canvas.html');
     const screenshot = await page.screenshot();
-    expect(screenshot).toMatchSnapshot('screenshot-canvas.png');
+    const screenshotPrefix = browserName === 'chromium' && isMac && 'arm64' ? '-macOS-arm64' : '';
+    expect(screenshot).toMatchSnapshot(`screenshot-canvas${screenshotPrefix}.png`);
   });
 
   it('should capture canvas changes', async ({ page, isElectron, browserName, isMac, isWebView2 }) => {