<!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 20px/normal 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 20px/normal 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 20px/normal 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 20px/normal 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 20px/normal 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 20px/40px sans-serif'");
shouldBe("computedStyle.lineHeight", "'40px'");
shouldBe("checkFontStyleValue()", "true");

style.font = "";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'normal normal normal 16px/normal 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 16px/normal 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 40px/normal 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>