transform-interpolation-005.html (15444B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> 5 <meta name="assert" content="transform supports animation as a transform list"> 6 <meta name="timeout" content="long"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .target { 13 color: white; 14 width: 100px; 15 height: 100px; 16 background-color: black; 17 display: inline-block; 18 overflow: hidden; 19 } 20 .expected { 21 background-color: green; 22 } 23 .target > div { 24 width: 10px; 25 height: 10px; 26 display: inline-block; 27 background: orange; 28 margin: 1px; 29 } 30 .test { 31 overflow: hidden; 32 } 33 </style> 34 35 <body> 36 <template id="target-template"> 37 <div></div> 38 </template> 39 </body> 40 41 <script> 42 // Matrix transforms: 43 44 // 2D matrix transforms: 45 // 46 // [m11 m21 0 m41] [1 0 0 Tx] [cos(R) -sin(R) 0 0] [1 K 0 0] [Sx 0 0 0] 47 // [m12 m22 0 m42] = [0 1 0 Ty] [sin(R) cos(R) 0 0] [0 1 0 0] [0 Sy 0 0] 48 // [ 0 0 1 0 ] [0 0 1 0 ] [ 0 0 1 0] [0 0 1 0] [0 0 1 0] 49 // [ 0 0 0 1 ] [0 0 0 1 ] [ 0 0 0 1] [0 0 0 1] [0 0 0 1] 50 // 51 // M = translate * rotate * skew * scale 52 // See also webkit-transform-interpolation-005.html 53 // 54 55 const cos30 = Math.cos(Math.PI / 6); 56 const sin30 = Math.sin(Math.PI / 6); 57 const cos45 = Math.cos(Math.PI / 4); 58 const sin45 = Math.sin(Math.PI / 4); 59 const cos60 = Math.cos(Math.PI / 3); 60 const sin60 = Math.sin(Math.PI / 3); 61 62 // translateY(-6px) -> translateX(6px) rotate(90deg) scaleX(7) 63 test_interpolation({ 64 property: 'transform', 65 from: 'matrix(1, 0, 0, 1, 0, -6)', 66 to: 'matrix(0, 7, -1, 0, 6, 0)' 67 }, [ 68 {at: -1, expect: 'matrix(0, 5, 1, 0, -6, -12)'}, 69 {at: 0, expect: 'matrix(1, 0, 0, 1, 0, -6)'}, 70 { 71 at: 1/3, 72 expect: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)` 73 }, 74 { 75 at: 0.5, 76 expect: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)` 77 }, 78 { 79 at: 2/3, 80 expect: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)` 81 }, 82 {at: 1, expect: 'matrix(0, 7, -1, 0, 6, 0)'}, 83 {at: 2, expect: 'matrix(-13, 0, 0, -1, 12, 6)'} 84 ]); 85 86 // translateX(6px) rotate(90deg) scaleX(7) -> translateY(-6px) 87 test_interpolation({ 88 property: 'transform', 89 from: 'matrix(0, 7, -1, 0, 6, 0)', 90 to: 'matrix(1, 0, 0, 1, 0, -6)', 91 }, [ 92 {at: -1, expect: 'matrix(-13, 0, 0, -1, 12, 6)'}, 93 {at: 0, expect: 'matrix(0, 7, -1, 0, 6, 0)'}, 94 { 95 at: 1/3, 96 expect: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)` 97 }, 98 { 99 at: 0.5, 100 expect: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)` 101 }, 102 { 103 at: 2/3, 104 expect: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)` 105 }, 106 {at: 1, expect: 'matrix(1, 0, 0, 1, 0, -6)'}, 107 {at: 2, expect: 'matrix(0, 5, 1, 0, -6, -12)'} 108 ]); 109 110 // scaleY(7) -> skewX(45deg) scaleX(7) 111 test_interpolation({ 112 property: 'transform', 113 from: 'matrix(1, 0, 0, 7, 0, 0)', 114 to: 'matrix(7, 0, 1, 1, 0, 0)' 115 }, [ 116 {at: -1, expect: 'matrix(-5, 0, -13, 13, 0, 0)'}, 117 {at: 0, expect: 'matrix(1, 0, 0, 7, 0, 0)'}, 118 {at: 1/3, expect: 'matrix(3, 0, 1.6667, 5, 0, 0)'}, 119 {at: 0.5, expect: 'matrix(4, 0, 2, 4, 0, 0)'}, 120 {at: 2/3, expect: 'matrix(5, 0, 2, 3, 0, 0)'}, 121 {at: 1, expect: `matrix(7, 0, 1, 1, 0, 0)`}, 122 {at: 2, expect: `matrix(13, 0, -10, -5, 0, 0)`} 123 ]); 124 125 // none -> translateX(6px) skewX(45deg) scaleX(7) scaleY(2) 126 test_interpolation({ 127 property: 'transform', 128 from: 'none', 129 to: 'matrix(7, 0, 2, 2, 6, 0)' 130 }, [ 131 {at: -1, expect: 'matrix(-5, 0, 0, 0, -6, 0)'}, 132 {at: 0, expect: 'matrix(1, 0, 0, 1, 0, 0)'}, 133 {at: 0.25, expect: 'matrix(2.5, 0, 0.31, 1.25, 1.5, 0)'}, 134 {at: 0.5, expect: 'matrix(4, 0, 0.75, 1.5, 3, 0)'}, 135 {at: 0.75, expect: 'matrix(5.5, 0, 1.31, 1.75, 4.5, 0)'}, 136 {at: 1, expect: 'matrix(7, 0, 2, 2, 6, 0)'}, 137 {at: 2, expect: 'matrix(13, 0, 6, 3, 12, 0)'} 138 ]); 139 140 // translateY(-6px) scale(3, 5) -> none 141 test_interpolation({ 142 property: 'transform', 143 from: 'matrix(3, 0, 0, 5, 0, -6)', 144 to: 'none' 145 }, [ 146 {at: -1, expect: 'matrix(5, 0, 0, 9, 0, -12)'}, 147 {at: 0, expect: 'matrix(3, 0, 0, 5, 0, -6)'}, 148 {at: 0.25, expect: 'matrix(2.5, 0, 0, 4, 0, -4.5)'}, 149 {at: 0.5, expect: 'matrix(2, 0, 0, 3, 0, -3)'}, 150 {at: 0.75, expect: 'matrix(1.5, 0, 0, 2, 0, -1.5)'}, 151 {at: 1, expect: 'matrix(1, 0, 0, 1, 0, 0)'}, 152 {at: 2, expect: 'matrix(-1, 0, 0, -3, 0, 6)'} 153 ]); 154 155 // skewY(200deg) translate(200, 200) -> translate(200, 200) 156 test_interpolation({ 157 property: 'transform', 158 from: 'matrix(1, 0.36, 0, 1, 200, 200)', 159 to: 'matrix(1, 0, 0, 1, 200, 200)' 160 }, [ 161 {at: -1, expect: 'matrix(0.87, 0.72, -0.07, 1.08, 200, 200)'}, 162 {at: 0, expect: 'matrix(1, 0.36, 0, 1, 200, 200)'}, 163 {at: 0.25, expect: 'matrix(1.01, 0.27, 0, 0.99, 200, 200)'}, 164 {at: 0.5, expect: 'matrix(1.02, 0.18, 0.01, 0.99, 200, 200)'}, 165 {at: 0.75, expect: 'matrix(1.01, 0.09, 0, 0.99, 200, 200)'}, 166 {at: 1, expect: 'matrix(1, 0, 0, 1, 200, 200)'}, 167 {at: 2, expect: 'matrix(0.88, -0.32, 0, 1.13, 200, 200)'} 168 ]); 169 170 // 3-D matrix transforms. 171 // TODO(kevers): Revisit 3D transform examples. It is difficult to infer 172 // the quality of the matrix decompositions from the expected output. 173 test_interpolation({ 174 property: 'transform', 175 from: 'none', 176 to: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)' 177 }, [ 178 {at: -1, expect: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'}, 179 {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, 180 {at: 0.25, expect: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'}, 181 {at: 0.75, expect: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'}, 182 {at: 1, expect: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'}, 183 {at: 2, expect: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'}, 184 ]); 185 test_interpolation({ 186 property: 'transform', 187 from: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)', 188 to: 'none' 189 }, [ 190 {at: -1, expect: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'}, 191 {at: 0, expect: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'}, 192 {at: 0.25, expect: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'}, 193 {at: 0.75, expect: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'}, 194 {at: 1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, 195 {at: 2, expect: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'}, 196 ]); 197 test_interpolation({ 198 property: 'transform', 199 from: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)', 200 to: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)' 201 }, [ 202 {at: -1, expect: 'matrix3d(1.9877532948000005, 0.0, 0.0, 0.0, 0.0, 2.7492749567000003, 0.0, 0.0, 0.0, 0.0, 2.5165290423999997, 0.0, 20.2343946258, 21.1087405532, 21.371164870599998, 1.0)'}, 203 {at: 0, expect: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)'}, 204 {at: 0.25, expect: 'matrix3d(2.441256919175, 0.0, 0.0, 0.0, 0.0, 2.571299218825, 0.0, 0.0, 0.0, 0.0, 2.6947530634, 0.0, 20.35889062555, 20.561444082325, 20.800684839349998, 1.0)'}, 205 {at: 0.75, expect: 'matrix3d(2.622658368925, 0.0, 0.0, 0.0, 0.0, 2.500108923675, 0.0, 0.0, 0.0, 0.0, 2.7660426718, 0.0, 20.408689025450002, 20.342525493975, 20.572492826850002, 1.0)'}, 206 {at: 1, expect: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'}, 207 {at: 2, expect: 'matrix3d(3.0761619932999995, 0.0, 0.0, 0.0, 0.0, 2.3221331858, 0.0, 0.0, 0.0, 0.0, 2.9442666928000003, 0.0, 20.5331850252, 19.7952290231, 20.002012795600002, 1.0)'}, 208 ]); 209 test_interpolation({ 210 property: 'transform', 211 from: 'none', 212 to: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)' 213 }, [ 214 {at: -1, expect: 'matrix3d(-0.0000000000000002377810622383943, -1.0671050586638147, -0.08972656766237302, 1.3740432449326199, 0.98484601036295, -2.653201092395309, 0.6753819540610847, 3.6127240080250744, -2.7988839807429846, -1.2090004194153336, -0.5183744226115445, -0.7936088631686278, 1.1875, 0.0625, -1.3125, 5.340768914473683)'}, 215 {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, 216 {at: 0.25, expect: 'matrix3d(0.9041890962319094, 0.3522701519297133, -0.15240204298176957, -0.1428256720529315, -0.7579798772527586, 0.6803606288839232, -0.05133336076757235, 0.37904689530895724, -0.1957679784745485, 0.38554138029509327, 0.8226186974340638, 0.3370288143441876, -0.296875, -0.015625, 0.328125, 0.5930529142680923)'}, 217 {at: 0.75, expect: 'matrix3d(0.35007413226026135, 0.7254385504141292, -0.4977009150941454, 0.09582061929004702, -1.1027525038949482, -0.5884810398827429, 0.4516829688651701, 0.5447944343861767, -0.68717798815684, 0.2657772247405681, 0.5465690479810023, 1.0836207863885503, -0.890625, -0.046875, 0.984375, 0.5930529142680927)'}, 218 {at: 1, expect: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'}, 219 {at: 2, expect: 'matrix3d(-0.5844534449366048, -0.42278005999296053, -0.4650580659922564, -0.6817595809063256, 0.9156938760088464, 0.3851647027225889, 0.9244443507516923, 0.7218225020358241, -0.0803568793574344, 0.1719974850210706, -0.49676609633513097, -0.25968177786904373, -2.375, -0.125, 2.625, 5.340768914473685)'}, 220 ]); 221 test_interpolation({ 222 property: 'transform', 223 from: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)', 224 to: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)' 225 }, [ 226 {at: -1, expect: 'matrix3d(-0.6299594065765657, -0.10825090106268696, -0.20133311671001855, 5.485724217214554, 6.358051978686152, 0.16496896269344588, 1.5760051143537075, -54.21568355620423, 0.7106057459805782, -1.1596356050622005, -0.11495342545397585, -4.913752963990824, -1.03125, -1.125, 3.5625, -5.901513951904114)'}, 227 {at: 0, expect: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'}, 228 {at: 0.25, expect: 'matrix3d(0.33652832679595723, 0.55254445148386, -0.7544724447833296, 0.22700224951774267, -0.69720168363685, -0.036373245768780864, 0.28149188169180933, -0.2845156818045006, -0.24737156018941048, 0.31207160370190334, 0.4564821058052897, 0.9220853089096839, -1.2265625, 0.203125, 0.75, 1.647016932991011)'}, 229 {at: 0.75, expect: 'matrix3d(0.6861191524977764, -0.18025672746204927, -0.8710297237546482, 0.6072134247444672, 0.2819931018922366, 0.27778974607679663, -0.6540128246146626, 0.5063632314069845, 0.5509562084361049, -0.3215202993119732, 0.5459062603735321, 2.8697154005492105, -1.3046875, 0.734375, -0.375, 1.6470169329910096)'}, 230 {at: 1, expect: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'}, 231 {at: 2, expect: 'matrix3d(-1.1789992641434441, -0.7109729379601547, -0.4455746537954199, -21.703089533128907, -0.11137581475421703, -0.08822983871000473, -0.05695380894007451, -2.22667264132605, -3.1443917136741506, 1.8952588096345078, 2.426615889772007, -21.697523130750138, -1.5, 2.0625, -3.1875, -5.901513951904121)'}, 232 ]); 233 test_interpolation({ 234 property: 'transform', 235 from: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)', 236 to: 'none' 237 }, [ 238 {at: -1, expect: 'matrix3d(-0.6413028394192518, -1.0702420910513302, -0.5807595966791961, -18.02447171345163, 0.8211815704840004, 1.0980679097347057, 0.9399408862655454, 22.460730852026064, 0.28421009261178104, -0.5408346238741739, 0.5194791363698213, 3.075163035391172, -2.6875, 2, -1.875, -14.881239394516232)'}, 239 {at: 0, expect: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'}, 240 {at: 0.25, expect: 'matrix3d(0.7912976716694541, -0.4517927901159618, -0.6868745974719376, 1.2522201536338506, 0.7952183069582651, 0.06340410955800829, -0.7956629784232128, 2.2561737435012983, 0.345639443327071, -0.8934490945546473, 0.830131443385676, 1.2606901484983566, -1.0078125, 0.75, -0.703125, 2.4888661932358946)'}, 241 {at: 0.75, expect: 'matrix3d(1.0093457700315165, -0.12746048375025829, -0.24746788943106088, 1.3202120308857304, 0.6128364656690982, 0.7600694601651116, -0.22233359857303325, 1.4081483224940277, 0.21669805381113447, -0.3786082265932788, 0.908354523914928, 0.6747509193960347, -0.3359375, 0.25, -0.234375, 2.4888661932358964)'}, 242 {at: 1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, 243 {at: 2, expect: 'matrix3d(0.39048513570444376, 0.14780794797065988, 0.6963068100217401, -4.857907861239344, -2.967682789284791, 0.6004978769584385, -3.5472376016872444, 26.675324787979896, -2.5953724498995308, 1.6280843851961373, 0.8163834310586356, 9.001735256585825, 1.34375, -1, 0.9375, -14.881239394516227)'}, 244 ]); 245 246 // Mismatched interpolation with an empty list should not use decomposition. 247 test_interpolation({ 248 property: 'transform', 249 from: 'none', 250 to: 'rotate(180deg)' 251 }, [ 252 {at: -1, expect: 'rotate(-180deg)'}, 253 {at: 0, expect: 'rotate(0deg)'}, 254 {at: 0.25, expect: 'rotate(45deg)'}, 255 {at: 0.75, expect: 'rotate(135deg)'}, 256 {at: 1, expect: 'rotate(180deg)'}, 257 {at: 2, expect: 'rotate(360deg)'}, 258 ]); 259 test_interpolation({ 260 property: 'transform', 261 from: 'rotate(180deg)', 262 to: 'none' 263 }, [ 264 {at: -1, expect: 'rotate(360deg)'}, 265 {at: 0, expect: 'rotate(180deg)'}, 266 {at: 0.25, expect: 'rotate(135deg)'}, 267 {at: 0.75, expect: 'rotate(45deg)'}, 268 {at: 1, expect: 'rotate(0deg)'}, 269 {at: 2, expect: 'rotate(-180deg)'}, 270 ]); 271 test_interpolation({ 272 property: 'transform', 273 from: 'none', 274 to: 'rotate(360deg)' 275 }, [ 276 {at: -1, expect: 'rotate(-360deg)'}, 277 {at: 0, expect: 'rotate(0deg)'}, 278 {at: 0.25, expect: 'rotate(90deg)'}, 279 {at: 0.75, expect: 'rotate(270deg)'}, 280 {at: 1, expect: 'rotate(360deg)'}, 281 {at: 2, expect: 'rotate(720deg)'}, 282 ]); 283 </script>