diff --git a/packages/core/src/compiler/htmlBundler.ts b/packages/core/src/compiler/htmlBundler.ts index 5225ccc42..6b634b2bb 100644 --- a/packages/core/src/compiler/htmlBundler.ts +++ b/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; } diff --git a/packages/core/src/runtime/compositionLoader.ts b/packages/core/src/runtime/compositionLoader.ts index bb335694a..2bc4f5523 100644 --- a/packages/core/src/runtime/compositionLoader.ts +++ b/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; } diff --git a/packages/producer/tests/sub-comp-height-percent/meta.json b/packages/producer/tests/sub-comp-height-percent/meta.json new file mode 100644 index 000000000..a26267d77 --- /dev/null +++ b/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 + } +} diff --git a/packages/producer/tests/sub-comp-height-percent/output/compiled.html b/packages/producer/tests/sub-comp-height-percent/output/compiled.html new file mode 100644 index 000000000..e46ba029a --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/output/compiled.html @@ -0,0 +1,368 @@ + + + + + + + + +
+
+ + +
+
+
+ Centered +
+
+
+ + + +
+
+ + + diff --git a/packages/producer/tests/sub-comp-height-percent/output/output.mp4 b/packages/producer/tests/sub-comp-height-percent/output/output.mp4 new file mode 100644 index 000000000..a8829cd43 --- /dev/null +++ b/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 diff --git a/packages/producer/tests/sub-comp-height-percent/src/centered-card.html b/packages/producer/tests/sub-comp-height-percent/src/centered-card.html new file mode 100644 index 000000000..5742c66db --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/src/centered-card.html @@ -0,0 +1,62 @@ + diff --git a/packages/producer/tests/sub-comp-height-percent/src/index.html b/packages/producer/tests/sub-comp-height-percent/src/index.html new file mode 100644 index 000000000..7801a905a --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/src/index.html @@ -0,0 +1,19 @@ + + + + + + + + +
+
+
+ + +