<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <style>
        ::-webkit-scrollbar {
            width: 16px;
            height: 16px;
            background-color: silver;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }

        .container {
            display: inline-block;
        }

        .overflowing {
            margin: 20px;
            height: 100px;
            width: 200px;
            border: 1px solid black;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .contents {
            width: 200%;
            height: 200%;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .vertical::-webkit-scrollbar:vertical {
            display: block;
        }

        .horizontal::-webkit-scrollbar:horizontal {
            display: block;
        }
    </style>
    <script src="../../../resources/ui-helper.js"></script>
    <script>
        if (window.testRunner) {
            testRunner.waitUntilDone();
            testRunner.dumpAsText();
        }

        async function doTest()
        {
            if (!testRunner.runUIScript)
                return

            document.getElementById('scrolling-tree').textContent = await UIHelper.getScrollingTree();
            testRunner.notifyDone();
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
  <div class="container">
    <h2>Both</h2>
    <div class="overflowing accelerated horizontal vertical">
      <div class="contents">
      </div>
    </div>
  </div>
  <div class="container">
    <h2>Just horizontal</h2>
    <div class="overflowing accelerated horizontal">
      <div class="contents">
      </div>
    </div>
  </div>
  <div class="container">
    <h2>Just vertical</h2>
    <div class="overflowing accelerated vertical">
      <div class="contents">
      </div>
    </div>
  </div>
  <div class="container">
    <h2>None visible</h2>
    <div class="overflowing accelerated">
      <div class="contents">
      </div>
    </div>
  </div>
<pre id="scrolling-tree"></pre>
</body>
</html>