<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Fonts Test: Interpolation of system fonts</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#valdef-font-caption">
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
<meta name="assert" content="When interpolating system fonts, they are first resolved and then the font longhands interpolate as usual">
<link rel="stylesheet" herf="/fonts/ahem.css">
<div id="resolver"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<script>
// The system fonts will probably resolve to something very different.
const initialFont = "italic 100 small-caps ultra-expanded 100px / 100px Ahem";
const resolver = document.getElementById("resolver");
const resolvedStyle = getComputedStyle(resolver);
function extractNumber(value, unit) {
value = value.trim();
if (!value.endsWith(unit))
return NaN;
value = value.slice(0, -unit.length);
if (!value.length || value !== value.trim())
return NaN;
return Number(value);
}
const systemFonts = ["caption", "icon", "menu", "message-box", "small-caption", "status-bar"];
for (const systemFont of systemFonts) {
resolver.style.font = systemFont;
const expectations = [];
const systemFontStyle = resolvedStyle["font-style"];
const systemFontWeight = Number(resolvedStyle["font-weight"]);
const systemFontVariant = resolvedStyle["font-variant"];
const systemFontStretch = extractNumber(resolvedStyle["font-stretch"], "%");
const systemFontSize = extractNumber(resolvedStyle["font-size"], "px");
const systemLineHeight = resolvedStyle["line-height"];
const systemLineHeightNumber = extractNumber(systemLineHeight, "px");
const systemFontFamily = resolvedStyle["font-family"];
for (const at of [-2, -0.5, 0, 0.3, 0.6, 1, 1.5]) {
const expect = {};
expect["font-style"] = at >= 0.5 ? systemFontStyle : "italic";
expect["font-weight"] = `${Math.max(1, at * systemFontWeight + (1 - at) * 100)}`;
expect["font-variant"] = at >= 0.5 ? systemFontVariant : "small-caps";
expect["font-stretch"] = `${at * systemFontStretch + (1 - at) * 200}%`;
expect["font-size"] = `${Math.max(0, at * systemFontSize + (1 - at) * 100)}px`;
expect["line-height"] = Number.isNaN(systemLineHeightNumber)
? (at >= 0.5 ? systemLineHeight : "100px")
: `${Math.max(0, at * systemLineHeightNumber + (1 - at) * 100)}px`;
expect["font-family"] = at >= 0.5 ? systemFontFamily : "Ahem";
// There are more font longhands, but they can't be set in the shorthand,
// and the system fonts will probably resolve to the initial value,
// preventing a noticeable interpolation.
expectations.push({at, expect});
}
for (const method of ["CSS Animations", "Web Animations"]) {
test_interpolation({
method,
property: "font",
from: initialFont,
to: systemFont,
}, expectations);
}
}
</script>
Codebase Browser
chromium