test: add tests for input with open context menu (#21081)

These might be failing on certain platforms and browsers.

References #20823

tests/page/page-keyboard.spec.ts

@@ -663,3 +663,40 @@ async function captureLastKeydown(page) {
   });
   return lastEvent;
 }
+
+it('should dispatch insertText after context menu was opened', async ({ server, page, browserName }) => {
+  await page.goto(server.PREFIX + '/input/textarea.html');
+  await page.evaluate(() => {
+    window['contextMenuPromise'] = new Promise(x => {
+      window.addEventListener('contextmenu', x, false);
+    });
+  });
+
+  const box = await page.locator('textarea').boundingBox();
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  await page.mouse.click(cx, cy, { button: 'right' });
+  await page.evaluate(() => window['contextMenuPromise']);
+
+  await page.keyboard.insertText('嗨');
+  await expect.poll(() => page.locator('textarea').inputValue()).toBe('嗨');
+});
+
+it('should type after context menu was opened', async ({ server, page, browserName }) => {
+  await page.evaluate(() => {
+    window['keys'] = [];
+    window.addEventListener('keydown', event => window['keys'].push(event.key));
+    window['contextMenuPromise'] = new Promise(x => {
+      window.addEventListener('contextmenu', x, false);
+    });
+  });
+
+
+  await page.mouse.move(100, 100);
+  await page.mouse.down({ button: 'right' });
+  await page.evaluate(() => window['contextMenuPromise']);
+
+  await page.keyboard.down('ArrowDown');
+
+  await expect.poll(() => page.evaluate('window.keys')).toEqual(['ArrowDown']);
+});

tests/page/page-mouse.spec.ts

@@ -259,3 +259,28 @@ it('should not crash on mouse drag with any button', async ({ page }) => {
     await page.mouse.move(100, 100);
   }
 });
+
+it('should dispatch mouse move after context menu was opened', async ({ page, browserName }) => {
+  it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/20823' });
+  it.fixme(browserName === 'firefox');
+  await page.evaluate(() => {
+    window['contextMenuPromise'] = new Promise(x => {
+      window.addEventListener('contextmenu', x, false);
+    });
+  });
+  const CX = 100, CY = 100;
+  await page.mouse.move(CX, CY);
+  await page.mouse.down({ button: 'right' });
+  await page.evaluate(() => window['contextMenuPromise']);
+  const N = 20;
+  for (const radius of [10, 30, 60, 90]) {
+    for (let i = 0; i < N; ++i) {
+      const angle = 2 * Math.PI * i / N;
+      const x = CX + Math.round(radius * Math.cos(angle));
+      const y = CY + Math.round(radius * Math.sin(angle));
+      console.log(x, y);
+      await page.mouse.move(x, y);
+    }
+  }
+});
+

tests/page/wheel.spec.ts

@@ -67,6 +67,36 @@ it('should dispatch wheel events @smoke', async ({ page, server }) => {
   });
 });
 
+it('should dispatch wheel events after context menu was opened', async ({ page, browserName }) => {
+  it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/20823' });
+  it.fixme(browserName === 'firefox');
+
+  await page.setContent(`<div style="width: 5000px; height: 5000px;"></div>`);
+  await page.mouse.move(50, 60);
+  await page.evaluate(() => {
+    window['contextMenuPromise'] = new Promise(x => {
+      window.addEventListener('contextmenu', x, false);
+    });
+  });
+  await page.mouse.down({ button: 'right' });
+  await page.evaluate(() => window['contextMenuPromise']);
+
+  await listenForWheelEvents(page, 'div');
+  await page.mouse.wheel(0, 100);
+  await page.waitForFunction('window.scrollY === 100');
+  await expectEvent(page, {
+    deltaX: 0,
+    deltaY: 100,
+    clientX: 50,
+    clientY: 60,
+    deltaMode: 0,
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false,
+    metaKey: false,
+  });
+});
+
 it('should dispatch wheel events after popup was opened @smoke', async ({ page, server }) => {
   await page.setContent(`
     <div style="width: 5000px; height: 5000px;"></div>