system-fonts.html (3030B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Fonts Test: Interpolation of system fonts</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts/#valdef-font-caption"> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <meta name="assert" content="When interpolating system fonts, they are first resolved and then the font longhands interpolate as usual"> 7 <link rel="stylesheet" herf="/fonts/ahem.css"> 8 9 <div id="resolver"></div> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/css/support/interpolation-testcommon.js"></script> 14 <script> 15 // The system fonts will probably resolve to something very different. 16 const initialFont = "italic 100 small-caps ultra-expanded 100px / 100px Ahem"; 17 18 const resolver = document.getElementById("resolver"); 19 const resolvedStyle = getComputedStyle(resolver); 20 21 function extractNumber(value, unit) { 22 value = value.trim(); 23 if (!value.endsWith(unit)) 24 return NaN; 25 value = value.slice(0, -unit.length); 26 if (!value.length || value !== value.trim()) 27 return NaN; 28 return Number(value); 29 } 30 31 const systemFonts = ["caption", "icon", "menu", "message-box", "small-caption", "status-bar"]; 32 for (const systemFont of systemFonts) { 33 resolver.style.font = systemFont; 34 const expectations = []; 35 const systemFontStyle = resolvedStyle["font-style"]; 36 const systemFontWeight = Number(resolvedStyle["font-weight"]); 37 const systemFontVariant = resolvedStyle["font-variant"]; 38 const systemFontStretch = extractNumber(resolvedStyle["font-stretch"], "%"); 39 const systemFontSize = extractNumber(resolvedStyle["font-size"], "px"); 40 const systemLineHeight = resolvedStyle["line-height"]; 41 const systemLineHeightNumber = extractNumber(systemLineHeight, "px"); 42 const systemFontFamily = resolvedStyle["font-family"]; 43 44 for (const at of [-2, -0.5, 0, 0.3, 0.6, 1, 1.5]) { 45 const expect = {}; 46 expect["font-style"] = at >= 0.5 ? systemFontStyle : "italic"; 47 expect["font-weight"] = `${Math.max(1, at * systemFontWeight + (1 - at) * 100)}`; 48 expect["font-variant"] = at >= 0.5 ? systemFontVariant : "small-caps"; 49 expect["font-stretch"] = `${at * systemFontStretch + (1 - at) * 200}%`; 50 expect["font-size"] = `${Math.max(0, at * systemFontSize + (1 - at) * 100)}px`; 51 expect["line-height"] = Number.isNaN(systemLineHeightNumber) 52 ? (at >= 0.5 ? systemLineHeight : "100px") 53 : `${Math.max(0, at * systemLineHeightNumber + (1 - at) * 100)}px`; 54 expect["font-family"] = at >= 0.5 ? systemFontFamily : "Ahem"; 55 // There are more font longhands, but they can't be set in the shorthand, 56 // and the system fonts will probably resolve to the initial value, 57 // preventing a noticeable interpolation. 58 expectations.push({at, expect}); 59 } 60 61 for (const method of ["CSS Animations", "Web Animations"]) { 62 test_interpolation({ 63 method, 64 property: "font", 65 from: initialFont, 66 to: systemFont, 67 }, expectations); 68 } 69 } 70 </script>