| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Testing new font-stretch values introduced in CSS Fonts level 4</title> |
| <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-stretch-prop" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id="computedStyleTest">Abc</span></div> |
| <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> |
| <script> |
| |
| testStretchValues = [ |
| { stretch: "100", expectedComputedStretch: "100%" , expectedIsSupported: false, message: "only percentages, not numbers allowed" }, |
| { stretch: "-1%", expectedComputedStretch: "" , expectedIsSupported: false, message: "negative values are illegal" }, |
| { stretch: "0%", expectedComputedStretch: "0%", expectedIsSupported: true, message: "zero is legal" }, |
| { stretch: "1%", expectedComputedStretch: "1%", expectedIsSupported: true, message: "legal percentage" }, |
| { stretch: "10%", expectedComputedStretch: "10%", expectedIsSupported: true, message: "legal percentage" }, |
| { stretch: "100%", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal percentage" }, |
| { stretch: "1000%", expectedComputedStretch: "1000%", expectedIsSupported: true, message: "legal percentage" }, |
| { stretch: "1e9%", expectedComputedStretch: "1e+009%", expectedIsSupported: true, message: "huge legal percentage" }, |
| { stretch: "ultra-condensed", expectedComputedStretch: "50%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "extra-condensed", expectedComputedStretch: "62.5%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "condensed", expectedComputedStretch: "75%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "semi-condensed", expectedComputedStretch: "87.5%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "normal", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "semi-expanded", expectedComputedStretch: "112.5%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "expanded", expectedComputedStretch: "125%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "extra-expanded", expectedComputedStretch: "150%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "ultra-expanded", expectedComputedStretch: "200%", expectedIsSupported: true, message: "legal enum" }, |
| { stretch: "narrower", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" }, |
| { stretch: "wider", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" }, |
| { stretch: "calc(200.5%)", expectedComputedStretch: "200.5%", expectedIsSupported: true, message: "Simple calc value" }, |
| { stretch: "calc(50%*2 - 20%)", expectedComputedStretch: "80%", expectedIsSupported: true, message: "Valid calc expression" }, |
| { stretch: "calc(-100%)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc value (to be clamped)" }, |
| { stretch: "calc(50% - 50%*2)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc expression (to be clamped)" }, |
| { stretch: "calc(100)", expectedComputedStretch: "", expectedIsSupported: false, message: "Unit-less calc value" }, |
| { stretch: "calc(100px)", expectedComputedStretch: "", expectedIsSupported: false, message: "Calc value with units" }, |
| { stretch: "100% 700%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra percentage after numeric value" }, |
| { stretch: "100% 100", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after numeric value" }, |
| { stretch: "condensed expanded",expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after keyword value" }, |
| { stretch: "calc(100%) 100%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after calc value" } |
| ]; |
| |
| testStretchValues.forEach(function (element) { |
| test(() => { assert_equals(window.CSS.supports("font-stretch", element.stretch), element.expectedIsSupported, element.message); }, "@supports: " + element.stretch + " - " + element.message); |
| |
| // If supported, verify the computed style. |
| if (element.expectedIsSupported) |
| { |
| var testSpan = document.getElementById("computedStyleTest"); |
| testSpan.style.fontStretch = element.stretch; |
| var actualStretch = window.getComputedStyle(testSpan).fontStretch; |
| |
| test(() => { assert_equals(actualStretch, element.expectedComputedStretch, element.message); }, "@getComputedStyle: " + element.stretch + " - " + element.message); |
| } |
| }); |
| |
| // Verify computed inheritance of nested elements. |
| { |
| var base = document.getElementById("inheritanceTest"); |
| var parentStretch = "condensed"; |
| base.style.fontStretch = parentStretch; |
| |
| test(() => { |
| var actualStretch = window.getComputedStyle(base.children[0]).fontStretch; |
| assert_equals(actualStretch, "125%", "Overridden value for " + parentStretch + " should match expected value."); |
| }, "Test font-stretch for overridden number " + parentStretch); |
| |
| test(() => { |
| var actualStretch = window.getComputedStyle(base.children[1]).fontStretch; |
| assert_equals(actualStretch, "125%", "Inherited value " + parentStretch + " should match expected value."); |
| }, "Test font-stretch for overridden enum name resolved to number " + parentStretch); |
| |
| test(() => { |
| var actualStretch = window.getComputedStyle(base.children[2]).fontStretch; |
| assert_equals(actualStretch, "75%", "Inherited value " + parentStretch + " should match expected value."); |
| }, "Test font-stretch for inherited named enum resolved to number " + parentStretch); |
| } |
| |
| </script> |
| </body> |
| </html> |