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

   1 <!DOCTYPE HTML>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 div {
   5   margin: 10px;
   6   padding: 50px;
   7   float: left;
   8 }
   9 #console {
  10   padding: 0px;
  11   float: none;
  12 }
  13 </style>
  14
  15 <div id="grey" style="background-color:grey">
  16   <div id="lightgreen" style="background-color:lightgreen">
  17     <div id="green" style="background-color:green;">
  18     </div>
  19   </div>
  20 </div>
  21
  22 <div id="console"></div>
  23
  24 <script>
  25 description("Verifies that tapping on an element fires appropriate pointer events.");
  26
  27 var preventDefault;
  28 var logAllEvents;
  29 var receivedPEsAtTarget = [];
  30
  31 function getPhaseString(event) {
  32   return event.eventPhase == Event.NONE ? "none" :
  33       event.eventPhase == Event.CAPTURING_PHASE ? "capturing" :
  34       event.eventPhase == Event.AT_TARGET ? "target" :
  35       event.eventPhase == Event.BUBBLING_PHASE ? "bubbling" :
  36       "error";
  37 }
  38
  39 function init() {
  40   ["grey", "lightgreen", "green"].forEach(function(id) {
  41     var targetDiv = document.getElementById(id);
  42
  43     ["touchstart", "touchend", "touchmove"].forEach(function(eventName) {
  44       targetDiv.addEventListener(eventName, function(event) {
  45         if (logAllEvents)
  46           debug(id + " received " + event.type + " at phase=" + getPhaseString(event));
  47       });
  48     });
  49
  50     ["pointerdown", "pointerup", "pointermove", "pointercancel"].forEach(function(eventName) {
  51       targetDiv.addEventListener(eventName, function(event) {
  52         if (event.eventPhase == Event.AT_TARGET)
  53           receivedPEsAtTarget.push(event);
  54         if (logAllEvents || event.eventPhase == Event.AT_TARGET)
  55           debug(id + " received " + event.type + " at phase=" + getPhaseString(event));
  56         if (preventDefault)
  57           event.preventDefault();
  58       });
  59     });
  60
  61   });
  62 }
  63
  64 function testEventSequences(x, y) {
  65   eventSender.addTouchPoint(x, y);
  66   eventSender.touchStart();
  67
  68   eventSender.updateTouchPoint(0, x+20, y+20);
  69   eventSender.touchMove();
  70
  71   eventSender.releaseTouchPoint(0);
  72   eventSender.touchEnd();
  73 }
  74
  75 function testPEParamsSingleTouch(x, y) {
  76   receivedPEsAtTarget = [];
  77
  78   eventSender.addTouchPoint(x, y);
  79   eventSender.touchStart();
  80   shouldBeTrue("receivedPEsAtTarget[0].isPrimary");
  81   shouldBeEqualToNumber("receivedPEsAtTarget[0].button", 0);
  82   shouldBeEqualToNumber("receivedPEsAtTarget[0].buttons", 1);
  83   shouldBeEqualToNumber("receivedPEsAtTarget[0].clientX", x);
  84   shouldBeEqualToNumber("receivedPEsAtTarget[0].clientY", y);
  85
  86   eventSender.updateTouchPoint(0, x+20, y+20);
  87   eventSender.touchMove();
  88   shouldBeTrue("receivedPEsAtTarget[1].isPrimary");
  89   shouldBeEqualToNumber("receivedPEsAtTarget[1].button", 0);
  90   shouldBeEqualToNumber("receivedPEsAtTarget[1].buttons", 1);
  91   shouldBeEqualToNumber("receivedPEsAtTarget[1].clientX", x+20);
  92   shouldBeEqualToNumber("receivedPEsAtTarget[1].clientY", y+20);
  93
  94   eventSender.releaseTouchPoint(0);
  95   eventSender.touchEnd();
  96   shouldBeTrue("receivedPEsAtTarget[2].isPrimary");
  97   shouldBeEqualToNumber("receivedPEsAtTarget[2].button", 0);
  98   shouldBeEqualToNumber("receivedPEsAtTarget[2].buttons", 0);
  99
 100   shouldBeEqualToNumber("receivedPEsAtTarget.length", 3);
 101 }
 102
 103 function testPEParamsMultiTouch(x, y) {
 104   receivedPEsAtTarget = [];
 105
 106   eventSender.addTouchPoint(x, y);
 107   eventSender.touchStart();
 108   shouldBeTrue("receivedPEsAtTarget[0].isPrimary");
 109   var idFirst = receivedPEsAtTarget[0].pointerId;
 110   debug("receivedPEsAtTarget[0].pointerId=" + idFirst)
 111
 112   eventSender.addTouchPoint(x+10, y+10);
 113   eventSender.touchStart();
 114   shouldBeFalse("receivedPEsAtTarget[1].isPrimary");
 115   var idSecond = receivedPEsAtTarget[1].pointerId;
 116   debug("receivedPEsAtTarget[1].pointerId=" + idSecond)
 117
 118   eventSender.updateTouchPoint(1, x+20, y+20);
 119   eventSender.touchMove();
 120   shouldBeFalse("receivedPEsAtTarget[2].isPrimary");
 121   shouldBeEqualToNumber("receivedPEsAtTarget[2].pointerId", idSecond);
 122
 123   eventSender.releaseTouchPoint(0);
 124   eventSender.touchEnd();
 125   shouldBeTrue("receivedPEsAtTarget[3].isPrimary");
 126   shouldBeEqualToNumber("receivedPEsAtTarget[3].pointerId", idFirst);
 127
 128   eventSender.updateTouchPoint(0, x+10, y+10);
 129   eventSender.touchMove();
 130   shouldBeFalse("receivedPEsAtTarget[4].isPrimary");
 131   shouldBeEqualToNumber("receivedPEsAtTarget[4].pointerId", idSecond);
 132
 133   eventSender.addTouchPoint(x, y);
 134   eventSender.touchStart();
 135   shouldBeFalse("receivedPEsAtTarget[5].isPrimary");
 136   var idThird = receivedPEsAtTarget[5].pointerId;
 137   debug("receivedPEsAtTarget[5].pointerId=" + idThird)
 138
 139   eventSender.releaseTouchPoint(0);
 140   eventSender.touchEnd();
 141   shouldBeFalse("receivedPEsAtTarget[6].isPrimary");
 142   shouldBeEqualToNumber("receivedPEsAtTarget[6].pointerId", idSecond);
 143
 144   eventSender.releaseTouchPoint(0);
 145   eventSender.touchEnd();
 146   shouldBeFalse("receivedPEsAtTarget[7].isPrimary");
 147   shouldBeEqualToNumber("receivedPEsAtTarget[7].pointerId", idThird);
 148
 149   eventSender.addTouchPoint(x, y);
 150   eventSender.touchStart();
 151   shouldBeTrue("receivedPEsAtTarget[8].isPrimary");
 152
 153   shouldBeEqualToNumber("receivedPEsAtTarget.length", 9);
 154 }
 155
 156 function runTests() {
 157   var rect = document.getElementById("green").getBoundingClientRect();
 158   var x = rect.left + 10;
 159   var y = rect.top + 10;
 160
 161   logAllEvents = true;
 162   preventDefault = false;
 163
 164   debug("--- test PE+TE event sequences without preventDefault ---");
 165   testEventSequences(x, y);
 166   debug("");
 167
 168   preventDefault = true;
 169
 170   debug("--- test PE+TE event sequences with PE preventDefault ---");
 171   testEventSequences(x, y);
 172   debug("");
 173
 174   logAllEvents = false;
 175
 176   debug("--- test PE params for single-touch ---");
 177   testPEParamsSingleTouch(x, y);
 178   debug("");
 179
 180   debug("--- test PE isPrimary values ---");
 181   testPEParamsMultiTouch(x, y);
 182   debug("");
 183 }
 184
 185 init();
 186 if (window.eventSender)
 187   runTests();
 188 else
 189   debug("This test requires eventSender");
 190
 191 </script>