fix(webkit): proper value for event.buttons (#7680)

src/server/webkit/wkInput.ts

@@ -35,6 +35,17 @@ function toModifiersMask(modifiers: Set<types.KeyboardModifier>): number {
   return mask;
 }
 
+function toButtonsMask(buttons: Set<types.MouseButton>): number {
+  let mask = 0;
+  if (buttons.has('left'))
+    mask |= 1;
+  if (buttons.has('middle'))
+    mask |= 2;
+  if (buttons.has('right'))
+    mask |= 4;
+  return mask;
+}
+
 export class RawKeyboardImpl implements input.RawKeyboard {
   private readonly _pageProxySession: WKSession;
   private _session?: WKSession;
@@ -99,6 +110,7 @@ export class RawMouseImpl implements input.RawMouse {
     await this._pageProxySession.send('Input.dispatchMouseEvent', {
       type: 'move',
       button,
+      buttons: toButtonsMask(buttons),
       x,
       y,
       modifiers: toModifiersMask(modifiers)
@@ -109,6 +121,7 @@ export class RawMouseImpl implements input.RawMouse {
     await this._pageProxySession.send('Input.dispatchMouseEvent', {
       type: 'down',
       button,
+      buttons: toButtonsMask(buttons),
       x,
       y,
       modifiers: toModifiersMask(modifiers),
@@ -120,6 +133,7 @@ export class RawMouseImpl implements input.RawMouse {
     await this._pageProxySession.send('Input.dispatchMouseEvent', {
       type: 'up',
       button,
+      buttons: toButtonsMask(buttons),
       x,
       y,
       modifiers: toModifiersMask(modifiers),

tests/page/page-drag.spec.ts

@@ -252,6 +252,36 @@ it('should work if not doing a drag', async ({page}) => {
   expect(await eventsHandle.jsonValue()).toEqual(['mousemove', 'mousedown', 'mousemove', 'mouseup']);
 });
 
+it('should report event.buttons', async ({page, browserName}) => {
+  const logsHandle = await page.evaluateHandle(async () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    div.style.width = '200px';
+    div.style.height = '200px';
+    div.style.backgroundColor = 'blue';
+    div.addEventListener('mousedown', onEvent);
+    div.addEventListener('mousemove', onEvent, { passive: false });
+    div.addEventListener('mouseup', onEvent);
+    const logs = [];
+    function onEvent(event) {
+      logs.push({ type: event.type, buttons: event.buttons });
+    }
+    await new Promise(requestAnimationFrame);
+    return logs;
+  });
+  await page.mouse.move(20, 20);
+  await page.mouse.down();
+  await page.mouse.move(40, 40);
+  await page.mouse.up();
+  const logs = await logsHandle.jsonValue();
+  expect(logs).toEqual([
+    { type: 'mousemove', buttons: 0 },
+    { type: 'mousedown', buttons: 1 },
+    { type: 'mousemove', buttons: 1 },
+    { type: 'mouseup', buttons: 0 },
+  ]);
+});
+
 async function trackEvents(target: ElementHandle) {
   const eventsHandle = await target.evaluateHandle(target => {
     const events: string[] = [];

tests/page/page-mouse.spec.ts

@@ -164,25 +164,3 @@ it('should tween mouse movement', async ({page, browserName, isAndroid}) => {
     [200, 300]
   ]);
 });
-
-it('should keep button state on move', async ({page, browserName, isAndroid}) => {
-  it.skip(isAndroid, 'Bad rounding');
-  it.fixme(browserName === 'webkit', 'https://github.com/microsoft/playwright/issues/7576');
-
-  // The test becomes flaky on WebKit without next line.
-  if (browserName === 'webkit')
-    await page.evaluate(() => new Promise(requestAnimationFrame));
-  await page.mouse.move(100, 100);
-  await page.evaluate(() => {
-    window['result'] = [];
-    document.addEventListener('mousemove', event => {
-      window['result'].push(event.buttons);
-    });
-  });
-  await page.mouse.move(110, 110);
-  await page.mouse.down();
-  await page.mouse.move(130, 130, {steps: 2});
-  await page.mouse.up();
-  await page.mouse.move(110, 110);
-  expect(await page.evaluate('result')).toEqual([0, 1, 1, 0]);
-});