[Bug]: Firefox: `page.emulateMedia({ contrast })` updates `matchMedia()` but never restyles the page

Aperta
  • Qualcosa non va?
#43,916 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
44/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
playwright, typescript
Ambito
backend-api-design, testing-qa

Direzione di ricerca

Start with the Firefox patch in browser_patches/firefox/patches/bootstrap.diff, especially the DidSet for PrefersContrastOverride, and compare it with Firefox’s PrefersReducedMotionOverride notification behavior. The reproduction is a single Playwright test file linked in the issue; run it to confirm that matchMedia() changes while computed styles do not. Done means Firefox restyles the page after emulateMedia({ contrast: 'more' }), with the reproduction passing.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

needs-triage
Version

1.64.1, Firefox 157.0 (build 1555). Also 1.63.0; the patch in question is unchanged on main as of 9c5ba13d8.

Steps to reproduce
  1. Clone https://github.com/k35o/playwright-firefox-contrast-repro
  2. npm install && npx playwright install chromium firefox webkit
  3. npx playwright test

The whole reproduction is this one test file:

import { test, expect } from '@playwright/test';

const html = `
  <style>
    p { color: rgb(0, 0, 0); }
    @media (prefers-contrast: more) { p { color: rgb(255, 0, 0); } }
    @media (prefers-reduced-motion: reduce) { p { background-color: rgb(0, 0, 255); } }
  </style>
  <p>text</p>
`;

test('emulateMedia({ contrast }) restyles the page', async ({ page }) => {
  await page.setContent(html);
  await expect(page.locator('p')).toHaveCSS('color', 'rgb(0, 0, 0)');

  await page.emulateMedia({ contrast: 'more' });

  // The media query itself reports the new value...
  expect(await page.evaluate(() => matchMedia('(prefers-contrast: more)').matches)).toBe(true);
  // ...but in Firefox the computed style never follows.
  await expect(page.locator('p')).toHaveCSS('color', 'rgb(255, 0, 0)');
});

test('emulateMedia({ reducedMotion }) restyles the page (control)', async ({ page }) => {
  await page.setContent(html);
  await expect(page.locator('p')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');

  await page.emulateMedia({ reducedMotion: 'reduce' });

  expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(true);
  await expect(page.locator('p')).toHaveCSS('background-color', 'rgb(0, 0, 255)');
});
Expected behavior

The @media (prefers-contrast: more) rule applies as soon as emulateMedia({ contrast: 'more' }) resolves, as it does in Chromium and WebKit, and as reducedMotion does in Firefox.

Actual behavior

In Firefox (157.0, r1555), the first test fails; the control passes:

Error: expect(locator).toHaveCSS(expected) failed

Locator:  locator('p')
Expected: "rgb(255, 0, 0)"
Received: "rgb(0, 0, 0)"
Timeout:  5000ms

matchMedia('(prefers-contrast: more)').matches is already true, but the computed style keeps the old value however long you wait. The new value only takes effect when something else makes Firefox re-evaluate media features, e.g. a later emulateMedia({ media: 'print' }). Because of that, the outcome of a test can depend on what an earlier test or hook left pending, which is how we found it: a print-styles test passed or failed in Firefox depending on whether the previous test's afterEach had just switched media back.

Setting the value on the context instead (use: { contrast: 'more' } or browser.newContext({ contrast: 'more' })) works, since the page is styled after the override is in place.

Additional context

I think the cause is in browser_patches/firefox/patches/bootstrap.diff. The DidSet for the added PrefersContrastOverride field only calls PresContextAffectingFieldChanged():

https://github.com/microsoft/playwright/blob/9c5ba13d81824c0b95835f81ce950487341ff627/browser_patches/firefox/patches/bootstrap.diff#L97-L104

PresContextAffectingFieldChanged() runs nsPresContext::RecomputeBrowsingContextDependentData(), which re-reads zoom, color scheme, forced colors and medium, but not contrast, so nothing calls MediaFeatureValuesChanged() and the style is never invalidated. matchMedia() evaluates the query on demand, which is why it already reports the new value.

https://github.com/mozilla-firefox/firefox/blob/9a2dc53c369c7ae5172018b35988e1d2ffeff402/layout/base/nsPresContext.cpp#L923-L985

Upstream's own PrefersReducedMotionOverride, the closest analogue, notifies the pres contexts itself:

https://github.com/mozilla-firefox/firefox/blob/9a2dc53c369c7ae5172018b35988e1d2ffeff402/docshell/base/BrowsingContext.cpp#L3553-L3567

Doing the same for contrast should fix it. I haven't built the patched Firefox to verify this:

void BrowsingContext::DidSet(FieldIndex<IDX_PrefersContrastOverride>,
                             dom::PrefersContrastOverride aOldValue) {
  MOZ_ASSERT(IsTop());
  if (PrefersContrastOverride() == aOldValue) {
    return;
  }
  WalkPresContexts([&](nsPresContext* aPc) {
    aPc->MediaFeatureValuesChanged(
        {MediaFeatureChangeReason::PreferenceChange},
        MediaFeatureChangePropagation::JustThisDocument);
  });
}
Environment
System:
  OS: macOS 27.2
  CPU: (10) arm64 Apple M4
Binaries:
  Node: 26.12.1
  npm: 11.20.0
npmPackages:
  @playwright/test: 1.64.1 => 1.64.1
Lingua principale
TypeScript
Stelle
99.1k
Fork
6.8k
Merge medio
17h 6m
PR unite (30g)
306

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/playwright

Tutte le issue di microsoft/playwright

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.