<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
#system_font_1 { font: caption; line-height: 100px; }
#system_font_2 { line-height: 100px; font: caption; }
#shorthand_normal_1 { font: 10px monospace; line-height: 100px; }
#shorthand_normal_2 { line-height: 100px; font: 10px monospace; }
#shorthand_line_height_1 { font: 10px/200px monospace; line-height: 100px; }
#shorthand_line_height_2 { line-height: 100px; font: 10px/200px monospace; }
</style>
<div id="system_font_1"></div>
<div id="system_font_2"></div>
<div id="shorthand_normal_1"></div>
<div id="shorthand_normal_2"></div>
<div id="shorthand_line_height_1"></div>
<div id="shorthand_line_height_2"></div>
<script>
description("Test that line-height in font shorthands cascades correctly.");
function lineHeight(target) {
return getComputedStyle(target).lineHeight;
}
shouldBe("lineHeight(system_font_1)", "'100px'");
shouldBe("lineHeight(system_font_2)", "'normal'");
shouldBe("lineHeight(shorthand_normal_1)", "'100px'");
shouldBe("lineHeight(shorthand_normal_2)", "'normal'");
shouldBe("lineHeight(shorthand_line_height_1)", "'100px'");
shouldBe("lineHeight(shorthand_line_height_2)", "'200px'");
</script>