common/src/web/scrollingPage.html

<!--Copied from https://github.com/web-platform-tests/wpt/blob/master/webdriver/tests/perform_actions/support/test_actions_scroll_wdspec.html-->

<!doctype html>
<meta charset=utf-8>
<html>

<head>
    <title>Test Actions</title>
    <style>
        div {
            padding: 0px;
            margin: 0px;
        }

        .area {
            width: 100px;
            height: 50px;
            background-color: #ccc;
        }

        #scrollable {
            width: 100px;
            height: 100px;
            overflow: scroll;
        }

        #scrollContent {
            width: 600px;
            height: 1000px;
            background-color: blue;
        }

        #subframe {
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        "use strict";
        var els = {};
        var allEvents = { events: [] };
        function displayMessage(message) {
            document.getElementById("events").innerHTML = "<p>" + message + "</p>";
        }

        function appendMessage(message) {
            document.getElementById("events").innerHTML += "<p>" + message + "</p>";
        }

        function recordWheelEvent(event) {
            allEvents.events.push({
                "type": event.type,
                "button": event.button,
                "buttons": event.buttons,
                "deltaX": event.deltaX,
                "deltaY": event.deltaY,
                "deltaZ": event.deltaZ,
                "deltaMode": event.deltaMode,
                "target": event.target.id
            });
            appendMessage(event.type + " " +
                "button: " + event.button + ", " +
                "pageX: " + event.pageX + ", " +
                "pageY: " + event.pageY + ", " +
                "button: " + event.button + ", " +
                "buttons: " + event.buttons + ", " +
                "deltaX: " + event.deltaX + ", " +
                "deltaY: " + event.deltaY + ", " +
                "deltaZ: " + event.deltaZ + ", " +
                "deltaMode: " + event.deltaMode + ", " +
                "target id: " + event.target.id);
        }

        function resetEvents() {
            allEvents.events.length = 0;
            displayMessage("");
        }

        document.addEventListener("DOMContentLoaded", function () {
            var outer = document.getElementById("outer");
            outer.addEventListener("wheel", recordWheelEvent);

            var scrollable = document.getElementById("scrollable");
            scrollable.addEventListener("wheel", recordWheelEvent);
        });
    </script>
</head>

<body>
    <div>
        <h2>ScrollReporter</h2>
        <div id="outer" class="area">
        </div>
    </div>
    <div>
        <h2>OverflowScrollReporter</h2>
        <div id="scrollable">
            <div id="scrollContent"></div>
        </div>
    </div>
    <div>
        <h2>IframeScrollReporter</h2>
        <iframe id='subframe' srcdoc='
      <script>
        document.scrollingElement.addEventListener("wheel",
          function(event) {
            window.parent.allEvents.events.push({
            "type": event.type,
            "button": event.button,
            "buttons": event.buttons,
            "deltaX": event.deltaX,
            "deltaY": event.deltaY,
            "deltaZ": event.deltaZ,
            "deltaMode": event.deltaMode,
            "target": event.target.id
          });
          }
        );
      </script>
      <div id="iframeContent"
       style="width: 7500px; height: 7500px; background-color:blue" ></div>'>
        </iframe>
    </div>
    <div id="resultContainer">
        <h2>Events</h2>
        <div id="events"></div>
    </div>
</body>

</html>