tests/touch-events-v1/submissions/Mozilla/multi-touch.html
author Art Barstow <art.barstow@nokia.com>
Tue, 17 Jan 2012 10:13:37 -0500
changeset 153 8066aa392c1b
parent 152 3aed607ba8d1
permissions -rw-r--r--
updated location of testharness.js
<!DOCTYPE HTML>
<html>
<head>
  <title>Touch Events: Multi-touch tests</title>
  <meta name="viewport" content="width=device-width">
  <script src="../../../testharness.js"></script>
  <script>
    setup({explicit_done: true});

    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 = 0;
      var touchmove_received = false;
      var invalid_touchmove_received = false;
      var maxTouchCount = 0;

      on_event(target0, "touchstart", function onTouchStart(ev) {
        ev.preventDefault();

        if (!touchstart_received) {
          test_touchstart.step(function() {
            assert_false(touchmove_received, "touchstart precedes touchmove");
          });
        } else {
          test(function() {
            assert_true(ev.touches.length == 2, "Should have seen 2 touches.");
            assert_true(ev.changedTouches.length == 1, "Should have only 1 current touch.");
            assert_true(ev.targetTouches.length == 2, "Should have 2 target touches.");
          }, "Multiple touch objects detected when handling touchstart.");
        }
        ++touchstart_received;
        test_touchstart.done();
        test_mousedown.done(); // If we got here, then the mouse event test is not needed.
        
      });


      on_event(target0, "touchmove", function onTouchMove(ev) {
        ev.preventDefault();
        touchmove_received = true;

        test_touchmove.step(function() {
          assert_true(touchstart_received != 0, "touchend follows touchstart");
        });
        test_touchmove.done();

        maxTouchCount =
          ev.touches.length > maxTouchCount ? ev.touches.length : maxTouchCount 
      });

      on_event(target1, "touchmove", function onTouchMove(ev) {
        invalid_touchmove_received = true;
      });

      on_event(window, "touchend", function onTouchEnd(ev) {
        test_touchend.step(function() {
          assert_equals(ev.target, target0, "touchend is dispatched to the original target");
          assert_true(touchstart_received != 0, "touchend follows touchstart");
          assert_true(touchmove_received, "touchend follows touchmove");
          assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
          assert_equals(touchstart_received, 2, "Should have got 2 touchstart events before touchend.")
        });
        test_touchend.done();

        test(function() {
          assert_true(maxTouchCount == 2, "Should have seen 2 touches.");
        }, "Multiple touch objects detected.");

        
        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: Multi-touch tests</h1>
  <div id="target0">
    Touch this box with one finger, then another one...
  </div>
  <div id="target1">
    ...then drag to this box and lift your fingers.
  </div>
  <div id="log"></div>
</body>
</html>