<!DOCTYPE html>
<html>
<head>
<style>
.outer {
width: 500px;
height: 300px;
border: 1px solid black;
}
#abs_container {
position: relative;
}
.testbox {
color: white;
font: 24px 'Lucida Grande';
background: green;
border: 1em solid black;
}
#fixed {
line-height: 30px;
width: 150px;
height: 100px;
margin-top: 15px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
padding: 20px;
}
#percents {
line-height: 150%;
width: 50%;
height: 25%;
margin-top: 10%;
margin-right: 5%;
margin-bottom: 10%;
margin-left: 20%;
padding: 5%;
}
#ems {
line-height: 24px;
width: 10em;
height: 5em;
margin-top: 1em;
margin-right: .5em;
margin-bottom: 1.5em;
margin-left: 2em;
padding: .75em;
}
#auto {
line-height: 30px;
width: 200px;
height: auto;
margin: 0px auto;
padding: auto;
}
#mixed {
line-height: 200%;
width: 30%;
height: 20%;
margin-top: 3em;
/* margin-right/margin-bottom omitted */
margin-left: auto;
padding-top: 40px;
padding-right: 10%;
padding-bottom: 1em;
padding-left: auto;
}
#rel_positioned {
position: relative;
line-height: 30px;
width: 150px;
height: 100px;
left: 10px;
top: 15px;
margin-top: 15px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
padding: 20px;
}
#abs_positioned {
position: absolute;
line-height: 30px;
width: 150px;
height: 100px;
right: 10px;
bottom: 15px;
margin-top: 15px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
padding: 20px;
}
#ruby {
left: 10%;
position: relative;
}
</style>
<script>
var resolvedValueStyles = [
'line-height',
'width',
'height',
'top',
'right',
'bottom',
'left',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left'
];
var displayValues = [
'block',
'inline',
'inline-block',
'none'
];
function log(msg) {
document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
}
function test(id) {
var div = document.getElementById(id),
prop, displayValue, style, computedStyle;
for (var i = 0; i < displayValues.length; i++) {
div.style.display = displayValue = displayValues[i];
computedStyle = window.getComputedStyle(div, null);
log('Resolved values for element "' + id + '" with display "' + displayValue + '":');
for (var j = 0; j < resolvedValueStyles.length; j++) {
style = resolvedValueStyles[j];
log(style + ': ' + computedStyle.getPropertyValue(style));
}
log('');
}
div.style.display = '';
log('');
}
function runTests() {
if (window.testRunner)
testRunner.dumpAsText();
test('fixed');
test('percents');
test('ems');
test('auto');
test('mixed');
test('rel_positioned');
test('abs_positioned');
test('ruby');
}
</script>
</head>
<body onload="runTests();">
<p>
Test calling getPropertyValue on computed styles that return "resolved" values.<br />
See <a href="http://dev.w3.org/csswg/cssom/#resolved-values">http://dev.w3.org/csswg/cssom/#resolved-values</a> for more information.
</p>
<pre id="console"></pre>
<div class="outer">
<div class="testbox" id="fixed">Fixed</div>
</div>
<div class="outer">
<div class="testbox" id="percents">Percents</div>
</div>
<div class="outer">
<div class="testbox" id="ems">EMs</div>
</div>
<div class="outer">
<div class="testbox" id="auto">Auto</div>
</div>
<div class="outer">
<div class="testbox" id="mixed">Mixed</div>
</div>
<div class="outer">
<div class="testbox" id="rel_positioned">Relative Positioned</div>
</div>
<div class="outer" id="abs_container">
<div class="testbox" id="abs_positioned">Absolute Positioned</div>
</div>
<div class="outer">
<ruby class="testbox" id="ruby"></ruby>
</div>
</body>
</html>