Merge pull request #1050 from heygen-com/fix/inner-root-height-percent

fix(core): set explicit dimensions on data-hf-inner-root wrapper

packages/core/src/compiler/htmlBundler.ts

@@ -399,6 +399,13 @@ export function prepareFlattenedInnerRoot(innerRoot: Element): Element {
     prepared.setAttribute("data-hf-authored-id", authoredRootId);
   }
   prepared.setAttribute("data-hf-inner-root", "true");
+  const w = prepared.getAttribute("data-width");
+  const h = prepared.getAttribute("data-height");
+  const widthVal = w ? `${w}px` : "100%";
+  const heightVal = h ? `${h}px` : "100%";
+  const existingStyle = (prepared.getAttribute("style") || "").trim();
+  const fill = `width:${widthVal};height:${heightVal}`;
+  prepared.setAttribute("style", existingStyle ? `${existingStyle};${fill}` : fill);
   return prepared;
 }
 

packages/core/src/runtime/compositionLoader.ts

@@ -85,6 +85,10 @@ function prepareFlattenedInnerRoot(innerRoot: HTMLElement): HTMLElement {
     prepared.setAttribute("data-hf-authored-id", authoredRootId);
   }
   prepared.setAttribute("data-hf-inner-root", "true");
+  const w = prepared.getAttribute("data-width");
+  const h = prepared.getAttribute("data-height");
+  prepared.style.width = w ? `${w}px` : "100%";
+  prepared.style.height = h ? `${h}px` : "100%";
   return prepared;
 }
 

packages/producer/tests/sub-comp-height-percent/meta.json

@@ -0,0 +1,12 @@
+{
+  "name": "Sub-composition height:100% centering",
+  "description": "Verifies that sub-compositions using height:100% + flexbox centering render content centered, not stuck at the top. Regression test for the data-hf-inner-root wrapper missing explicit dimensions.",
+  "tags": ["sub-composition", "regression", "layout", "centering"],
+  "minPsnr": 20,
+  "maxFrameFailures": 10,
+  "minAudioCorrelation": 0.0,
+  "maxAudioLagWindows": 120,
+  "renderConfig": {
+    "fps": 24
+  }
+}

packages/producer/tests/sub-comp-height-percent/output/output.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:86b9674608f35094c3cadd2c72f7c51f535f565f477b6275aef5314a0fe17847
+size 68603

packages/producer/tests/sub-comp-height-percent/src/centered-card.html

@@ -0,0 +1,62 @@
+<template>
+  <div data-composition-id="centered-card" data-width="1920" data-height="1080">
+    <style>
+      [data-composition-id="centered-card"] {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        position: relative;
+        background: #ffffff;
+      }
+      [data-composition-id="centered-card"] .wrapper {
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+      [data-composition-id="centered-card"] .center-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      [data-composition-id="centered-card"] .card {
+        width: 600px;
+        height: 200px;
+        background: #ea4c89;
+        border-radius: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      [data-composition-id="centered-card"] .card-text {
+        font-family: sans-serif;
+        font-size: 64px;
+        font-weight: 700;
+        color: #ffffff;
+      }
+    </style>
+
+    <div class="wrapper">
+      <div class="center-box">
+        <div class="card">
+          <span class="card-text">Centered</span>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        var S = '[data-composition-id="centered-card"] ';
+        tl.fromTo(S + '.card', { scale: 0.8, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.5, ease: 'power2.out' }, 0);
+        window.__timelines['centered-card'] = tl;
+      })();
+    </script>
+  </div>
+</template>

packages/producer/tests/sub-comp-height-percent/src/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
+    </style>
+  </head>
+  <body>
+    <div data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
+      <div data-composition-id="centered-card" data-composition-src="centered-card.html" data-start="0" data-duration="3" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>