third_party/WebKit/LayoutTests/fast/events/pointerevents/touch-pointercancel.html

   1 <!DOCTYPE HTML>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4   div.test {
   5     margin: 10px;
   6     width: 100px;
   7     height: 200px;
   8     overflow: scroll;
   9     border: solid 1px;
  10     float: left;
  11   }
  12 </style>
  13
  14 <div id="target" class="test"></div>
  15
  16 <div id="console"></div>
  17
  18 <script>
  19 description("Verifies that pointercancel events are fired correctly on touch.");
  20
  21 var eventToPreventDefault = "";
  22
  23 function init() {
  24   var eventList = ["pointerdown", "pointerup", "pointermove", "pointercancel",
  25                    "touchstart", "touchend", "touchmove", "touchcancel"];
  26
  27   eventList.forEach(function(eventName) {
  28     document.getElementById("target").addEventListener(eventName, function(event) {
  29       var idMsg;
  30       if (event.type.startsWith("pointer"))
  31         idMsg = ", pointerId=" + event.pointerId;
  32       else {
  33         idMsg = ", touchIds=";
  34         touches = event.changedTouches;
  35         for (var i = 0; i < touches.length; ++i) {
  36           idMsg += touches[i].identifier;
  37         };
  38       }
  39
  40       var preventDefaultMsg = "";
  41
  42       if (event.type == eventToPreventDefault) {
  43         event.preventDefault();
  44         preventDefaultMsg = ", prevented default";
  45       }
  46
  47       debug("Received " + event.type + idMsg + preventDefaultMsg);
  48     });
  49   });
  50 }
  51
  52 function testSingleDrag(uncanceledMoveCausesScroll) {
  53   var rect = document.getElementById("target").getBoundingClientRect();
  54   var x = rect.left + 50;
  55   var y = rect.top + 50;
  56
  57   eventSender.addTouchPoint(x, y);
  58   eventSender.touchStart();
  59
  60   eventSender.updateTouchPoint(0, x, y+50);
  61   eventSender.touchMove();
  62
  63   eventSender.updateTouchPoint(0, x, y+100);
  64   if (uncanceledMoveCausesScroll)
  65     eventSender.touchMoveCausingScrollIfUncanceled();
  66   else
  67     eventSender.touchMove();
  68
  69   eventSender.updateTouchPoint(0, x, y+150);
  70   eventSender.touchMove();
  71
  72   eventSender.releaseTouchPoint(0);
  73   eventSender.touchEnd();
  74 }
  75
  76 function testMultiDrag(uncanceledMoveCausesScroll) {
  77   var rect;
  78
  79   rect = document.getElementById("target").getBoundingClientRect();
  80   var x0 = rect.left + 30;
  81   var x1 = rect.left + 50;
  82   var x2 = rect.left + 70;
  83   var x3 = rect.left + 55;
  84   var y = rect.top + 50;
  85
  86   eventSender.addTouchPoint(x0, y);
  87   eventSender.addTouchPoint(x1, y);
  88   eventSender.addTouchPoint(x2, y);
  89   eventSender.touchStart();
  90
  91   y += 50;
  92   eventSender.updateTouchPoint(0, x0, y);
  93   eventSender.updateTouchPoint(1, x1, y);
  94   eventSender.updateTouchPoint(2, x2, y);
  95   eventSender.touchMove();
  96
  97   y += 50;
  98   eventSender.updateTouchPoint(0, x0, y);
  99   eventSender.updateTouchPoint(1, x1, y);
 100   eventSender.updateTouchPoint(2, x2, y);
 101   if (uncanceledMoveCausesScroll)
 102     eventSender.touchMoveCausingScrollIfUncanceled();
 103   else
 104     eventSender.touchMove();
 105
 106   eventSender.addTouchPoint(x3, y);
 107   eventSender.touchStart();
 108
 109   y += 50;
 110   eventSender.updateTouchPoint(0, x0, y);
 111   eventSender.updateTouchPoint(1, x1, y);
 112   eventSender.updateTouchPoint(2, x2, y);
 113   eventSender.updateTouchPoint(3, x3, y);
 114   eventSender.touchMove();
 115
 116   eventSender.releaseTouchPoint(0);
 117   eventSender.releaseTouchPoint(1);
 118   eventSender.releaseTouchPoint(2);
 119   eventSender.releaseTouchPoint(3);
 120   eventSender.touchEnd();
 121 }
 122
 123 function testMultiCancel() {
 124   var rect;
 125
 126   rect = document.getElementById("target").getBoundingClientRect();
 127   var x0 = rect.left + 30;
 128   var x1 = rect.left + 50;
 129   var x2 = rect.left + 70;
 130   var y = rect.top + 50;
 131
 132   eventSender.addTouchPoint(x0, y);
 133   eventSender.addTouchPoint(x1, y);
 134   eventSender.addTouchPoint(x2, y);
 135   eventSender.touchStart();
 136
 137   eventSender.cancelTouchPoint(2);
 138   eventSender.touchCancel();
 139
 140   y += 50;
 141   eventSender.updateTouchPoint(0, x0, y);
 142   eventSender.updateTouchPoint(1, x2, y);
 143   eventSender.touchMove();
 144
 145   eventSender.cancelTouchPoint(0);
 146   eventSender.cancelTouchPoint(1);
 147   eventSender.touchCancel();
 148 }
 149
 150 function runTests() {
 151   debug("--- single drag tests ---");
 152   debug("");
 153
 154   debug("-- preventDefault on none, without uncanceledMoveCausesScroll --");
 155   eventToPreventDefault = "-none-";
 156   testSingleDrag(false);
 157   debug("");
 158
 159   debug("-- preventDefault on pointermove, without uncanceledMoveCausesScroll --");
 160   eventToPreventDefault = "pointermove";
 161   testSingleDrag(false);
 162   debug("");
 163
 164   debug("-- preventDefault on touchmove, without uncanceledMoveCausesScroll --");
 165   eventToPreventDefault = "touchmove";
 166   testSingleDrag(false);
 167   debug("");
 168
 169   debug("-- preventDefault on none, with uncanceledMoveCausesScroll --");
 170   eventToPreventDefault = "-none-";
 171   testSingleDrag(true);
 172   debug("");
 173
 174   debug("-- preventDefault on pointermove, with uncanceledMoveCausesScroll --");
 175   eventToPreventDefault = "pointermove";
 176   testSingleDrag(true);
 177   debug("");
 178
 179   debug("-- preventDefault on touchmove, with uncanceledMoveCausesScroll --");
 180   eventToPreventDefault = "touchmove";
 181   testSingleDrag(true);
 182   debug("");
 183
 184   debug("--- multi drag tests ---");
 185   debug("");
 186
 187   debug("-- preventDefault on none, without uncanceledMoveCausesScroll --");
 188   eventToPreventDefault = "-none-";
 189   testMultiDrag(false);
 190   debug("");
 191
 192   debug("-- preventDefault on none, with uncanceledMoveCausesScroll --");
 193   eventToPreventDefault = "-none-";
 194   testMultiDrag(true);
 195   debug("");
 196
 197   debug("--- multi cancel tests ---");
 198   debug("");
 199   testMultiCancel();
 200   debug("");
 201 }
 202
 203
 204 init();
 205 if (window.eventSender)
 206   runTests();
 207 else
 208   debug("This test requires eventSender");
 209
 210 </script>