<!doctype html>
<meta charset=utf-8>
<html>
<head>
    <title>Test Actions</title>
    <style>
      div { padding: 0; margin: 0; }
      .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>
