<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=384419
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test for bug 384419</title>

    <script src="/tests/SimpleTest/SimpleTest.js"></script>
    <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

    <style type="text/css">
        html,body {
             color:black; background-color:white; font-size:16px; padding:0; margin:0;
        }
        body { margin: 10px; }
        table { border:15px solid black; margin-left:100px; }
</style>


<script type="text/javascript">
function t3(id,expected,pid) {
  var el = document.getElementById(id);
  var actual = el.offsetLeft;
  is(actual, expected, id+".offsetLeft");

  var p = document.getElementById(id).offsetParent; 
  is(p.id, pid, id+".offsetParent");
}

function run_test() {
   t3('rel384419',135,'body');
   t3('abs384419',135,'body');
   t3('fix384419',135,'body');
}
</script>

</head>
<body id="body">
<!-- It's important for the test that the tables below are directly inside body -->
<table cellpadding="7" cellspacing="3"><tr><td width="100"><div id="rel384419" style="position:relative;border:1px solid blue">X</div> relative</table>
<table cellpadding="7" cellspacing="3"><tr><td width="100"><div id="abs384419" style="position:absolute;border:1px solid blue">X</div> absolute</table>
<table cellpadding="7" cellspacing="3"><tr><td width="100"><div id="fix384419" style="position:fixed;border:1px solid blue">X</div> fixed</table>


<pre id="test">
<script class="testbody" type="text/javascript">
run_test();
</script>
</pre>

<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=384419">bug 384419</a>

</body>
</html>
