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