<style> 
body     {font-size: 12px;}
#control {font: italic small-caps 900 150%/2em monospace;}
#calc    {font: italic small-caps 900 calc(150%)/2em monospace;}
</style>

<div>
<span id="control">The font size and line height of these lines should be identical</span>
<hr/>
<span id="calc">The font size and line height of these lines should be identical</span>
</div>
<hr/>
<div id="results"></div>

<script>
if (window.testRunner)
    testRunner.dumpAsText();
var controlHeight = getComputedStyle(document.getElementById("control"), null).lineHeight;
var controlSize = getComputedStyle(document.getElementById("control"), null).fontSize;

var spans = document.getElementsByTagName("span");
var sameHeight = true;
var sameSize = true;
for (var i = 0; i < spans.length; ++i) {
    var current = spans[i];
    if (sameHeight)
        sameHeight = getComputedStyle(current, null).lineHeight == controlHeight;
    if (sameSize)
        sameSize = getComputedStyle(current, null).fontSize == controlSize;
}

var results = document.getElementById("results");
if (sameHeight && sameSize) {
    results.style.color = "green";
    results.innerHTML = "PASS";
} else {
    results.style.color = "red";
    results.innerHTML = "FAIL";    
    if (!sameHeight)
        results.innerHTML += "<p>Line heights do not match</p>";
    if (!sameSize)
        results.innerHTML += "<p>Font sizes do not match</p>";
}

</script>