<!DOCTYPE html>

<html>
<head>
    <!--
        This content was originally intended as a layout test, but the sequencing performed by 
        queueBackNavigation/queueForwardNavigation differs somehow from what occurs when hitting 
        the back and forward buttons, so the error does not occur. I've left all the LayoutTestController 
        logic in the test in case this is fixed in the future.
    -->
    
    <title>Show composited iframe contents when navigating back to page</title>
    <style type="text/css" media="screen">
        #box {
            background-color: red;
            width: 100px;
            height: 100px;
            transform: translateZ(0);
        }
        iframe {
            margin: 20px;
            height: 250px;
            width: 250px;
            border: 1px solid black;
        }
    
        .composited {
            transform: translateZ(0);
        }
    
    </style>
    <script type="text/javascript" charset="utf-8">
        var dumpLayerTree = function()
        {
            if (window.layoutTestController) {
                document.getElementById('layers').innerHTML += "Layer Tree after\n\n"+layoutTestController.layerTreeAsText()+"\n\n";
            }
        }
        
        if (window.layoutTestController) {
            layoutTestController.dumpAsText();
        }
        
        function onPageShow(evt)
        {
            if (!evt.persisted && window.layoutTestController) {
                // this is the first time the page has been loaded, then setup the
                // to-be-tested scenario.
                document.getElementById('layers').innerHTML = "Layer Tree before\n\n"+layoutTestController.layerTreeAsText()+"\n\n";
                layoutTestController.queueLoad("resources/subframe.html");
                layoutTestController.queueBackNavigation(1);
                layoutTestController.queueForwardNavigation(1);
                layoutTestController.queueBackNavigation(1);
                layoutTestController.queueNonLoadingScript("dumpLayerTree()");
            }
        }

        window.onpageshow = onPageShow;
    </script>
</head>
<body>
<p>
    This page has a composited iframe. When navigating to a new page and then back to this one, the iframe contents should show up.
</p>
    Click on the following URL and then click back. When navigating back to this page, the blue box inside the black rectangle
    should show up.
</p>
<pre>
              <a href="http://apple.com">http://apple.com</a>
</pre>
    <div id=box></div>
    <iframe id="iframe" scrolling="no" src="resources/composited-subframe.html"></iframe>
<br>
<pre id="layers"></pre>
</body>
</html>