Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-font-loading/fontface-width.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<title>CSS Font Loading: FontFace width and stretch aliases</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const source = "url(/fonts/Ahem.ttf)";
test(() => {
const face = new FontFace("width-default", source);
assert_equals(face.width, "normal");
assert_equals(face.stretch, "normal");
}, "FontFace width and stretch have the same default value");
test(() => {
const face = new FontFace("width-constructor", source, {width: "expanded"});
assert_equals(face.width, "expanded");
assert_equals(face.stretch, "expanded");
}, "The width constructor descriptor initializes both aliases");
test(() => {
const face = new FontFace("width-precedence", source, {
stretch: "condensed",
width: "expanded",
});
assert_equals(face.width, "expanded");
assert_equals(face.stretch, "expanded");
}, "The width constructor descriptor takes precedence over stretch");
test(() => {
const face = new FontFace("width-setter", source);
face.width = "condensed";
assert_equals(face.width, "condensed");
assert_equals(face.stretch, "condensed");
face.stretch = "125%";
assert_equals(face.width, "125%");
assert_equals(face.stretch, "125%");
}, "Setting either width alias updates the other alias");
test(() => {
const face = new FontFace("width-invalid", source, {width: "expanded"});
assert_throws_dom("SyntaxError", () => { face.width = "invalid"; });
assert_equals(face.width, "expanded");
assert_equals(face.stretch, "expanded");
}, "Setting width to an invalid value throws and preserves its value");
</script>