<!DOCTYPE html>
<html>
<head>
<style>
#foo {
background: purple;
border: 10px double #000000;
width: 50%;
height: auto;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
padding-left: auto;
left: auto;
color: white;
font: 24px 'Lucida Grande';
line-height: 24px;
}
</style>
<script>
function log(msg) {
document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
}
function test(prop) {
var div = document.getElementById('foo');
log(prop + ': ' + window.getComputedStyle(div, null).getPropertyValue(prop));
}
function runTests() {
if (window.testRunner)
testRunner.dumpAsText();
test('margin-left');
test('margin-top');
test('margin-right');
test('margin-bottom');
}
</script>
</head>
<body onload="runTests();">
<p>Test calling getPropertyValue on computed margin styles.</p>
<pre id="console"></pre>
<div id="foo">Test</div>
</body>
</html>