scale-interpolation.html (6604B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>scale interpolation</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> 7 <meta name="assert" content="scale supports animation."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 <style> 12 .parent { 13 scale: 0.5 1 2 14 } 15 .target { 16 width: 10px; 17 height: 10px; 18 background-color: black; 19 scale: 1.1 1; 20 } 21 .expected { 22 background-color: green; 23 } 24 </style> 25 </head> 26 <body> 27 <template id="target-template"> 28 <div class="parent"> 29 <div class="target"></div> 30 </div> 31 </template> 32 33 <script> 34 // Matching two <number> version. 35 test_interpolation({ 36 property: 'scale', 37 from: '-10 5', 38 to: '10 -5', 39 }, [ 40 {at: -1, expect: '-30 15'}, 41 {at: 0, expect: '-10 5'}, 42 {at: 0.25, expect: '-5 2.5'}, 43 {at: 0.75, expect: '5 -2.5'}, 44 {at: 1, expect: '10 -5'}, 45 {at: 2, expect: '30 -15'}, 46 ]); 47 48 // Matching three <number> version. 49 test_interpolation({ 50 property: 'scale', 51 from: '2 30 400', 52 to: '10 110 1200', 53 }, [ 54 {at: -1, expect: '-6 -50 -400'}, 55 {at: 0, expect: '2 30 400'}, 56 {at: 0.125, expect: '3 40 500'}, 57 {at: 0.875, expect: '9 100 1100'}, 58 {at: 1, expect: '10 110 1200'}, 59 {at: 2, expect: '18 190 2000'} 60 ]); 61 62 // From three <number> to two <number>; test that it expands correctly. 63 test_interpolation({ 64 property: 'scale', 65 from: '26 17 9', 66 to: '2 1', 67 }, [ 68 {at: -1, expect: '50 33 17'}, 69 {at: 0, expect: '26 17 9'}, 70 {at: 0.125, expect: '23 15 8'}, 71 {at: 0.875, expect: '5 3 2'}, 72 {at: 1, expect: '2 1'}, 73 {at: 2, expect: '-22 -15 -7'} 74 ]); 75 76 // Test one <number> is expanded correctly. 77 test_interpolation({ 78 property: 'scale', 79 from: '1', 80 to: '10 -5 0', 81 }, [ 82 {at: -1, expect: '-8 7 2'}, 83 {at: 0, expect: '1'}, 84 {at: 0.25, expect: '3.25 -0.5 0.75'}, 85 {at: 0.75, expect: '7.75 -3.5 0.25'}, 86 {at: 1, expect: '10 -5 0'}, 87 {at: 2, expect: '19 -11 -1'}, 88 ]); 89 90 test_interpolation({ 91 property: 'scale', 92 from: '-10 5 1', 93 to: '1', 94 }, [ 95 {at: -1, expect: '-21 9'}, 96 {at: 0, expect: '-10 5'}, 97 {at: 0.25, expect: '-7.25 4'}, 98 {at: 0.75, expect: '-1.75 2'}, 99 {at: 1, expect: '1'}, 100 {at: 2, expect: '12 -3'}, 101 ]); 102 103 // Handling of the none value. 104 test_interpolation({ 105 property: 'scale', 106 from: 'none', 107 to: 'none', 108 }, [ 109 {at: -1, expect: 'none'}, 110 {at: 0, expect: 'none'}, 111 {at: 0.125, expect: 'none'}, 112 {at: 0.875, expect: 'none'}, 113 {at: 1, expect: 'none'}, 114 {at: 2, expect: 'none'} 115 ]); 116 117 // Going from none to a valid value; test that it converts properly. 118 test_interpolation({ 119 property: 'scale', 120 from: 'none', 121 to: '4 3 2', 122 }, [ 123 {at: -1, expect: '-2 -1 0'}, 124 {at: 0, expect: '1'}, 125 {at: 0.125, expect: '1.375 1.25 1.125'}, 126 {at: 0.875, expect: '3.625 2.75 1.875'}, 127 {at: 1, expect: '4 3 2'}, 128 {at: 2, expect: '7 5 3'} 129 ]); 130 131 // Test neutral keyframe; make sure it adds the underlying. 132 test_interpolation({ 133 property: 'scale', 134 from: neutralKeyframe, 135 to: '1.5 1', 136 }, [ 137 {at: -1, expect: '0.7 1'}, 138 {at: 0, expect: '1.1 1'}, 139 {at: 0.25, expect: '1.2 1'}, 140 {at: 0.75, expect: '1.4 1'}, 141 {at: 1, expect: '1.5 1'}, 142 {at: 2, expect: '1.9 1'}, 143 ]); 144 145 // Test initial value; for 'scale' this is 'none'. 146 test_interpolation({ 147 property: 'scale', 148 from: 'initial', 149 to: '2 0.5 1', 150 }, [ 151 {at: -1, expect: '0 1.5'}, 152 {at: 0, expect: '1'}, 153 {at: 0.25, expect: '1.25 0.875'}, 154 {at: 0.75, expect: '1.75 0.625'}, 155 {at: 1, expect: '2 0.5'}, 156 {at: 2, expect: '3 0'}, 157 ]); 158 159 test_interpolation({ 160 property: 'scale', 161 from: '2 0.5 1', 162 to: 'initial', 163 }, [ 164 {at: -1, expect: '3 0'}, 165 {at: 0, expect: '2 0.5'}, 166 {at: 0.25, expect: '1.75 0.6251'}, 167 {at: 0.75, expect: '1.25 0.875'}, 168 {at: 1, expect: '1'}, 169 {at: 2, expect: '0 1.5'}, 170 ]); 171 172 173 // Test unset value; for 'scale' this is 'none'. 174 test_interpolation({ 175 property: 'scale', 176 from: 'unset', 177 to: '1.5 1', 178 }, [ 179 {at: -1, expect: '0.5 1'}, 180 {at: 0, expect: '1'}, 181 {at: 0.25, expect: '1.125 1'}, 182 {at: 0.75, expect: '1.375 1'}, 183 {at: 1, expect: '1.5 1'}, 184 {at: 2, expect: '2 1'}, 185 ]); 186 187 // Test inherited value. 188 test_interpolation({ 189 property: 'scale', 190 from: 'inherit', 191 to: '2 0.5 1', 192 }, [ 193 {at: -1, expect: '-1 1.5 3'}, 194 {at: 0, expect: '0.5 1 2'}, 195 {at: 0.25, expect: '0.875 0.875 1.75'}, 196 {at: 0.75, expect: '1.625 0.625 1.25'}, 197 {at: 1, expect: '2 0.5'}, 198 {at: 2, expect: '3.5 0 0'}, 199 ]); 200 201 test_interpolation({ 202 property: 'scale', 203 from: '2 0.5 1', 204 to: 'inherit', 205 }, [ 206 {at: -1, expect: '3.5 0 0'}, 207 {at: 0, expect: '2 0.5'}, 208 {at: 0.25, expect: '1.625 0.625 1.25'}, 209 {at: 0.75, expect: '0.875 0.875 1.75'}, 210 {at: 1, expect: '0.5 1 2'}, 211 {at: 2, expect: '-1 1.5 3'}, 212 ]); 213 214 // Test combination of initial and inherit. 215 test_interpolation({ 216 property: 'scale', 217 from: 'initial', 218 to: 'inherit', 219 }, [ 220 {at: -1, expect: '1.5 1 0'}, 221 {at: 0, expect: '1'}, 222 {at: 0.25, expect: '0.875 1 1.25'}, 223 {at: 0.75, expect: '0.625 1 1.75'}, 224 {at: 1, expect: '0.5 1 2'}, 225 {at: 2, expect: '0 1 3'}, 226 ]); 227 228 test_interpolation({ 229 property: 'scale', 230 from: 'inherit', 231 to: 'initial', 232 }, [ 233 {at: -1, expect: '0 1 3'}, 234 {at: 0, expect: '0.5 1 2'}, 235 {at: 0.25, expect: '0.625 1 1.75'}, 236 {at: 0.75, expect: '0.875 1 1.25'}, 237 {at: 1, expect: '1'}, 238 {at: 2, expect: '1.5 1 0'}, 239 ]); 240 </script> 241 </body> 242 </html>