chromium/src/third_party/blink/web_tests/http/tests/history/dynamic-frame-creation-order-onload-handler.html - manifest_repos/chromium_src - Git at Google

 <!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>
     <script>
       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'); }

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

         if ((sessionStorage.pageLoadCount % 2) == 0) {
           addLeftFrame();
           addRightFrame();
         } else {
           addRightFrame();
           addLeftFrame();
         }
       }
     </script>
   </head>
   <body onload="onLoad()">
     <p>Checks that history navigations don't accidentally swap frame contents
     (if the order in which subframes are created has changed).
     This is a regression test for <a href="https://crbug.com/500260"
     >issue 500260</a> and corresponds to
     http://anforowicz.github.io/frame-creation-order/index.htm
     which is one of manual tests listed in https://crbug.com/500260#c24.
     </p>

     <p>This page dynamically (e.g. from javascript) creates 2 subframes:
     <pre>
     &lt;iframe class=&quot;left&quot; src=&quot;resources/red.htm&quot;&gt;&lt;/iframe&gt;
     &lt;iframe class=&quot;right&quot; src=&quot;resources/green.htm&quot;&gt;&lt;/iframe&gt;
     </pre>
     The tricky part is that the order of subframe creation changes at each load
     (via sessionStorage.pageLoadCount).  This can confuse the browser into restoring
     (after back navigation) green.htm into left frame and red.htm into right frame.
     </p>

     <p>This test expects to reset and reload iframes on main frame's back
     navigation. Back-forward cache needs to be disabled to run this test.
     </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;
           }
       };
     </script>
   </body>
 </html>
	<!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>
	<script>
	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'); }

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

	if ((sessionStorage.pageLoadCount % 2) == 0) {
	addLeftFrame();
	addRightFrame();
	} else {
	addRightFrame();
	addLeftFrame();
	}
	}
	</script>
	</head>
	<body onload="onLoad()">
	<p>Checks that history navigations don't accidentally swap frame contents
	(if the order in which subframes are created has changed).
	This is a regression test for <a href="https://crbug.com/500260"
	>issue 500260</a> and corresponds to
	http://anforowicz.github.io/frame-creation-order/index.htm
	which is one of manual tests listed in https://crbug.com/500260#c24.
	</p>

	<p>This page dynamically (e.g. from javascript) creates 2 subframes:
	<pre>
	<iframe class="left" src="resources/red.htm"></iframe>
	<iframe class="right" src="resources/green.htm"></iframe>
	</pre>
	The tricky part is that the order of subframe creation changes at each load
	(via sessionStorage.pageLoadCount). This can confuse the browser into restoring
	(after back navigation) green.htm into left frame and red.htm into right frame.
	</p>

	<p>This test expects to reset and reload iframes on main frame's back
	navigation. Back-forward cache needs to be disabled to run this test.
	</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;
	}
	};
	</script>
	</body>
	</html>