font-shorthand.html (5963B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Testing font shorthand for new values introduced in CSS Fonts level 4</title> 5 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-prop" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <div id="shorthand-test">Shorthand test</div> 11 12 <script> 13 14 testFontShorthand = [ 15 { value: "calc(24px) Arial", isValid:true, message: "Font size specified as calc()" }, 16 17 // font-weight as number 18 { value: "700.5 24px Arial", isValid:true, expectedWeight:"700.5", message: "Font weight specified as number" }, 19 { value: "0.9 24px Arial", isValid:false, message: "Font weight specified as number, value less than 1" }, 20 { value: "1700.5 24px Arial", isValid:false, message: "Font weight specified as number, value greater than 1000" }, 21 22 // font-weight as calc() 23 { value: "calc(900.7 - 200.1 * 2) calc(12px + 12px) Arial", isValid:true, expectedWeight:"500.5", message: "Font weight specified as calc()" }, 24 { value: "calc(400.5 - 200.1 * 2) 24px Arial", isValid:true, expectedWeight:"1", message: "Font weight specified as calc(), value smaller than 1" }, 25 { value: "calc(400.5 + 300.1 * 2) 24px Arial", isValid:true, expectedWeight:"1000", message: "Font weight specified as calc(), value greater than 1000" }, 26 27 // font-style 28 { value: "oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", message: "'oblique' with positive angle" }, 29 { value: "oblique -45deg 24px Arial", isValid:true, expectedStyle: "oblique -45deg", message: "'oblique' with negative angle" }, 30 { value: "oblique 24px Arial", isValid:true, expectedStyle: "oblique", message: "'oblique' without slant angle" }, 31 { value: "oblique 100deg 24px Arial", isValid:false, message: "'oblique' with positive angle, value out of range" }, 32 { value: "oblique -100deg 24px Arial", isValid:false, message: "'oblique' with negative angle, value out of range" }, 33 34 // font-weight and font-style combined 35 { value: "oblique 50 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"50", message: "'oblique' followed by valid small weight" }, 36 { value: "oblique 500 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid large weight" }, 37 { value: "oblique 45deg 500 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "'oblique' with positive angle followed by valid weight" }, 38 { value: "oblique -45deg 500 24px Arial", isValid:true, expectedStyle: "oblique -45deg", expectedWeight:"500", message: "'oblique' with negative angle followed by valid weight" }, 39 40 // font-weight and font-style combined, with calc() 41 { value: "oblique calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid calc() weight" }, 42 { value: "oblique 30deg calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique 30deg", expectedWeight:"500", message: "'oblique' with angle followed by valid calc() weight" }, 43 { value: "oblique calc(900 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "'oblique' followed by a to-be-clamped calc() weight" }, 44 { value: "calc(200 + 300) oblique 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "calc() weight folowed by 'oblique'" }, 45 { value: "calc(200 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "calc() weight folowed by 'oblique' and slant angle" }, 46 { 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" }, 47 ]; 48 49 testFontShorthand.forEach(function (testCase) { 50 test(() => { 51 assert_equals(window.CSS.supports("font", testCase.value), testCase.isValid, "Font shorthand: " + testCase.message); 52 53 let expectedStyle = (testCase.expectedStyle) ? testCase.expectedStyle : "normal"; 54 let expectedWeight = (testCase.expectedWeight) ? testCase.expectedWeight : "400"; 55 let expectedSize = (testCase.isValid) ? "24px" : "16px"; 56 57 var testElement = document.getElementById("shorthand-test"); 58 testElement.setAttribute("style", "font:" + testCase.value); 59 var style = window.getComputedStyle(testElement); 60 assert_equals(style.fontStyle, expectedStyle, "Font shorthand expected style: " + testCase.message); 61 assert_equals(style.fontWeight, expectedWeight, "Font shorthand expected weight: " + testCase.message); 62 assert_equals(style.fontSize, expectedSize, "Font shorthand expected size: " + testCase.message); 63 }, "Font shorthand: " + testCase.message); 64 65 }); 66 67 </script> 68 </body> 69 </html>