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);