fix(desktop): preserve nested PPTX blend backdrops

Probe non-member compositor descendants against the actual backdrop-dependent capture members and keep selected backdrop paint visible during isolation.

Generated-By: looper 0.11.8 (runner=fixer, agent=codex)

Author: Siri-Ray

apps/desktop/src/main/deck-capture.ts

@@ -883,6 +883,21 @@ export function isolateLayeredPptxBackground(
       ? Array.from(document.querySelectorAll<HTMLElement>(`[data-od-pptx-compositing-member="${id}"]`))
       : [],
   );
+  const backdropDependentMembers = Array.from(compositingMembers).filter((element) => {
+    const style = getComputedStyle(element);
+    const mixBlendMode = (style.mixBlendMode || "normal").trim().toLowerCase();
+    const backdropFilter = (
+      style.backdropFilter ||
+      style.getPropertyValue?.("backdrop-filter") ||
+      style.getPropertyValue?.("-webkit-backdrop-filter") ||
+      "none"
+    ).trim().toLowerCase();
+    return (mixBlendMode !== "" && mixBlendMode !== "normal") ||
+      (backdropFilter !== "" && backdropFilter !== "none");
+  });
+  const backdropPaintTargets = backdropDependentMembers.length > 0
+    ? backdropDependentMembers
+    : [target];
   const entirePaintRoots = new Set(
     flattenCompositingContext
       ? Array.from(compositingMembers).filter((element) =>
@@ -942,10 +957,13 @@ export function isolateLayeredPptxBackground(
     let sampledTogether = false;
     const paintsBehindAt = (x: number, y: number): boolean => {
       const paintStack = document.elementsFromPoint(x, y);
-      const targetIndex = paintStack.indexOf(target);
       const elementIndex = paintStack.indexOf(element);
-      if (targetIndex >= 0 && elementIndex >= 0) sampledTogether = true;
-      return targetIndex >= 0 && elementIndex > targetIndex;
+      if (elementIndex < 0) return false;
+      return backdropPaintTargets.some((paintTarget) => {
+        const targetIndex = paintStack.indexOf(paintTarget);
+        if (targetIndex >= 0) sampledTogether = true;
+        return targetIndex >= 0 && elementIndex > targetIndex;
+      });
     };
     if (points.some(([x, y]) => paintsBehindAt(x, y))) return true;
 
@@ -977,7 +995,10 @@ export function isolateLayeredPptxBackground(
       }
       return clips;
     };
-    const clippedPaintBoxes = [...paintClipChain(element), ...paintClipChain(target)]
+    const clippedPaintBoxes = [
+      ...paintClipChain(element),
+      ...backdropPaintTargets.flatMap((paintTarget) => paintClipChain(paintTarget)),
+    ]
       .filter((candidate, index, candidates) => candidates.indexOf(candidate) === index);
     if (clippedPaintBoxes.length === 0) return false;
 
@@ -1026,7 +1047,10 @@ export function isolateLayeredPptxBackground(
       element.style.setProperty("pointer-events", "auto", "important");
     }
     for (const element of [slide, ...Array.from(slide.querySelectorAll<HTMLElement>("*"))]) {
-      if (element === target || element.contains(target) || target.contains(element)) continue;
+      const isCapturedDescendant = target.contains(element) && (
+        !flattenCompositingContext || compositingMembers.has(element)
+      );
+      if (element === target || element.contains(target) || isCapturedDescendant) continue;
       if (paintsBehindTarget(element)) addBlendBackdropElement(element);
     }
 
@@ -1115,6 +1139,7 @@ export function isolateLayeredPptxBackground(
       );
       continue;
     }
+    if (blendBackdropElements.has(descendant)) continue;
     if (!flattenCompositingContext) {
       descendant.style.setProperty("visibility", "hidden", "important");
       continue;

apps/desktop/tests/main/pptx-layered-background.test.ts

@@ -430,7 +430,7 @@ describe('editable PPTX layered backgrounds', () => {
     expect(capture.largeAreaHitTests).toBeLessThanOrEqual(4_101);
   }, 20_000);
 
-  test('includes a 1px clipped stripe across a large layered blend backdrop', async () => {
+  test('includes a 1px clipped backdrop nested in a layered blend compositor root', async () => {
     const capture = await probeDpr2LayeredBackgroundCapture();
 
     expect(capture.largeStripeExportedRgb).toEqual(capture.largeStripeChromiumRgb);
@@ -1187,7 +1187,7 @@ app.whenReady().then(async () => {
     if (!capture) throw new Error('No layered background capture was produced');
     const image = nativeImage.createFromBuffer(Buffer.from(capture.dataUrl.split(',')[1], 'base64'));
     const size = image.getSize();
-    const largeHtml = '<!doctype html><style>html,body{margin:0}.slide{position:relative;width:1920px;height:1080px}.backdrop,.large-target{position:absolute;inset:0}.backdrop{background:rgb(128,192,128);clip-path:polygon(7px 0,8px 0,8px 100%,7px 100%)}.large-target{background-image:linear-gradient(rgb(128,128,128),rgb(128,128,128)),linear-gradient(transparent,transparent);mix-blend-mode:multiply}</style><section class="slide"><div class="backdrop"></div><div class="large-target"></div></section>';
+    const largeHtml = '<!doctype html><style>html,body{margin:0}.slide{position:relative;width:1920px;height:1080px}.compositor{position:absolute;inset:0;opacity:.999}.backdrop,.large-target{position:absolute;inset:0}.backdrop{background:rgb(128,192,128);clip-path:polygon(7px 0,8px 0,8px 100%,7px 100%)}.large-target{background-image:linear-gradient(rgb(128,128,128),rgb(128,128,128)),linear-gradient(transparent,transparent);mix-blend-mode:multiply}</style><section class="slide"><div class="compositor"><div class="backdrop"></div><div class="large-target"></div></div></section>';
     await window.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(largeHtml));
     await nextFrames(window);
     const dbg = window.webContents.debugger;