font-variation-settings-composition.html (3092B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-variation-settings composition</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 <body></body> 12 13 <script> 14 function compareVariationSettings(actual, expected) { 15 // The order of <axis, value> pairs in the variation-settings list is arbitrary, 16 // so we sort the pairs before attempting to compare. (We only need to use this 17 // when multiple settings are expected, otherwise the default comparison is OK.) 18 assert_equals(normalizeValue(actual).split(", ").sort().join(", "), 19 normalizeValue(expected).split(", ").sort().join(", ")); 20 }; 21 22 test_composition({ 23 property: 'font-variation-settings', 24 underlying: "'test' 50", 25 addFrom: "'test' 100", 26 addTo: "'test' 200", 27 }, [ 28 {at: -0.3, expect: "'test' 120"}, 29 {at: 0, expect: "'test' 150"}, 30 {at: 0.5, expect: "'test' 200"}, 31 {at: 1, expect: "'test' 250"}, 32 {at: 1.5, expect: "'test' 300"}, 33 ]); 34 35 test_composition({ 36 property: 'font-variation-settings', 37 underlying: "'test' 50", 38 addFrom: "'test' 100", 39 replaceTo: "'test' 200", 40 }, [ 41 {at: -0.3, expect: "'test' 135"}, 42 {at: 0, expect: "'test' 150"}, 43 {at: 0.5, expect: "'test' 175"}, 44 {at: 1, expect: "'test' 200"}, 45 {at: 1.5, expect: "'test' 225"}, 46 ]); 47 48 test_composition({ 49 property: 'font-variation-settings', 50 underlying: "'test' 100", 51 addFrom: 'normal', 52 replaceTo: "'test' 200", 53 }, [ 54 {at: -0.3, expect: 'normal'}, 55 {at: 0, expect: 'normal'}, 56 {at: 0.5, expect: "'test' 200"}, 57 {at: 1, expect: "'test' 200"}, 58 {at: 1.5, expect: "'test' 200"}, 59 ]); 60 61 test_composition({ 62 property: 'font-variation-settings', 63 underlying: "'test' 100", 64 addFrom: 'normal', 65 addTo: "'test' 200", 66 }, [ 67 {at: -0.3, expect: 'normal'}, 68 {at: 0, expect: 'normal'}, 69 {at: 0.5, expect: "'test' 300"}, 70 {at: 1, expect: "'test' 300"}, 71 {at: 1.5, expect: "'test' 300"}, 72 ]); 73 74 test_composition({ 75 property: 'font-variation-settings', 76 underlying: "'aaaa' 100, 'bbbb' 200", 77 addFrom: "'aaaa' 20, 'bbbb' 50", 78 addTo: "'aaaa' 30, 'bbbb' 100", 79 comparisonFunction: compareVariationSettings, 80 }, [ 81 {at: -0.3, expect: "'aaaa' 117, 'bbbb' 235"}, 82 {at: 0, expect: "'aaaa' 120, 'bbbb' 250"}, 83 {at: 0.5, expect: "'aaaa' 125, 'bbbb' 275"}, 84 {at: 1, expect: "'aaaa' 130, 'bbbb' 300"}, 85 {at: 1.5, expect: "'aaaa' 135, 'bbbb' 325"}, 86 ]); 87 88 test_composition({ 89 property: 'font-variation-settings', 90 underlying: "'test' 100", 91 addFrom: "'aaaa' 20, 'bbbb' 50", 92 addTo: "'aaaa' 30, 'bbbb' 100", 93 comparisonFunction: compareVariationSettings, 94 }, [ 95 {at: -0.3, expect: "'aaaa' 17, 'bbbb' 35"}, 96 {at: 0, expect: "'aaaa' 20, 'bbbb' 50"}, 97 {at: 0.5, expect: "'aaaa' 25, 'bbbb' 75"}, 98 {at: 1, expect: "'aaaa' 30, 'bbbb' 100"}, 99 {at: 1.5, expect: "'aaaa' 35, 'bbbb' 125"}, 100 ]); 101 </script> 102 </body>