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