[BUG] Drag and drop tests don't work in Firefox if dragging inside iFrame

[apedroferreira]

Context:

• Playwright Version: 1.25.2 (latest)
• Operating System: Mac
• Node.js version: 16.17.0
• Browser: Firefox
• Extra: React app

Code Snippet

I've made a minimal reproduction of the issue here, if you run the app with yarn start and then the tests with yarn test you can see the issue: https://github.com/apedroferreira/playwright-drag-drop-bug-repro

Describe the bug

We've been testing drag and drop as follows:

  await page.mouse.move(
    sourceBoundingBox.x + sourceBoundingBox.width / 2,
    sourceBoundingBox.y + sourceBoundingBox.height / 2,
    { steps: 5 }
  );
  await page.mouse.down();
  await page.mouse.move(
    targetBoundingBox.x + targetBoundingBox.width / 2,
    targetBoundingBox.y + targetBoundingBox.height / 2,
    { steps: 5 }
  );
  await page.mouse.up();

When using this logic to test dragging and dropping inside an iFrame with HTML5 drag & drop, everything works fine in Chromium and Webkit, but in Firefox the ondragover, ondragend and ondrop events are not triggered as expected (ondragstart does seem to get triggered, at least in some cases). Using .dragTo or .dragAndDrop seems to have the same issue.

We're currently working around this by dispatching these events manually in the tests but it's not ideal, as it also requires us to create specific logic for Firefox.

Thank you so much and please let me know if I can provide any more useful information!