test/touchevents/single-touch.html
changeset 55 7df98116715b
parent 52 a3bdd103c7d9
child 56 6343517cbbee
equal deleted inserted replaced
54:be35b766b5ef 55:7df98116715b
     6   <script src="../testharness.js"></script>
     6   <script src="../testharness.js"></script>
     7   <script>
     7   <script>
     8     setup({explicit_done: true});
     8     setup({explicit_done: true});
     9 
     9 
    10     function run() {
    10     function run() {
    11       var target = document.getElementById("target");
    11       var target0 = document.getElementById("target0");
    12 
    12       var target1 = document.getElementById("target1");
    13       var test_click = async_test("Interaction with mouse events");
    13 
    14       var test_touchstart = async_test("touchstart event received");
    14       var test_touchstart = async_test("touchstart event received");
       
    15       var test_touchmove = async_test("touchmove event received");
    15       var test_touchend = async_test("touchend event received");
    16       var test_touchend = async_test("touchend event received");
       
    17       var test_mousedown = async_test("Interaction with mouse events");
    16 
    18 
    17       var touchstart_received = false;
    19       var touchstart_received = false;
    18 
    20       var touchmove_received = false;
    19       on_event(target, "touchstart", function onTouchStart(ev) {
    21       var touchend_received = false;
       
    22       var invalid_touchmove_received = false;
       
    23 
       
    24       on_event(target0, "touchstart", function onTouchStart(ev) {
       
    25         ev.preventDefault();
       
    26 
    20         touchstart_received = true;
    27         touchstart_received = true;
       
    28         test_touchstart.step(function() {
       
    29           assert_false(touchmove_received, "touchstart precedes touchmove");
       
    30           assert_false(touchend_received, "touchstart precedes touchend");
       
    31         });
    21         test_touchstart.done();
    32         test_touchstart.done();
       
    33         test_mousedown.done(); // If we got here, then the mouse event test is not needed.
    22 
    34 
    23         test(function() {
    35         test(function() {
    24           assert_true(ev.target instanceof Element, "target must be an Element.");
    36           assert_true(ev.target instanceof Element, "target must be an Element.");
    25           assert_equals(ev.relatedTarget, null, "relatedTarget must be null for touchstart event.");
    37           assert_equals(ev.relatedTarget, null, "relatedTarget must be null for touchstart event.");
    26         }, "touchstart TouchEvent target attributes are correct.");
    38         }, "touchstart TouchEvent target attributes are correct.");
    73           }
    85           }
    74         }, "Touch location attributes are present.");
    86         }, "Touch location attributes are present.");
    75 
    87 
    76       });
    88       });
    77 
    89 
    78       on_event(target, "touchend", function onTouchStart(ev) {
    90       on_event(target0, "touchmove", function onTouchMove(ev) {
       
    91         ev.preventDefault();
       
    92 
       
    93         if (touchmove_received)
       
    94           return;
       
    95         touchmove_received = true;
       
    96 
       
    97         test_touchmove.step(function() {
       
    98           assert_true(touchstart_received, "touchend follows touchstart");
       
    99           assert_false(touchend_received, "touchmove precedes touchend");
       
   100         });
       
   101         test_touchmove.done();
       
   102 
       
   103         test(function() {
       
   104           assert_equals(ev.touches.length, 1, "One touch point.");
       
   105           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
   106           assert_equals(ev.targetTouches.length, 1, "One target touch point.");
       
   107         }, "touchmove TouchList lengths are correct.");
       
   108       });
       
   109 
       
   110       on_event(target1, "touchmove", function onTouchMove(ev) {
       
   111         invalid_touchmove_received = true;
       
   112       });
       
   113 
       
   114       on_event(window, "touchend", function onTouchStart(ev) {
       
   115         touchend_received = true;
       
   116 
    79         test_touchend.step(function() {
   117         test_touchend.step(function() {
       
   118           assert_equals(ev.target, target0, "touchend is dispatched to the original target");
    80           assert_true(touchstart_received, "touchend follows touchstart");
   119           assert_true(touchstart_received, "touchend follows touchstart");
       
   120           assert_true(touchmove_received, "touchend follows touchmove");
       
   121           assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
    81         });
   122         });
    82         test_touchend.done();
   123         test_touchend.done();
    83 
   124 
    84         test(function() {
   125         test(function() {
    85           var attrs = ["altKey", "metaKey", "ctrlKey", "shiftKey"];
   126           var attrs = ["altKey", "metaKey", "ctrlKey", "shiftKey"];
   121 
   162 
   122         done();
   163         done();
   123       });
   164       });
   124 
   165 
   125 
   166 
   126       on_event(target, "click", function onClick(ev) {
   167       on_event(target0, "mousedown", function onMouseDown(ev) {
   127         test_click.step(function() {
   168         test_mousedown.step(function() {
   128           assert_true(touchstart_received,
   169           assert_true(touchstart_received,
   129             "The touchstart event must be dispatched before any mouse " +
   170             "The touchstart event must be dispatched before any mouse " +
   130             "events. (If this fails, it might mean that the user agent does " +
   171             "events. (If this fails, it might mean that the user agent does " +
   131             "not implement W3C touch events at all.)"
   172             "not implement W3C touch events at all.)"
   132           );
   173           );
   133         });
   174         });
   134         test_click.done();
   175         test_mousedown.done();
   135 
   176 
   136         if (!touchstart_received) {
   177         if (!touchstart_received) {
   137           // Abort the tests.  If touch events are not supported, then most of
   178           // Abort the tests.  If touch events are not supported, then most of
   138           // the other event handlers will never be called, and the test will
   179           // the other event handlers will never be called, and the test will
   139           // time out with misleading results.
   180           // time out with misleading results.
   141         }
   182         }
   142       });
   183       });
   143     }
   184     }
   144   </script>
   185   </script>
   145   <style>
   186   <style>
   146     #target {
   187     div {
       
   188       margin: 0em;
       
   189       padding: 2em;
       
   190     }
       
   191     #target0 {
   147       background: yellow;
   192       background: yellow;
   148       border: 1px solid orange;
   193       border: 1px solid orange;
   149       padding: 2em;
   194     }
       
   195     #target1 {
       
   196       background: lightblue;
       
   197       border: 1px solid blue;
   150     }
   198     }
   151   </style>
   199   </style>
   152 </head>
   200 </head>
   153 <body onload="run()">
   201 <body onload="run()">
   154   <h1>Touch area tests</h1>
   202   <h1>Touch area tests</h1>
   155   <p id="target">
   203   <div id="target0">
   156     Tap this element with one finger (or other pointing device).
   204     Touch this box with one finger (or other pointing device)...
   157   </p>
   205   </div>
       
   206   <div id="target1">
       
   207     ...then drag to this box and lift your finger.
       
   208   </div>
   158   <div id="log"></div>
   209   <div id="log"></div>
   159 </body>
   210 </body>
   160 </html>
   211 </html>