tests/touch-events-v1/submissions/Moz-Nok-Goog/single-touch.html
changeset 162 cde6c06f4579
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/touch-events-v1/submissions/Moz-Nok-Goog/single-touch.html	Fri Oct 05 14:36:04 2012 -0400
@@ -0,0 +1,408 @@
+<!DOCTYPE HTML>
+<html>
+<!-- 
+     Test cases for Touch Events v1 Candiate Recommendation
+     http://www.w3.org/TR/2011/CR-touch-events-20111215/
+
+     These tests are based on Matt Bruebeck's single-touch tests. 
+     There are NO multi-touch tests in this document.
+     http://w3c-test.org/webevents/tests/touch-events-v1/submissions/Mozilla/single-touch.html
+
+     This document references Test Assertions (abbrev TA below) written by Cathy Chan
+     http://www.w3.org/2010/webevents/wiki/TestAssertions
+-->
+
+<head>
+  <title>Touch Events tests (based on Matt Brubeck's single-touch tests)</title>
+  <meta name="viewport" content="width=device-width">
+  <script src="../../../testharness.js"></script>
+  <script>
+    setup({explicit_done: true});
+
+    var hasIdentifiedTouch = true;
+    
+    // Check a Touch object's atttributes for existence and correct type
+    // TA: 1.1.2, 1.1.3
+    function check_Touch_object (t) {
+        test(function() {
+           assert_equals(Object.prototype.toString.call(t), "[object Touch]", name + " attribute of type TouchList");
+        }, "touch point is a Touch object");
+        [
+          ["long", "identifier"],
+          ["EventTarget", "target"],
+          ["long", "screenX"],
+          ["long", "screenY"],
+          ["long", "clientX"],
+          ["long", "clientY"],
+          ["long", "pageX"],
+          ["long", "pageY"],
+        ].forEach(function(attr) {
+            var type = attr[0];
+            var name = attr[1];
+
+            // existence check
+            test(function() {
+                assert_true(name in t, name + " attribute in Touch object");
+            }, "Touch." + name + " attribute exists");
+
+            // type check
+            switch(type) {
+            case "long":
+                test(function() {
+                    assert_equals(typeof t[name], "number", name + " attribute of type long");
+                }, "Touch." + name + " attribute is of type number (long)");
+                break;
+            case "EventTarget":
+                // An event target is some type of Element
+                test(function() {
+                    assert_true(t[name] instanceof Element, "EventTarget must be an Element.");
+                }, "Touch." + name + " attribute is of type Element");
+                break;
+            default:
+                break;
+            }
+       }); 
+    }
+
+    // Check a TouchList object's attributes and methods for existence and proper type
+    // Also make sure all of the members of the list are Touch objects
+    // TA: 1.2.1, 1.2.2, 1.2.5
+    function check_TouchList_object (tl) {
+        test(function() {
+           assert_equals(Object.prototype.toString.call(tl), "[object TouchList]", name + " attribute of type TouchList");
+        }, "touch list is a TouchList object");
+        [
+          ["unsigned long", "length"],
+          ["function", "item"],
+          ["function", "identifiedTouch"],
+        ].forEach(function(attr) {
+            var type = attr[0];
+            var name = attr[1];
+
+            if (name == "identifiedTouch" && !hasIdentifiedTouch)
+              return;
+              
+            // existence check
+            test(function() {
+                assert_true(name in tl, name + " attribute in TouchList");
+            }, "TouchList." + name + " attribute exists");
+
+            // type check
+            switch(type) {
+            case "unsigned long":
+                test(function() {
+                    assert_equals(typeof tl[name], "number", name + " attribute of type long");
+                }, "TouchList." + name + " attribute is of type number (unsigned long)");
+                break;
+            case "function":
+                test(function() {
+                    assert_equals(typeof tl[name], "function", name + " attribute of type long");
+                }, "TouchList." + name + " attribute is of type function");
+                break;
+            default:
+                break;
+            }
+       }); 
+       // Each member of tl should be a proper Touch object
+       for (var i=0; i < tl.length; i++) {
+           check_Touch_object(tl.item(i));
+       }
+    }
+
+    // Check a TouchEvent event's attributes for existence and proper type
+    // Also check that each of the event's TouchList objects are valid
+    // TA: 1.{3,4,5}.1.1, 1.{3,4,5}.1.2
+    function check_TouchEvent(ev) {
+        test(function() {
+           assert_true(ev instanceof TouchEvent, "event is a TouchEvent event");
+        }, ev.type + " event is a TouchEvent event");
+        [
+          ["TouchList", "touches"],
+          ["TouchList", "targetTouches"],
+          ["TouchList", "changedTouches"],
+          ["boolean", "altKey"],
+          ["boolean", "metaKey"],
+          ["boolean", "ctrlKey"],
+          ["boolean", "shiftKey"],
+        ].forEach(function(attr) {
+            var type = attr[0];
+            var name = attr[1];
+
+            // existence check
+            test(function() {
+                assert_true(name in ev, name + " attribute in " + ev.type + " event");
+            }, ev.type + "." + name + " attribute exists");
+
+            // type check
+            switch(type) {
+            case "boolean":
+                test(function() {
+                    assert_equals(typeof ev[name], "boolean", name + " attribute of type boolean");
+                }, ev.type + "." + name + " attribute is of type boolean");
+                break;
+            case "TouchList":
+                test(function() {
+                    assert_equals(Object.prototype.toString.call(ev[name]), "[object TouchList]", name + " attribute of type TouchList");
+                }, ev.type + "." + name + " attribute is of type TouchList");
+                // Now check the validity of the TouchList
+                check_TouchList_object(ev[name]);
+                break;
+            default:
+                break;
+            }
+       }); 
+    }
+    
+    function is_touch_over_element(touch, element) {
+      var bounds = element.getBoundingClientRect();
+      return touch.pageX >= bounds.left && touch.pageX <= bounds.right &&
+          touch.pageY >= bounds.top && touch.pageY <= bounds.bottom;
+    }
+    
+    function check_touch_clientXY(touch) {
+      assert_equals(touch.clientX, touch.pageX - window.pageXOffset, "touch.clientX is touch.pageX - window.pageXOffset.");
+      assert_equals(touch.clientY, touch.pageY - window.pageYOffset, "touch.clientY is touch.pageY - window.pageYOffset.");
+    }
+
+    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 = false;
+      var touchmove_received = false;
+      var touchend_received = false;
+      var invalid_touchmove_received = false;
+      var touchstart_identifier;
+      
+      var touch;
+      test(function() {
+        touch = document.createTouch(window, target0, 42, 15, 20, 35, 40);
+        assert_equals(touch.target, target0, "touch.target is target0");
+        assert_equals(touch.identifier, 42, "touch.identifier is requested value");
+        assert_equals(touch.pageX, 15, "touch.pageX is requested value");
+        assert_equals(touch.pageY, 20, "touch.pageY is requested value");
+        check_touch_clientXY(touch);
+        assert_equals(touch.screenX, 35, "touch.screenX is requested value");
+        assert_equals(touch.screenY, 40, "touch.screenY is requested value");
+      }, "document.createTouch exists and creates a Touch object with requested properties");
+
+      var touchList;
+      test(function() {
+        touchList = document.createTouchList(touch);
+        assert_equals(touchList.length, 1, "touchList.length is 1");
+        assert_equals(touchList.item(0), touch, "touchList.item(0) is input touch");
+      }, "document.createTouchList exists and correctly creates a TouchList from a single Touch");
+
+      test(function() {
+        // A common failure mode (eg. WebKit bug 96294), don't report multiple errors for it
+        hasIdentifiedTouch = 'identifiedTouch' in touchList;
+        assert_true(hasIdentifiedTouch);
+      }, "TouchList contains an identifiedTouch property");
+
+      if (touchList)
+        check_TouchList_object(touchList);
+
+      test(function() {
+        touchList = document.createTouchList([touch]);
+        assert_equals(touchList.length, 1, "touchList.length is 1");
+        assert_equals(touchList.item(0), touch, "touchList.item(0) is input touch");
+      }, "document.createTouchList exists and correctly creates a TouchList from a Touch array");
+      
+      on_event(target0, "touchstart", function onTouchStart(ev) {
+        ev.preventDefault();
+
+        // Check event ordering TA: 1.6.2
+        test_touchstart.step(function() {
+          assert_false(touchstart_received, "duplicate touchstart event");
+          assert_false(touchmove_received, "touchstart precedes touchmove");
+          assert_false(touchend_received, "touchstart precedes touchend");
+        });
+        test_touchstart.done();
+        if (touchstart_received)
+          return;
+        touchstart_received = true;
+        test_mousedown.done(); // If we got here, then the mouse event test is not needed.
+
+        check_TouchEvent(ev);
+
+        // TA: 1.3.2.1, 1.3.3.1, 1.3.4.1
+        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.");
+        }, "touchstart: all TouchList lengths are correct");
+
+        var t = ev.touches[0];
+        var ct = ev.changedTouches[0];
+        var tt = ev.targetTouches[0];
+        
+        touchstart_identifier = t.identifier;
+        // TA: 1.3.3.3, 1.3.2.3, 1.3.3.4 (indirect (transitive))
+        test(function() {
+          assert_equals(ct.identifier, touchstart_identifier, "changedTouches identifier matches.");
+          assert_equals(tt.identifier, touchstart_identifier, "targetTouches identifier matches.");
+        }, "touchstart: all TouchList identifiers are consistent");
+
+        // TA: 1.3.3.9
+        test(function() {
+          assert_equals(tt.target, ev.target, "event target same as targetTouches target.");
+        }, "touchstart: event target same as targetTouches target");
+
+        // TA: @TBD
+        if (hasIdentifiedTouch) {
+          test(function() {
+            assert_equals(ev.touches.identifiedTouch(touchstart_identifier), t, "touches.identifiedTouch is correct.");
+          }, "touchstart: touches.identifiedTouch same as first touch point id");
+        }
+        
+        // TA: @TBD
+        test(function() {
+          assert_true(is_touch_over_element(t, target0), "touch.pageX/pageY is over target0.");
+        }, "touchstart: touch pageX/pageY inside of target element");
+        test(function() { 
+          check_touch_clientXY(t); 
+        }, "touchstart: touch clientX/clientY is consistent with pageX/pageY");
+        // Note we don't bother testing screenX/screenY values - there's no reliable way to
+        // verify they are consistent with clientX/clientY (due to unknown amount of window
+        // chrome), and also various forms of scaling mean they are in different units.
+      });
+
+      on_event(target0, "touchmove", function onTouchMove(ev) {
+        ev.preventDefault();
+
+        if (touchmove_received)
+          return;
+        touchmove_received = true;
+
+        test_touchmove.step(function() {
+          assert_true(touchstart_received, "touchmove follows touchstart");
+          assert_false(touchend_received, "touchmove precedes touchend");
+        });
+        test_touchmove.done();
+
+        check_TouchEvent(ev);
+
+        // TA: 1.4.2.1, 1.4.3.1
+        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: all TouchList lengths are correct");
+
+        // 1.4.2.3, 1.4.3.3, 1.4.3.5, 1.4.4.3
+        test(function() {
+          assert_equals(ev.touches[0].identifier, touchstart_identifier, "Touch identifier matches.");
+          assert_equals(ev.changedTouches[0].identifier, touchstart_identifier, "Changed touch identifier matches.");
+          assert_equals(ev.targetTouches[0].identifier, touchstart_identifier, "Target touch identifier matches.");
+        }, "touchmove: all TouchList identifiers matches touchstart identifier");
+
+        // TA: 1.4.3.8
+        var tt = ev.targetTouches[0];
+        test(function() {
+          assert_equals(tt.target, ev.target, "event target same as targetTouches target.");
+        }, "touchmove: event target same as targetTouches target");
+
+        // TA: @TBD
+        test(function() {
+          assert_true(is_touch_over_element(tt, target0) || is_touch_over_element(tt, target1),
+            "touch.pageX/pageY is over one of the targets.");
+        }, "touchmove: touch pageX/pageY inside of one of the target elements");
+        test(function() { 
+          check_touch_clientXY(tt); 
+        }, "touchmove: touch clientX/clientY is consistent with pageX/pageY");
+
+      });
+
+      on_event(target1, "touchmove", function onTouchMove(ev) {
+        invalid_touchmove_received = true;
+      });
+
+      on_event(window, "touchend", function onTouchEnd(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();
+
+        check_TouchEvent(ev);
+
+        // TA: 1.5.1.2, 1.5.3.1, 1.5.4.1
+        test(function() {
+          assert_equals(ev.touches.length, 0, "Zero touch points.");
+          assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
+          assert_equals(ev.targetTouches.length, 0, "Zero target touch points.");
+        }, "touchend: all TouchList lengths are correct");
+
+        var t = ev.changedTouches[0];
+
+        // TA: 1.5.2.6, 1.5.2.3
+        test(function() {
+          assert_equals(t.identifier, touchstart_identifier, "changedTouches identifier matches.");
+        }, "touchend: touches identifier matches changedTouches identifier");
+
+        // TA: @TBD
+        test(function() {
+          assert_true(is_touch_over_element(t, target1),
+            "touch.pageX/pageY is over target1.");
+        }, "touchend: touch pageX/pageY inside expected element");
+        test(function() { 
+          check_touch_clientXY(t); 
+        }, "touchend: touch clientX/clientY is consistent with pageX/pageY");
+
+        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: single-touch tests</h1>
+  <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>