| <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 + ' recieved ' + event.type + ' with id=' + event.pointerId); |
| } else if (event.type.startsWith('touch')) { |
| debug(event.type + ' is recieved 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> |
| |
