touch-capture-in-iframe.html | Explore in Territory

<script src='../../../resources/js-test.js'></script>
<style>
iframe {
  width: 300px;
  height: 300px;
  top: 100px;
  left: 50px;
  border: 0;
  position: absolute;
  background: green;
}
#outerFrame {
  width: 500px;
  height: 500px;
  background: blue;
}
</style>

<div id='outerFrame'>
<iframe id='innerFrameElement' srcdoc="
  <body id='innerFrame' style='height:500px; width: 500px; padding: 0; margin: 0;'>
    <script>
      top.document.testEventList.forEach(function(eventName) {
        document.addEventListener(eventName, function(event) {
          if (top.document.releaseTouchCapture && event.type == 'pointerdown') {
            top.debug('--- Release pointer capture for ' + event.pointerId + ' ---');
            event.target.releasePointerCapture(event.pointerId);
          }
          top.logEvent(event);
        });
      });
    </script>
  </body>">
</iframe>
</div>

<div id='console'></div>

<script>
var outerFrameX = 20;
var outerFrameY = 20;
var innerFrameX = 200;
var innerFrameY = 200;

function logEvent(event) {
  if (event.type.includes('pointer')) {
    debug(event.target.id + ' received ' + event.type + ' with id=' + event.pointerId);
  } else if (event.type.startsWith('touch')) {
    debug(event.type + ' is received with changedTouches.length=' + event.changedTouches.length + ':');
    for(var i=0; i<event.changedTouches.length; i++) {
      debug('  Touch with id=' + event.changedTouches[i].identifier + ' with target = ' + event.changedTouches[i].target.id);
    }
  }
}

document.testEventList = ['pointerup', 'pointerdown', 'pointermove', 'gotpointercapture', 'lostpointercapture', 'pointercancel',
                          'touchstart', 'touchmove', 'touchend'];
document.testEventList.forEach(function(eventName) {
  document.getElementById('outerFrame').addEventListener(eventName, function(event) {
    if (document.releaseTouchCapture && event.type == 'pointerdown') {
      debug('--- Release pointer capture for ' + event.pointerId + ' ---');
      event.target.releasePointerCapture(event.pointerId);
    }
    logEvent(event);
  });
});

document.releaseTouchCapture = true;

function testScenario(firstFingerInitFrame, secondFingerInitFrame, releaseTouchCapture) {
  document.releaseTouchCapture = releaseTouchCapture;
  var firstFingerX1 = firstFingerInitFrame == "innerFrame" ? innerFrameX : outerFrameX;
  var firstFingerY1 = firstFingerInitFrame == "innerFrame" ? innerFrameY : outerFrameY;
  var firstFingerX2 = firstFingerInitFrame == "outerFrame" ? innerFrameX : outerFrameX;
  var firstFingerY2 = firstFingerInitFrame == "outerFrame" ? innerFrameY : outerFrameY;
  var secondFingerX1 = secondFingerInitFrame == "innerFrame" ? innerFrameX : outerFrameX;
  var secondFingerY1 = secondFingerInitFrame == "innerFrame" ? innerFrameY : outerFrameY;
  var secondFingerX2 = secondFingerInitFrame == "outerFrame" ? innerFrameX : outerFrameX;
  var secondFingerY2 = secondFingerInitFrame == "outerFrame" ? innerFrameY : outerFrameY;
  var firstFingerFinalFrame = (firstFingerInitFrame == 'innerFrame') ? 'outerFrame' : 'innerFrame';
  var secondFingerFinalFrame = (secondFingerInitFrame == 'innerFrame') ? 'outerFrame' : 'innerFrame';

  debug('==== Finger1 in ' + firstFingerInitFrame + ' and Finger2 in ' + secondFingerInitFrame + (releaseTouchCapture ? ' with releaseTouchCapture' : '') + ' ====');
  debug('*** Put first finger down in ' + firstFingerInitFrame + ' and move ***');
  eventSender.addTouchPoint(firstFingerX1, firstFingerY1);
  eventSender.touchStart();
  eventSender.updateTouchPoint(0, firstFingerX1, firstFingerY1);
  eventSender.touchMove();
  debug('');

  debug('*** Put second finger in ' + secondFingerInitFrame + ' and move ***');
  eventSender.addTouchPoint(secondFingerX1, secondFingerY1);
  eventSender.touchStart();
  eventSender.updateTouchPoint(1, secondFingerX1, secondFingerY1);
  eventSender.touchMove();
  debug('');

  debug('*** Move first finger to ' + firstFingerFinalFrame + ' ***');
  eventSender.updateTouchPoint(0, firstFingerX2, firstFingerY2);
  eventSender.touchMove();
  debug('');

  debug('*** Move second finger to ' + secondFingerFinalFrame + ' ***');
  eventSender.updateTouchPoint(1, secondFingerX2, secondFingerY2);
  eventSender.touchMove();
  debug('');

  debug('*** Releasing fingers ***');
  eventSender.releaseTouchPoint(0);
  eventSender.releaseTouchPoint(1);
  eventSender.touchEnd();
  debug('');
}

function runTests() {
  testScenario('innerFrame', 'outerFrame', false);
  testScenario('outerFrame', 'innerFrame', false);
  testScenario('innerFrame', 'innerFrame', false);
  testScenario('outerFrame', 'outerFrame', false);

  testScenario('innerFrame', 'outerFrame', true);
  testScenario('outerFrame', 'innerFrame', true);
  testScenario('innerFrame', 'innerFrame', true);
  testScenario('outerFrame', 'outerFrame', true);
  testRunner.notifyDone();
}

if (window.eventSender) {
  testRunner.waitUntilDone();
  window.onload = runTests;
} else
  debug('This test requires eventSender');

description("This test verifies touch and corresponding pointerevent targets inside and outside the iframe.");

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