line-height-interpolation.html (3759B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>line-height interpolation</title> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height"> 5 <meta name="assert" content="line-height supports animation by computation"> 6 <meta name="timeout" content="long"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <style> 13 .parent { 14 line-height: 30px; 15 } 16 17 .target { 18 display: inline-block; 19 font: 20px sans-serif; 20 line-height: 10px; 21 } 22 23 .expected { 24 color: green; 25 margin-right: 30px; 26 } 27 </style> 28 <body> 29 <template id="target-template"> 30 <p> 31 v<br />v 32 </p> 33 </template> 34 </body> 35 <script> 36 test_interpolation({ 37 property: 'line-height', 38 from: neutralKeyframe, 39 to: '20px', 40 }, [ 41 {at: -1, expect: '0px'}, 42 {at: -0.3, expect: '7px'}, 43 {at: 0, expect: '10px'}, 44 {at: 0.3, expect: '13px'}, 45 {at: 0.6, expect: '16px'}, 46 {at: 1, expect: '20px'}, 47 {at: 1.5, expect: '25px'}, 48 ]); 49 50 test_no_interpolation({ 51 property: 'line-height', 52 from: 'initial', 53 to: '20px', 54 }); 55 56 test_interpolation({ 57 property: 'line-height', 58 from: 'inherit', 59 to: '20px', 60 }, [ 61 {at: -1, expect: '40px'}, 62 {at: -0.3, expect: '33px'}, 63 {at: 0, expect: '30px'}, 64 {at: 0.3, expect: '27px'}, 65 {at: 0.6, expect: '24px'}, 66 {at: 1, expect: '20px'}, 67 {at: 1.5, expect: '15px'}, 68 ]); 69 70 test_interpolation({ 71 property: 'line-height', 72 from: 'unset', 73 to: '20px', 74 }, [ 75 {at: -1, expect: '40px'}, 76 {at: -0.3, expect: '33px'}, 77 {at: 0, expect: '30px'}, 78 {at: 0.3, expect: '27px'}, 79 {at: 0.6, expect: '24px'}, 80 {at: 1, expect: '20px'}, 81 {at: 1.5, expect: '15px'}, 82 ]); 83 84 test_interpolation({ 85 property: 'line-height', 86 from: '4', 87 to: '14', 88 }, [ 89 {at: -1, expect: '0'}, 90 {at: -0.3, expect: '1'}, 91 {at: 0, expect: '4'}, 92 {at: 0.3, expect: '7'}, 93 {at: 0.6, expect: '10'}, 94 {at: 1, expect: '14'}, 95 {at: 1.5, expect: '19'}, 96 ]); 97 98 test_interpolation({ 99 property: 'line-height', 100 from: '4px', 101 to: '14px', 102 }, [ 103 {at: -1, expect: '0px'}, 104 {at: -0.3, expect: '1px'}, 105 {at: 0, expect: '4px'}, 106 {at: 0.3, expect: '7px'}, 107 {at: 0.6, expect: '10px'}, 108 {at: 1, expect: '14px'}, 109 {at: 1.5, expect: '19px'}, 110 ]); 111 112 test_interpolation({ 113 property: 'line-height', 114 from: 'normal', 115 to: 'normal', 116 }, [ 117 {at: -0.3, expect: 'normal'}, 118 {at: 0, expect: 'normal'}, 119 {at: 0.3, expect: 'normal'}, 120 {at: 0.6, expect: 'normal'}, 121 {at: 1, expect: 'normal'}, 122 {at: 1.5, expect: 'normal'}, 123 ]); 124 125 test_no_interpolation({ 126 property: 'line-height', 127 from: '4', 128 to: '14px', 129 }); 130 131 test_no_interpolation({ 132 property: 'line-height', 133 from: '14px', 134 to: 'normal', 135 }); 136 137 test_no_interpolation({ 138 property: 'line-height', 139 from: 'normal', 140 to: '4', 141 }); 142 143 test_no_interpolation({ 144 property: 'line-height', 145 from: '4', 146 to: 'normal', 147 }); 148 149 test_no_interpolation({ 150 property: 'line-height', 151 from: 'normal', 152 to: '14px', 153 }); 154 155 test_no_interpolation({ 156 property: 'line-height', 157 from: '14px', 158 to: '4', 159 }); 160 161 test_no_interpolation({ 162 property: 'line-height', 163 from: '4', 164 to: '14q', 165 }); 166 167 test_interpolation({ 168 property: 'line-height', 169 from: '4q', 170 to: '14q', 171 }, [ 172 {at: -1, expect: '0q'}, 173 {at: -0.3, expect: '1q'}, 174 {at: 0, expect: '4q'}, 175 {at: 0.3, expect: '7q'}, 176 {at: 0.6, expect: '10q'}, 177 {at: 1, expect: '14q'}, 178 {at: 1.5, expect: '19q'}, 179 ]); 180 181 test_no_interpolation({ 182 property: 'line-height', 183 from: '14q', 184 to: 'normal', 185 }); 186 187 test_no_interpolation({ 188 property: 'line-height', 189 from: '1', 190 to: '200%', 191 }); 192 193 test_interpolation({ 194 property: 'line-height', 195 from: '100%', 196 to: '200%', 197 }, [ 198 {at: 0, expect: '100%'}, 199 {at: 0.3, expect: '130%'}, 200 {at: 0.6, expect: '160%'}, 201 {at: 1, expect: '200%'}, 202 ]); 203 </script>