system-fonts.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/animations/system-fonts.html - WPT Dashboard Interop Dashboard

<!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:obrufau@igalia.com">

<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>