<!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>