<html>
<head>
  <title>Overflow scrollbar hit testing</title>
  <style type="text/css" media="screen">
    .box {
      display: inline-block;
      width: 150px;
      height: 150px;
      border: 20px inset gray;
      padding: 10px;
      margin: 15px;
      overflow: scroll;
    }
    
    .inner {
      width: 300px;
      height: 300px;
      border: 1px solid gray;
    }
    
    #results {
      margin-top: 50px;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    function sendClick(element, clientX, clientY)
    {
      if (window.eventSender) {
        eventSender.mouseMoveTo(clientX, clientY);
        eventSender.mouseDown();
        eventSender.mouseUp();
      }
    }

    function mouseDownOnOverflowDiv(elementId, translateX, translateY)
    {
      log('Testing clicks on ' + elementId);

      var element = document.getElementById(elementId);
      var scrollIncrement = 40;
      var border = 20;
      var scrollbarWidth = 16;
      var scrollbarHeight = 16;
      
      var scrollbarMidX = translateX + element.offsetLeft + element.offsetWidth - border - scrollbarWidth / 2;
      // Recall that DRT sets scroll arrows to be together at end end of the scrollbar
      var scrollbarTopArrowY = translateY + element.offsetTop + element.offsetHeight - border - scrollbarHeight - scrollbarHeight - 3;
      var scrollbarBottomArrowY = translateY + element.offsetTop + element.offsetHeight - border - scrollbarHeight - 3;
      
      sendClick(element, scrollbarMidX, scrollbarBottomArrowY);
      sendClick(element, scrollbarMidX, scrollbarBottomArrowY);
      if (element.scrollTop == 2 * scrollIncrement)
        log('Scrolled down by ' + (2 * scrollIncrement) + ' on down arrow click: PASS');
      else
        log('Failed to scroll down - scrollTop is ' + element.scrollTop + ': FAIL');

      sendClick(element, scrollbarMidX, scrollbarTopArrowY);
      if (element.scrollTop == scrollIncrement)
        log('Scrolled up by ' + scrollIncrement + ' on up arrow click: PASS');
      else
        log('Failed to scroll up - scrollTop is ' + element.scrollTop + ': FAIL');

      log('');
    }
    
    function log(msg)
    {
      var results = document.getElementById('results');
      results.innerHTML += msg + '<br>';
    }
    
    function test()
    {
      if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
      }
      
      if (!window.eventSender) {
        log('This test only runs in DRT');
      }
      
      // Have to wait for the select to be painted before the
      // scrollbar is sized correctly.
      setTimeout(function() {
        mouseDownOnOverflowDiv('box1', 0, 0);
        mouseDownOnOverflowDiv('box2', 50, 50);
        if (window.testRunner)
          testRunner.notifyDone();
      }, 0);
    }
  </script>
</head>
<body onload="test()">


  <div class="box" id="box1">
    <div class="inner">Inner</div>
  </div>

  <div class="box" id="box2" style="-webkit-transform: translate(50px, 50px);">
    <div class="inner">Inner</div>
  </div>

  <div id="results">
  </div>
</body>
</html>