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

@@ -291,6 +291,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) {
@@ -302,13 +303,29 @@ 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;
     }
+    // Movements within an <iframe> are not dispatched in the owner context.
+    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/wvInput.ts

@@ -91,14 +91,29 @@ export class RawKeyboardImpl implements input.RawKeyboard {
 
 export class RawMouseImpl implements input.RawMouse {
   private _page: WVPage;
+  private _lastHoveredFrames: frames.Frame[] = [];
 
   constructor(page: WVPage) {
     this._page = page;
   }
 
   async move(progress: Progress, x: number, y: number, button: types.MouseButton | 'none', buttons: Set<types.MouseButton>, modifiers: Set<types.KeyboardModifier>, forClick: boolean): Promise<void> {
-    const { frame, point } = await this._page.deepestFrameForPoint(progress, x, y);
-    await evaluateInFrame(progress, frame, p => (globalThis as any).__pwWebViewInput.mouseMove(p), { ...point, button: buttonToNumber(button), buttons: toButtonsMask(buttons), ...modifierFlags(modifiers) });
+    const path = await this._page.framePointerPath(progress, x, y);
+    const params = { button: buttonToNumber(button), buttons: toButtonsMask(buttons), ...modifierFlags(modifiers) };
+    // Each frame tracks its own hover target, so as the pointer crosses an <iframe>
+    // boundary it must leave the frames it is no longer within (deepest first) before
+    // entering the frames along the new path. A move that stays within the same frames
+    // leaves none of them, so no cross-frame mouseout/mouseleave is dispatched.
+    const hoveredFrames = path.map(entry => entry.frame);
+    const attachedFrames = this._page._page.frameManager.frames();
+    for (const frame of this._lastHoveredFrames.reverse()) {
+      if (hoveredFrames.includes(frame) || !attachedFrames.includes(frame))
+        continue;
+      await evaluateInFrame(progress, frame, () => (globalThis as any).__pwWebViewInput.clearHover(), undefined);
+    }
+    this._lastHoveredFrames = hoveredFrames;
+    for (const { frame, point } of path)
+      await evaluateInFrame(progress, frame, p => (globalThis as any).__pwWebViewInput.mouseMove(p), { ...params, ...point });
   }
 
   async down(progress: Progress, x: number, y: number, button: types.MouseButton, buttons: Set<types.MouseButton>, modifiers: Set<types.KeyboardModifier>, clickCount: number): 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']);
+});