fix(render): align container Chrome with the CLI

Dockerfile.test

@@ -80,7 +80,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"

docs/deploy/gcp-cloud-run.mdx

@@ -31,6 +31,11 @@ The CLI can build the renderer automatically when it runs from a HyperFrames
 repository checkout. Outside the repository, pass an image built from
 `packages/gcp-cloud-run/Dockerfile` with `--image`.
 
+The renderer image uses Chrome 152, matching the CLI's managed browser, so
+gradient text inside transformed child elements also renders in Cloud Run.
+Existing deployments need a rebuilt image and a new deployment to receive
+the browser update.
+
 ## Deploy
 
 ```bash

packages/gcp-cloud-run/Dockerfile

@@ -80,7 +80,7 @@ RUN case "$TARGETARCH" in \
 # 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 \

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"
+  }
+}

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>

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>

packages/producer/tests/shard-schedule.json

@@ -58,6 +58,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,