<!DOCTYPE html>
<html
  <head>
    <title>position:fixed element inside overflow node inside iframe</title>
    <style>
       iframe {
           position: absolute;
           border: none;
           left: 40px;
           top: 50px;
           width: 300px;
           height: 100px;
       }
    </style>
    <script src="../../../resources/basic-gestures.js"></script>
    <script type="text/javascript">
      if (window.testRunner)
          testRunner.waitUntilDone();

      async function runTest() {
         var frameBox = document.querySelector("iframe").getBoundingClientRect();
         var x = frameBox.left + frameBox.width / 4;
         var ystart = frameBox.top + frameBox.height - 2;
         var yend = frameBox.top + 2;

         if (window.testRunner && testRunner.runUIScript) {
             await touchAndDragFromPointToPoint(x, ystart, x, yend);
             await liftUpAtPoint(x, ystart, x, yend);
             setTimeout(() => { testRunner.notifyDone(); }, 4000);
         }
       }
    </script>
  </head>
  <body>
    <p>The red position:fixed rectangle should not flicker nor disappear when scrolling that iframe.</p>

<iframe srcdoc="
<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
          margin: 0;
          overflow-y: auto;
          height: 100px;
         -webkit-overflow-scrolling: touch;
      }
      #fixed {
          position: fixed;
          top: 10px;
          right: 0px;
          height: 40px;
          width: 50%;
          background: red;
      }
      #content {
          width: 100%;
          height: 1000px;
          background: blue;
      }
    </style>
  </head>
  <body>
    <div id='fixed'></div>
    <div id='content'></div>
  </body>
</html>" onload="runTest()"></iframe>
</body>
</html>