[Bug]: Tests fail for code using media query display-mode: fullscreen under new Chromium headless

[unikitty37]

Version

1.50.1

Steps to reproduce

Reproduction at https://github.com/unikitty37/chromium-headless-issue

2. Opt in to new Chromium headless, as detailed in Changes in Chromium headless in Playwright v1.49 #33566
3. Create a Svelte5 + SvelteKit site that uses a reactive media query to detect if the browser is fullscreen (const fullscreen = new MediaQuery('display-mode: fullscreen'))
4. Add an element to a page that only displays if the browser is not fullscreen ({#if !fullscreen.current}<element />{/if})
5. Create a test that goes to the page, calls page.evaluate(() => document.documentElement.requestFullscreen()) and then checks to see if the element from step 3 is visible

Expected behavior

Both tests should pass whether running under old Chromium headless or new Chromium headless.

Actual behavior

Both tests pass using the old Chromium headless, but the second test fails when running the new Chromium headless.

Running 4 tests using 2 workers

  ✓  1 …5:5 › Full screen control › when the browser is not full screen › is displayed (322ms)
  ✓  2 …5:5 › Full screen control › when the browser is not full screen › is displayed (356ms)
  ✓  3 …8:5 › Full screen control › when the browser is full screen › is not displayed (299ms)
  ✘  4 …18:5 › Full screen control › when the browser is full screen › is not displayed (5.3s)


  1) [new-chromium] › e2e/demo.test.js:18:5 › Full screen control › when the browser is full screen › is not displayed

    Error: Timed out 5000ms waiting for expect(locator).not.toBeVisible()

    Locator: getByRole('button', { name: 'Full Screen' })
    Expected: not visible
    Received: visible
    Call log:
      - expect.not.toBeVisible with timeout 5000ms
      - waiting for getByRole('button', { name: 'Full Screen' })
        9 × locator resolved to <button>Full Screen</button>
          - unexpected value "visible"


      17 |
      18 |     test('is not displayed', async ({ page }) => {
    > 19 |       await expect(page.getByRole('button', { name: 'Full Screen' })).not.toBeVisible()
         |                                                                           ^
      20 |     })
      21 |   })
      22 | })
        at /Users/user/Development/chromium-headless-issue/e2e/demo.test.js:19:75

  1 failed
    [new-chromium] › e2e/demo.test.js:18:5 › Full screen control › when the browser is full screen › is not displayed
  3 passed (6.5s)

Additional context

No response

Environment

System:
    OS: macOS 14.7.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 241.28 MB / 64.00 GB
  Binaries:
    Node: 23.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 9.12.1 - ~/bin/pnpm
  IDEs:
    VSCode: 1.76.1 - /Users/user/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.49.1 => 1.50.1

The behaviour also occurs when running in a devcontainer:

  System:
    OS: Linux 6.12 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (10) arm64 unknown
    Memory: 8.84 GB / 11.73 GB
    Container: Yes
  Binaries:
    Node: 22.13.0 - /usr/local/share/nvm/versions/node/v22.13.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - /usr/local/share/nvm/versions/node/v22.13.0/bin/npm
    pnpm: 9.15.4 - /usr/local/share/nvm/versions/node/v22.13.0/bin/pnpm
  IDEs:
    VSCode: 1.97.0 - /vscode/vscode-server/bin/linux-arm64/33fc5a94a3f99ebe7087e8fe79fbe1d37a251016/bin/remote-cli/code
  Languages:
    Bash: 5.2.15 - /usr/bin/bash
  npmPackages:
    @playwright/test: 1.50.1 => 1.50.1

[mxschmitt]

I tried to run your repro and get:

WebServer] src/routes/+page.svelte (3:11): "MediaQuery" is not exported by "node_modules/.pnpm/[email protected]/node_modules/svelte/src/reactivity/index-server.js", imported by "src/routes/+page.svelte".

do you mind looking into it?

[unikitty37]

@mxschmitt Thanks for taking a look — it seems to have picked a more recent version of Svelte when I built it. I've changed the package.json to use explicit version numbers, so hopefully we'll both be running the same versions of everything now…

[mxschmitt]

I can reproduce. Test:

// tests/page/page-emulate-media.spec.ts
import { expect as baseExpect, test, Page } from '@playwright/test'

const expect = baseExpect.extend({
  async toMatchMedia(page: Page, mediaQuery: string) {
    const pass = await page.evaluate(mediaQuery => matchMedia(mediaQuery).matches, mediaQuery).catch(() => false);
    return {
      message() {
        if (pass)
          return `Expected "${mediaQuery}" not to match, but it did`;
        else
          return `Expected "${mediaQuery}" to match, but it did not`;
      },
      pass,
      name: 'toMatchMedia',
    };
  },
});

test('Full screen control is displayed', async ({ page }) => {
  await page.goto('https://example.com')
  await expect(page).not.toMatchMedia('(display-mode: fullscreen)')
})

test('Full screen control is not displayed', async ({ page }) => {
  await page.goto('https://example.com')
  await page.evaluate(() => document.documentElement.requestFullscreen())
  await expect(page).toMatchMedia('(display-mode: fullscreen)')
})

Passes in Chromium Headless Shell but not with 'channel': 'chromium'.