wheel-basic.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /uievents/order-of-events/mouse-events/wheel-basic.html - WPT Dashboard Interop Dashboard

<!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>