<!DOCTYPE html>

<html>
<head>
    <style>
      body {
        height: 2200px;
      }
      
      .fixed {
        position: fixed;
        top: 0;
        left: 0;
        margin: 10px;
        height: 50px;
        background-color: rgba(0, 128, 0, 0.8);
        border: 2px solid black;
        -webkit-box-shadow: 0 0 10px black;
      }
      
      .top, .bottom {
        width: 96%;
      }

      .left {
        top: 200px;
        left: 10px;
        width: 150px;
        height: 300px;
      }

      .right {
        top: 200px;
        left: auto;
        right: 10px;
        width: 150px;
        height: 300px;
      }
      
      .bottom {
        top: auto;
        bottom: 10px;
      }
      
    </style>
    <script>
    if (window.testRunner) {
        testRunner.waitUntilDone();
        testRunner.dumpAsText();
    }

    function doScroll()
    {
        window.setTimeout(function() {
            if (window.eventSender)
                eventSender.scalePageBy(2.3, 0, 0);

            if (window.testRunner) {
                document.getElementById('results').textContent = window.internals.scrollingStateTreeAsText() + '\n' +
                internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS | internals.LAYER_TREE_INCLUDES_TILE_CACHES);

                testRunner.notifyDone()
            }
        }, 10);
    }

    window.addEventListener('load', doScroll, false);
    </script>
</head>
<body>

<pre id="results"></pre>

<div class="fixed top">
  This is the top bar.
</div>
<div class="fixed left">
  This is the left bar.
</div>
<div class="fixed right">
  This is the right bar.
</div>
<div class="fixed bottom">
  This is the bottom bar.
</div>

</body>
</html>