<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<body>
    <div id="testContainer1" style="width: 100px; height: 200px;">
        <div id="test1" style="position:relative; top:-1px; left:-2px;"></div>
    </div>

    <div id="testContainer2" style="width: 100px; height: 200px;">
        <div id="test2" style="position:relative; top:-1px; left:-2px; height:100%;"></div>
    </div>

    <div id="testContainer3" style="width: 100px; height: 200px;">
        <div id="test3" style="position:relative; top:-1px; left:-2px; height:auto;"></div>
    </div>

<script>
description("Test computed offsets on elements with negative top and left.")

var test = document.getElementById('test');
var style;

function testStyle(name)
{
    debug('');
    debug(name);
    shouldBe("style.top", "'-1px'");
    shouldBe("style.left", "'-2px'");
    shouldBe("style.bottom", "'1px'");
    shouldBe("style.right", "'2px'");
}

style = document.defaultView.getComputedStyle(document.getElementById("test1"), "");
testStyle("With no height");

style = document.defaultView.getComputedStyle(document.getElementById("test2"), "");
testStyle("With height:100%;");

style = document.defaultView.getComputedStyle(document.getElementById("test3"), "");
testStyle("With height:auto;");

</script>

<script src="../../../resources/js-test-post.js"></script>
</body>
