test/touchevents/single-touch.html
changeset 41 d4970c8cc39c
parent 40 8b932f6d4ec8
child 42 49296bde5e04
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/touchevents/single-touch.html	Sun Apr 24 21:27:04 2011 -0700
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Touch Events: Touch area tests</title>
+  <meta name="viewport" content="width=device-width">
+  <script src="../testharness.js"></script>
+  <script>
+    setup({explicit_done: true});
+    var test_click = async_test("Interaction with mouse events");
+
+    function run() {
+      var target = document.getElementById("target");
+
+      var touchstart_received = false;
+
+      on_event(target, "touchstart", function onTouchStart(ev) {
+        touchstart_received = true;
+
+        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.");
+
+          var t = ev.touches[0];
+          assert_true(t.rotationAngle >= 0, "rotationAngle must be >= 0.");
+          assert_true(t.rotationAngle < 90, "rotationAngle must be > 90.");
+
+        }, "touchstart event attributes are correct");
+
+        done();
+      });
+
+      on_event(target, "click", function onClick(ev) {
+        test_click.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();
+
+        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>
+    #target {
+      background: yellow;
+      border: 1px solid orange;
+      padding: 2em;
+    }
+  </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="log"></div>
+</body>
+</html>