<!DOCTYPE html>
<html>
<head>
  <script src="../../../fast/forms/resources/picker-common.js"></script>
  <style>
    select {
      display: block;
      margin: 5px;
    }
  </style>
  <script>
    // We need to 'click' the select element by sending an actual event
    // through internals, since the regular javascript click() method
    // won't trigger the right events for this test.
    function clickSelect(callback) {
      if (!window.eventSender)
        return;

      var select = document.getElementById('select');
      // FIXME: it would be really nice to use getBoundingClientRect() and not
      // hard-code pixel coordinates here, but since it's in an iframe, the
      // coordinates are translated anyway.
      clickToOpenPicker(50, 120, callback, function () {
          setTimeout(callback, 0);
      });
    }

    // We'll get a message from the outer frame when it's done scrolling,
    // so we know it's time to click on a select element.
    window.onmessage = function() {
      clickSelect(function () {
        if (window.testRunner)
          window.testRunner.notifyDone();
      });
    };

    // This function just saves us from hard-coding 30 select elements
    // (each with a few option elements) in the body. One of the
    // select elements near the bottom is given an id so we can click
    // on it later.
    function populateDom() {
      for (var x = 0; x < 30; x++) {
        var select = document.createElement('select');
        for (var y = 0; y < 4; ++y) {
          var option = document.createElement('option');
          option.innerText = y;
          select.appendChild(option);
        }

        if (x == 24) {
          select.id = 'select';
        }

        document.body.appendChild(select);
      }
    }

    // Javascript execution starts here. This will populate the iframe
    // with a bunch of select elements, then post a message to the
    // outer iframe to tell it to scroll.
    window.onload = function() {
      populateDom();
      parent.postMessage('', '*');
    };
  </script>
</head>

<body>
</body>