fix(webview): maintain hover state when the mouse crosses an <iframe>

each `<iframe>` has its own mouse position

as such, moving the pointer into or out of an `<iframe>` did not dispatch `mouseleave`/`mouseout`/etc.

instead, track what `<iframe>` are hovered on the server so that movement is coordinated globally

Author: dcrousso

packages/injected/src/webview/webViewInput.ts

@@ -290,6 +290,7 @@ export class WebViewInput {
       metaKey: params.metaKey,
     };
     const pointer: PointerEventInit = { ...base, pointerId: 1, pointerType: 'mouse', isPrimary: true };
+    let lastTask = Promise.resolve();
     const prev = this._hoverTarget;
     if (prev !== target) {
       if (prev && prev.isConnected) {
@@ -301,13 +302,28 @@ export class WebViewInput {
       void this._postTask(() => markAndDispatch(target, new PointerEvent('pointerover', { ...pointer, relatedTarget: prev })));
       void this._postTask(() => markAndDispatch(target, new MouseEvent('mouseover', { ...base, relatedTarget: prev })));
       void this._postTask(() => markAndDispatch(target, new PointerEvent('pointerenter', { ...pointer, bubbles: false, cancelable: false, relatedTarget: prev })));
-      void this._postTask(() => markAndDispatch(target, new MouseEvent('mouseenter', { ...base, bubbles: false, cancelable: false, relatedTarget: prev })));
+      lastTask = this._postTask(() => markAndDispatch(target, new MouseEvent('mouseenter', { ...base, bubbles: false, cancelable: false, relatedTarget: prev })));
       this._hoverTarget = target;
     }
+    if (isFrameOwner(target))
+      return lastTask;
     void this._postTask(() => markAndDispatch(target, new PointerEvent('pointermove', pointer)));
     return this._postTask(() => markAndDispatch(target, new MouseEvent('mousemove', base)));
   }
 
+  clearHover(): Promise<void> {
+    const prev = this._hoverTarget;
+    this._hoverTarget = null;
+    if (!prev?.isConnected)
+      return Promise.resolve();
+    const base: MouseEventInit = { bubbles: true, cancelable: true, view: this._window, relatedTarget: null };
+    const pointer: PointerEventInit = { ...base, pointerId: 1, pointerType: 'mouse', isPrimary: true };
+    void this._postTask(() => markAndDispatch(prev, new PointerEvent('pointerout', pointer)));
+    void this._postTask(() => markAndDispatch(prev, new MouseEvent('mouseout', base)));
+    void this._postTask(() => markAndDispatch(prev, new PointerEvent('pointerleave', { ...pointer, bubbles: false, cancelable: false })));
+    return this._postTask(() => markAndDispatch(prev, new MouseEvent('mouseleave', { ...base, bubbles: false, cancelable: false })));
+  }
+
   mouseEvent(params: MouseEventParams): Promise<void> {
     // Resolve the hit target at dispatch time, not enqueue time: a queued move
     // ahead of this may reveal an overlay that should receive the press.

packages/playwright-core/src/server/webkit/webview/wvPage.ts

@@ -65,6 +65,7 @@ export class WVPage implements PageDelegate {
   private _sessionListeners: RegisteredListener[] = [];
   private _eventListeners: RegisteredListener[];
   private _pendingMainFrameLoaderResolvers = new Map<string, (loaderId: string) => void>();
+  private _lastHoveredFrames: frames.Frame[] = [];
   readonly _browserContext: WVBrowserContext;
   private _firstNonInitialNavigationCommittedPromise: Promise<void>;
   private _firstNonInitialNavigationCommittedFulfill = () => {};
@@ -76,6 +77,7 @@ export class WVPage implements PageDelegate {
 
   private readonly _dialogEndpoint: string | undefined;
 
+
   constructor(browserContext: WVBrowserContext, outerSession: WVSession, dialogEndpoint?: string) {
     this._outerSession = outerSession;
     this._dialogEndpoint = dialogEndpoint;
@@ -916,37 +918,81 @@ export class WVPage implements PageDelegate {
   }
 
   private async _dispatchWebViewInput(progress: Progress, method: string, params: any): Promise<void> {
+    if (method === 'mouseMove') {
+      await this._dispatchMouseMove(progress, params);
+      return;
+    }
     const positional = typeof params === 'object' && params !== null && 'x' in params;
     let frame: frames.Frame = this._page.mainFrame();
-    let x = positional ? params.x as number : 0;
-    let y = positional ? params.y as number : 0;
+    let x = 0;
+    let y = 0;
+    if (positional) {
+      const path = await this._pointerPath(progress, params.x as number, params.y as number);
+      ({frame, x, y} = path[path.length - 1]);
+    } else {
+      // Non-positional actions (keyboard, insertText) follow the focused <iframe> chain.
+      for (;;) {
+        const context = await progress.race(frame.mainContext());
+        const iframe = await progress.race(context.evaluateHandle(() => (globalThis as any).__pwWebViewInput.activeIFrame())) as dom.ElementHandle;
+        const childFrame = await this._childFrame(progress, iframe);
+        if (!childFrame)
+          break;
+        frame = childFrame;
+      }
+    }
+    const context = await progress.race(frame.mainContext());
+    // This will automatically await if the result is a promise, so async dispatchers deliver every event before this resolves.
+    await progress.race(context.evaluate(({ method, params }) => (globalThis as any).__pwWebViewInput[method](params), { method, params: positional ? { ...params, x, y } : params }));
+  }
+
+  private async _childFrame(progress: Progress, iframe: dom.ElementHandle): Promise<frames.Frame | null> {
+    try {
+      return await progress.race(this.getContentFrame(iframe));
+    } finally {
+      iframe.dispose();
+    }
+  }
+
+  // Walk from the main frame into the deepest <iframe> that contains the point,
+  // translating the point into each frame's coordinates along the way.
+  private async _pointerPath(progress: Progress, x: number, y: number): Promise<{ frame: frames.Frame, x: number, y: number }[]> {
+    const path: { frame: frames.Frame, x: number, y: number }[] = [];
+    let frame: frames.Frame = this._page.mainFrame();
     for (;;) {
+      path.push({ frame, x, y });
       const context = await progress.race(frame.mainContext());
-      const position = positional
-        ? await progress.race(context.evaluateHandle(([px, py]) => (globalThis as any).__pwWebViewInput.positionInIFrame(px, py), [x, y]))
-        : undefined;
+      const position = await progress.race(context.evaluateHandle(([px, py]) => (globalThis as any).__pwWebViewInput.positionInIFrame(px, py), [x, y]));
       try {
-        const iframe = (position
-          ? await position.getProperty(progress, 'iframe')
-          : await progress.race(context.evaluateHandle(() => (globalThis as any).__pwWebViewInput.activeIFrame()))) as dom.ElementHandle;
-        let childFrame: frames.Frame | null;
-        try {
-          childFrame = await progress.race(this.getContentFrame(iframe));
-        } finally {
-          iframe.dispose();
-        }
+        const iframe = await position.getProperty(progress, 'iframe') as dom.ElementHandle;
+        const childFrame = await this._childFrame(progress, iframe);
         if (!childFrame)
           break;
-        if (position)
-          ({ x, y } = await progress.race(position.evaluate(result => ({ x: result.x, y: result.y }))));
+        ({ x, y } = await progress.race(position.evaluate(result => ({ x: result.x, y: result.y }))));
         frame = childFrame;
       } finally {
-        position?.dispose();
+        position.dispose();
       }
     }
-    const context = await progress.race(frame.mainContext());
-    // This will automatically await if the result is a promise, so async dispatchers deliver every event before this resolves.
-    await progress.race(context.evaluate(({ method, params }) => (globalThis as any).__pwWebViewInput[method](params), { method, params: positional ? { ...params, x, y } : params }));
+    return path;
+  }
+
+  // Mouse move maintains hover state across frames: as the pointer crosses an <iframe>
+  // boundary it leaves the elements in one frame and enters elements in another.
+  private async _dispatchMouseMove(progress: Progress, params: any): Promise<void> {
+    const path = await this._pointerPath(progress, params.x as number, params.y as number);
+    const framesToHover = path.map(entry => entry.frame);
+    const frames = this._page.frameManager.frames();
+    for (const hoveredFrame of this._lastHoveredFrames.reverse()) {
+      if (framesToHover.includes(hoveredFrame) || !frames.includes(hoveredFrame))
+        continue;
+      const context = await progress.race(hoveredFrame.mainContext());
+      await progress.race(context.evaluate(() => (globalThis as any).__pwWebViewInput.clearHover()));
+    }
+    for (const entry of path) {
+      const context = await progress.race(entry.frame.mainContext());
+      await progress.race(context.evaluate(p => (globalThis as any).__pwWebViewInput.mouseMove(p), { ...params, x: entry.x, y: entry.y }));
+    }
+    this._lastHoveredFrames = framesToHover;
   }
 
   async resetForReuse(progress: Progress): Promise<void> {

tests/page/page-mouse.spec.ts

@@ -337,3 +337,49 @@ it('should dispatch mouse move after context menu was opened', async ({ page, br
     }
   }
 });
+
+it('should track hover across iframe boundaries', async ({ page, headless }) => {
+  it.skip(!headless, 'headed messes up with hover');
+
+  await page.setContent(`
+    <style>
+      body, html { margin: 0; padding: 0; }
+      #parentBox { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; }
+      iframe { position: absolute; left: 200px; top: 10px; width: 200px; height: 200px; border: none; }
+    </style>
+    <div id="parentBox"></div>
+    <iframe srcdoc="
+      <style>body, html { margin: 0; padding: 0; } #childBox { width: 180px; height: 180px; }</style>
+      <div id='childBox'></div>
+      <script>
+        const box = document.querySelector('#childBox');
+        box.addEventListener('mouseenter', () => window.top.__log.push('child:enter'));
+        box.addEventListener('mouseleave', () => window.top.__log.push('child:leave'));
+      </script>
+    "></iframe>
+    <script>
+      window.__log = [];
+      const box = document.querySelector('#parentBox');
+      box.addEventListener('mouseenter', () => window.__log.push('parent:enter'));
+      box.addEventListener('mouseleave', () => window.__log.push('parent:leave'));
+    </script>
+  `);
+  await page.waitForSelector('iframe');
+  await page.frames()[1].waitForSelector('#childBox');
+  const log = () => page.evaluate(() => window['__log']);
+  const parentBox = (await page.locator('#parentBox').boundingBox())!;
+  const iframeBox = (await page.locator('iframe').boundingBox())!;
+  const parentCenter = { x: parentBox.x + parentBox.width / 2, y: parentBox.y + parentBox.height / 2 };
+  const childCenter = { x: iframeBox.x + 90, y: iframeBox.y + 90 };
+
+  await page.mouse.move(parentCenter.x, parentCenter.y);
+  await expect.poll(log).toEqual(['parent:enter']);
+
+  // Crossing into the iframe leaves the parent element and enters the child.
+  await page.mouse.move(childCenter.x, childCenter.y);
+  await expect.poll(log).toEqual(['parent:enter', 'parent:leave', 'child:enter']);
+
+  // Crossing back out leaves the child element and re-enters the parent.
+  await page.mouse.move(parentCenter.x, parentCenter.y);
+  await expect.poll(log).toEqual(['parent:enter', 'parent:leave', 'child:enter', 'child:leave', 'parent:enter']);
+});