touch-capture.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../../../resources/js-test.js"></script>
<style>
div.box {
  margin: 5px;
  padding: 20px;
  float: left;
}
#grey {
  width: 50px;
  height: 50px;
}
</style>

<div id="grey" class="box" style="background-color:grey">
  <div id="green" class="box" style="background-color:green;">
  </div>
</div>
<div id="blue" class="box" style="background-color:blue;">
</div>

<div id="console"></div>

<script>
description("Verifies that pointer capture works for touch.");

var ACTION_NONE = 0;
var ACTION_RELEASE = 1;
var ACTION_RESET = 2;

document.captureAction = ACTION_NONE;
document.movecount = 0;

var rect = document.getElementById("green").getBoundingClientRect();
var x1 = rect.left + 5;
var y1 = rect.top + 5;

var rect = document.getElementById("blue").getBoundingClientRect();
var x2 = rect.left + 5;
var y2 = rect.top + 5;

function init() {
  var eventList = ["touchstart", "touchmove", "touchend", "touchcancel",
                   "pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove", "pointerdown", "pointerup", "pointercancel",
                   "gotpointercapture", "lostpointercapture"];

  document.addEventListener("lostpointercapture", function(event) {
    if (event.eventPhase == Event.AT_TARGET) {
      debug("document received " + event.type + " " + event.pointerId);
    }
  });
  ["grey", "green", "blue"].forEach(function(id) {
    var targetDiv = document.getElementById(id);
    eventList.forEach(function(eventName) {
      targetDiv.addEventListener(eventName, function(event) {
        if (event.eventPhase == Event.AT_TARGET) {
          if (event.type.includes("pointer")) {
            debug(id + " received " + event.type + " " + event.pointerId);
            if (document.captureAction == ACTION_RESET && event.type == "pointerdown") {
              debug("     --- Set pointer capture to blue " + event.pointerId + " ---");
              document.getElementById('blue').setPointerCapture(event.pointerId);
              document.captureAction = ACTION_NONE;
            }
            if (document.captureAction == ACTION_RELEASE && event.type == "pointermove" && ++document.movecount > 1) {
              debug("     &&& Releasing pointer capture for " + event.pointerId + " &&&");
              event.target.releasePointerCapture(event.pointerId);
              document.captureAction = ACTION_NONE;
            }
          } else
            debug(id + " received " + event.type);
        }
      });
    });
  });
}

function singleTouchTestScenario(touchCancel, captureAction) {
  var captureName = captureAction == ACTION_RELEASE ? " with capture release" :
                    captureAction == ACTION_RESET ? " with capture reset" : "";

  debug(" ======= Touch and " + (touchCancel ? "cancel" : "release") + captureName + " =======");

  document.captureAction = captureAction;
  document.movecount = 0;

  debug("    **** First touch on green box & jiggle ****");
  eventSender.addTouchPoint(x1, y1)
  eventSender.touchStart();
  eventSender.updateTouchPoint(0, x1+1, y1+1);
  eventSender.touchMove();

  debug("    **** Move to blue box & jiggle ****");
  eventSender.updateTouchPoint(0, x2, y2);
  eventSender.touchMove();
  eventSender.updateTouchPoint(0, x2+1, y2+1);
  eventSender.touchMove();

  if (touchCancel) {
    debug("    **** Cancel touch ****");
    eventSender.cancelTouchPoint(0);
    eventSender.touchCancel();
  } else {
    debug("    **** Release touch ****");
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
  }

  debug("");
}


function multiTouchTestScenario(touchCancel, captureAction) {
  var captureName = captureAction == ACTION_RELEASE ? " with capture release" :
                    captureAction == ACTION_RESET ? " with capture reset" : "";

  debug(" ======= Multitouch and " + (touchCancel ? "cancel" : "release") + captureName + " =======");

  document.captureAction = captureAction;
  document.movecount = 0;

  debug("    **** First touch on green & second touch on blue & jiggle ****");
  eventSender.addTouchPoint(x1, y1)
  eventSender.touchStart();
  eventSender.addTouchPoint(x2, y2)
  eventSender.touchStart();
  eventSender.updateTouchPoint(0, x1+1, y1+1);
  eventSender.touchMove();
  eventSender.updateTouchPoint(1, x2+1, y2+1);
  eventSender.touchMove();

  debug("    **** Move first touch to blue & second touch to green ****");
  eventSender.updateTouchPoint(0, x2, y2);
  eventSender.touchMove();
  eventSender.updateTouchPoint(1, x1, y1);
  eventSender.touchMove();

  if (touchCancel) {
    debug("    **** Cancel first touch ****");
    eventSender.cancelTouchPoint(0);
    eventSender.touchCancel();
  } else {
    debug("    **** Release first touch ****");
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
  }

  debug("    **** Jiggle second touch on green ****");
  eventSender.updateTouchPoint(0, x1+1, y1+1);
  eventSender.touchMove();

  if (touchCancel) {
    debug("    **** Cancel second touch ****");
    eventSender.cancelTouchPoint(0);
    eventSender.touchCancel();
  } else {
    debug("    **** Release second touch ****");
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
  }

  debug("");
}

function runTests() {
  [ACTION_NONE, ACTION_RELEASE, ACTION_RESET].forEach(function(action) {
    singleTouchTestScenario(false, action);
    singleTouchTestScenario(true, action);
    multiTouchTestScenario(false, action);
    multiTouchTestScenario(true, action);
  });
}

init();
if (window.eventSender)
  runTests();
else
  debug("This test requires eventSender");

</script>
chromium/third_party/blink/web_tests/fast/events/pointerevents/touch-capture.html
