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