<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/drag-and-drop-autoscroll-frame.js"></script>
<style type="text/css">
    #draggable {
      padding: 5pt;
      border: 3px solid #00cc00;
      background: #00cccc;
      width: 80px;
      cursor: pointer;
    }
    #scrollable {
        height: 400px;
        width: 400px;
        overflow: auto;
        font-size: 80px;
    }
    #container {
      position: relative;
      left: 2000px;
      top: 2000px;
    }
    #sample {
      width: 2000px;
      height: 2000px;
    }
    body {
      margin: 0;
    }
</style>
For manual testing, drag and drop "Drop Me" to "Scrollable" area.
<div id="draggable" draggable="true">Drop Me</div>
<div id="scrollbars" style="overflow: scroll"><div>scrollbars</div></div>
Scrollable
<div id="scrollable">
  <div id="container">
    <table id="sample" border="1">
      <tr><td width="50%">North West</td><td width="50%">North East</td></tr>
      <tr><td width="50%">South West</td><td width="50%">South East</td></tr>
    </table>
  </div>
</div>