<!DOCTYPE html>
<html>
  <head>
    <title>Mixing user and programmatic scroll 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 getFrameData(id)
      {
          var result = {};
          var f = document.getElementById(id);
          result.w = f.contentWindow.window;
          var frameBox = f.getBoundingClientRect();
          result.x = frameBox.left + frameBox.width / 2;
          result.y = frameBox.top + frameBox.height / 2;
          return result;
      }

      function waitPromise(delay)
      {
          return new Promise((resolve) => { setTimeout(resolve, delay); });
      }

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

          // This verifies user scroll followed by orthogonal programmatic scroll.
          var d = getFrameData("userYAndProgrammaticX");
          await touchAndDragFromPointToPoint(d.x, d.y, d.x, d.y - 150);
          await liftUpAtPoint(d.x, d.y - 150);
          await waitPromise(1000); // Wait for scrolling to stabilize.
          d.w.scrollBy(100, 0);

          testRunner.notifyDone();
       }
    </script>
    <style>
        iframe {
            position: absolute;
            background: linear-gradient(135deg, red, orange);
            border: 0;
            height: 100px;
            width: 100px;
            overflow: none;
        }
    </style>
  </head>
  <body>
    <p>This test passes if you see a green rectangle.</p>
    <div style="position: absolute; top: 3em; width: 100px; height: 100px; background: green;">
        <iframe id="userYAndProgrammaticX" style="left: 0px; top: 0px;" scrolling="yes" srcdoc="
            <body style='margin: 0; width: 200px; height: 200px'>
                <div style='left: 100px; top: 100px; position: absolute; width: 100px; height: 100px; background: green;'></div>
            </body>" onload="runTest()">
        </iframe>
    </div>
</body>
</html>