mouse-event-buttons-attribute.html | Explore in Territory

<!DOCTYPE html>
<style>
#target {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 0px;
  top: 0px;
}
#drag{
  position: absolute;
  left: 0px;
  top: 100px;
}
</style>
<div id="target"></div>
<img id="drag" src="resources/greenbox30.png" draggable>

<script src="../../resources/js-test.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script>
jsTestIsAsync = true;
const L = 'leftButton';
const R = 'rightButton';
const M = 'middleButton';

let seqNo = 0;
let testSet = [
  { initialButtons: [],        action: doubleClickAction },
  { initialButtons: [R],       action: clickAction },
  { initialButtons: [M, R],    action: clickAction },
  { initialButtons: [L, M, R], action: moveAction },
  { initialButtons: [],        action: rightClickAction, showContextMenuOnMouseUp: false },
  { initialButtons: [],        action: rightClickAction, showContextMenuOnMouseUp: true },
  { initialButtons: [L, R],    action: wheelAction },
  { initialButtons: [],        action: doubleTapAction },
  { initialButtons: [],        action: tapAction },
  { initialButtons: [],        action: longPressAction, showContextMenuOnMouseUp: false },
  { initialButtons: [],        action: longPressAction, showContextMenuOnMouseUp: true },
  { initialButtons: [],        action: longTapAction, showContextMenuOnMouseUp: false },
  { initialButtons: [],        action: longTapAction, showContextMenuOnMouseUp: true },
  { initialButtons: [],        action: dragDropAction },
  { initialButtons: [R],       action: dragDropAction },
  { initialButtons: [M, R],    action: dragDropAction },
];

function moveAction()
{
  eventSender.mouseMoveTo(-1, -1);
  eventSender.mouseMoveTo(50, 50);
}

function clickAction()
{
  moveAction();
  eventSender.mouseDown(0);
  eventSender.mouseUp(0);
}

function rightClickAction()
{
  moveAction();
  eventSender.mouseDown(2);
  eventSender.mouseUp(2);
}

function doubleClickAction()
{
  moveAction();
  eventSender.mouseDown(0);
  eventSender.mouseUp(0);
  eventSender.mouseDown(0);
  eventSender.mouseUp(0);
}

async function wheelAction(initialButtons)
{
  let targetDiv = document.getElementById('target');  
  let buttons = []; 
  initialButtons.forEach(function(item) {
    if (item == L)
      buttons.push(Buttons.LEFT);
    else if (item == R)
      buttons.push(Buttons.RIGHT);
    else if (item == M)
      buttons.push(Buttons.Middle);
  })
  let scroller_target = elementCenter(targetDiv);
  await smoothScrollWithXY(0, 1, scroller_target.x, scroller_target.y,
                           GestureSourceType.MOUSE_INPUT, SPEED_INSTANT,
                           true /* precise_scrolling_deltas */,
                           false /* scroll_by_page */, true /* cursor_visible */,
                           false /* scroll_by_percentage */,
                           "" /* modifier_keys */, buttons.join(','));
}

function tapAction()
{
  eventSender.gestureTap(50, 50);
}

function longPressAction()
{
  eventSender.gestureLongPress(50, 50);
}

function longTapAction()
{
  eventSender.gestureLongPress(50, 50);
  eventSender.gestureLongTap(50, 50);
}

function doubleTapAction()
{
  eventSender.gestureTap(50, 50, 1);
  eventSender.gestureTap(50, 50, 2);
}

function dragDropAction()
{
  eventSender.mouseMoveTo(10, 110);
  eventSender.mouseDown(0);
  eventSender.mouseMoveTo(10, 80);
  eventSender.mouseMoveTo(10, 110);
  eventSender.mouseMoveTo(10, 80);
  eventSender.mouseUp(0);
}

function printTestInfo(testItem)
{
  let showContextMenuOnMouseUp = "";
  if (testItem.showContextMenuOnMouseUp != undefined)
    showContextMenuOnMouseUp = "and showContextMenuOnMouseUp=" +
        testItem.showContextMenuOnMouseUp + " ";

  debug('===== ' + testItem.action.name + ' with initial state=[' + testItem.initialButtons + '] '
      + showContextMenuOnMouseUp + '=====');
}

function init() {
  let targetDiv = document.getElementById('target');
  let dragImg = document.getElementById('drag');
  let eventList = ['dblclick', 'click', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'mousewheel', 'dragstart', 'dragend', 'dragenter', 'dragleave', 'dragover', 'drag', 'contextmenu'];
  eventList.forEach(function(eventName) {
    targetDiv.addEventListener(eventName, function(event) {
      debug(++seqNo + ". targetDiv received " + event.type + " buttons: " + event.buttons);
    });
    dragImg.addEventListener(eventName, function(event) {
      debug(++seqNo + ". dragImg received " + event.type + " buttons: " + event.buttons);
    });
  });
}

window.onload=async function() {
  init();

  for (let i = 0; i < testSet.length; i++) {
    printTestInfo(testSet[i]);

    // Reset the state for the new test
    seqNo = 0;
    eventSender.setMouseButtonState(-1, testSet[i].initialButtons);
    internals.settings.setShowContextMenuOnMouseUp(testSet[i].showContextMenuOnMouseUp);

    await testSet[i].action(testSet[i].initialButtons);

    // Reset the mouse position
    if(window.eventSender)
      eventSender.mouseMoveTo(-1, -1);

    debug('');
  }

  finishJSTest();
}

</script>
chromium/third_party/blink/web_tests/fast/events/mouse-event-buttons-attribute.html
