fix(trace-viewer): store snapshot style text in an attribute

[Yury Semikhatsky (yury-s)]

Summary

• A literal </style> in recorded stylesheet text closed the <style> element early, so the trailing content was reparsed as markup and the snapshot rendered incorrectly.
• Store stylesheet text in a __playwright_style_content__ attribute and restore it as textContent in the snapshot script, where it is never HTML-parsed.
• This makes escapeURLsInStyleSheet unnecessary, so url() values now round-trip verbatim instead of being percent-encoded.

[github-actions]

🔴 The one hard failure is this PR's own new test, failing on Firefox

Hi, I'm the Playwright bot and I took a first look at the CI failures.

trace-viewer.spec.ts:887 › should not let style text break out of the style element — the test this PR adds — fails on ubuntu-22.04 (firefox - Node.js 20), and it failed on every retry, so it's deterministic, not a flake. It's brand new here, so it can't be pre-existing. Everything else is green; the single flaky entry is unrelated network noise that passed on retry.

Details

Overall: one real, PR-caused failure on Firefox plus one unrelated pre-existing flake. Every other job (all three engines across ubuntu/windows/macos, test-runner shards, installation) is green.

Caused by this PR

• [firefox-library] › tests/library/trace-viewer.spec.ts:887 › should not let style text break out of the style element — the test the PR introduces. It times out at await traceViewer.snapshotFrame('Click') (locator.click: Test timeout … exceeded) and failed on all 4 attempts, i.e. deterministic on Firefox, not flaky. Since the PR adds this test, it can't be a pre-existing flake by definition. The change reworks how <style> text is stored/restored in snapshots (moving it into a __playwright_style_content__ attribute and reassigning element.textContent in snapshotScript); the new assertion doesn't hold under Firefox's trace-viewer snapshot rendering, so the frame never reaches the expected state and the snapshot click hangs. This needs a look before merge — either the restore path behaves differently on Firefox, or the test needs a browser gate.

Pre-existing flake / infra

• [firefox-page] › tests/page/page-event-request.spec.ts:181 › should return response body when Cross-Origin-Opener-Policy is set — flaky in this same report: page.goto timed out once and it passed on retry (counted as flaky, not failed). It's a network/COOP test that this snapshot-rendering change doesn't touch, so it's unrelated noise rather than a regression.

_{Triaged by the Playwright bot - agent run}

[github-actions]

Test results for "tests 1"

4 flaky

⚠️ [chromium-library] › library/beforeunload.spec.ts:130 › should support dismissing the dialog multiple times `@frozen-time-library-chromium-linux`
⚠️ [chromium-page] › page/page-screenshot.spec.ts:723 › page screenshot animations › should stop animations that happen right before screenshot `@realtime-time-library-chromium-linux`
⚠️ [chromium-library] › library/video.spec.ts:699 › screencast › should capture full viewport on hidpi `@chromium-ubuntu-22.04-node22`
⚠️ [firefox-page] › page/page-emulate-media.spec.ts:144 › should keep reduced motion and color emulation after reload `@firefox-ubuntu-22.04-node20`

51327 passed, 1240 skipped

---

Merge workflow run.

[github-actions]

Test results for "MCP"

1 failed
❌ [firefox] › mcp/cli-core.spec.ts:248 › click in iframe @mcp-windows-latest-firefox

8258 passed, 1361 skipped

---

Merge workflow run.

[github-actions]

🟢 The one hard failure is a pre-existing Firefox flake — this PR is clear

Hi, I'm the Playwright bot and I took a look at the CI failures.

The latest reports have a single real failure: [firefox] › mcp/cli-core.spec.ts:248 › click in iframe on mcp-windows-latest-firefox (run 33121958562). That test is a known Firefox-on-Windows flake, unrelated to this PR — which only touches trace-viewer snapshot rendering. Your own new trace-viewer test, which failed on Firefox earlier, now passes.

Details

This PR changes packages/isomorphic/trace/snapshotRenderer.ts (how <style> text is stored/restored in snapshots) and adds one trace-viewer test. Nothing here exercises the MCP CLI's click-in-iframe path.

Pre-existing flake / infra

• [firefox] › mcp/cli-core.spec.ts:248 › click in iframe (@mcp-windows-latest-firefox) — pre-existing flake. Across the test-results DB it failed 5 of 702 runs (~0.7%) on this bot, always with the same signature expect(received).toBeTruthy() / Received: undefined. The other failures are on SHAs this PR can't be responsible for — main-branch pushes (fcc765f, 66c5cc9, c623920) and an unrelated PR (fix(recorder): don't record duplicate goto for repeated navigation signal #42027). Firefox-Windows only; the same test is green on every other browser/OS. Recent run history on this bot:

  …🟩🟩🟩🟩🟩🟩🟩🟩🟩🟥

Resolved (was caused by this PR, now green)

• [firefox-library] › library/trace-viewer.spec.ts:887 › should not let style text break out of the style element — the test this PR adds. It timed out on Firefox in earlier commits (runs 32907115199, 33109193688, 33112826430) but passes on the latest commit (run 33118969599), and the newest tests 1 report is clean. No action needed.

_{Triaged by the Playwright bot - agent run}