[Bug]: emulated media 'reducedMotion' isn't preserved after page load

[chrisguttandin]

Version

1.44.1

Steps to reproduce

The following test will fail in Firefox:

test('should preserve emulated media', async ({ page }) => {
    await page.emulateMedia({ reducedMotion: 'reduce' });

   // This works in all browsers.
    expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toEqual(true);

    await page.goto('https://angular.dev');

    // This only works in Chrome and Safari.
    expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toEqual(true);
});

Expected behavior

It should preserve the emulated media after loading a new page.

Actual behavior

It seems to reset the emulated media when loading a new page.

Additional context

For some strange reason this only seems to affect websites build with Angular. At least I could only reproduce it on websites build with Angular so far. The following test works as expected across all three browsers.

test('should preserve emulated media', async ({ page }) => {
    await page.emulateMedia({ reducedMotion: 'reduce' });

    expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toEqual(true);

    await page.goto('https://playwright.dev');

    expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toEqual(true);
});

Environment

System:
    OS: macOS 14.5
  Binaries:
    Node: 20.14.0
  npmPackages:
    @playwright/test: 1.44.1