font-stretch.html (6793B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Testing new font-stretch values introduced in CSS Fonts level 4</title> 5 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-stretch-prop" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <div id="computedStyleTest">Abc</div> 11 <div id="inheritanceTest"><span style="font-stretch:125%;">Abc</span><span style="font-stretch:expanded;">Abc</span><span style="font-weight: 700;">Abc</span></div> 12 <script> 13 14 testStretchValues = [ 15 { stretch: "100", expectedComputedStretch: "100%" , expectedIsSupported: false, message: "only percentages, not numbers allowed" }, 16 { stretch: "-1%", expectedComputedStretch: "" , expectedIsSupported: false, message: "negative values are illegal" }, 17 { stretch: "0%", expectedComputedStretch: "0%", expectedIsSupported: true, message: "zero is legal" }, 18 { stretch: "1%", expectedComputedStretch: "1%", expectedIsSupported: true, message: "legal percentage" }, 19 { stretch: "10%", expectedComputedStretch: "10%", expectedIsSupported: true, message: "legal percentage" }, 20 { stretch: "100%", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal percentage" }, 21 { stretch: "1000%", expectedComputedStretch: "1000%", expectedIsSupported: true, message: "legal percentage" }, 22 { stretch: "1e9%", expectedComputedStretch: "1e+009%", expectedIsSupported: true, message: "huge legal percentage" }, 23 { stretch: "ultra-condensed", expectedComputedStretch: "50%", expectedIsSupported: true, message: "legal enum" }, 24 { stretch: "extra-condensed", expectedComputedStretch: "62.5%", expectedIsSupported: true, message: "legal enum" }, 25 { stretch: "condensed", expectedComputedStretch: "75%", expectedIsSupported: true, message: "legal enum" }, 26 { stretch: "semi-condensed", expectedComputedStretch: "87.5%", expectedIsSupported: true, message: "legal enum" }, 27 { stretch: "normal", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal enum" }, 28 { stretch: "semi-expanded", expectedComputedStretch: "112.5%", expectedIsSupported: true, message: "legal enum" }, 29 { stretch: "expanded", expectedComputedStretch: "125%", expectedIsSupported: true, message: "legal enum" }, 30 { stretch: "extra-expanded", expectedComputedStretch: "150%", expectedIsSupported: true, message: "legal enum" }, 31 { stretch: "ultra-expanded", expectedComputedStretch: "200%", expectedIsSupported: true, message: "legal enum" }, 32 { stretch: "narrower", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" }, 33 { stretch: "wider", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" }, 34 { stretch: "calc(200.5%)", expectedComputedStretch: "200.5%", expectedIsSupported: true, message: "Simple calc value" }, 35 { stretch: "calc(50%*2 - 20%)", expectedComputedStretch: "80%", expectedIsSupported: true, message: "Valid calc expression" }, 36 { stretch: "calc(-100%)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc value (to be clamped)" }, 37 { stretch: "calc(50% - 50%*2)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc expression (to be clamped)" }, 38 { stretch: "calc(100)", expectedComputedStretch: "", expectedIsSupported: false, message: "Unit-less calc value" }, 39 { stretch: "calc(100px)", expectedComputedStretch: "", expectedIsSupported: false, message: "Calc value with units" }, 40 { stretch: "100% 700%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra percentage after numeric value" }, 41 { stretch: "100% 100", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after numeric value" }, 42 { stretch: "condensed expanded",expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after keyword value" }, 43 { stretch: "calc(100%) 100%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after calc value" } 44 ]; 45 46 testStretchValues.forEach(function (element) { 47 test(() => { assert_equals(window.CSS.supports("font-stretch", element.stretch), element.expectedIsSupported, element.message); }, "@supports: " + element.stretch + " - " + element.message); 48 49 // If supported, verify the computed style. 50 if (element.expectedIsSupported) 51 { 52 var testSpan = document.getElementById("computedStyleTest"); 53 testSpan.style.fontStretch = element.stretch; 54 var actualStretch = window.getComputedStyle(testSpan).fontStretch; 55 56 test(() => { assert_equals(actualStretch, element.expectedComputedStretch, element.message); }, "@getComputedStyle: " + element.stretch + " - " + element.message); 57 } 58 }); 59 60 // Verify computed inheritance of nested elements. 61 { 62 var base = document.getElementById("inheritanceTest"); 63 var parentStretch = "condensed"; 64 base.style.fontStretch = parentStretch; 65 66 test(() => { 67 var actualStretch = window.getComputedStyle(base.children[0]).fontStretch; 68 assert_equals(actualStretch, "125%", "Overridden value for " + parentStretch + " should match expected value."); 69 }, "Test font-stretch for overridden number " + parentStretch); 70 71 test(() => { 72 var actualStretch = window.getComputedStyle(base.children[1]).fontStretch; 73 assert_equals(actualStretch, "125%", "Inherited value " + parentStretch + " should match expected value."); 74 }, "Test font-stretch for overridden enum name resolved to number " + parentStretch); 75 76 test(() => { 77 var actualStretch = window.getComputedStyle(base.children[2]).fontStretch; 78 assert_equals(actualStretch, "75%", "Inherited value " + parentStretch + " should match expected value."); 79 }, "Test font-stretch for inherited named enum resolved to number " + parentStretch); 80 } 81 82 </script> 83 </body> 84 </html>