font-palette-interpolation.html (3813B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-palette interpolation</title> 4 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-palette"> 5 <meta name="assert" content="Font-palette should be animated smoothly."> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 <style> 11 @font-palette-values --custom-palette { 12 font-family: "Color font"; 13 base-palette: 0; 14 override-colors: 1 #000000; 15 } 16 17 .container { 18 font-palette: light; 19 } 20 .container2 { 21 font-palette: dark; 22 } 23 .target { 24 display: inline-block; 25 font: 100px sans-serif; 26 font-palette: normal; 27 } 28 .expected { 29 color: green; 30 margin-right: 30px; 31 } 32 </style> 33 34 <body> 35 <template id="target-template"> 36 <span class="container"> 37 <div class="target">TT</div> 38 </span> 39 </template> 40 41 <span id="inv-container" class="container"> 42 <div id="inv-target" class="target">TT</div> 43 </span> 44 </body> 45 46 <script> 47 48 test_interpolation({ 49 property: 'font-palette', 50 from: 'light', 51 to: 'dark' 52 }, [ 53 {at: -2, expect: 'light'}, 54 {at: -0.25, expect: 'light'}, 55 {at: 0, expect: 'light'}, 56 {at: 0.3, expect: 'palette-mix(in oklab, light, dark 30%)'}, 57 {at: 0.6, expect: 'palette-mix(in oklab, light, dark 60%)'}, 58 {at: 1, expect: 'dark'}, 59 {at: 1.5, expect: 'dark'}, 60 ]); 61 62 test_interpolation({ 63 property: 'font-palette', 64 from: 'initial', 65 to: 'inherit' 66 }, [ 67 {at: -2, expect: 'normal'}, 68 {at: -0.25, expect: 'normal'}, 69 {at: 0, expect: 'normal'}, 70 {at: 0.3, expect: 'palette-mix(in oklab, normal, light 30%)'}, 71 {at: 0.6, expect: 'palette-mix(in oklab, normal, light 60%)'}, 72 {at: 1, expect: 'light'}, 73 {at: 1.5, expect: 'light'}, 74 ]); 75 76 test_interpolation({ 77 property: 'font-palette', 78 from: '--custom-palette', 79 to: 'normal' 80 }, [ 81 {at: -2, expect: '--custom-palette'}, 82 {at: -0.25, expect: '--custom-palette'}, 83 {at: 0, expect: '--custom-palette'}, 84 {at: 0.3, expect: 'palette-mix(in oklab, --custom-palette, normal 30%)'}, 85 {at: 0.6, expect: 'palette-mix(in oklab, --custom-palette, normal 60%)'}, 86 {at: 1, expect: 'normal'}, 87 {at: 1.5, expect: 'normal'}, 88 ]); 89 90 /* palette-mix function for the equal endpoints should be simplified. */ 91 test_interpolation({ 92 property: 'font-palette', 93 from: 'initial', 94 to: 'normal' 95 }, [ 96 {at: -2, expect: 'normal'}, 97 {at: -0.25, expect: 'normal'}, 98 {at: 0, expect: 'normal'}, 99 {at: 0.3, expect: 'normal'}, 100 {at: 0.6, expect: 'normal'}, 101 {at: 1, expect: 'normal'}, 102 {at: 1.5, expect: 'normal'}, 103 ]); 104 105 test(t => { 106 var container = document.getElementById('inv-container'); 107 var target = document.getElementById('inv-target'); 108 var anim = target.animate({ fontPalette: ['normal', 'inherit'] }, 1000); 109 anim.pause(); 110 anim.currentTime = 500; 111 assert_equals(getComputedStyle(target).fontPalette, 'palette-mix(in oklab, normal, light)'); 112 113 container.setAttribute('class', 'container2'); 114 assert_equals(getComputedStyle(target).fontPalette, 'palette-mix(in oklab, normal, dark)'); 115 }, "An interpolation to inherit updates correctly on a parent style change."); 116 117 test(t => { 118 var target = document.getElementById('inv-target'); 119 target.animate( 120 { fontPalette: ['light', 'normal'] }, 121 { 122 duration: 1000 123 } 124 ); 125 target.animate( 126 { fontPalette: ['normal', 'dark'] }, 127 { 128 duration: 1000, 129 /* Should work like 'replace', since <Color> type is not additive, 130 compare: https://drafts.csswg.org/css-values-4/#combine-colors. */ 131 composite: "add" 132 } 133 ); 134 document.getAnimations().forEach((animation) => { 135 animation.pause(); 136 animation.currentTime = 500; 137 }); 138 assert_equals(getComputedStyle(target).fontPalette, 139 "palette-mix(in oklab, normal, dark)"); 140 }, "Test additive animations"); 141 142 </script>