pointerevent_touch-action_two-finger_interaction.html (4488B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Event: touch-action test for two-finger interaction</title> 5 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> 6 <link rel="author" title="Google" href="http://www.google.com "/> 7 <link rel="help" href="https://compat.spec.whatwg.org/#touch-action" /> 8 <meta name="assert" content="Tests that a two-finger pan gesture is cancelled in 'touch-action: pan-x pan-y' but is allowed in 'touch-action: pinch-zoom'"/> 9 <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <script type="text/javascript" src="../pointerevent_support.js"></script> 16 <script type="text/javascript"> 17 var event_log = []; 18 var actions_promise; 19 var down_ids = new Set(); 20 var release_ids = new Set(); 21 22 function resetTestState() { 23 event_log = []; 24 down_ids = new Set(); 25 release_ids = new Set(); 26 } 27 28 function run() { 29 var test_pointer_events = [ 30 setup_pointerevent_test("two-finger pan on 'touch-action: pan-x pan-y'", ["touch"]), 31 setup_pointerevent_test("two-finger pan on 'touch-action: pinch-zoom'", ["touch"]) 32 ]; 33 var expected_events = [ 34 "pointerdown@black, pointerdown@black, pointerup@black, pointerup@black", 35 "pointerdown@grey, pointerdown@grey, pointercancel@grey, pointercancel@grey" 36 ]; 37 var current_test_index = 0; 38 var black = document.getElementById("black"); 39 var grey = document.getElementById("grey"); 40 var done = document.getElementById("done"); 41 42 on_event(done, "click", function() { 43 test_pointer_events[current_test_index].step(function () { 44 assert_equals(down_ids.size, 2); 45 assert_equals(release_ids.size, 2); 46 assert_true([...down_ids].every(value => release_ids.has(value))); 47 assert_equals(event_log.join(", "), expected_events[current_test_index]); 48 }); 49 50 // Make sure the test finishes after all the input actions are completed. 51 actions_promise.then( () => { 52 test_pointer_events[current_test_index++].done(); 53 if (current_test_index < 2) { 54 actions_promise = twoFingerDrag(grey).then(function() { 55 return clickInTarget("touch", done); 56 }); 57 } 58 }); 59 }); 60 61 var targets = [black, grey]; 62 63 ["pointerdown", "pointerup", "pointercancel"].forEach(function(eventName) { 64 targets.forEach(function(target){ 65 on_event(target, eventName, function (event) { 66 event_log.push(event.type + "@" + event.target.id); 67 68 if (event.type == "pointerdown") { 69 down_ids.add(event.pointerId); 70 } else { 71 release_ids.add(event.pointerId); 72 } 73 }); 74 }); 75 }); 76 77 // Inject touch inputs. 78 actions_promise = twoFingerDrag(black).then(function() { 79 return clickInTarget("touch", done); 80 }); 81 } 82 </script> 83 <style> 84 .box { 85 width: 250px; 86 height: 150px; 87 float: left; 88 margin: 10px; 89 } 90 91 #black { 92 touch-action: pan-x pan-y; 93 background-color: black; 94 } 95 96 #grey { 97 touch-action: pinch-zoom; 98 background-color: grey; 99 } 100 101 #done { 102 float: left; 103 padding: 20px; 104 } 105 </style> 106 </head> 107 <body onload="run()"> 108 <h1>Pointer Event: touch-action test for two-finger interaction</h1> 109 <h2 id="pointerTypeDescription"></h2> 110 <h4> 111 Tests that a two-finger pan gesture is cancelled in 'touch-action: pan-x pan-y' but is allowed in 'touch-action: pinch-zoom' 112 </h4> 113 <ol> 114 <li>Touch on Black with two fingers and drag both fingers down at same speed.</li> 115 <li>Tap on Done.</li> 116 <li>Touch on Grey with two fingers and drag both fingers down at same speed.</li> 117 <li>Tap on Done.</li> 118 </ol> 119 <div class="box" id="black"></div> 120 <input type="button" id="done" value="Done" /> 121 <div class="box" id="grey"></div> 122 <div id="log"></div> 123 </body> 124 </html>