tests/touch-events-v1/submissions/Mozilla/multi-touch.html
changeset 152 3aed607ba8d1
child 153 8066aa392c1b
equal deleted inserted replaced
151:e0189d342a0c 152:3aed607ba8d1
       
     1 <!DOCTYPE HTML>
       
     2 <html>
       
     3 <head>
       
     4   <title>Touch Events: Multi-touch tests</title>
       
     5   <meta name="viewport" content="width=device-width">
       
     6   <script src="../testharness.js"></script>
       
     7   <script>
       
     8     setup({explicit_done: true});
       
     9 
       
    10     function run() {
       
    11       var target0 = document.getElementById("target0");
       
    12       var target1 = document.getElementById("target1");
       
    13 
       
    14       var test_touchstart = async_test("touchstart event received");
       
    15       var test_touchmove = async_test("touchmove event received");
       
    16       var test_touchend = async_test("touchend event received");
       
    17       var test_mousedown = async_test("Interaction with mouse events");
       
    18 
       
    19       var touchstart_received = 0;
       
    20       var touchmove_received = false;
       
    21       var invalid_touchmove_received = false;
       
    22       var maxTouchCount = 0;
       
    23 
       
    24       on_event(target0, "touchstart", function onTouchStart(ev) {
       
    25         ev.preventDefault();
       
    26 
       
    27         if (!touchstart_received) {
       
    28           test_touchstart.step(function() {
       
    29             assert_false(touchmove_received, "touchstart precedes touchmove");
       
    30           });
       
    31         } else {
       
    32           test(function() {
       
    33             assert_true(ev.touches.length == 2, "Should have seen 2 touches.");
       
    34             assert_true(ev.changedTouches.length == 1, "Should have only 1 current touch.");
       
    35             assert_true(ev.targetTouches.length == 2, "Should have 2 target touches.");
       
    36           }, "Multiple touch objects detected when handling touchstart.");
       
    37         }
       
    38         ++touchstart_received;
       
    39         test_touchstart.done();
       
    40         test_mousedown.done(); // If we got here, then the mouse event test is not needed.
       
    41         
       
    42       });
       
    43 
       
    44 
       
    45       on_event(target0, "touchmove", function onTouchMove(ev) {
       
    46         ev.preventDefault();
       
    47         touchmove_received = true;
       
    48 
       
    49         test_touchmove.step(function() {
       
    50           assert_true(touchstart_received != 0, "touchend follows touchstart");
       
    51         });
       
    52         test_touchmove.done();
       
    53 
       
    54         maxTouchCount =
       
    55           ev.touches.length > maxTouchCount ? ev.touches.length : maxTouchCount 
       
    56       });
       
    57 
       
    58       on_event(target1, "touchmove", function onTouchMove(ev) {
       
    59         invalid_touchmove_received = true;
       
    60       });
       
    61 
       
    62       on_event(window, "touchend", function onTouchEnd(ev) {
       
    63         test_touchend.step(function() {
       
    64           assert_equals(ev.target, target0, "touchend is dispatched to the original target");
       
    65           assert_true(touchstart_received != 0, "touchend follows touchstart");
       
    66           assert_true(touchmove_received, "touchend follows touchmove");
       
    67           assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
       
    68           assert_equals(touchstart_received, 2, "Should have got 2 touchstart events before touchend.")
       
    69         });
       
    70         test_touchend.done();
       
    71 
       
    72         test(function() {
       
    73           assert_true(maxTouchCount == 2, "Should have seen 2 touches.");
       
    74         }, "Multiple touch objects detected.");
       
    75 
       
    76         
       
    77         done();
       
    78       });
       
    79 
       
    80 
       
    81       on_event(target0, "mousedown", function onMouseDown(ev) {
       
    82         test_mousedown.step(function() {
       
    83           assert_true(touchstart_received,
       
    84             "The touchstart event must be dispatched before any mouse " +
       
    85             "events. (If this fails, it might mean that the user agent does " +
       
    86             "not implement W3C touch events at all.)"
       
    87           );
       
    88         });
       
    89         test_mousedown.done();
       
    90 
       
    91         if (!touchstart_received) {
       
    92           // Abort the tests.  If touch events are not supported, then most of
       
    93           // the other event handlers will never be called, and the test will
       
    94           // time out with misleading results.
       
    95           done();
       
    96         }
       
    97       });
       
    98     }
       
    99   </script>
       
   100   <style>
       
   101     div {
       
   102       margin: 0em;
       
   103       padding: 2em;
       
   104     }
       
   105     #target0 {
       
   106       background: yellow;
       
   107       border: 1px solid orange;
       
   108     }
       
   109     #target1 {
       
   110       background: lightblue;
       
   111       border: 1px solid blue;
       
   112     }
       
   113   </style>
       
   114 </head>
       
   115 <body onload="run()">
       
   116   <h1>Touch Events: Multi-touch tests</h1>
       
   117   <div id="target0">
       
   118     Touch this box with one finger, then another one...
       
   119   </div>
       
   120   <div id="target1">
       
   121     ...then drag to this box and lift your fingers.
       
   122   </div>
       
   123   <div id="log"></div>
       
   124 </body>
       
   125 </html>