46 lines
1.4 KiB
HTML
46 lines
1.4 KiB
HTML
<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>
|