<!DOCTYPE html>
<html>
  <head>
    <title>Scrolling of iframe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../../resources/basic-gestures.js"></script>
    <script type="text/javascript">
      if (window.testRunner)
          testRunner.waitUntilDone();
      if (window.internals)
          internals.settings.setAsyncFrameScrollingEnabled(true);

      function centerOf(id)
      {
          var frameBox = document.getElementById(id).getBoundingClientRect();
          return { x: frameBox.left + frameBox.width / 2, y: frameBox.top + frameBox.height / 2 };
      }

      async function runTest() {
         if (!window.testRunner || !testRunner.runUIScript)
             return;

         // This checks scrolling to the location of the green square.
         var c = centerOf("largeContent");
         await touchAndDragFromPointToPoint(c.x, c.y, c.x, c.y - 2000);
         await liftUpAtPoint(c.x, c.y - 2000);

         // Wait for scrolling to stabilize and for scrollbars to disappear.
         setTimeout(() => {testRunner.notifyDone(); }, 2000);
       }
    </script>
    <style>
        iframe {
            float: left;
            background: linear-gradient(135deg, red, orange);
            border: 0;
            height: 100px;
            width: 100px;
        }
    </style>
  </head>
  <body>
    <p>This test passes if you see a green square.</p>
    <iframe id="largeContent" scrolling="yes" srcdoc="
        <body style='margin: 0;'>
        <div style='width: 100px; height: 500px; background: red;'></div>
        <div style='width: 100px; height: 500px; background: blue;'></div>
        <div style='width: 100px; height: 500px; background: red;'></div>
        <div style='width: 100px; height: 500px; background: blue;'></div>
        <div style='width: 100px; height: 500px; background: green;'></div>
        </body>" onload="runTest()">
    </iframe>
  </body>
</html>