<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<style>

.relative200x400 {
    position: relative;
    width: 200px;
    height: 400px;
    font-size: 10px;
}

#test {
    position: absolute;
}

</style>
<div id="tests">
<div class="relative200x400"><div id="test"></div></div>
</div>
<script>

description("Test to make sure top/bottom/left/right properly returns pixel values for any input.")

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


//-----------------------------------------------------------------------------
debug('');
debug('No offsets (zero width/height)');
debug('');
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'400px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

// On padding/border/margin on actual node
debug('');
evalAndLog("test.setAttribute('style', 'padding: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'190px'");
shouldBe("getComputedStyle(test).bottom", "'390px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

debug('');
evalAndLog("test.setAttribute('style', 'border: solid 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'190px'");
shouldBe("getComputedStyle(test).bottom", "'390px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

debug('');
evalAndLog("test.setAttribute('style', 'margin: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'190px'");
shouldBe("getComputedStyle(test).bottom", "'390px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

evalAndLog("test.setAttribute('style', '')");

// On padding/border/margin on parent node
debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
shouldBe("getComputedStyle(test).top", "'5px'");
shouldBe("getComputedStyle(test).left", "'5px'");
shouldBe("getComputedStyle(test).right", "'205px'");
shouldBe("getComputedStyle(test).bottom", "'405px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'400px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'400px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'0px'");

//-----------------------------------------------------------------------------
debug('');
debug('No offsets (50px width/height)');
debug('');
var commonStyle = "width: 50px; height: 50px;";
evalAndLog("test.setAttribute('style', '" + commonStyle + "')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'150px'");
shouldBe("getComputedStyle(test).bottom", "'350px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");

// On padding/border/margin on actual node
debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + " padding: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'140px'");
shouldBe("getComputedStyle(test).bottom", "'340px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");

debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + " border: solid 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'140px'");
shouldBe("getComputedStyle(test).bottom", "'340px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");

debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + " margin: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'140px'");
shouldBe("getComputedStyle(test).bottom", "'340px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");
evalAndLog("test.removeAttribute('style', 'margin')");

// On padding/border/margin on parent node
debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + "')");
debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
shouldBe("getComputedStyle(test).top", "'5px'");
shouldBe("getComputedStyle(test).left", "'5px'");
shouldBe("getComputedStyle(test).right", "'155px'");
shouldBe("getComputedStyle(test).bottom", "'355px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'150px'");
shouldBe("getComputedStyle(test).bottom", "'350px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'150px'");
shouldBe("getComputedStyle(test).bottom", "'350px'");
shouldBe("getComputedStyle(test).width", "'50px'");
shouldBe("getComputedStyle(test).height", "'50px'");


//-----------------------------------------------------------------------------
debug('');
debug('No offsets (100% width/height)');
debug('');
var commonStyle = "width: 100%; height: 100%;";
evalAndLog("test.setAttribute('style', '" + commonStyle + "')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'0px'");
shouldBe("getComputedStyle(test).bottom", "'0px'");
shouldBe("getComputedStyle(test).width", "'200px'");
shouldBe("getComputedStyle(test).height", "'400px'");

// On padding/border/margin on actual node
debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + " padding: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'-10px'");
shouldBe("getComputedStyle(test).bottom", "'-10px'");
shouldBe("getComputedStyle(test).width", "'200px'");
shouldBe("getComputedStyle(test).height", "'400px'");
evalAndLog("test.removeAttribute('style', 'padding')");

debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + " border: solid 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'-10px'");
shouldBe("getComputedStyle(test).bottom", "'-10px'");
shouldBe("getComputedStyle(test).width", "'200px'");
shouldBe("getComputedStyle(test).height", "'400px'");
evalAndLog("test.removeAttribute('style', 'border')");

debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + " margin: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'-10px'");
shouldBe("getComputedStyle(test).bottom", "'-10px'");
shouldBe("getComputedStyle(test).width", "'200px'");
shouldBe("getComputedStyle(test).height", "'400px'");
evalAndLog("test.removeAttribute('style', 'margin')");

// On padding/border/margin on parent node
debug('');
evalAndLog("test.setAttribute('style', '" + commonStyle + "')");
debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
shouldBe("getComputedStyle(test).top", "'5px'");
shouldBe("getComputedStyle(test).left", "'5px'");
shouldBe("getComputedStyle(test).right", "'-5px'");
shouldBe("getComputedStyle(test).bottom", "'-5px'");
shouldBe("getComputedStyle(test).width", "'210px'");
shouldBe("getComputedStyle(test).height", "'410px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'0px'");
shouldBe("getComputedStyle(test).bottom", "'0px'");
shouldBe("getComputedStyle(test).width", "'200px'");
shouldBe("getComputedStyle(test).height", "'400px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
shouldBe("getComputedStyle(test).top", "'0px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'0px'");
shouldBe("getComputedStyle(test).bottom", "'0px'");
shouldBe("getComputedStyle(test).width", "'200px'");
shouldBe("getComputedStyle(test).height", "'400px'");

//-----------------------------------------------------------------------------
debug('');
debug('% offsets (top/left)');
debug('');
evalAndLog("test.setAttribute('style', 'top: 10%; left: 10%; width: 50%; height: 60%;')");
shouldBe("getComputedStyle(test).top", "'40px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'80px'");
shouldBe("getComputedStyle(test).bottom", "'120px'");
shouldBe("getComputedStyle(test).width", "'100px'");
shouldBe("getComputedStyle(test).height", "'240px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
shouldBe("getComputedStyle(test).top", "'45px'");
shouldBe("getComputedStyle(test).left", "'25px'");
shouldBe("getComputedStyle(test).right", "'100px'");
shouldBe("getComputedStyle(test).bottom", "'135px'");
shouldBe("getComputedStyle(test).width", "'125px'");
shouldBe("getComputedStyle(test).height", "'270px'");
evalAndLog("test.parentNode.removeAttribute('style', 'padding')");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
shouldBe("getComputedStyle(test).top", "'40px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'80px'");
shouldBe("getComputedStyle(test).bottom", "'120px'");
shouldBe("getComputedStyle(test).width", "'100px'");
shouldBe("getComputedStyle(test).height", "'240px'");
evalAndLog("test.parentNode.removeAttribute('style', 'border')");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
shouldBe("getComputedStyle(test).top", "'40px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'80px'");
shouldBe("getComputedStyle(test).bottom", "'120px'");
shouldBe("getComputedStyle(test).width", "'100px'");
shouldBe("getComputedStyle(test).height", "'240px'");
evalAndLog("test.parentNode.removeAttribute('style', 'margin')");


//-----------------------------------------------------------------------------
debug('');
debug('% offsets (right/bottom)');
debug('');
evalAndLog("test.setAttribute('style', 'right: 10%; bottom: 10%; width: 90%; height: 80%;')");
shouldBe("getComputedStyle(test).top", "'40px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'20px'");
shouldBe("getComputedStyle(test).bottom", "'40px'");
shouldBe("getComputedStyle(test).width", "'180px'");
shouldBe("getComputedStyle(test).height", "'320px'");


// On padding/border/margin on parent node
debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
shouldBe("getComputedStyle(test).top", "'45px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'25px'");
shouldBe("getComputedStyle(test).bottom", "'45px'");
shouldBe("getComputedStyle(test).width", "'225px'");
shouldBe("getComputedStyle(test).height", "'360px'");
evalAndLog("test.parentNode.removeAttribute('style', 'padding')");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
shouldBe("getComputedStyle(test).top", "'40px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'20px'");
shouldBe("getComputedStyle(test).bottom", "'40px'");
shouldBe("getComputedStyle(test).width", "'180px'");
shouldBe("getComputedStyle(test).height", "'320px'");
evalAndLog("test.parentNode.removeAttribute('style', 'border')");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
shouldBe("getComputedStyle(test).top", "'40px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'20px'");
shouldBe("getComputedStyle(test).bottom", "'40px'");
shouldBe("getComputedStyle(test).width", "'180px'");
shouldBe("getComputedStyle(test).height", "'320px'");
evalAndLog("test.parentNode.removeAttribute('style', 'margin')");


//-----------------------------------------------------------------------------
debug('');
debug('em offsets');
debug('');
evalAndLog("test.setAttribute('style', 'top: 1em; left: 2em; width: 3em; height: 4em;')");
shouldBe("getComputedStyle(test).top", "'10px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'150px'");
shouldBe("getComputedStyle(test).bottom", "'350px'");
shouldBe("getComputedStyle(test).width", "'30px'");
shouldBe("getComputedStyle(test).height", "'40px'");

// On padding/border/margin on parent node
debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
shouldBe("getComputedStyle(test).top", "'10px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'400px'");
shouldBe("getComputedStyle(test).width", "'30px'");
shouldBe("getComputedStyle(test).height", "'40px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
shouldBe("getComputedStyle(test).top", "'10px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'150px'");
shouldBe("getComputedStyle(test).bottom", "'350px'");
shouldBe("getComputedStyle(test).width", "'30px'");
shouldBe("getComputedStyle(test).height", "'40px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
shouldBe("getComputedStyle(test).top", "'10px'");
shouldBe("getComputedStyle(test).left", "'20px'");
shouldBe("getComputedStyle(test).right", "'150px'");
shouldBe("getComputedStyle(test).bottom", "'350px'");
shouldBe("getComputedStyle(test).width", "'30px'");
shouldBe("getComputedStyle(test).height", "'40px'");

//-----------------------------------------------------------------------------
debug('');
debug('Absolute Offsets');
debug('');
evalAndLog("test.setAttribute('style', 'position: absolute; top: 30px; height: 300px;')");
shouldBe("getComputedStyle(test).top", "'30px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'70px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'300px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
shouldBe("getComputedStyle(test).top", "'30px'");
shouldBe("getComputedStyle(test).left", "'25px'");
shouldBe("getComputedStyle(test).right", "'225px'");
shouldBe("getComputedStyle(test).bottom", "'120px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'300px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
shouldBe("getComputedStyle(test).top", "'30px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'70px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'300px'");

debug('');
evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
shouldBe("getComputedStyle(test).top", "'30px'");
shouldBe("getComputedStyle(test).left", "'0px'");
shouldBe("getComputedStyle(test).right", "'200px'");
shouldBe("getComputedStyle(test).bottom", "'70px'");
shouldBe("getComputedStyle(test).width", "'0px'");
shouldBe("getComputedStyle(test).height", "'300px'");

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