font-weight-parsing.html (3230B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Testing the new font-weight values introduced in CSS Fonts level 4</title> 5 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 11 <div id="computedStyleTest">A</div> 12 13 <script> 14 15 var testContinuousWeights = [ 16 { weight: "401", isValid: true, message: "Values that are not multiple of 100 should be parsed successfully" }, 17 { weight: "400.5", isValid: true, message: "Non-integer Values should be parsed successfully" }, 18 { weight: "1", isValid: true, message: "Minimum allowed value should be parsed successfully" }, 19 { weight: "0.999", isValid: false, message: "Values below minimum should be rejected" }, 20 { weight: "-100", isValid: false, message: "Values below zero should be rejected" }, 21 { weight: "1000", isValid: true, message: "Maximum allowed value should be parsed successfully" }, 22 { weight: "1000.001", isValid: false, message: "Values above maximum should be rejected" }, 23 { weight: "calc(100.5)", isValid: true, expectedWeight: "100.5", message: "Simple calc value" }, 24 { weight: "calc(-100)", isValid: true, expectedWeight: "1", message: "Negative simple calc value (to be clamped)" }, 25 { weight: "calc(1001)", isValid: true, expectedWeight: "1000", message: "Out-of-range simple calc value (to be clamped)" }, 26 { weight: "calc(100.5*3 + 50.5)", isValid: true, expectedWeight: "352", message: "Valid calc expression" }, 27 { weight: "calc(100.5*3 + 800)", isValid: true, expectedWeight: "1000", message: "Valid calc expression with out-of-range value (to be clamped)" }, 28 { weight: "calc(100.5px + 50.5px)", isValid: false, message: "Valid calc expression with units" }, 29 { weight: "400 700", isValid: false, message: "Extra number after numeric value" }, 30 { weight: "400 10px", isValid: false, message: "Extra content after numeric value" }, 31 { weight: "bold 400", isValid: false, message: "Extra content after keyword value" }, 32 { weight: "calc(100.5) 400", isValid: false, message: "Extra content after calc value" } 33 ]; 34 35 testContinuousWeights.forEach(function (element) { 36 test(() => { assert_equals(window.CSS.supports("font-weight", element.weight), element.isValid, element.message); }, "@supports: " + element.message); 37 }); 38 39 testContinuousWeights.forEach(function (element) { 40 var testElement = document.getElementById("computedStyleTest"); 41 42 if (element.isValid) { 43 testElement.style.fontWeight = "300"; 44 testElement.style.fontWeight = element.weight; 45 var expectedWeight = (element.expectedWeight) ? element.expectedWeight : element.weight; 46 47 test(() => { assert_equals(window.getComputedStyle(testElement).fontWeight, expectedWeight, element.message); }, "Computed style: " + element.message); 48 } 49 }); 50 51 </script> 52 </body> 53 </html>