tests/touch-events-v1/submissions/Moz-Nok-Goog/single-touch.html
changeset 162 cde6c06f4579
equal deleted inserted replaced
161:59c414982391 162:cde6c06f4579
       
     1 <!DOCTYPE HTML>
       
     2 <html>
       
     3 <!-- 
       
     4      Test cases for Touch Events v1 Candiate Recommendation
       
     5      http://www.w3.org/TR/2011/CR-touch-events-20111215/
       
     6 
       
     7      These tests are based on Matt Bruebeck's single-touch tests. 
       
     8      There are NO multi-touch tests in this document.
       
     9      http://w3c-test.org/webevents/tests/touch-events-v1/submissions/Mozilla/single-touch.html
       
    10 
       
    11      This document references Test Assertions (abbrev TA below) written by Cathy Chan
       
    12      http://www.w3.org/2010/webevents/wiki/TestAssertions
       
    13 -->
       
    14 
       
    15 <head>
       
    16   <title>Touch Events tests (based on Matt Brubeck's single-touch tests)</title>
       
    17   <meta name="viewport" content="width=device-width">
       
    18   <script src="../../../testharness.js"></script>
       
    19   <script>
       
    20     setup({explicit_done: true});
       
    21 
       
    22     var hasIdentifiedTouch = true;
       
    23     
       
    24     // Check a Touch object's atttributes for existence and correct type
       
    25     // TA: 1.1.2, 1.1.3
       
    26     function check_Touch_object (t) {
       
    27         test(function() {
       
    28            assert_equals(Object.prototype.toString.call(t), "[object Touch]", name + " attribute of type TouchList");
       
    29         }, "touch point is a Touch object");
       
    30         [
       
    31           ["long", "identifier"],
       
    32           ["EventTarget", "target"],
       
    33           ["long", "screenX"],
       
    34           ["long", "screenY"],
       
    35           ["long", "clientX"],
       
    36           ["long", "clientY"],
       
    37           ["long", "pageX"],
       
    38           ["long", "pageY"],
       
    39         ].forEach(function(attr) {
       
    40             var type = attr[0];
       
    41             var name = attr[1];
       
    42 
       
    43             // existence check
       
    44             test(function() {
       
    45                 assert_true(name in t, name + " attribute in Touch object");
       
    46             }, "Touch." + name + " attribute exists");
       
    47 
       
    48             // type check
       
    49             switch(type) {
       
    50             case "long":
       
    51                 test(function() {
       
    52                     assert_equals(typeof t[name], "number", name + " attribute of type long");
       
    53                 }, "Touch." + name + " attribute is of type number (long)");
       
    54                 break;
       
    55             case "EventTarget":
       
    56                 // An event target is some type of Element
       
    57                 test(function() {
       
    58                     assert_true(t[name] instanceof Element, "EventTarget must be an Element.");
       
    59                 }, "Touch." + name + " attribute is of type Element");
       
    60                 break;
       
    61             default:
       
    62                 break;
       
    63             }
       
    64        }); 
       
    65     }
       
    66 
       
    67     // Check a TouchList object's attributes and methods for existence and proper type
       
    68     // Also make sure all of the members of the list are Touch objects
       
    69     // TA: 1.2.1, 1.2.2, 1.2.5
       
    70     function check_TouchList_object (tl) {
       
    71         test(function() {
       
    72            assert_equals(Object.prototype.toString.call(tl), "[object TouchList]", name + " attribute of type TouchList");
       
    73         }, "touch list is a TouchList object");
       
    74         [
       
    75           ["unsigned long", "length"],
       
    76           ["function", "item"],
       
    77           ["function", "identifiedTouch"],
       
    78         ].forEach(function(attr) {
       
    79             var type = attr[0];
       
    80             var name = attr[1];
       
    81 
       
    82             if (name == "identifiedTouch" && !hasIdentifiedTouch)
       
    83               return;
       
    84               
       
    85             // existence check
       
    86             test(function() {
       
    87                 assert_true(name in tl, name + " attribute in TouchList");
       
    88             }, "TouchList." + name + " attribute exists");
       
    89 
       
    90             // type check
       
    91             switch(type) {
       
    92             case "unsigned long":
       
    93                 test(function() {
       
    94                     assert_equals(typeof tl[name], "number", name + " attribute of type long");
       
    95                 }, "TouchList." + name + " attribute is of type number (unsigned long)");
       
    96                 break;
       
    97             case "function":
       
    98                 test(function() {
       
    99                     assert_equals(typeof tl[name], "function", name + " attribute of type long");
       
   100                 }, "TouchList." + name + " attribute is of type function");
       
   101                 break;
       
   102             default:
       
   103                 break;
       
   104             }
       
   105        }); 
       
   106        // Each member of tl should be a proper Touch object
       
   107        for (var i=0; i < tl.length; i++) {
       
   108            check_Touch_object(tl.item(i));
       
   109        }
       
   110     }
       
   111 
       
   112     // Check a TouchEvent event's attributes for existence and proper type
       
   113     // Also check that each of the event's TouchList objects are valid
       
   114     // TA: 1.{3,4,5}.1.1, 1.{3,4,5}.1.2
       
   115     function check_TouchEvent(ev) {
       
   116         test(function() {
       
   117            assert_true(ev instanceof TouchEvent, "event is a TouchEvent event");
       
   118         }, ev.type + " event is a TouchEvent event");
       
   119         [
       
   120           ["TouchList", "touches"],
       
   121           ["TouchList", "targetTouches"],
       
   122           ["TouchList", "changedTouches"],
       
   123           ["boolean", "altKey"],
       
   124           ["boolean", "metaKey"],
       
   125           ["boolean", "ctrlKey"],
       
   126           ["boolean", "shiftKey"],
       
   127         ].forEach(function(attr) {
       
   128             var type = attr[0];
       
   129             var name = attr[1];
       
   130 
       
   131             // existence check
       
   132             test(function() {
       
   133                 assert_true(name in ev, name + " attribute in " + ev.type + " event");
       
   134             }, ev.type + "." + name + " attribute exists");
       
   135 
       
   136             // type check
       
   137             switch(type) {
       
   138             case "boolean":
       
   139                 test(function() {
       
   140                     assert_equals(typeof ev[name], "boolean", name + " attribute of type boolean");
       
   141                 }, ev.type + "." + name + " attribute is of type boolean");
       
   142                 break;
       
   143             case "TouchList":
       
   144                 test(function() {
       
   145                     assert_equals(Object.prototype.toString.call(ev[name]), "[object TouchList]", name + " attribute of type TouchList");
       
   146                 }, ev.type + "." + name + " attribute is of type TouchList");
       
   147                 // Now check the validity of the TouchList
       
   148                 check_TouchList_object(ev[name]);
       
   149                 break;
       
   150             default:
       
   151                 break;
       
   152             }
       
   153        }); 
       
   154     }
       
   155     
       
   156     function is_touch_over_element(touch, element) {
       
   157       var bounds = element.getBoundingClientRect();
       
   158       return touch.pageX >= bounds.left && touch.pageX <= bounds.right &&
       
   159           touch.pageY >= bounds.top && touch.pageY <= bounds.bottom;
       
   160     }
       
   161     
       
   162     function check_touch_clientXY(touch) {
       
   163       assert_equals(touch.clientX, touch.pageX - window.pageXOffset, "touch.clientX is touch.pageX - window.pageXOffset.");
       
   164       assert_equals(touch.clientY, touch.pageY - window.pageYOffset, "touch.clientY is touch.pageY - window.pageYOffset.");
       
   165     }
       
   166 
       
   167     function run() {
       
   168       var target0 = document.getElementById("target0");
       
   169       var target1 = document.getElementById("target1");
       
   170 
       
   171       var test_touchstart = async_test("touchstart event received");
       
   172       var test_touchmove = async_test("touchmove event received");
       
   173       var test_touchend = async_test("touchend event received");
       
   174       var test_mousedown = async_test("Interaction with mouse events");
       
   175 
       
   176       var touchstart_received = false;
       
   177       var touchmove_received = false;
       
   178       var touchend_received = false;
       
   179       var invalid_touchmove_received = false;
       
   180       var touchstart_identifier;
       
   181       
       
   182       var touch;
       
   183       test(function() {
       
   184         touch = document.createTouch(window, target0, 42, 15, 20, 35, 40);
       
   185         assert_equals(touch.target, target0, "touch.target is target0");
       
   186         assert_equals(touch.identifier, 42, "touch.identifier is requested value");
       
   187         assert_equals(touch.pageX, 15, "touch.pageX is requested value");
       
   188         assert_equals(touch.pageY, 20, "touch.pageY is requested value");
       
   189         check_touch_clientXY(touch);
       
   190         assert_equals(touch.screenX, 35, "touch.screenX is requested value");
       
   191         assert_equals(touch.screenY, 40, "touch.screenY is requested value");
       
   192       }, "document.createTouch exists and creates a Touch object with requested properties");
       
   193 
       
   194       var touchList;
       
   195       test(function() {
       
   196         touchList = document.createTouchList(touch);
       
   197         assert_equals(touchList.length, 1, "touchList.length is 1");
       
   198         assert_equals(touchList.item(0), touch, "touchList.item(0) is input touch");
       
   199       }, "document.createTouchList exists and correctly creates a TouchList from a single Touch");
       
   200 
       
   201       test(function() {
       
   202         // A common failure mode (eg. WebKit bug 96294), don't report multiple errors for it
       
   203         hasIdentifiedTouch = 'identifiedTouch' in touchList;
       
   204         assert_true(hasIdentifiedTouch);
       
   205       }, "TouchList contains an identifiedTouch property");
       
   206 
       
   207       if (touchList)
       
   208         check_TouchList_object(touchList);
       
   209 
       
   210       test(function() {
       
   211         touchList = document.createTouchList([touch]);
       
   212         assert_equals(touchList.length, 1, "touchList.length is 1");
       
   213         assert_equals(touchList.item(0), touch, "touchList.item(0) is input touch");
       
   214       }, "document.createTouchList exists and correctly creates a TouchList from a Touch array");
       
   215       
       
   216       on_event(target0, "touchstart", function onTouchStart(ev) {
       
   217         ev.preventDefault();
       
   218 
       
   219         // Check event ordering TA: 1.6.2
       
   220         test_touchstart.step(function() {
       
   221           assert_false(touchstart_received, "duplicate touchstart event");
       
   222           assert_false(touchmove_received, "touchstart precedes touchmove");
       
   223           assert_false(touchend_received, "touchstart precedes touchend");
       
   224         });
       
   225         test_touchstart.done();
       
   226         if (touchstart_received)
       
   227           return;
       
   228         touchstart_received = true;
       
   229         test_mousedown.done(); // If we got here, then the mouse event test is not needed.
       
   230 
       
   231         check_TouchEvent(ev);
       
   232 
       
   233         // TA: 1.3.2.1, 1.3.3.1, 1.3.4.1
       
   234         test(function() {
       
   235           assert_equals(ev.touches.length, 1, "One touch point.");
       
   236           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
   237           assert_equals(ev.targetTouches.length, 1, "One target touch point.");
       
   238         }, "touchstart: all TouchList lengths are correct");
       
   239 
       
   240         var t = ev.touches[0];
       
   241         var ct = ev.changedTouches[0];
       
   242         var tt = ev.targetTouches[0];
       
   243         
       
   244         touchstart_identifier = t.identifier;
       
   245         // TA: 1.3.3.3, 1.3.2.3, 1.3.3.4 (indirect (transitive))
       
   246         test(function() {
       
   247           assert_equals(ct.identifier, touchstart_identifier, "changedTouches identifier matches.");
       
   248           assert_equals(tt.identifier, touchstart_identifier, "targetTouches identifier matches.");
       
   249         }, "touchstart: all TouchList identifiers are consistent");
       
   250 
       
   251         // TA: 1.3.3.9
       
   252         test(function() {
       
   253           assert_equals(tt.target, ev.target, "event target same as targetTouches target.");
       
   254         }, "touchstart: event target same as targetTouches target");
       
   255 
       
   256         // TA: @TBD
       
   257         if (hasIdentifiedTouch) {
       
   258           test(function() {
       
   259             assert_equals(ev.touches.identifiedTouch(touchstart_identifier), t, "touches.identifiedTouch is correct.");
       
   260           }, "touchstart: touches.identifiedTouch same as first touch point id");
       
   261         }
       
   262         
       
   263         // TA: @TBD
       
   264         test(function() {
       
   265           assert_true(is_touch_over_element(t, target0), "touch.pageX/pageY is over target0.");
       
   266         }, "touchstart: touch pageX/pageY inside of target element");
       
   267         test(function() { 
       
   268           check_touch_clientXY(t); 
       
   269         }, "touchstart: touch clientX/clientY is consistent with pageX/pageY");
       
   270         // Note we don't bother testing screenX/screenY values - there's no reliable way to
       
   271         // verify they are consistent with clientX/clientY (due to unknown amount of window
       
   272         // chrome), and also various forms of scaling mean they are in different units.
       
   273       });
       
   274 
       
   275       on_event(target0, "touchmove", function onTouchMove(ev) {
       
   276         ev.preventDefault();
       
   277 
       
   278         if (touchmove_received)
       
   279           return;
       
   280         touchmove_received = true;
       
   281 
       
   282         test_touchmove.step(function() {
       
   283           assert_true(touchstart_received, "touchmove follows touchstart");
       
   284           assert_false(touchend_received, "touchmove precedes touchend");
       
   285         });
       
   286         test_touchmove.done();
       
   287 
       
   288         check_TouchEvent(ev);
       
   289 
       
   290         // TA: 1.4.2.1, 1.4.3.1
       
   291         test(function() {
       
   292           assert_equals(ev.touches.length, 1, "One touch point.");
       
   293           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
   294           assert_equals(ev.targetTouches.length, 1, "One target touch point.");
       
   295         }, "touchmove: all TouchList lengths are correct");
       
   296 
       
   297         // 1.4.2.3, 1.4.3.3, 1.4.3.5, 1.4.4.3
       
   298         test(function() {
       
   299           assert_equals(ev.touches[0].identifier, touchstart_identifier, "Touch identifier matches.");
       
   300           assert_equals(ev.changedTouches[0].identifier, touchstart_identifier, "Changed touch identifier matches.");
       
   301           assert_equals(ev.targetTouches[0].identifier, touchstart_identifier, "Target touch identifier matches.");
       
   302         }, "touchmove: all TouchList identifiers matches touchstart identifier");
       
   303 
       
   304         // TA: 1.4.3.8
       
   305         var tt = ev.targetTouches[0];
       
   306         test(function() {
       
   307           assert_equals(tt.target, ev.target, "event target same as targetTouches target.");
       
   308         }, "touchmove: event target same as targetTouches target");
       
   309 
       
   310         // TA: @TBD
       
   311         test(function() {
       
   312           assert_true(is_touch_over_element(tt, target0) || is_touch_over_element(tt, target1),
       
   313             "touch.pageX/pageY is over one of the targets.");
       
   314         }, "touchmove: touch pageX/pageY inside of one of the target elements");
       
   315         test(function() { 
       
   316           check_touch_clientXY(tt); 
       
   317         }, "touchmove: touch clientX/clientY is consistent with pageX/pageY");
       
   318 
       
   319       });
       
   320 
       
   321       on_event(target1, "touchmove", function onTouchMove(ev) {
       
   322         invalid_touchmove_received = true;
       
   323       });
       
   324 
       
   325       on_event(window, "touchend", function onTouchEnd(ev) {
       
   326         touchend_received = true;
       
   327 
       
   328         test_touchend.step(function() {
       
   329           assert_equals(ev.target, target0, "touchend is dispatched to the original target");
       
   330           assert_true(touchstart_received, "touchend follows touchstart");
       
   331           assert_true(touchmove_received, "touchend follows touchmove");
       
   332           assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
       
   333         });
       
   334         test_touchend.done();
       
   335 
       
   336         check_TouchEvent(ev);
       
   337 
       
   338         // TA: 1.5.1.2, 1.5.3.1, 1.5.4.1
       
   339         test(function() {
       
   340           assert_equals(ev.touches.length, 0, "Zero touch points.");
       
   341           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
   342           assert_equals(ev.targetTouches.length, 0, "Zero target touch points.");
       
   343         }, "touchend: all TouchList lengths are correct");
       
   344 
       
   345         var t = ev.changedTouches[0];
       
   346 
       
   347         // TA: 1.5.2.6, 1.5.2.3
       
   348         test(function() {
       
   349           assert_equals(t.identifier, touchstart_identifier, "changedTouches identifier matches.");
       
   350         }, "touchend: touches identifier matches changedTouches identifier");
       
   351 
       
   352         // TA: @TBD
       
   353         test(function() {
       
   354           assert_true(is_touch_over_element(t, target1),
       
   355             "touch.pageX/pageY is over target1.");
       
   356         }, "touchend: touch pageX/pageY inside expected element");
       
   357         test(function() { 
       
   358           check_touch_clientXY(t); 
       
   359         }, "touchend: touch clientX/clientY is consistent with pageX/pageY");
       
   360 
       
   361         done();
       
   362       });
       
   363 
       
   364       on_event(target0, "mousedown", function onMouseDown(ev) {
       
   365         test_mousedown.step(function() {
       
   366           assert_true(touchstart_received,
       
   367             "The touchstart event must be dispatched before any mouse " +
       
   368             "events. (If this fails, it might mean that the user agent does " +
       
   369             "not implement W3C touch events at all.)"
       
   370           );
       
   371         });
       
   372         test_mousedown.done();
       
   373 
       
   374         if (!touchstart_received) {
       
   375           // Abort the tests.  If touch events are not supported, then most of
       
   376           // the other event handlers will never be called, and the test will
       
   377           // time out with misleading results.
       
   378           done();
       
   379         }
       
   380       });
       
   381     }
       
   382   </script>
       
   383   <style>
       
   384     div {
       
   385       margin: 0em;
       
   386       padding: 2em;
       
   387     }
       
   388     #target0 {
       
   389       background: yellow;
       
   390       border: 1px solid orange;
       
   391     }
       
   392     #target1 {
       
   393       background: lightblue;
       
   394       border: 1px solid blue;
       
   395     }
       
   396   </style>
       
   397 </head>
       
   398 <body onload="run()">
       
   399   <h1>Touch Events: single-touch tests</h1>
       
   400   <div id="target0">
       
   401     Touch this box with one finger (or other pointing device)...
       
   402   </div>
       
   403   <div id="target1">
       
   404     ...then drag to this box and lift your finger.
       
   405   </div>
       
   406   <div id="log"></div>
       
   407 </body>
       
   408 </html>