<!DOCTYPE html>
<html>
<head>
    <title>Document::nodesFromRect : Allow child-frame content - bug 95204</title>
    <script src="../../../resources/js-test-pre.js"></script>
    <script src="resources/nodesFromRect.js"></script>
    <style>
        body { margin: 0px; }
        #sandbox {
            width: 400px;
            height: 200px;
        }
        #sandbox #layer {
            float: right;
        }
        #sandbox iframe {
            display: block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: none;
        }
        .rotate180 { -webkit-transform: rotate(180deg); }
        .rotate90 { -webkit-transform: rotate(90deg); }
        #sandbox .box {
            box-sizing: border-box;
            height: 100px;
            width: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body id="body">
    <div id=sandbox>
        <div id=layer>
            <iframe id="iframe1" src="resources/child-frame.html"></iframe>
        </div>
        <div id=div1 class=box></div>
        <div id=div2 class=box></div>
    </div>

    <p id='description'></p>
    <div id="console"></div>
    <script type="application/javascript">
        function runTest()
        {
            description(document.title);

            // Set up shortcut access to elements
            var e = {};
            ['sandbox', 'layer'].forEach(function(a) {
                e[a] = document.getElementById(a);
            });

            checkRect(25, 25, 100, 100, "DIV#div2, DIV#div1, DIV#sandbox");
            checkRect(220, 20, 70, 70, "DIV#left");
            checkRect(250, 20, 100, 70, "DIV#right, DIV#left, HTML");

            checkRect(150, 50, 100, 100, "DIV#left, HTML, #document, IFRAME#iframe1, DIV#layer, DIV#div2, DIV#div1, DIV#sandbox");

            e.layer.setAttribute('class', 'rotate180');
            checkRect(220, 20, 70, 70, "DIV#right");
            checkRect(150, 50, 100, 100, "DIV#right, HTML, #document, IFRAME#iframe1, DIV#layer, DIV#div2, DIV#div1, DIV#sandbox");

            e.layer.setAttribute('class', 'rotate90');
            checkRect(250, 20, 100, 70, "DIV#left");
            checkRect(150, 20, 200, 60, "DIV#left, HTML, #document, IFRAME#iframe1, DIV#layer, DIV#div1, DIV#sandbox");

            e.sandbox.display = 'none';
            finishJSTest();
        }
        jsTestIsAsync = true;
        window.onload = runTest;
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>