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