<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" srcdoc='
<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" srcdoc='
<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" srcdoc='
<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" srcdoc='
<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>
Codebase Browser
chromium