letter-spacing-interpolation.html (2253B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> 4 <meta name="test" content="letter-spacing supports animation by computed value type"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 10 <style> 11 .parent { 12 letter-spacing: 2px; 13 } 14 .target { 15 font: 10px sans-serif; 16 font-weight: bold; 17 letter-spacing: 30px; 18 } 19 .expected { 20 color: green; 21 margin-right: 30px; 22 } 23 </style> 24 25 <body> 26 <template id="target-template">TT</template> 27 </body> 28 29 <script> 30 test_interpolation({ 31 property: 'letter-spacing', 32 from: neutralKeyframe, 33 to: '20px', 34 }, [ 35 {at: -0.3, expect: '33px'}, 36 {at: 0, expect: '30px'}, 37 {at: 0.3, expect: '27px'}, 38 {at: 0.6, expect: '24px'}, 39 {at: 1, expect: '20px'}, 40 {at: 1.5, expect: '15px'}, 41 ]); 42 43 test_interpolation({ 44 property: 'letter-spacing', 45 from: 'initial', 46 to: '20px', 47 }, [ 48 {at: -0.3, expect: '-6px'}, 49 {at: 0, expect: 'normal'}, 50 {at: 0.3, expect: '6px'}, 51 {at: 0.6, expect: '12px'}, 52 {at: 1, expect: '20px'}, 53 {at: 1.5, expect: '30px'}, 54 ]); 55 56 test_interpolation({ 57 property: 'letter-spacing', 58 from: 'inherit', 59 to: '20px', 60 }, [ 61 {at: -0.3, expect: '-3.4px'}, 62 {at: 0, expect: '2px'}, 63 {at: 0.3, expect: '7.4px'}, 64 {at: 0.6, expect: '12.8px'}, 65 {at: 1, expect: '20px'}, 66 {at: 1.5, expect: '29px'}, 67 ]); 68 69 test_interpolation({ 70 property: 'letter-spacing', 71 from: 'unset', 72 to: '20px', 73 }, [ 74 {at: -0.3, expect: '-3.4px'}, 75 {at: 0, expect: '2px'}, 76 {at: 0.3, expect: '7.4px'}, 77 {at: 0.6, expect: '12.8px'}, 78 {at: 1, expect: '20px'}, 79 {at: 1.5, expect: '29px'}, 80 ]); 81 82 test_interpolation({ 83 property: 'letter-spacing', 84 from: '-10px', 85 to: '10px', 86 }, [ 87 {at: -0.3, expect: '-16px'}, 88 {at: 0, expect: '-10px'}, 89 {at: 0.3, expect: '-4px'}, 90 {at: 0.6, expect: '2px'}, 91 {at: 1, expect: '10px'}, 92 {at: 1.5, expect: '20px'}, 93 ]); 94 95 test_interpolation({ 96 property: 'letter-spacing', 97 from: 'normal', 98 to: '10px', 99 }, [ 100 {at: -0.3, expect: '-3px'}, 101 {at: 0, expect: 'normal'}, 102 {at: 0.3, expect: '3px'}, 103 {at: 0.6, expect: '6px'}, 104 {at: 1, expect: '10px'}, 105 {at: 1.5, expect: '15px'}, 106 ]); 107 </script>