font-variation-settings-interpolation.html (4784B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-variation-settings interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variation-settings"> 5 <meta name="assert" content="font-variation-settings supports animation pairwise by 'like' properties"> 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 11 <style> 12 .parent { 13 font-variation-settings: "test" 30; 14 } 15 .target { 16 font-variation-settings: "test" 10; 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 24 // Because font-variation-settings is specced as a map rather than a list 25 // (https://github.com/w3c/csswg-drafts/issues/1959), browsers are allowed to 26 // reorder the output as they see fit. 27 function compareFontVariationSettings(actual, expected) { 28 // This is not perfect, but should serve as a reasonable comparison. We split 29 // the inputs into arrays and trim each characteristic, then sort the array 30 // and compare them. 31 const actual_arr = actual.split(',').map(x => x.trim()).sort(); 32 const expected_arr = expected.split(',').map(x => x.trim()).sort(); 33 assert_array_equals(actual_arr, expected_arr); 34 } 35 36 test_interpolation({ 37 property: 'font-variation-settings', 38 from: neutralKeyframe, 39 to: '"test" 20', 40 comparisonFunction: compareFontVariationSettings, 41 }, [ 42 {at: -0.5, expect: "'test' 5"}, 43 {at: 0, expect: "'test' 10"}, 44 {at: 0.3, expect: "'test' 13"}, 45 {at: 0.7, expect: "'test' 17"}, 46 {at: 1, expect: "'test' 20"}, 47 {at: 1.5, expect: "'test' 25"}, 48 ]); 49 50 test_no_interpolation({ 51 property: 'font-variation-settings', 52 from: 'initial', 53 to: "'test' 50", 54 }); 55 56 test_interpolation({ 57 property: 'font-variation-settings', 58 from: 'inherit', 59 to: "'test' 20", 60 comparisonFunction: compareFontVariationSettings, 61 }, [ 62 {at: -0.5, expect: "'test' 35"}, 63 {at: 0, expect: "'test' 30"}, 64 {at: 0.3, expect: "'test' 27"}, 65 {at: 0.7, expect: "'test' 23"}, 66 {at: 1, expect: "'test' 20"}, 67 {at: 1.5, expect: "'test' 15"}, 68 ]); 69 70 test_interpolation({ 71 property: 'font-variation-settings', 72 from: 'unset', 73 to: "'test' 20", 74 comparisonFunction: compareFontVariationSettings, 75 }, [ 76 {at: -0.5, expect: "'test' 35"}, 77 {at: 0, expect: "'test' 30"}, 78 {at: 0.3, expect: "'test' 27"}, 79 {at: 0.7, expect: "'test' 23"}, 80 {at: 1, expect: "'test' 20"}, 81 {at: 1.5, expect: "'test' 15"}, 82 ]); 83 84 test_no_interpolation({ 85 property: 'font-variation-settings', 86 from: "'test' 20", 87 to: "normal", 88 }); 89 90 test_interpolation({ 91 property: 'font-variation-settings', 92 from: "'test' 20", 93 to: "'test' 30", 94 comparisonFunction: compareFontVariationSettings, 95 }, [ 96 {at: -0.5, expect: "'test' 15"}, 97 {at: 0, expect: "'test' 20"}, 98 {at: 0.3, expect: "'test' 23"}, 99 {at: 0.7, expect: "'test' 27"}, 100 {at: 1, expect: "'test' 30"}, 101 {at: 1.5, expect: "'test' 35"}, 102 ]); 103 104 test_interpolation({ 105 property: 'font-variation-settings', 106 from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", 107 to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", 108 comparisonFunction: compareFontVariationSettings, 109 }, [ 110 {at: -0.5, expect: "'aaaa' -5, 'bbbb' 5, 'cccc' 15"}, 111 {at: 0, expect: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"}, 112 {at: 0.3, expect: "'aaaa' 3, 'bbbb' 13, 'cccc' 23"}, 113 {at: 0.7, expect: "'aaaa' 7, 'bbbb' 17, 'cccc' 27"}, 114 {at: 1, expect: "'aaaa' 10, 'bbbb' 20, 'cccc' 30"}, 115 {at: 1.5, expect: "'aaaa' 15, 'bbbb' 25, 'cccc' 35"}, 116 ]); 117 118 // font-variation-settings is a map, so any order works. 119 test_interpolation({ 120 property: 'font-variation-settings', 121 from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", 122 to: "'cccc' 10, 'bbbb' 20, 'aaaa' 30", 123 comparisonFunction: compareFontVariationSettings, 124 }, [ 125 {at: -0.5, expect: "'aaaa' -15, 'bbbb' 5, 'cccc' 25"}, 126 {at: 0, expect: "'aaaa' 0, 'bbbb' 10, 'cccc' 20"}, 127 {at: 0.3, expect: "'aaaa' 9, 'bbbb' 13, 'cccc' 17"}, 128 {at: 0.7, expect: "'aaaa' 21, 'bbbb' 17, 'cccc' 13"}, 129 {at: 1, expect: "'aaaa' 30, 'bbbb' 20, 'cccc' 10"}, 130 {at: 1.5, expect: "'aaaa' 45, 'bbbb' 25, 'cccc' 5"}, 131 ]); 132 133 test_no_interpolation({ 134 property: 'font-variation-settings', 135 from: "'aaaa' 0, 'bbbb' 10", 136 to: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", 137 }); 138 139 test_no_interpolation({ 140 property: 'font-variation-settings', 141 from: "'aaaa' 10, 'bbbb' 20, 'cccc' 30", 142 to: "'aaaa' 0, 'bbbb' 10", 143 }); 144 145 test_no_interpolation({ 146 property: 'font-variation-settings', 147 from: "'aaaa' 0, 'bbbb' 10, 'cccc' 20", 148 to: "'dddd' 10, 'eeee' 20, 'ffff' 30", 149 }); 150 151 // crbug.com/910118: Test that ApplyStandardPropertyValue doesn't overflow. 152 test_interpolation({ 153 property: 'font-variation-settings', 154 from: "'aaaa' 30, 'bbbb' 20", 155 to: "'aaaa' 20, 'bbbb' 30", 156 comparisonFunction: compareFontVariationSettings, 157 }, [ 158 {at: 3.40282e+38, expect: "'aaaa' -3.40282e+38, 'bbbb' 3.40282e+38"}, 159 ]); 160 161 </script>