<!DOCTYPE html>
<html>
  <head>
    <title>DOM Fixture</title>
    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
  </head>
  <body>
    <div id="dom">
      <style>
        #nonscroll-becomes-scrollable {
          height: 100px;
          width: 100px;
          overflow: hidden;
        }

        body, h5 {
          margin: 0;
        }
      </style>

      <button>button</button>
      <button>button</button>

      <div id="scroll-into-view-win-horizontal">
        <div style="position: absolute; left: 1500px; top: 0px;">scroll into view horizontal</div>
      </div>

      <div id="scroll-into-view-win-vertical">
        <div style="position: absolute; left: 200px; top: 1500px;">scroll into view vertical</div>
      </div>

      <div id="scroll-into-view-win-both">
        <div style="position: absolute; left: 1500px; top: 1500px;">scroll into view both</div>
      </div>

      <div id="scroll-into-view-horizontal"  style="height: 100px; width: 100px; overflow: auto;">
        <div style="width: 500px; position: relative;">
          Horizontal Scroll
          <h5 style="position: absolute; top: 0px; left: 300px">horiz here</h5>
        </div>
      </div>

      <div id="scroll-into-view-vertical" style="height: 100px; width: 100px; overflow: auto;">
        <div style="height: 500px; position: relative;">
          Vertical Scroll
          <h5 style="position: absolute; top: 300px; left: 0">vert here</h5>
        </div>
      </div>

      <div id="scroll-into-view-both"  style="height: 100px; width: 100px; overflow: auto;">
        <div style="width: 500px; height: 500px; position: relative;">
          Both Scroll
          <h5 style="position: absolute; top: 300px; left: 300px">both here</h5>
        </div>
      </div>

      <div id="scroll-to-vertical" style="height: 100px; width: 100px; overflow: auto;">
        <div style="height: 500px;">Vertical Scroll</div>
      </div>

      <div id="scroll-to-horizontal" style="height: 100px; width: 100px; overflow: auto;">
        <div style="width: 500px;">Horizontal Scroll</div>
      </div>

      <div id="scroll-to-both" style="height: 100px; width: 100px; overflow: auto;">
        <div style="width: 500px; height: 500px">Both Scroll</div>
      </div>

      <div id="nonscroll-becomes-scrollable">
        <div style="height: 1000px; width: 1000px">
          Becomes Scrollable
          <h5 style="position: absolute; top: 300px; left: 300px">here</h5>
        </div>
      </div>
    </div>
  </body>
</html>
