From d9d5b56fba759392f9325bc834f359234df2d34b Mon Sep 17 00:00:00 2001
From: pankaj443 <pankajofficial443@gmail.com>
Date: Tue, 2 Jun 2026 14:33:20 +0530
Subject: [PATCH 1/4] test: re-add comprehensive.html regression fixture

Restore the comprehensive regression test page that was removed in
PR #2239. The fixture exercises fonts, pseudo-class CSS rules, and
other web features used by the regression suite.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/regression/pages/comprehensive.html | 96 ++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 test/regression/pages/comprehensive.html
diff --git a/test/regression/pages/comprehensive.html b/test/regression/pages/comprehensive.html
new file mode 100644
index 000000000..66f495e7f
--- /dev/null
+++ b/test/regression/pages/comprehensive.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Comprehensive Regression Test</title>
+  <link rel="stylesheet" href="/assets/css/base.css">
+  <style>
+    @font-face {
+      font-family: 'TestFont';
+      src: url('/assets/fonts/test-font.woff2') format('woff2');
+      font-display: block;
+    }
+    .font-test { font-family: 'TestFont', sans-serif; }
+
+    /* Pseudo-class CSS rules — Percy captures these rules in the stylesheet */
+    .hover-box:hover { background-color: #e0e7ff; border-color: #4f46e5; }
+    .focus-input:focus { outline: 3px solid #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.3); }
+  </style>
+</head>
+<body>
+  <h1>Comprehensive Smoke Test</h1>
+  <p>This page combines all major asset discovery features into a single snapshot.</p>
+
+  <!-- Basic HTML + CSS -->
+  <div class="section">
+    <div class="section-title">Basic HTML + CSS</div>
+    <p>Static text content with <strong>bold</strong> and <em>italic</em> formatting.</p>
+  </div>
+
+  <!-- Image -->
+  <div class="section">
+    <div class="section-title">Image</div>
+    <img src="/assets/images/logo.png" alt="Test logo" width="100" height="100">
+  </div>
+
+  <!-- Web Font -->
+  <div class="section">
+    <div class="section-title">Web Font</div>
+    <p class="font-test">This text uses a custom web font loaded via @font-face.</p>
+  </div>
+
+  <!-- Shadow DOM Component -->
+  <div class="section">
+    <div class="section-title">Shadow DOM Component</div>
+    <percy-test-card title="Shadow DOM Card">
+      <p>This content is slotted into a shadow DOM component.</p>
+    </percy-test-card>
+  </div>
+
+  <!-- Canvas -->
+  <div class="section">
+    <div class="section-title">Canvas</div>
+    <canvas id="test-canvas" width="200" height="100"></canvas>
+  </div>
+
+  <!-- Video with poster -->
+  <div class="section">
+    <div class="section-title">Video Poster</div>
+    <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none">
+      <source src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDE=" type="video/mp4">
+    </video>
+  </div>
+
+  <!-- Inline Base64 Image -->
+  <div class="section">
+    <div class="section-title">Base64 Inline Image</div>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVQYV2P8z8BQz0AEYBxVOHIUAgBGWAkFdYFJrgAAAABJRU5ErkJggg==" alt="Inline base64" width="10" height="10">
+  </div>
+
+  <!-- Pseudo-class targets -->
+  <div class="section">
+    <div class="section-title">Pseudo-class CSS</div>
+    <button class="hover-box" style="padding:8px 16px; border:2px solid #ccc; border-radius:4px; cursor:pointer;">Hover Target</button>
+    <input class="focus-input" type="text" value="Focus Target" style="padding:8px; border:2px solid #ccc; border-radius:4px; margin-left:8px;">
+  </div>
+
+  <!-- SVG -->
+  <div class="section">
+    <div class="section-title">SVG Image</div>
+    <img src="/assets/images/icon.svg" alt="SVG icon" width="24" height="24">
+  </div>
+
+  <script src="/assets/js/custom-element.js"></script>
+  <script>
+    // Draw on canvas synchronously
+    const canvas = document.getElementById('test-canvas');
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#3366cc';
+    ctx.fillRect(10, 10, 80, 80);
+    ctx.fillStyle = '#ffffff';
+    ctx.font = '14px sans-serif';
+    ctx.fillText('Canvas', 25, 55);
+  </script>
+</body>
+</html>

From e2f3866f5d9e1abbbae00e3b2fedfbad1e41964f Mon Sep 17 00:00:00 2001
From: pankaj443 <pankajofficial443@gmail.com>
Date: Tue, 2 Jun 2026 14:50:12 +0530
Subject: [PATCH 2/4] test: comment out video element to verify issue

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/regression/pages/comprehensive.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/regression/pages/comprehensive.html b/test/regression/pages/comprehensive.html
index 66f495e7f..9c38c949f 100644
--- a/test/regression/pages/comprehensive.html
+++ b/test/regression/pages/comprehensive.html
@@ -57,9 +57,9 @@ <h1>Comprehensive Smoke Test</h1>
   <!-- Video with poster -->
   <div class="section">
     <div class="section-title">Video Poster</div>
-    <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none">
+    <!-- <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none">
       <source src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDE=" type="video/mp4">
-    </video>
+    </video> -->
   </div>
 
   <!-- Inline Base64 Image -->

From e339ed54f635ec3d968313dfd54d88466038f62b Mon Sep 17 00:00:00 2001
From: pankaj443 <pankajofficial443@gmail.com>
Date: Tue, 2 Jun 2026 17:03:17 +0530
Subject: [PATCH 3/4] test: drop unplayable mp4 source from video poster
 fixture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The <video> carried a header-only base64 mp4 <source> (a 32-byte ftyp
box with no moov/mdat). It's unplayable and serves no purpose for this
fixture, whose goal is exercising video *poster* handling — serialize-
video.js skips elements that already have a poster attribute, so the
source was never part of any capture path.

The stub engages the browser media pipeline, which the upgraded (v143-
era) Firefox renderer handles differently than v126, causing the
Comprehensive snapshot to fail rendering on Firefox. Removing the
source leaves networkState=EMPTY (no load attempt) in both Chromium and
Firefox while keeping the poster — the actual thing under test.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/regression/pages/comprehensive.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/regression/pages/comprehensive.html b/test/regression/pages/comprehensive.html
index 9c38c949f..cb8faa985 100644
--- a/test/regression/pages/comprehensive.html
+++ b/test/regression/pages/comprehensive.html
@@ -57,9 +57,7 @@ <h1>Comprehensive Smoke Test</h1>
   <!-- Video with poster -->
   <div class="section">
     <div class="section-title">Video Poster</div>
-    <!-- <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none">
-      <source src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDE=" type="video/mp4">
-    </video> -->
+    <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none"></video>
   </div>
 
   <!-- Inline Base64 Image -->

From 0fc3403b013bd0a26753c477b3d7b161b34b2e67 Mon Sep 17 00:00:00 2001
From: pankaj443 <pankajofficial443@gmail.com>
Date: Tue, 2 Jun 2026 18:07:15 +0530
Subject: [PATCH 4/4] test: use a valid mp4 source in video poster fixture

Replace the header-only/truncated base64 mp4 (a 32-byte ftyp box with no
moov/mdat) with a complete, spec-valid minimal mp4 (ftyp+free+mdat+moov).

The original stub engaged the media pipeline in a way the upgraded
Firefox 146 renderer (percy-renderer #1775, FF 139.0.4 -> 146.0.1) failed
to render, causing the Comprehensive snapshot to time out on Firefox. The
discovery/serialization path is identical across CLI versions (verified:
old v126 and new v143 CLI both timed out), so the fixture must carry media
the renderer can actually parse.

Using a valid source keeps the data-URI video serialization path under
test (serialize-video / serializeBase64) while no longer hanging the
renderer. Locally the video now reports networkState=IDLE with no decode
error in both Chromium and Firefox (the stub reported NO_SOURCE).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/regression/pages/comprehensive.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/regression/pages/comprehensive.html b/test/regression/pages/comprehensive.html
index cb8faa985..dbfbd91dd 100644
--- a/test/regression/pages/comprehensive.html
+++ b/test/regression/pages/comprehensive.html
@@ -57,7 +57,9 @@ <h1>Comprehensive Smoke Test</h1>
   <!-- Video with poster -->
   <div class="section">
     <div class="section-title">Video Poster</div>
-    <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none"></video>
+    <video width="200" height="150" poster="/assets/images/poster.jpg" preload="none">
+      <source src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAAhtZGF0AAAA1m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAABidWR0YQAAAFptZXRhAAAAAAAAACFoZGxyAAAAAAAAAABtZGlyYXBwbAAAAAAAAAAAAAAAAC1pbHN0AAAAJal0b28AAAAdZGF0YQAAAAEAAAAATGF2ZjU3LjQxLjEwMA==" type="video/mp4">
+    </video>
   </div>
 
   <!-- Inline Base64 Image -->
