system-fonts-serialization.tentative.html (2168B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Fonts Test: Serialization 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 <div id="target"></div> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script> 10 const target = document.getElementById("target"); 11 target.style.font = "initial"; 12 const fontLonghands = [...target.style]; 13 14 const cs = getComputedStyle(target); 15 function copyComputedStyle() { 16 const data = {}; 17 data.font = cs.font; 18 for (const longhand of fontLonghands) { 19 data[longhand] = cs[longhand]; 20 } 21 return data; 22 } 23 24 function check(systemFont) { 25 target.style.cssText = ""; 26 target.style.font = systemFont; 27 28 assert_equals(target.style.font, systemFont, "System font serializes as-is"); 29 assert_array_equals([...target.style], fontLonghands, "System font sets all longhands"); 30 for (const longhand of fontLonghands) { 31 assert_equals(target.style[longhand], "", `Longhand '${longhand}' serializes as empty string`); 32 } 33 34 const copy = copyComputedStyle(); 35 for (const longhand of fontLonghands) { 36 const resolvedStyle = cs[longhand]; 37 assert_not_equals(resolvedStyle, ""); 38 39 target.style[longhand] = resolvedStyle; 40 assert_equals(target.style[longhand], resolvedStyle, `Can set longhand '${longhand}'`); 41 42 assert_equals(target.style.font, "", `Shorthand serializes as empty string after setting '${longhand}'`); 43 assert_object_equals(copyComputedStyle(), copy, `Other longhands still work after setting '${longhand}'`); 44 45 target.style.font = systemFont; 46 } 47 } 48 49 // Standard system fonts 50 const systemFonts = ["caption", "icon", "menu", "message-box", "small-caption", "status-bar"]; 51 52 // Some browsers also support these non-standard system fonts 53 const extras = ["-webkit-mini-control", "-webkit-small-control", "-webkit-control"]; 54 55 for (const extra of extras) { 56 if (CSS.supports("font", extra)) { 57 systemFonts.push(extra); 58 } 59 } 60 61 for (let systemFont of systemFonts) { 62 test(() => check(systemFont), systemFont); 63 } 64 </script>