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-css-connected-descriptors.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<head>
<link rel="author" href="simon.wuelker@arcor.de">
<title>A FontFace backed by a @font-face rule should have its descriptors initialized accordingly</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<style id="baz">
@font-face {
font-family: "Lato";
src: url("/fonts/Lato-Medium.ttf");
font-style: normal;
ascent-override: 50%;
descent-override: 30%;
font-display: fallback;
font-feature-settings: "smcp" off;
font-stretch: ultra-expanded;
font-style: oblique 40deg;
font-variation-settings: "wght" 500;
font-weight: bold;
line-gap-override: 10%;
unicode-range: U+4??;
}
#target {
font-family: "Lato";
}
</style>
<div id="target">I am a div that uses the Lato font, requiring it to be loaded before document.fonts.ready resolves</div>
<script>
setup({explicit_done:true});
document.fonts.ready.then(() => {
const fontFaces = [...document.fonts];
const latoFace = fontFaces[0];
test(() => {
assert_equals(latoFace.ascentOverride, "50%");
}, "ascentOverride should be set correctly");
test(() => {
assert_equals(latoFace.descentOverride, "30%");
}, "descentOverride should be set correctly");
test(() => {
assert_equals(latoFace.display, "fallback");
}, "display should be set correctly");
test(() => {
assert_equals(latoFace.featureSettings, "\"smcp\" 0");
}, "featureSettings should be set correctly");
test(() => {
assert_equals(latoFace.stretch, "ultra-expanded");
}, "stretch should be set correctly");
test(() => {
assert_equals(latoFace.style, "oblique 40deg");
}, "style should be set correctly");
test(() => {
assert_equals(latoFace.variationSettings, "\"wght\" 500");
}, "variationSettings should be set correctly");
test(() => {
assert_equals(latoFace.weight, "bold");
}, "weight should be set correctly");
test(() => {
assert_equals(latoFace.lineGapOverride, "10%");
}, "lineGapOverride should be set correctly");
test(() => {
assert_equals(latoFace.unicodeRange, "U+400-4FF");
}, "unicodeRange should be set correctly");
done();
})
</script>
</body>