From 0a4c4f58cb54badefd0964459c0f7bdf6f83e53b Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 14 Nov 2024 09:12:54 +0100
Subject: [PATCH] use snapshot-time bounding rect instead

---
 .../trace/recorder/snapshotterInjected.ts     | 13 +++++++++++
 .../trace-viewer/src/sw/snapshotRenderer.ts   | 23 ++++++++++---------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
index 47385c8323..0400c6deaf 100644
--- a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
+++ b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
@@ -47,6 +47,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string, removeNoScript:
   const kTargetAttribute = '__playwright_target__';
   const kCustomElementsAttribute = '__playwright_custom_elements__';
   const kCurrentSrcAttribute = '__playwright_current_src__';
+  const kBoundingRectAttribute = '__playwright_bounding_rect__';
 
   // Symbols for our own info on Nodes/StyleSheets.
   const kSnapshotFrameId = Symbol('__playwright_snapshot_frameid_');
@@ -436,6 +437,18 @@ export function frameSnapshotStreamer(snapshotStreamer: string, removeNoScript:
             expectValue(value);
             attrs[kSelectedAttribute] = value;
           }
+          if (nodeName === 'CANVAS') {
+            const boundingRect = (element as HTMLCanvasElement).getBoundingClientRect();
+            const value = JSON.stringify({
+              left: boundingRect.left / window.innerWidth,
+              top: boundingRect.top / window.innerHeight,
+              right: boundingRect.right / window.innerWidth,
+              bottom: boundingRect.bottom / window.innerHeight
+            });
+            expectValue(kBoundingRectAttribute);
+            expectValue(value);
+            attrs[kBoundingRectAttribute] = value;
+          }
           if (element.scrollTop) {
             expectValue(kScrollTopAttribute);
             expectValue(element.scrollTop);
diff --git a/packages/trace-viewer/src/sw/snapshotRenderer.ts b/packages/trace-viewer/src/sw/snapshotRenderer.ts
index b3e98973b4..ecf9593ab5 100644
--- a/packages/trace-viewer/src/sw/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/sw/snapshotRenderer.ts
@@ -427,25 +427,26 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
           for (const canvas of canvasElements) {
             const context = canvas.getContext('2d')!;
 
-            const boundingRect = canvas.getBoundingClientRect();
-            const xStart = boundingRect.left / window.innerWidth;
-            const yStart = boundingRect.top / window.innerWidth;
-            const xEnd = boundingRect.right / window.innerWidth;
-            const yEnd = boundingRect.bottom / window.innerWidth;
+            drawCheckerboard(context, canvas);
 
-            const partiallyUncaptured = boundingRect.right > window.innerWidth || boundingRect.bottom > window.innerHeight;
-            const fullyUncaptured = boundingRect.left > window.innerWidth || boundingRect.top > window.innerHeight;
+            const boundingRectAttribute = canvas.getAttribute('__playwright_bounding_rect__');
+            canvas.removeAttribute('__playwright_bounding_rect__');
+            if (!boundingRectAttribute)
+              continue;
+
+            const boundingRect = JSON.parse(boundingRectAttribute) as { left: number, top: number, right: number, bottom: number };
+
+            const partiallyUncaptured = boundingRect.right > 1 || boundingRect.bottom > 1;
+            const fullyUncaptured = boundingRect.left > 1 || boundingRect.top > 1;
             if (fullyUncaptured) {
               canvas.title = `Playwright couldn't capture canvas contents because it's located outside the viewport.`;
               continue;
             }
 
-            drawCheckerboard(context, canvas);
-
-            context.drawImage(img, xStart * img.width, yStart * img.width, (xEnd - xStart) * img.width, (yEnd - yStart) * img.width, 0, 0, canvas.width, canvas.height);
+            context.drawImage(img, boundingRect.left * img.width, boundingRect.top * img.height, (boundingRect.right - boundingRect.left) * img.width, (boundingRect.bottom - boundingRect.top) * img.height, 0, 0, canvas.width, canvas.height);
             if (isUnderTest)
               // eslint-disable-next-line no-console
-              console.log(`canvas drawn:`, JSON.stringify([xStart, yStart, xEnd, yEnd].map(v => Math.floor(v * 100))));
+              console.log(`canvas drawn:`, JSON.stringify([boundingRect.left, boundingRect.top, (boundingRect.right - boundingRect.left), (boundingRect.bottom - boundingRect.top)].map(v => Math.floor(v * 100))));
 
             if (partiallyUncaptured)
               canvas.title = `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`;