fix(vom): add tests and resolve problems

Author: Ljy-0827

apps/extension/src/tools/__tests__/observation.test.ts

@@ -704,6 +704,97 @@ describe("buildVomScene", () => {
     expect(result.nodes).toEqual([]);
   });
 
+  it("keeps AX-only frame content attached to its iframe boundary", () => {
+    const mainNodes: CapturedNode[] = [
+      {
+        backendNodeId: 1,
+        parentBackendNodeId: null,
+        frameId: "main",
+        tag: "body",
+        attrs: {},
+        rect: { x: 0, y: 0, w: 800, h: 600 },
+        paintOrder: 0,
+        position: "static",
+        pointerEvents: "auto",
+      },
+      {
+        backendNodeId: 10,
+        parentBackendNodeId: 1,
+        frameId: "main",
+        tag: "iframe",
+        attrs: { title: "Remote" },
+        rect: { x: 100, y: 100, w: 400, h: 300 },
+        paintOrder: 1,
+        position: "static",
+        pointerEvents: "auto",
+      },
+    ];
+    const captured: CapturedViewModel = {
+      viewport: { width: 800, height: 600 },
+      nodes: mainNodes,
+      iframeNodes: new Map(),
+      frameNodes: new Map([
+        ["main", mainNodes],
+        ["child", []],
+      ]),
+      rootFrameId: "main",
+      excludedBackendNodeIds: new Set(),
+    };
+
+    const result = buildFrameVomScene(
+      [
+        {
+          frameId: "main",
+          contextScopeId: "main",
+          target: { tabId: 7 },
+          domNodes: mainNodes,
+          axNodes: [
+            {
+              nodeId: "main-root",
+              backendDOMNodeId: 1,
+              role: { type: "role", value: "RootWebArea" },
+            },
+            {
+              nodeId: "frame-owner",
+              parentId: "main-root",
+              backendDOMNodeId: 10,
+              role: { type: "role", value: "Iframe" },
+              name: { type: "computedString", value: "Remote" },
+            },
+          ],
+        },
+        {
+          frameId: "child",
+          contextScopeId: "child",
+          parentFrameId: "main",
+          ownerBackendNodeId: 10,
+          target: { tabId: 7, sessionId: "child-session" },
+          domNodes: [],
+          axNodes: [
+            {
+              nodeId: "child-root",
+              backendDOMNodeId: 100,
+              role: { type: "role", value: "RootWebArea" },
+            },
+            {
+              nodeId: "child-button",
+              parentId: "child-root",
+              backendDOMNodeId: 101,
+              role: { type: "role", value: "button" },
+              name: { type: "computedString", value: "AX fallback action" },
+            },
+          ],
+        },
+      ],
+      captured,
+    );
+
+    const childButton = result.nodes.find((node) => node.backendNodeId === 101);
+    expect(childButton).toMatchObject({ frameId: "child", contextScopeId: "child" });
+    expect(childButton?.parentId).toBe(result.nodes.find((node) => node.backendNodeId === 10)?.id);
+    expect(renderVom(result).text).toContain('@e1 button "AX fallback action"');
+  });
+
   it("joins AX semantics with captured geometry by backendDOMNodeId", () => {
     const axNodes: CdpAxNode[] = [
       {

apps/extension/src/tools/observation.ts

@@ -1254,7 +1254,7 @@ export function buildFrameVomScene(
   const localScenes = new Map<string, VomScene>();
   for (const frameId of orderedFrameIds) {
     const document = documentByFrameId.get(frameId);
-    if (!document || document.domNodes.length === 0) continue;
+    if (!document) continue;
     localScenes.set(
       frameId,
       buildVomScene(
@@ -1345,6 +1345,7 @@ export function buildFrameVomScene(
   return {
     viewport: captured.viewport,
     nodes,
+    ...(rootFrameId ? { rootFrameId } : {}),
     ...(surfaces.length > 0 ? { surfaces } : {}),
     ...(activeScopeBlocks.length > 0 ? { activeScopeBlocks } : {}),
   };

packages/vom/src/__tests__/render.test.ts

@@ -468,6 +468,102 @@ describe("renderVom single-layer page", () => {
     expect(out.refs).toEqual([{ ref: "e1", backendNodeId: 4 }]);
   });
 
+  it("keeps paint-order comparisons inside their frame document", () => {
+    const out = renderVom(
+      {
+        ...scene([
+          node({ id: 1, role: "RootWebArea", frameId: "main" }),
+          node({
+            id: 2,
+            parentId: 1,
+            role: "button",
+            name: "Top-level action",
+            tag: "button",
+            rect: { x: 120, y: 120, w: 120, h: 40 },
+            paintOrder: 2,
+            frameId: "main",
+          }),
+          node({
+            id: 3,
+            parentId: 1,
+            role: "Iframe",
+            tag: "iframe",
+            rect: { x: 0, y: 0, w: 1000, h: 700 },
+            paintOrder: 1,
+            frameId: "main",
+          }),
+          node({
+            id: 4,
+            parentId: 3,
+            role: "generic",
+            rect: { x: 0, y: 0, w: 1000, h: 700 },
+            paintOrder: 100,
+            position: "fixed",
+            frameId: "child",
+          }),
+          node({
+            id: 5,
+            parentId: 4,
+            role: "button",
+            name: "Child action",
+            tag: "button",
+            rect: { x: 120, y: 120, w: 120, h: 40 },
+            paintOrder: 101,
+            frameId: "child",
+          }),
+        ]),
+        rootFrameId: "main",
+      },
+      { activeRegionPolicy: true },
+    );
+
+    expect(out.text).toContain("@layers 1 focus=L1");
+    expect(out.text).toContain('button "Top-level action"');
+    expect(out.text).toContain('button "Child action"');
+  });
+
+  it("uses the iframe owner when a parent-frame region covers child content", () => {
+    const out = renderVom(
+      {
+        ...scene([
+          node({ id: 1, role: "RootWebArea", frameId: "main" }),
+          node({
+            id: 2,
+            parentId: 1,
+            role: "Iframe",
+            tag: "iframe",
+            rect: { x: 100, y: 100, w: 400, h: 300 },
+            paintOrder: 1,
+            frameId: "main",
+          }),
+          node({
+            id: 3,
+            parentId: 2,
+            role: "button",
+            name: "Covered child action",
+            tag: "button",
+            rect: { x: 150, y: 150, w: 120, h: 40 },
+            paintOrder: 100,
+            frameId: "child",
+          }),
+          node({
+            id: 4,
+            parentId: 1,
+            role: "generic",
+            rect: { x: 120, y: 120, w: 200, h: 120 },
+            paintOrder: 2,
+            position: "fixed",
+            frameId: "main",
+          }),
+        ]),
+        rootFrameId: "main",
+      },
+      { activeRegionPolicy: true },
+    );
+
+    expect(out.text).not.toContain("Covered child action");
+  });
+
   it("renders conditional surface items inline on the trigger", () => {
     const out = renderVom({
       ...scene([

packages/vom/src/layers.ts

@@ -50,10 +50,18 @@ function classifyLayer(
   return blockerCoverage >= MASK_COVERAGE_THRESHOLD ? "mask" : "modal";
 }
 
-export function detectBlockingLayer(nodes: VomNode[], vp: Viewport): BlockingLayer | null {
+export function detectBlockingLayer(
+  nodes: VomNode[],
+  vp: Viewport,
+  rootFrameId?: string,
+): BlockingLayer | null {
   let blocker: { node: VomNode; coverage: number } | null = null;
 
   for (const node of nodes) {
+    // A document's paint order is local to its iframe stacking context. Only
+    // the root document can establish a page-level blocking layer; child
+    // documents are constrained by their iframe owner in the parent document.
+    if (rootFrameId !== undefined && node.frameId !== rootFrameId) continue;
     if (!isBlockingCandidate(node)) continue;
     const cov = coverage(node.rect, vp);
     const qualifies = cov >= BLOCK_COVERAGE_THRESHOLD || (hasModalFeature(node) && cov >= 0.15);
@@ -72,7 +80,9 @@ export function detectBlockingLayer(nodes: VomNode[], vp: Viewport): BlockingLay
   const threshold = blocker.node.paintOrder;
   const members = new Set<number>();
   for (const node of nodes) {
-    if (node.paintOrder >= threshold) members.add(node.id);
+    if (node.frameId === blocker.node.frameId && node.paintOrder >= threshold) {
+      members.add(node.id);
+    }
   }
 
   return {

packages/vom/src/render.ts

@@ -868,29 +868,75 @@ function activeRegionCandidatePriority(node: VomNode, viewportCoverage: number):
   return 1;
 }
 
+function paintLineageByFrame(
+  node: VomNode,
+  parentMap: Map<number, number | null>,
+  nodesById: Map<number, VomNode>,
+): Map<string | undefined, VomNode> {
+  const lineage = new Map<string | undefined, VomNode>();
+  let current: VomNode | undefined = node;
+  let guard = 0;
+  while (current && guard <= parentMap.size) {
+    if (!lineage.has(current.frameId)) lineage.set(current.frameId, current);
+    const parentId: number | null = parentMap.get(current.id) ?? null;
+    current = parentId === null ? undefined : nodesById.get(parentId);
+    guard += 1;
+  }
+  return lineage;
+}
+
+/** Resolve both nodes to the nearest document where their paint order is comparable. */
+function comparablePaintNodes(
+  target: VomNode,
+  blocker: VomNode,
+  parentMap: Map<number, number | null>,
+  nodesById: Map<number, VomNode>,
+): { target: VomNode; blocker: VomNode } | null {
+  if (target.frameId === blocker.frameId) return { target, blocker };
+  const targetLineage = paintLineageByFrame(target, parentMap, nodesById);
+  let blockerInFrame: VomNode | undefined = blocker;
+  let guard = 0;
+  while (blockerInFrame && guard <= parentMap.size) {
+    const targetInFrame = targetLineage.get(blockerInFrame.frameId);
+    if (targetInFrame) return { target: targetInFrame, blocker: blockerInFrame };
+    const parentId: number | null = parentMap.get(blockerInFrame.id) ?? null;
+    blockerInFrame = parentId === null ? undefined : nodesById.get(parentId);
+    guard += 1;
+  }
+  return null;
+}
+
 function isBlockedByRegion(
   target: VomNode,
   blocker: VomNode,
   parentMap: Map<number, number | null>,
+  nodesById: Map<number, VomNode>,
   viewportCoverage: number,
 ): boolean {
   if (target.id === blocker.id) return false;
   if (isAncestorOf(parentMap, blocker.id, target.id)) return false;
   if (isAncestorOf(parentMap, target.id, blocker.id)) return false;
   if (!target.rect || !blocker.rect) return false;
+  const paintNodes = comparablePaintNodes(target, blocker, parentMap, nodesById);
+  if (!paintNodes) return false;
 
   const points = interactionPoints(target.rect);
 
   if (
     viewportCoverage < 0.9 &&
-    target.paintOrder >= blocker.paintOrder &&
+    paintNodes.target.paintOrder >= paintNodes.blocker.paintOrder &&
     points.some(([x, y]) => rectContains(blocker.rect as Rect, x, y))
   ) {
     return false;
   }
 
-  if (blocker.paintOrder < target.paintOrder) return false;
-  if (blocker.paintOrder === target.paintOrder && blocker.id <= target.id) return false;
+  if (paintNodes.blocker.paintOrder < paintNodes.target.paintOrder) return false;
+  if (
+    paintNodes.blocker.paintOrder === paintNodes.target.paintOrder &&
+    paintNodes.blocker.id <= paintNodes.target.id
+  ) {
+    return false;
+  }
   if (viewportCoverage >= 0.9) return true;
 
   return points.some(([x, y]) => rectContains(blocker.rect as Rect, x, y));
@@ -914,6 +960,7 @@ function collectDescendantsOfIds(nodes: VomNode[], roots: Set<number>): Set<numb
 
 function applyActiveRegionPolicy(nodes: VomNode[], scene: VomScene): VomNode[] {
   const parentMap = buildParentMap(nodes);
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
   const candidates = nodes
     .filter(isPositionedRegionCandidate)
     .map((node) => {
@@ -930,7 +977,7 @@ function applyActiveRegionPolicy(nodes: VomNode[], scene: VomScene): VomNode[] {
   for (const target of nodes) {
     if (!isVomReferenceNode(target)) continue;
     const blocked = candidates.some((candidate) =>
-      isBlockedByRegion(target, candidate.node, parentMap, candidate.viewportCoverage),
+      isBlockedByRegion(target, candidate.node, parentMap, nodesById, candidate.viewportCoverage),
     );
     if (blocked) blockedRoots.add(target.id);
   }
@@ -985,7 +1032,7 @@ function renderDoubleLayer(scene: VomScene, layer: BlockingLayer, options: VomOp
 export function renderVom(scene: VomScene, options: VomOptions = {}): VomResult {
   const nodes = applyVomInteractionRecovery(scene.nodes);
   const renderScene = { ...scene, nodes };
-  const layer = detectBlockingLayer(nodes, scene.viewport);
+  const layer = detectBlockingLayer(nodes, scene.viewport, scene.rootFrameId);
   if (layer) return renderDoubleLayer(renderScene, layer, options);
   const visibleNodes = options.activeRegionPolicy ? applyActiveRegionPolicy(nodes, scene) : nodes;
 

packages/vom/src/types.ts

@@ -55,6 +55,8 @@ export interface VomNode {
 export interface VomScene {
   viewport: Viewport;
   nodes: VomNode[];
+  /** Root document whose paint order defines page-level blocking layers. */
+  rootFrameId?: string;
   surfaces?: CondSurface[];
   activeScopeBlocks?: ActiveScopeBlock[];
 }