<!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>
Codebase Browser
chromium