test/touchevents/single-touch.html
changeset 55 7df98116715b
parent 52 a3bdd103c7d9
child 56 6343517cbbee
--- a/test/touchevents/single-touch.html	Wed Apr 27 06:20:31 2011 -0700
+++ b/test/touchevents/single-touch.html	Wed Apr 27 07:02:31 2011 -0700
@@ -8,17 +8,29 @@
     setup({explicit_done: true});
 
     function run() {
-      var target = document.getElementById("target");
+      var target0 = document.getElementById("target0");
+      var target1 = document.getElementById("target1");
 
-      var test_click = async_test("Interaction with mouse events");
       var test_touchstart = async_test("touchstart event received");
+      var test_touchmove = async_test("touchmove event received");
       var test_touchend = async_test("touchend event received");
+      var test_mousedown = async_test("Interaction with mouse events");
 
       var touchstart_received = false;
+      var touchmove_received = false;
+      var touchend_received = false;
+      var invalid_touchmove_received = false;
 
-      on_event(target, "touchstart", function onTouchStart(ev) {
+      on_event(target0, "touchstart", function onTouchStart(ev) {
+        ev.preventDefault();
+
         touchstart_received = true;
+        test_touchstart.step(function() {
+          assert_false(touchmove_received, "touchstart precedes touchmove");
+          assert_false(touchend_received, "touchstart precedes touchend");
+        });
         test_touchstart.done();
+        test_mousedown.done(); // If we got here, then the mouse event test is not needed.
 
         test(function() {
           assert_true(ev.target instanceof Element, "target must be an Element.");
@@ -75,9 +87,38 @@
 
       });
 
-      on_event(target, "touchend", function onTouchStart(ev) {
+      on_event(target0, "touchmove", function onTouchMove(ev) {
+        ev.preventDefault();
+
+        if (touchmove_received)
+          return;
+        touchmove_received = true;
+
+        test_touchmove.step(function() {
+          assert_true(touchstart_received, "touchend follows touchstart");
+          assert_false(touchend_received, "touchmove precedes touchend");
+        });
+        test_touchmove.done();
+
+        test(function() {
+          assert_equals(ev.touches.length, 1, "One touch point.");
+          assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
+          assert_equals(ev.targetTouches.length, 1, "One target touch point.");
+        }, "touchmove TouchList lengths are correct.");
+      });
+
+      on_event(target1, "touchmove", function onTouchMove(ev) {
+        invalid_touchmove_received = true;
+      });
+
+      on_event(window, "touchend", function onTouchStart(ev) {
+        touchend_received = true;
+
         test_touchend.step(function() {
+          assert_equals(ev.target, target0, "touchend is dispatched to the original target");
           assert_true(touchstart_received, "touchend follows touchstart");
+          assert_true(touchmove_received, "touchend follows touchmove");
+          assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
         });
         test_touchend.done();
 
@@ -123,15 +164,15 @@
       });
 
 
-      on_event(target, "click", function onClick(ev) {
-        test_click.step(function() {
+      on_event(target0, "mousedown", function onMouseDown(ev) {
+        test_mousedown.step(function() {
           assert_true(touchstart_received,
             "The touchstart event must be dispatched before any mouse " +
             "events. (If this fails, it might mean that the user agent does " +
             "not implement W3C touch events at all.)"
           );
         });
-        test_click.done();
+        test_mousedown.done();
 
         if (!touchstart_received) {
           // Abort the tests.  If touch events are not supported, then most of
@@ -143,18 +184,28 @@
     }
   </script>
   <style>
-    #target {
+    div {
+      margin: 0em;
+      padding: 2em;
+    }
+    #target0 {
       background: yellow;
       border: 1px solid orange;
-      padding: 2em;
+    }
+    #target1 {
+      background: lightblue;
+      border: 1px solid blue;
     }
   </style>
 </head>
 <body onload="run()">
   <h1>Touch area tests</h1>
-  <p id="target">
-    Tap this element with one finger (or other pointing device).
-  </p>
+  <div id="target0">
+    Touch this box with one finger (or other pointing device)...
+  </div>
+  <div id="target1">
+    ...then drag to this box and lift your finger.
+  </div>
   <div id="log"></div>
 </body>
 </html>