<html>
<head>
    <script>
        function log(message)
        {
            var console = document.getElementById("console");
            console.appendChild(document.createTextNode(message + "\n"));
        }
        function testFrame(name)
        {
            frame = frames[name];
            var doc = frame.document;
            var target = doc.getElementById("target");
            log(name + ": body: (" + doc.body.offsetLeft + ", " + doc.body.offsetTop + ")" +
                " child: (" + target.offsetLeft + ", " + target.offsetTop + ")");
        }
        function test()
        {
            if (window.testRunner)
                testRunner.dumpAsText();

            testFrame("static");
            testFrame("relative");
            testFrame("fixed");
            testFrame("absolute");
        }
    </script>
    <style>
        iframe { border: thin solid; height: 100px; }
    </style>
</head>
<body style="padding: 9px; margin: 10px" onload="test()">
    <pre id="console"></pre>

    <iframe name="static" src='data:text/html,
        <body style="padding: 9px; margin: 10px; outline: thin solid blue;">
            <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
        </body>
    '>
    </iframe>

    <br>

    <iframe name="relative" src='data:text/html,
        <body style="position: relative; left: 12px; width: 150px; padding: 9px; margin: 10px; outline: thin solid blue;">
            <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
        </body>
    '>
    </iframe>

    <br>

    <iframe name="fixed" src='data:text/html,
        <body style="position: fixed; left: 12px; padding: 9px; margin: 10px; outline: thin solid blue;">
            <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
        </body>
    '>
    </iframe>

    <br>

    <iframe name="absolute" src='data:text/html,
        <body style="position: absolute; left: 12px; padding: 9px; margin: 10px; outline: thin solid blue;">
            <div id="target" style="padding: 6px; margin: 8px; outline: thin solid green;"></div>
        </body>
    '>
    </iframe>
</body>
</html>
