blob: 2f112bdf80c9212f47e0a248f687880c167bf5e5 [file] [log] [blame]
<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>