<!DOCTYPE html>
<html>
  <head>
    <style>
      iframe {
        border-style: solid;
        border-width: 5px;
        width: 40%;
        height: 15em;
        position: absolute;
      }

      .left {
        border-color: red;
        left: 3em;
      }
      .right {
        border-color: green;
        right: 3em;
      }
    </style>
  </head>
  <body>
    <p>This is almost the same test as
    dynamic-frame-creation-order-onload-handler.html except that the dynamic
    frames are created from an inline script, rather than in response to an
    onload event.
    </p>
    <p>If we enable back-forward cache, back navigation doesn't run inline
    script and thus this test fails.
    </p>
    <hr>
    <p>Frame creation order during this page load:</p>
    <ul id="order-description"></ul>
    <hr>
    <p>Final frame URLs during this page load (should match the list above):</p>
    <ul id="final-urls"></ul>
    <hr>
    Dynamically created frames:
    <div id="dynamically-created-frames">
    </div>
    <script>
      if (window.testRunner) {
          testRunner.dumpAsText();
          testRunner.waitUntilDone();
      } else {
          // Disable page cache when not running under the DRT.
          onunload = function() {};
      }

      window.onAllFramesLoaded = function() {
          if (sessionStorage.didNav) {
              delete sessionStorage.didNav;
              if (window.testRunner)
                  testRunner.notifyDone();
          } else if (window.testRunner) {
              // Navigate in a timeout to make sure we generate a history entry
              // that we can go back to.
              setTimeout(function() { location.href = 'resources/back.html'; }, 0);
              sessionStorage.didNav = true;
          }
      };

      function addFinalFrameURL(className) {
        var frame = document.getElementsByClassName(className)[0]
        var finalUrlsList = document.getElementById("final-urls");
        var listItem = document.createElement('li');
        listItem.innerText = ('URL of ' + className + ' is '
            + frame.contentWindow.location.href);
        finalUrlsList.appendChild(listItem);
      }

      var numberOfLoadedFrames = 0;
      function onFrameLoaded() {
        numberOfLoadedFrames = numberOfLoadedFrames + 1;
        if (numberOfLoadedFrames == 2) {
          addFinalFrameURL("left");
          addFinalFrameURL("right");
          window.onAllFramesLoaded();
        }
      }

      window.addEventListener("message", receiveMessage, false);
      function receiveMessage(event)
      {
        if (event.data == "frame-loaded") {
          onFrameLoaded();
        }
      }

      function addFrame(src, className) {
        var iframe = document.createElement('iframe');
        iframe.src = src;
        iframe.className = className;

        var framesDiv = document.getElementById("dynamically-created-frames");
        framesDiv.appendChild(iframe);

        var orderDescriptionList = document.getElementById("order-description");
        var listItem = document.createElement('li');
        listItem.innerText = 'Created <iframe class="' + className +
          '" src="' + src + '"></iframe>';
        orderDescriptionList.appendChild(listItem);
      }

      function addLeftFrame() { addFrame('resources/red.html', 'left'); }
      function addRightFrame() { addFrame('resources/green.html', 'right'); }

      if (!sessionStorage.pageLoadCount)
        sessionStorage.pageLoadCount = 0;
      sessionStorage.pageLoadCount = parseInt(sessionStorage.pageLoadCount) + 1;

      if ((sessionStorage.pageLoadCount % 2) == 0) {
        addLeftFrame();
        addRightFrame();
      } else {
        addRightFrame();
        addLeftFrame();
      }
    </script>
  </body>
</html>