tests/touch-events-v1/submissions/Mozilla/multi-touch.html
changeset 152 3aed607ba8d1
child 153 8066aa392c1b
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/touch-events-v1/submissions/Mozilla/multi-touch.html	Tue Jan 17 10:09:31 2012 -0500
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Touch Events: Multi-touch tests</title>
+  <meta name="viewport" content="width=device-width">
+  <script src="../testharness.js"></script>
+  <script>
+    setup({explicit_done: true});
+
+    function run() {
+      var target0 = document.getElementById("target0");
+      var target1 = document.getElementById("target1");
+
+      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 = 0;
+      var touchmove_received = false;
+      var invalid_touchmove_received = false;
+      var maxTouchCount = 0;
+
+      on_event(target0, "touchstart", function onTouchStart(ev) {
+        ev.preventDefault();
+
+        if (!touchstart_received) {
+          test_touchstart.step(function() {
+            assert_false(touchmove_received, "touchstart precedes touchmove");
+          });
+        } else {
+          test(function() {
+            assert_true(ev.touches.length == 2, "Should have seen 2 touches.");
+            assert_true(ev.changedTouches.length == 1, "Should have only 1 current touch.");
+            assert_true(ev.targetTouches.length == 2, "Should have 2 target touches.");
+          }, "Multiple touch objects detected when handling touchstart.");
+        }
+        ++touchstart_received;
+        test_touchstart.done();
+        test_mousedown.done(); // If we got here, then the mouse event test is not needed.
+        
+      });
+
+
+      on_event(target0, "touchmove", function onTouchMove(ev) {
+        ev.preventDefault();
+        touchmove_received = true;
+
+        test_touchmove.step(function() {
+          assert_true(touchstart_received != 0, "touchend follows touchstart");
+        });
+        test_touchmove.done();
+
+        maxTouchCount =
+          ev.touches.length > maxTouchCount ? ev.touches.length : maxTouchCount 
+      });
+
+      on_event(target1, "touchmove", function onTouchMove(ev) {
+        invalid_touchmove_received = true;
+      });
+
+      on_event(window, "touchend", function onTouchEnd(ev) {
+        test_touchend.step(function() {
+          assert_equals(ev.target, target0, "touchend is dispatched to the original target");
+          assert_true(touchstart_received != 0, "touchend follows touchstart");
+          assert_true(touchmove_received, "touchend follows touchmove");
+          assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
+          assert_equals(touchstart_received, 2, "Should have got 2 touchstart events before touchend.")
+        });
+        test_touchend.done();
+
+        test(function() {
+          assert_true(maxTouchCount == 2, "Should have seen 2 touches.");
+        }, "Multiple touch objects detected.");
+
+        
+        done();
+      });
+
+
+      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_mousedown.done();
+
+        if (!touchstart_received) {
+          // Abort the tests.  If touch events are not supported, then most of
+          // the other event handlers will never be called, and the test will
+          // time out with misleading results.
+          done();
+        }
+      });
+    }
+  </script>
+  <style>
+    div {
+      margin: 0em;
+      padding: 2em;
+    }
+    #target0 {
+      background: yellow;
+      border: 1px solid orange;
+    }
+    #target1 {
+      background: lightblue;
+      border: 1px solid blue;
+    }
+  </style>
+</head>
+<body onload="run()">
+  <h1>Touch Events: Multi-touch tests</h1>
+  <div id="target0">
+    Touch this box with one finger, then another one...
+  </div>
+  <div id="target1">
+    ...then drag to this box and lift your fingers.
+  </div>
+  <div id="log"></div>
+</body>
+</html>