[Bug]: Trace screenshots of canvas elements look incorrect

[craigglennie]

Version

1.49.0-alpha-2024-11-12

Steps to reproduce

Filing this at the request of @Skn0tt per our conversation in feat(trace viewer): show Screenshot instead of Snapshot

Clone the repo at https://github.com/craigglennie/playwright-canvas-bug-repro and follow the instructions to run the test.

Expected behavior

Trace screenshots should look like the webpage

Expected the following

Actual behavior

The trace image is stretched and kinda smeared. Also the <canvas> border appears doubled, there's a blue background where none is specified, and theres a horizontal line below the canvas that isn't in the HTML.

Get the following

Additional context

No response

Environment

System:
    OS: macOS 15.0.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 59.52 MB / 36.00 GB
  Binaries:
    Node: 20.18.0 - ~/.local/state/fnm_multishells/86698_1724810507933/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.local/state/fnm_multishells/86698_1724810507933/bin/npm
    pnpm: 8.15.9 - /opt/homebrew/opt/pnpm@8/bin/pnpm
  IDEs:
    VSCode: 1.95.1 - /opt/homebrew/bin/code
  Languages:
    Bash: 5.2.32 - /opt/homebrew/bin/bash
  npmPackages:
    @playwright/test: ^1.49.0-alpha-2024-11-12 => 1.49.0-alpha-2024-11-12

[pavelfeldman]

Apart from the position mismatch, I don't think the approach is compatible with the canvas in the background, hence I recommend reverting in 1.49

[Skn0tt]

Thanks for the repro. This is interesting, it appears to only happen when snapshotting in headless mode. I'm looking into it.

[Skn0tt]

I found a fix for the stretching in #33575. The blue background and horizontal line are highlighters that appear because the expect.toHaveTitle step is selected, that's expected.
Let's discuss tonight what we think about the canvas in background case.