diff --git a/packages/engine/src/services/videoFrameInjector.stacking.browser.test.ts b/packages/engine/src/services/videoFrameInjector.stacking.browser.test.ts
index 6867181ce0..4194b5cca2 100644
--- a/packages/engine/src/services/videoFrameInjector.stacking.browser.test.ts
+++ b/packages/engine/src/services/videoFrameInjector.stacking.browser.test.ts
@@ -95,4 +95,19 @@ describe.skipIf(!hasBrowser)("HDR stacking of content inside an HDR element's ho
ids.filter((id) => id !== "host"),
);
});
+
+ it("puts a timed overlay without an id in a layer above the HDR video", async () => {
+ await page.setContent(PAGE.replace('
el.getAttribute(attr),
+ HDR_LAYER_UNIT_ATTR,
+ );
+
+ expect(unitId).toBeTruthy();
+ expect(groupIntoLayers(stacking).map((l) => (l.type === "hdr" ? "hdr" : l.elementIds))).toEqual(
+ [["host"], "hdr", [unitId]],
+ );
+ });
});
diff --git a/packages/engine/src/services/videoFrameInjector.ts b/packages/engine/src/services/videoFrameInjector.ts
index 359a0a753f..39e194d6f3 100644
--- a/packages/engine/src/services/videoFrameInjector.ts
+++ b/packages/engine/src/services/videoFrameInjector.ts
@@ -846,16 +846,18 @@ export async function queryElementStacking(
}
const hdrElements: Element[] = [];
+ const described = new Set();
for (const el of elements) {
// Report the render id so callers can match these back to the media list.
// `||`, not `??`: `__hfMediaId` yields "" for an element with neither id.
const id = window.__hfMediaId?.(el) || el.id;
if (!id) continue;
results.push(describe(el, id));
+ described.add(el);
if (hdrSet.has(id)) hdrElements.push(el);
}
- // Untimed content that paints above an HDR element (a later sibling of it or of an
+ // Content without its own entry that paints above an HDR element (a later sibling of it or of an
// ancestor, or one with a higher z-index) is its own layer, so the HDR blit stays under it.
const lastHdrBelow = new Map();
for (const hdrEl of hdrElements) {
@@ -871,10 +873,7 @@ export async function queryElementStacking(
afterNode = true;
continue;
}
- if (
- sibling.hasAttribute("data-start") ||
- sibling.matches("script,style,template,link,meta")
- )
+ if (described.has(sibling) || sibling.matches("script,style,template,link,meta"))
continue;
if (sibling.id.startsWith(prefix) || sibling.id.startsWith(canvasPrefix)) continue;
const siblingZ = getEffectiveZIndex(sibling);