tests/touch-events-v2/submissions/Mozilla/single-touch.html
changeset 160 e0e3783147f0
equal deleted inserted replaced
159:bd22f71dbdc5 160:e0e3783147f0
       
     1 <!DOCTYPE HTML>
       
     2 <html>
       
     3 <head>
       
     4   <title>Touch Events: Single-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 = false;
       
    20       var touchmove_received = false;
       
    21       var touchend_received = false;
       
    22       var invalid_touchmove_received = false;
       
    23       var touchstart_identifier;
       
    24 
       
    25       on_event(target0, "touchstart", function onTouchStart(ev) {
       
    26         ev.preventDefault();
       
    27 
       
    28         touchstart_received = true;
       
    29         test_touchstart.step(function() {
       
    30           assert_false(touchmove_received, "touchstart precedes touchmove");
       
    31           assert_false(touchend_received, "touchstart precedes touchend");
       
    32         });
       
    33         test_touchstart.done();
       
    34         test_mousedown.done(); // If we got here, then the mouse event test is not needed.
       
    35 
       
    36         test(function() {
       
    37           assert_true(ev.target instanceof Element, "target must be an Element.");
       
    38           assert_equals(ev.relatedTarget, null, "relatedTarget must be null for touchstart event.");
       
    39         }, "touchstart TouchEvent target attributes are correct.");
       
    40 
       
    41         test(function() {
       
    42           var attrs = ["altKey", "metaKey", "ctrlKey", "shiftKey"];
       
    43           for (var i = 0; i < attrs.length; i++) {
       
    44             assert_true(attrs[i] in ev);
       
    45           }
       
    46         }, "touchstart TouchEvent modifier key attributes are present.");
       
    47 
       
    48         test(function() {
       
    49           assert_equals(ev.touches.length, 1, "One touch point.");
       
    50           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
    51           assert_equals(ev.targetTouches.length, 1, "One target touch point.");
       
    52         }, "touchstart TouchList lengths are correct.");
       
    53 
       
    54         var t = ev.touches[0];
       
    55         var ct = ev.changedTouches[0];
       
    56         var tt = ev.targetTouches[0];
       
    57 
       
    58         test(function() {
       
    59           assert_true(ev instanceof TouchEvent, "Event is a TouchEvent.");
       
    60           assert_true(ev.touches instanceof TouchList, "touches is a TouchList");
       
    61           assert_true(t instanceof Touch, "touches[0] is a Touch");
       
    62         }, "Interface names are correct.");
       
    63 
       
    64         touchstart_identifier = t.identifier;
       
    65         test(function() {
       
    66           assert_equals(ct.identifier, touchstart_identifier, "changedTouches identifier matches.");
       
    67           assert_equals(tt.identifier, touchstart_identifier, "targetTouches identifier matches.");
       
    68         }, "Touch identifiers are consistent.");
       
    69 
       
    70         test(function() {
       
    71           assert_equals(ev.touches.identifiedTouch(touchstart_identifier), t, "touches.identifiedTouch is correct.");
       
    72         }, "identifiedTouch");
       
    73 
       
    74         test(function() {
       
    75           assert_true(t.rotationAngle >= 0, "rotationAngle must be >= 0.");
       
    76           assert_true(t.rotationAngle < 90, "rotationAngle must be > 90.");
       
    77 
       
    78           assert_true(t.radiusX > 0, "radiusX is positive.");
       
    79           assert_true(t.radiusY > 0, "radiusY is positive.");
       
    80 
       
    81           assert_true(t.force >= 0, "force >= 0.");
       
    82           assert_true(t.force <= 1, "force <= 1.");
       
    83         }, "Touch attribute values are valid");
       
    84 
       
    85         test(function() {
       
    86           var attrs = ["screenX", "screenY", "clientX", "clientY",
       
    87                        "pageX", "pageY"];
       
    88           for (var i = 0; i < attrs.length; i++) {
       
    89             assert_true(attrs[i] in t);
       
    90           }
       
    91         }, "Touch location attributes are present.");
       
    92 
       
    93       });
       
    94 
       
    95       on_event(target0, "touchmove", function onTouchMove(ev) {
       
    96         ev.preventDefault();
       
    97 
       
    98         if (touchmove_received)
       
    99           return;
       
   100         touchmove_received = true;
       
   101 
       
   102         test_touchmove.step(function() {
       
   103           assert_true(touchstart_received, "touchend follows touchstart");
       
   104           assert_false(touchend_received, "touchmove precedes touchend");
       
   105         });
       
   106         test_touchmove.done();
       
   107 
       
   108         test(function() {
       
   109           assert_equals(ev.touches.length, 1, "One touch point.");
       
   110           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
   111           assert_equals(ev.targetTouches.length, 1, "One target touch point.");
       
   112         }, "touchmove TouchList lengths are correct.");
       
   113 
       
   114         test(function() {
       
   115           assert_equals(ev.touches[0].identifier, touchstart_identifier, "Touch identifier matches.");
       
   116           assert_equals(ev.changedTouches[0].identifier, touchstart_identifier, "Changed touch identifier matches.");
       
   117           assert_equals(ev.targetTouches[0].identifier, touchstart_identifier, "Target touch identifier matches.");
       
   118         }, "touchmove identifier matches touchstart identifier.");
       
   119       });
       
   120 
       
   121       on_event(target1, "touchmove", function onTouchMove(ev) {
       
   122         invalid_touchmove_received = true;
       
   123       });
       
   124 
       
   125       on_event(window, "touchend", function onTouchStart(ev) {
       
   126         touchend_received = true;
       
   127 
       
   128         test_touchend.step(function() {
       
   129           assert_equals(ev.target, target0, "touchend is dispatched to the original target");
       
   130           assert_true(touchstart_received, "touchend follows touchstart");
       
   131           assert_true(touchmove_received, "touchend follows touchmove");
       
   132           assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
       
   133         });
       
   134         test_touchend.done();
       
   135 
       
   136         test(function() {
       
   137           var attrs = ["altKey", "metaKey", "ctrlKey", "shiftKey"];
       
   138           for (var i = 0; i < attrs.length; i++) {
       
   139             assert_true(attrs[i] in ev);
       
   140           }
       
   141         }, "touchend TouchEvent modifier key attributes are present.");
       
   142 
       
   143         test(function() {
       
   144           assert_equals(ev.touches.length, 0, "Zero touch points.");
       
   145           assert_equals(ev.changedTouches.length, 1, "One changed touch point.");
       
   146           assert_equals(ev.targetTouches.length, 0, "Zero target touch points.");
       
   147         }, "touchend TouchList lengths are correct.");
       
   148 
       
   149         var t = ev.changedTouches[0];
       
   150 
       
   151         test(function() {
       
   152           assert_equals(t.identifier, touchstart_identifier, "changedTouches identifier matches.");
       
   153         }, "touchend identifier matches.");
       
   154 
       
   155         test(function() {
       
   156           assert_true(t.rotationAngle >= 0, "rotationAngle must be >= 0.");
       
   157           assert_true(t.rotationAngle < 90, "rotationAngle must be > 90.");
       
   158 
       
   159           assert_true(t.radiusX > 0, "radiusX is positive.");
       
   160           assert_true(t.radiusY > 0, "radiusY is positive.");
       
   161 
       
   162           assert_true(t.force >= 0, "force >= 0.");
       
   163           assert_true(t.force <= 1, "force <= 1.");
       
   164         }, "Touch attribute values are valid");
       
   165 
       
   166         test(function() {
       
   167           var attrs = ["screenX", "screenY", "clientX", "clientY",
       
   168                        "pageX", "pageY"];
       
   169           for (var i = 0; i < attrs.length; i++) {
       
   170             assert_true(attrs[i] in t);
       
   171           }
       
   172         }, "Touch location attributes are present.");
       
   173 
       
   174         done();
       
   175       });
       
   176 
       
   177 
       
   178       on_event(target0, "mousedown", function onMouseDown(ev) {
       
   179         test_mousedown.step(function() {
       
   180           assert_true(touchstart_received,
       
   181             "The touchstart event must be dispatched before any mouse " +
       
   182             "events. (If this fails, it might mean that the user agent does " +
       
   183             "not implement W3C touch events at all.)"
       
   184           );
       
   185         });
       
   186         test_mousedown.done();
       
   187 
       
   188         if (!touchstart_received) {
       
   189           // Abort the tests.  If touch events are not supported, then most of
       
   190           // the other event handlers will never be called, and the test will
       
   191           // time out with misleading results.
       
   192           done();
       
   193         }
       
   194       });
       
   195     }
       
   196   </script>
       
   197   <style>
       
   198     div {
       
   199       margin: 0em;
       
   200       padding: 2em;
       
   201     }
       
   202     #target0 {
       
   203       background: yellow;
       
   204       border: 1px solid orange;
       
   205     }
       
   206     #target1 {
       
   207       background: lightblue;
       
   208       border: 1px solid blue;
       
   209     }
       
   210   </style>
       
   211 </head>
       
   212 <body onload="run()">
       
   213   <h1>Touch Events: single-touch tests</h1>
       
   214   <div id="target0">
       
   215     Touch this box with one finger (or other pointing device)...
       
   216   </div>
       
   217   <div id="target1">
       
   218     ...then drag to this box and lift your finger.
       
   219   </div>
       
   220   <div id="log"></div>
       
   221 </body>
       
   222 </html>