blob: 864214d2dfe4812d11082984dca15c54a4e512bc [file] [log] [blame]
<!DOCTYPE HTML>
<script src="../../resources/js-test-pre.js"></script>
<style>
#control {font: 1.5em/63px sans-serif;}
#calc-size {font: calc(1.5em)/63px sans-serif}
#calc-height {font: 1.5em/calc(126px / 2) sans-serif}
#calc-both {font: calc(1.5em)/calc(63px) sans-serif}
#calc-percent-size {font: calc(100% + 0.5em)/63px sans-serif}
</style>
<div id="test-container">
<span id="control">The font size and line height of these lines should be identical</span>
<hr/>
<span class="fonttest" id="calc-size">The font size and line height of these lines should be identical</span>
<hr/>
<span class="fonttest" id="calc-height">The font size and line height of these lines should be identical</span>
<hr/>
<span class="fonttest" id="calc-both">The font size and line height of these lines should be identical</span>
<hr/>
<span class="fonttest" id="calc-percent-size">The font size and line height of these lines should be identical</span>
</div>
<script>
description("Tests that CSS3 calc() can be used with the font property");
var spans = document.getElementsByClassName("fonttest");
for (var i = 0; i < spans.length; ++i) {
var current = spans[i];
shouldBeEqualToString('getComputedStyle(document.getElementById("' + current.id + '"), null).lineHeight', getComputedStyle(document.getElementById("control"), null).lineHeight);
shouldBeEqualToString('getComputedStyle(document.getElementById("' + current.id + '"), null).fontSize', getComputedStyle(document.getElementById("control"), null).fontSize);
}
if (window.testRunner)
document.body.removeChild(document.getElementById("test-container"));
</script>
<script src="../../resources/js-test-post.js"></script>