From 8c35ade4809067eb79a57112d06390efa8b6ce6f Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Wed, 16 Oct 2024 16:58:23 +0200
Subject: [PATCH] test it

---
 packages/trace-viewer/src/sw/snapshotRenderer.ts | 7 ++++++-
 packages/trace-viewer/src/ui/snapshotTab.tsx     | 4 ++++
 tests/library/trace-viewer.spec.ts               | 3 +++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/trace-viewer/src/sw/snapshotRenderer.ts b/packages/trace-viewer/src/sw/snapshotRenderer.ts
index 8fbc6251db..058351ed62 100644
--- a/packages/trace-viewer/src/sw/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/sw/snapshotRenderer.ts
@@ -244,6 +244,8 @@ function snapshotNodes(snapshot: FrameSnapshot): NodeSnapshot[] {
 
 function snapshotScript(screenshotURL: string | undefined, ...targetIds: (string | undefined)[]) {
   function applyPlaywrightAttributes(unwrapPopoutUrl: (url: string) => string, screenshotURL: string | undefined, ...targetIds: (string | undefined)[]) {
+    const isUnderTest = new URLSearchParams(location.search).has('isUnderTest');
+
     const kPointerWarningTitle = 'Recorded click position in absolute coordinates did not' +
         ' match the center of the clicked element. This is likely due to a difference between' +
         ' the test runner and the trace viewer operating systems.';
@@ -301,7 +303,6 @@ function snapshotScript(screenshotURL: string | undefined, ...targetIds: (string
 
       const canvases = root.querySelectorAll('canvas');
       if (canvases.length > 0 && screenshotURL) {
-
         function drawCanvasWarning(canvas: HTMLCanvasElement, partial: boolean) {
           function createStripedPattern(lineWidth: number, spacing: number, slope: number, color: string) {
             const can = document.createElement('canvas');
@@ -354,6 +355,10 @@ function snapshotScript(screenshotURL: string | undefined, ...targetIds: (string
               drawCanvasWarning(canvas, xStart < 1 && yStart < 1);
 
             context.drawImage(img, xStart * img.width, yStart * img.height, (xEnd - xStart) * img.width, (yEnd - yStart) * 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))));
           }
         };
         img.onerror = () => {
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
index 82e4282c6f..f8bcc3a5a3 100644
--- a/packages/trace-viewer/src/ui/snapshotTab.tsx
+++ b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -369,10 +369,14 @@ export function collectSnapshots(action: ActionTraceEvent | undefined): Snapshot
   return { action: actionSnapshot, before: beforeSnapshot, after: afterSnapshot };
 }
 
+const isUnderTest = new URLSearchParams(window.location.search).has('isUnderTest');
+
 export function extendSnapshot(snapshot: Snapshot): SnapshotUrls {
   const params = new URLSearchParams();
   params.set('trace', context(snapshot.action).traceUrl);
   params.set('name', snapshot.snapshotName);
+  if (isUnderTest)
+    params.set('isUnderTest', 'true');
   if (snapshot.point) {
     params.set('pointX', String(snapshot.point.x));
     params.set('pointY', String(snapshot.point.y));
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 1a93953bba..5bc17da8f0 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -1445,6 +1445,9 @@ test('canvas clipping', async ({ runAndTrace, page, server }) => {
     await page.waitForTimeout(1000); // ensure we could take a screenshot
   });
 
+  const msg = await traceViewer.page.waitForEvent('console', { predicate: msg => msg.text().startsWith('canvas drawn:') });
+  expect(msg.text()).toEqual('canvas drawn: [0,91,12,111]');
+
   const snapshot = await traceViewer.snapshotFrame('page.goto');
   await expect(snapshot.locator('canvas')).toHaveAttribute('title', `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`);
 });