<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>Resize iframe after orientation change</title>
    <style type="text/css">
      body, div, iframe {
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
      }
    </style>
    <script src="../../../../resources/js-test.js"></script>
    <script>
      if (window.testRunner) {
         testRunner.waitUntilDone();
         testRunner.dumpAsText();
      }
      function rotateDevice(orientation)
      {
          return new Promise(resolve => {
              testRunner.runUIScript(`
                  (function() {
                    uiController.simulateRotation("${orientation}", function() {
                        uiController.doAfterVisibleContentRectUpdate(function () {
                            uiController.uiScriptComplete();
                        })
                    });
                  })();`, resolve);
          });
      }

      async function runTest() {
          if (!window.testRunner || !testRunner.runUIScript)
              return;
          await rotateDevice("landscape-right");
          await rotateDevice("portrait");
          var output = document.getElementById("output");
          var outer = document.getElementById("outer");
          shouldBe("document.getElementById('frame').scrollWidth", "outer.scrollWidth");
          shouldBe("document.getElementById('frame').contentDocument.getElementById('inner').scrollWidth", "outer.scrollWidth");
          testRunner.notifyDone();
      }
    </script>
  </head>
  <body>
    <p>Each time the viewport is resized, the outer div (green),
      iframe (orange) and inner div (pink) should take the full viewport
      width:</p>
    <div id="outer" style="width: 100%; height: 200px;
                border-top: 5px solid lightgreen;
                border-bottom: 5px solid lightgreen;
                background: linear-gradient(to right, cyan, blue)">
      <iframe id="frame" onload="runTest()" style="width: 100%; height: 100px;
                     border-top: 5px solid orange;
                     border-bottom: 5px solid orange;
                     background: linear-gradient(to right, cyan, blue)"
              srcdoc="
		   <html>
		     <head>
		       <meta name='viewport' content='width=device-width'/>
                       <script type='text/javascript'>
                         window.addEventListener('resize', function() {
                           document.getElementById('inner').style.width =
                           window.innerWidth + 'px';
                         });
                       </script>
		     </head>
                     <body style='margin: 0; padding: 0; overflow: hidden;'>
                       <div id='inner'
                            style='width: 50px; height: 50px;
                            border-top: 5px solid pink;
                            border-bottom: 5px solid pink;
			    background: linear-gradient(to right, cyan, blue)'>
                       </div>
                     </body>
		   </html>"></iframe>
    </div>
  </body>
</html>