<!DOCTYPE html>
<html>
<head>
<title>Testing font shorthand for new values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-prop" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="shorthand-test">Shorthand test</div>
<script>
testFontShorthand = [
{ value: "calc(24px) Arial", isValid:true, message: "Font size specified as calc()" },
// font-weight as number
{ value: "700.5 24px Arial", isValid:true, expectedWeight:"700.5", message: "Font weight specified as number" },
{ value: "0.9 24px Arial", isValid:false, message: "Font weight specified as number, value less than 1" },
{ value: "1700.5 24px Arial", isValid:false, message: "Font weight specified as number, value greater than 1000" },
// font-weight as calc()
{ value: "calc(900.7 - 200.1 * 2) calc(12px + 12px) Arial", isValid:true, expectedWeight:"500.5", message: "Font weight specified as calc()" },
{ value: "calc(400.5 - 200.1 * 2) 24px Arial", isValid:true, expectedWeight:"1", message: "Font weight specified as calc(), value smaller than 1" },
{ value: "calc(400.5 + 300.1 * 2) 24px Arial", isValid:true, expectedWeight:"1000", message: "Font weight specified as calc(), value greater than 1000" },
// font-style
{ value: "oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", message: "'oblique' with positive angle" },
{ value: "oblique -45deg 24px Arial", isValid:true, expectedStyle: "oblique -45deg", message: "'oblique' with negative angle" },
{ value: "oblique 24px Arial", isValid:true, expectedStyle: "oblique", message: "'oblique' without slant angle" },
{ value: "oblique 100deg 24px Arial", isValid:false, message: "'oblique' with positive angle, value out of range" },
{ value: "oblique -100deg 24px Arial", isValid:false, message: "'oblique' with negative angle, value out of range" },
// font-weight and font-style combined
{ value: "oblique 50 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"50", message: "'oblique' followed by valid small weight" },
{ value: "oblique 500 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid large weight" },
{ value: "oblique 45deg 500 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "'oblique' with positive angle followed by valid weight" },
{ value: "oblique -45deg 500 24px Arial", isValid:true, expectedStyle: "oblique -45deg", expectedWeight:"500", message: "'oblique' with negative angle followed by valid weight" },
// font-weight and font-style combined, with calc()
{ value: "oblique calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid calc() weight" },
{ value: "oblique 30deg calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique 30deg", expectedWeight:"500", message: "'oblique' with angle followed by valid calc() weight" },
{ value: "oblique calc(900 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "'oblique' followed by a to-be-clamped calc() weight" },
{ value: "calc(200 + 300) oblique 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "calc() weight folowed by 'oblique'" },
{ value: "calc(200 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "calc() weight folowed by 'oblique' and slant angle" },
{ value: "calc(900 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"1000", message: "To-be-clamped calc() weight folowed by 'oblique' and slant angle" },
];
testFontShorthand.forEach(function (testCase) {
test(() => {
assert_equals(window.CSS.supports("font", testCase.value), testCase.isValid, "Font shorthand: " + testCase.message);
let expectedStyle = (testCase.expectedStyle) ? testCase.expectedStyle : "normal";
let expectedWeight = (testCase.expectedWeight) ? testCase.expectedWeight : "400";
let expectedSize = (testCase.isValid) ? "24px" : "16px";
var testElement = document.getElementById("shorthand-test");
testElement.setAttribute("style", "font:" + testCase.value);
var style = window.getComputedStyle(testElement);
assert_equals(style.fontStyle, expectedStyle, "Font shorthand expected style: " + testCase.message);
assert_equals(style.fontWeight, expectedWeight, "Font shorthand expected weight: " + testCase.message);
assert_equals(style.fontSize, expectedSize, "Font shorthand expected size: " + testCase.message);
}, "Font shorthand: " + testCase.message);
});
</script>
</body>
</html>
Codebase Browser
chromium