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