blob: 7e774bfa391489aef608b778c2d2639c206ef5a8 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "foobar";
src: local("foobar");
}
div {
font-family: "foobar";
}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description("Test the return values for the font properties on the style object.")
var testContainer = document.createElement("div");
document.body.appendChild(testContainer);
testContainer.innerHTML = '<div id="test">hello</div>';
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
// This function checks the return value of style.font and verifies WebKit can parse it.
function checkFontStyleValue() {
var before = e.style.getPropertyValue('font');
e.style.font = '';
e.style.font = before;
return (e.style.getPropertyValue('font') === before);
}
style.fontSize = "20px";
// We need at least the font-family to build the shorthand.
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'normal normal normal normal 20px/23px foobar'");
shouldBe("computedStyle.fontSize", "'20px'");
shouldBe("checkFontStyleValue()", "true");
style.fontSize = "20px";
style.fontFamily = "sans-serif";
shouldBe("style.font", "'20px sans-serif'");
shouldBe("computedStyle.font", "'normal normal normal normal 20px/23px sans-serif'");
shouldBe("computedStyle.fontFamily", "'sans-serif'");
shouldBe("checkFontStyleValue()", "true");
style.fontStyle = "italic";
shouldBe("style.font", "'italic 20px sans-serif'");
shouldBe("computedStyle.font", "'italic normal normal normal 20px/23px sans-serif'");
shouldBe("computedStyle.fontStyle", "'italic'");
shouldBe("checkFontStyleValue()", "true");
style.fontVariant = "small-caps";
shouldBe("style.font", "'italic small-caps 20px sans-serif'");
shouldBe("computedStyle.font", "'italic small-caps normal normal 20px/23px sans-serif'");
shouldBe("computedStyle.fontVariant", "'small-caps'");
shouldBe("checkFontStyleValue()", "true");
style.fontWeight = "bold";
shouldBe("style.font", "'italic small-caps bold 20px sans-serif'");
shouldBe("computedStyle.font", "'italic small-caps bold normal 20px/23px sans-serif'");
shouldBe("computedStyle.fontWeight", "'bold'");
shouldBe("checkFontStyleValue()", "true");
style.lineHeight = "40px";
shouldBe("style.font", "'italic small-caps bold 20px/40px sans-serif'");
shouldBe("computedStyle.font", "'italic small-caps bold normal 20px/40px sans-serif'");
shouldBe("computedStyle.lineHeight", "'40px'");
shouldBe("checkFontStyleValue()", "true");
style.font = "";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'normal normal normal normal 16px/18px foobar'");
shouldBe("checkFontStyleValue()", "true");
style.fontWeight = "bold";
// It is normal to return null as the font-size is mandatory to build the shorthand.
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'normal normal bold normal 16px/18px foobar'");
shouldBe("computedStyle.fontWeight", "'bold'");
shouldBe("checkFontStyleValue()", "true");
style.fontSize = "40px";
style.fontFamily = "sans-serif";
style.fontWeight = "bold";
shouldBe("style.font", "'bold 40px sans-serif'");
shouldBe("computedStyle.font", "'normal normal bold normal 40px/46px sans-serif'");
shouldBe("computedStyle.fontSize", "'40px'");
shouldBe("computedStyle.fontFamily", "'sans-serif'");
shouldBe("checkFontStyleValue()", "true");
document.body.removeChild(testContainer);
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>