font-shorthand-from-longhands.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "foobar";
    src: local("foobar");
}
div {
    font-family: "foobar";
}
</style>
<script src="../../resources/js-test.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 all font longhands to build the shorthand.
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'20px foobar'");
shouldBe("computedStyle.fontSize", "'20px'");
shouldBe("checkFontStyleValue()", "true");

style.fontSize = "20px";
style.fontFamily = "sans-serif";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'20px sans-serif'");
shouldBe("computedStyle.fontFamily", "'sans-serif'");

style.fontStyle = "italic";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'italic 20px sans-serif'");
shouldBe("computedStyle.fontStyle", "'italic'");

style.fontVariant = "small-caps";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'italic small-caps 20px sans-serif'");
shouldBe("computedStyle.fontVariant", "'small-caps'");

style.fontWeight = "bold";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'italic small-caps 700 20px sans-serif'");
shouldBe("computedStyle.fontWeight", "'700'");

style.lineHeight = "40px";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'italic small-caps 700 20px / 40px sans-serif'");
shouldBe("computedStyle.lineHeight", "'40px'");

style.fontStretch = "ultra-expanded";
style.fontKerning = "auto";
style.fontOpticalSizing = "auto";
style.fontSizeAdjust = "none";
style.fontFeatureSettings = "normal";
style.fontVariationSettings = "normal";
// All font longhands are set, therefore shorthand is built
shouldBe("style.font", "'italic small-caps bold ultra-expanded 20px / 40px sans-serif'");
shouldBe("computedStyle.font", "'italic small-caps 700 ultra-expanded 20px / 40px sans-serif'");
shouldBe("checkFontStyleValue()", "true");

style.fontVariantLigatures = "discretionary-ligatures";
// Shorthand cannot be built because of non-normal ligatures value.
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "''");
// Reset for next test.
style.fontVariantLigatures = "normal";
shouldBe("style.font", "'italic small-caps bold ultra-expanded 20px / 40px sans-serif'");
shouldBe("computedStyle.font", "'italic small-caps 700 ultra-expanded 20px / 40px sans-serif'");

style.fontVariantNumeric = "lining-nums";
// Shorthand cannot be built because of non-normal numeric value.
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "''");
// Reset for next test.
style.fontVariantNumeric = "normal";
shouldBe("style.font", "'italic small-caps bold ultra-expanded 20px / 40px sans-serif'");
shouldBe("computedStyle.font", "'italic small-caps 700 ultra-expanded 20px / 40px sans-serif'");

style.font = "";
shouldBe("style.font", "''");
shouldBe("computedStyle.font", "'16px foobar'");
shouldBe("checkFontStyleValue()", "true");

style.fontVariantCaps = "all-small-caps";
shouldBe("style.fontVariantCaps", "'all-small-caps'");
// Font shorthand is reset to empty string since all-small-caps cannot be represented.
shouldBe("computedStyle.font", "''");
shouldBe("style.font", "''");

document.body.removeChild(testContainer);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/font-shorthand-from-longhands.html
