font-palette-vs-shorthand.html (2867B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Fonts Module Level 4: interaction of font-palette and font shorthand</title> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-prop"> 7 <meta name="assert" content="font-palette is NOT reset to normal by font shorthand."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style id="style"> 11 @font-face { 12 font-family: colr; 13 src: url("resources/COLR-palettes-test-font.ttf") format("truetype"); 14 } 15 div { 16 margin: 10px; 17 } 18 #a { 19 font: 50px colr; 20 font-palette: dark; /* should NOT cause the shorthand to be empty */ 21 } 22 #b { 23 font-palette: dark; 24 font: 50px colr; /* should NOT reset font-palette to normal */ 25 } 26 #c { 27 font-palette: dark; 28 font-size: 50px; 29 font-family: colr; 30 } 31 #d { 32 font-palette: dark; 33 font-size: 50px; 34 font-family: colr; 35 font-palette: normal; 36 } 37 </style> 38 </head> 39 <body> 40 <p>The first three examples should use the 'dark' palette; the fourth, 'normal'.</p> 41 <div id=a>A</div> 42 <div id=b>A</div> 43 <div id=c>A</div> 44 <div id=d>A</div> 45 <script> 46 test(function() { 47 let testElem = document.getElementById("a"); 48 let computed = window.getComputedStyle(testElem); 49 assert_equals(computed.fontPalette, "dark"); 50 assert_not_equals(computed.font, ""); 51 /* The exact form of the font shorthand varies, but should include these pieces: */ 52 assert_not_equals(computed.font.indexOf("50px"), -1); 53 assert_not_equals(computed.font.indexOf("colr"), -1); 54 assert_equals(computed.fontFamily, "colr"); 55 assert_equals(computed.fontSize, "50px"); 56 }); 57 58 test(function() { 59 let testElem = document.getElementById("b"); 60 let computed = window.getComputedStyle(testElem); 61 assert_equals(computed.fontPalette, "dark"); 62 assert_not_equals(computed.font, ""); 63 assert_not_equals(computed.font.indexOf("50px"), -1); 64 assert_not_equals(computed.font.indexOf("colr"), -1); 65 assert_equals(computed.fontFamily, "colr"); 66 assert_equals(computed.fontSize, "50px"); 67 }); 68 69 test(function() { 70 let testElem = document.getElementById("c"); 71 let computed = window.getComputedStyle(testElem); 72 assert_equals(computed.fontPalette, "dark"); 73 assert_not_equals(computed.font.indexOf("50px"), -1); 74 assert_not_equals(computed.font.indexOf("colr"), -1); 75 assert_equals(computed.fontFamily, "colr"); 76 assert_equals(computed.fontSize, "50px"); 77 }); 78 79 test(function() { 80 let testElem = document.getElementById("d"); 81 let computed = window.getComputedStyle(testElem); 82 assert_equals(computed.fontPalette, "normal"); 83 assert_not_equals(computed.font.indexOf("50px"), -1); 84 assert_not_equals(computed.font.indexOf("colr"), -1); 85 assert_equals(computed.fontFamily, "colr"); 86 assert_equals(computed.fontSize, "50px"); 87 }); 88 </script> 89 </body> 90 </html>