<!doctype html>
<head>
  <meta charset=utf-8>
  <title>WheelEvent - basic wheel event</title>
  <style>
    .testarea{ margin: auto; width: 800px; height: 250px; border: 1px solid grey; position: relative; }

    #wheelbox, #scrollbox { background-color: red; border: 1px solid black; margin: 0; padding: 0; }
    #wheelbox.green, #scrollbox.green { background-color: green; }
    #wheelbox { position: absolute; left: 15%; top: 15%; width: 50%; height: 50% }
    #scrollbox { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50% }
  </style>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script>
    setup({explicit_timeout: true});
  </script>
  <script src="/uievents/resources/eventrecorder.js"></script>
</head>

<body>
  <p><strong>Description</strong>: Verifies that wheel events are captured and sent</p>
  <p><strong>Instructions</strong>: </p>
  <ol>
    <li>Place your mouse pointer over the top box</li>
    <li>Scroll the mouse wheel to change the box color</li>
    <li>Move the mouse pointer to the second box</li>
    <li>Scroll the mouse wheel again to change this box's color</li>
  </ol>
  <p><strong>Test Passes</strong> if the box turns green and the word 'PASS' appears below</p>

  <section class="testarea">
    <div id="scrollbox"></div>
    <div id="wheelbox"></div>
  </section>

  <script>
    var wheelbox = document.getElementById("wheelbox");
    var scrollbox = document.getElementById("scrollbox");
    var test_wheel = async_test("wheel event test");
    var actions_promise;

    EventRecorder.configure({
      mergeEventTypes: ['wheel'],
      objectMap: {
        "div#wheelbox": wheelbox,
        "div#scrollbox": scrollbox
      }
    });

    wheelbox.addRecordedEventListener('wheel', function (e) {
      e.stopPropagation();
      this.className = "green";
    });

    scrollbox.addRecordedEventListener('wheel', function (e) {
      e.stopPropagation();
      this.className = "green";
      endTest();
      // Make sure the test finishes after all the input actions are completed.
      actions_promise.then( () => {
        test_wheel.done();
      });
    });

    function endTest() {
      EventRecorder.stop();
      var results = EventRecorder.getRecords();
      test_wheel.step(function () {
        // Check results:
        assert_equals(results.length, 2, "Two mousemove events");
        assert_equals(results[0].event.type, 'wheel', "First event is a wheel event");
        assert_equals(results[1].event.type, 'wheel', "Second event is a wheel event");
        assert_equals(results[0].event.target, 'div#wheelbox', "First event targetted wheelbox");
        assert_equals(results[1].event.target, 'div#scrollbox', "Second event targetted scrollbox");
      });
    }

    EventRecorder.start();

    // Inject wheel inputs.
    actions_promise = new test_driver.Actions()
        .scroll(0, 0, 0, 10, {origin: wheelbox})
        .scroll(160, 50, 0, 20, {origin: scrollbox})
        .send();
  </script>
</body>
</html>