fix(canvas snapshots): position mismatch in headless mode

[Skn0tt]

The code for canvas rendering currently assumes that the screenshot it crops from has the same aspect ratio as the frame it's displaying in. That assumption is wrong. The fix is record the canvas position at snapshot time, so that it's relative to the screnshot aspect ratio.
Closes #33562.

[dgozman]

The code for canvas rendering currently assumes that the screenshot it crops from has the same aspect ratio as the frame it's displaying in. That assumption is wrong. The fix is to only use the image and frame width when cropping, not the height.

Why width and not height? If anything, I'd assume that width might differ due to different scrollbars, but height would likely be correct. Do you have a real repro that shows the discrepancy in width and/or height?

To test this, I first tried comparing a screenshot of the snapshotted page with a screenshot of the rendered snapshot, but that didn't work because those screenshots had different dimensions. So I had to fall back to a visual regression test. Let me know if you have a better idea, or if it'd be better to not test it at all.

I'd skip the test in this case.

[Skn0tt]

Why width and not height? If anything, I'd assume that width might differ due to different scrollbars, but height would likely be correct. Do you have a real repro that shows the discrepancy in width and/or height?

I was wondering the same. In the repro the customer shared, the height differed between headed and headless, but the width did not. If we know that the width will also differ because of scrollbars, then maybe this whole approach doesn't work and we need to capture dimensions together with the snapshot itself.

[Skn0tt]

I've updated with the approach discussed yesterday, where we record the bounding rect at snapshot time and use that to identify the right img crop. Here's how it looks on the customer repro:

You can see that the text isn't perfectly on top of one another, so the alignment also isn't perfect - but workable, i'd say. And more likely to be correct than what we had before.

[dgozman]

Note that PR description is now wrong.

[dgozman]

Let's try/catch parsing just in case.

[dgozman]

Let's keep not drawing the checkerboard for fullyUncaptured canvases, to avoid any performance penalties.

[github-actions]

Test results for "tests 1"

1 flaky

⚠️ [playwright-test] › ui-mode-test-ct.spec.ts:117:5 › should run component tests after editing test and component @ubuntu-latest-node20-1

36885 passed, 650 skipped
✔️✔️✔️

Merge workflow run.