font-family-serialization-001.html (1679B)
1 <!DOCTYPE HTML> 2 <html> 3 <meta charset="utf-8"> 4 <title>Serialization of font-family</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block"> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-family-prop"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/css-fonts/support/font-family-keywords.js"></script> 10 <div id="target"></div> 11 <script> 12 function SetFontFamilyAndSerialize(fontFamilyValue) { 13 var target = document.getElementById('target'); 14 target.setAttribute("style", `font-family: ${fontFamilyValue}`); 15 return window.getComputedStyle(target).getPropertyValue('font-family'); 16 } 17 test(function() { 18 kGenericFontFamilyKeywords.forEach(keyword => { 19 assert_equals(SetFontFamilyAndSerialize(keyword), keyword); 20 }); 21 }, "Serialization of <generic-family>"); 22 23 test(function() { 24 kGenericFontFamilyKeywords.forEach(keyword => { 25 var quoted_keyword = `"${keyword}"`; 26 assert_equals(SetFontFamilyAndSerialize(quoted_keyword), quoted_keyword); 27 }); 28 }, "Serialization of quoted \"<generic-family>\""); 29 30 test(function() { 31 kGenericFontFamilyKeywords.forEach(keyword => { 32 var prefixed_keyword = `-webkit-${keyword}`; 33 assert_equals(SetFontFamilyAndSerialize(prefixed_keyword), prefixed_keyword); 34 }); 35 }, "Serialization of prefixed -webkit-<generic-family>"); 36 37 test(function() { 38 kNonGenericFontFamilyKeywords.forEach(keyword => { 39 assert_equals(SetFontFamilyAndSerialize(keyword), keyword); 40 }); 41 }, `Serialization of ${kNonGenericFontFamilyKeywords}`); 42 43 </script> 44 </html>