From 6851c0447b4bb5f370bc7290bd2dfd1933b52201 Mon Sep 17 00:00:00 2001
From: "Abdullah M. Nazif" <abdullahnajif5@gmail.com>
Date: Fri, 9 Oct 2026 15:40:23 +0800
Subject: [PATCH] fix(render): align container Chrome with the CLI

---
 Dockerfile.test                               |  2 +-
 packages/gcp-cloud-run/Dockerfile             |  2 +-
 .../producer/tests/chat/output/output.mp4     |  4 +-
 .../gradient-text-layered-child/meta.json     | 14 +++++
 .../output/compiled.html                      |  3 +
 .../output/output.mp4                         |  3 +
 .../src/compositions/gradient.html            | 63 +++++++++++++++++++
 .../src/index.html                            | 37 +++++++++++
 packages/producer/tests/shard-schedule.json   |  1 +
 9 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 packages/producer/tests/gradient-text-layered-child/meta.json
 create mode 100644 packages/producer/tests/gradient-text-layered-child/output/compiled.html
 create mode 100644 packages/producer/tests/gradient-text-layered-child/output/output.mp4
 create mode 100644 packages/producer/tests/gradient-text-layered-child/src/compositions/gradient.html
 create mode 100644 packages/producer/tests/gradient-text-layered-child/src/index.html

diff --git a/Dockerfile.test b/Dockerfile.test
index 78f14544c64..49f03114f7a 100644
--- a/Dockerfile.test
+++ b/Dockerfile.test
@@ -58,7 +58,7 @@ ENV CONTAINER=true
 # baselines in packages/producer/tests/*/output/output.mp4 stay reproducible.
 # Each Chrome stable bump shifts pixel output enough to fail PSNR. Bump this
 # version together with regenerating baselines via `docker:test:update`.
-RUN npx --yes @puppeteer/browsers install chrome-headless-shell@148.0.7778.167 \
+RUN npx --yes @puppeteer/browsers install chrome-headless-shell@152.0.7977.30 \
       --path /root/.cache/puppeteer \
     && find /root/.cache/puppeteer/chrome-headless-shell -name "chrome-headless-shell" -type f \
     && echo "chrome-headless-shell installed"
diff --git a/packages/gcp-cloud-run/Dockerfile b/packages/gcp-cloud-run/Dockerfile
index 84417f2021b..8d5e816c343 100644
--- a/packages/gcp-cloud-run/Dockerfile
+++ b/packages/gcp-cloud-run/Dockerfile
@@ -58,7 +58,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 # Pinned deliberately. The build-stage contract probe below launches this
 # exact executable and requires a renderer-ready warm-up plus a PNG-returning
 # HeadlessExperimental.beginFrame before the image can build.
-RUN npx --yes @puppeteer/browsers install chrome-headless-shell@148.0.7778.167 \
+RUN npx --yes @puppeteer/browsers install chrome-headless-shell@152.0.7977.30 \
       --path /opt/puppeteer \
     && CHS="$(find /opt/puppeteer/chrome-headless-shell -name chrome-headless-shell -type f | head -n1)" \
     && mkdir -p /opt/chrome \
diff --git a/packages/producer/tests/chat/output/output.mp4 b/packages/producer/tests/chat/output/output.mp4
index c858dd1a7f2..2d927967eac 100644
--- a/packages/producer/tests/chat/output/output.mp4
+++ b/packages/producer/tests/chat/output/output.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d002c0d9d9851ec6abce1c662ed7a0a7b78b993ec778650a9aca4a437edb4080
-size 887615
+oid sha256:f55fb63c418887169bf5e33ca064a16ce6b2743bcd1550ae6007fdc5fe87e301
+size 2141716
diff --git a/packages/producer/tests/gradient-text-layered-child/meta.json b/packages/producer/tests/gradient-text-layered-child/meta.json
new file mode 100644
index 00000000000..51f56ed93ea
--- /dev/null
+++ b/packages/producer/tests/gradient-text-layered-child/meta.json
@@ -0,0 +1,14 @@
+{
+  "name": "Gradient text inside a transformed child",
+  "description": "Both direct text and a child with its own paint layer must contribute glyphs to a background-clip: text gradient mask.",
+  "tags": ["regression", "css", "text"],
+  "minPsnr": 40,
+  "maxFrameFailures": 0,
+  "minAudioCorrelation": 0,
+  "maxAudioLagWindows": 1,
+  "renderConfig": {
+    "fps": 24,
+    "workers": 1,
+    "captureMode": "beginframe"
+  }
+}
diff --git a/packages/producer/tests/gradient-text-layered-child/output/compiled.html b/packages/producer/tests/gradient-text-layered-child/output/compiled.html
new file mode 100644
index 00000000000..00d89c5a939
--- /dev/null
+++ b/packages/producer/tests/gradient-text-layered-child/output/compiled.html
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8055e7dc3cc2ceb108b5336ed7dc20f76ae24677548ece73e6bf6b9f1213c460
+size 2468
diff --git a/packages/producer/tests/gradient-text-layered-child/output/output.mp4 b/packages/producer/tests/gradient-text-layered-child/output/output.mp4
new file mode 100644
index 00000000000..71f60fffb22
--- /dev/null
+++ b/packages/producer/tests/gradient-text-layered-child/output/output.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:570ed3a8bfae537da98ea6fb0c0284359827dbbc5e9e8398f2bcfe6f8091b8e0
+size 43807
diff --git a/packages/producer/tests/gradient-text-layered-child/src/compositions/gradient.html b/packages/producer/tests/gradient-text-layered-child/src/compositions/gradient.html
new file mode 100644
index 00000000000..6b2f783f6d3
--- /dev/null
+++ b/packages/producer/tests/gradient-text-layered-child/src/compositions/gradient.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Direct and layered gradient text</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        background: #ffffff;
+      }
+
+      #text {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #ffffff;
+      }
+
+      .gradient {
+        position: absolute;
+        left: 120px;
+        width: 1680px;
+        height: 170px;
+        font:
+          120px/170px "DejaVu Sans",
+          sans-serif;
+        background: linear-gradient(#b91c1c, #1d4ed8);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      #direct {
+        top: 180px;
+      }
+
+      #layered {
+        top: 420px;
+      }
+
+      /* A child with its own paint layer must still contribute glyphs to the gradient mask.
+         https://github.com/heygen-com/hyperframes/issues/5117 */
+      #layered-child {
+        transform: translateY(0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="text"
+      data-composition-id="gradient-text"
+      data-no-timeline
+      data-start="0"
+      data-duration="1"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="direct" class="gradient">Gradient text</div>
+      <div id="layered" class="gradient"><div id="layered-child">Gradient text</div></div>
+    </div>
+  </body>
+</html>
diff --git a/packages/producer/tests/gradient-text-layered-child/src/index.html b/packages/producer/tests/gradient-text-layered-child/src/index.html
new file mode 100644
index 00000000000..8fe762b1273
--- /dev/null
+++ b/packages/producer/tests/gradient-text-layered-child/src/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Gradient text paint layers</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-no-timeline
+      data-start="0"
+      data-duration="1"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="gradient-scene"
+        class="clip"
+        data-start="0"
+        data-duration="1"
+        data-composition-src="compositions/gradient.html"
+        data-composition-id="gradient-text"
+        data-no-timeline
+      ></div>
+    </div>
+  </body>
+</html>
diff --git a/packages/producer/tests/shard-schedule.json b/packages/producer/tests/shard-schedule.json
index b33adbe59f3..315a25b0613 100644
--- a/packages/producer/tests/shard-schedule.json
+++ b/packages/producer/tests/shard-schedule.json
@@ -57,6 +57,7 @@
     "style-7-prod": 100,
     "style-8-prod": 94,
     "style-9-prod": 71,
+    "gradient-text-layered-child": 6,
     "subcomp-bare-fragment": 3,
     "sub-comp-id-selector": 8,
     "sub-comp-t0": 12,