offset-rotate-interpolation.html (6717B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>offset-rotate interpolation</title> 6 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 7 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> 8 <meta name="assert" content="offset-rotate supports animation."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/interpolation-testcommon.js"></script> 12 </head> 13 <style> 14 .parent { 15 offset-rotate: 30deg; 16 } 17 .target { 18 width: 80px; 19 height: 80px; 20 display: inline-block; 21 background-color: black; 22 margin-right: 5px; 23 offset-rotate: 10deg; 24 } 25 .expected { 26 background-color: green; 27 margin-right: 15px; 28 } 29 </style> 30 <body> 31 <script> 32 test_interpolation({ 33 property: 'offset-rotate', 34 from: '100deg', 35 to: '180deg', 36 }, [ 37 {at: -1, expect: '20deg'}, 38 {at: 0, expect: '100deg'}, 39 {at: 0.125, expect: '110deg'}, 40 {at: 0.875, expect: '170deg'}, 41 {at: 1, expect: '180deg'}, 42 {at: 2, expect: '260deg'} 43 ]); 44 45 test_interpolation({ 46 property: 'offset-rotate', 47 from: 'auto 45deg', 48 to: 'auto 125deg', 49 }, [ 50 {at: -1, expect: 'auto -35deg'}, 51 {at: 0, expect: 'auto 45deg'}, 52 {at: 0.125, expect: 'auto 55deg'}, 53 {at: 0.875, expect: 'auto 115deg'}, 54 {at: 1, expect: 'auto 125deg'}, 55 {at: 2, expect: 'auto 205deg'} 56 ]); 57 58 test_interpolation({ 59 property: 'offset-rotate', 60 from: 'auto 170deg', 61 to: '100grad auto', 62 }, [ 63 {at: -1, expect: 'auto 250deg'}, 64 {at: 0, expect: 'auto 170deg'}, 65 {at: 0.125, expect: 'auto 160deg'}, 66 {at: 0.875, expect: 'auto 100deg'}, 67 {at: 1, expect: '100grad auto'}, 68 {at: 2, expect: 'auto 10deg'} 69 ]); 70 71 test_interpolation({ 72 property: 'offset-rotate', 73 from: 'auto -280deg', 74 to: 'auto calc(90deg - 0.5turn - 300grad + 0rad)', 75 }, [ 76 {at: -1, expect: 'auto -200deg'}, 77 {at: 0, expect: 'auto -280deg'}, 78 {at: 0.125, expect: 'auto -290deg'}, 79 {at: 0.875, expect: 'auto -350deg'}, 80 {at: 1, expect: 'auto calc(90deg - 0.5turn - 300grad + 0rad)'}, 81 {at: 2, expect: 'auto -440deg'} 82 ]); 83 84 test_interpolation({ 85 property: 'offset-rotate', 86 from: 'auto 100deg', 87 to: 'reverse', 88 }, [ 89 {at: -1, expect: 'auto 20deg'}, 90 {at: 0, expect: 'auto 100deg'}, 91 {at: 0.125, expect: 'auto 110deg'}, 92 {at: 0.875, expect: 'auto 170deg'}, 93 {at: 1, expect: 'reverse'}, 94 {at: 2, expect: 'auto 260deg'} 95 ]); 96 97 // No interpolation between auto/reverse and angle. 98 test_no_interpolation({ 99 property: 'offset-rotate', 100 from: 'reverse 90deg', 101 to: '360deg', 102 }); 103 104 test_no_interpolation({ 105 property: 'offset-rotate', 106 from: '6rad', 107 to: 'auto', 108 }); 109 110 // Neutral keyframes use the inline style. 111 test_interpolation({ 112 property: 'offset-rotate', 113 from: neutralKeyframe, 114 to: '20deg', 115 }, [ 116 {at: -0.3, expect: '7deg'}, 117 {at: 0, expect: '10deg'}, 118 {at: 0.3, expect: '13deg'}, 119 {at: 0.6, expect: '16deg'}, 120 {at: 1, expect: '20deg'}, 121 {at: 1.5, expect: '25deg'}, 122 ]); 123 124 // No interpolation to an angle from the initial value 'auto'. 125 test_no_interpolation({ 126 property: 'offset-rotate', 127 from: 'initial', 128 to: '20deg', 129 }); 130 131 // 'inherit' keyframes use the parent style. 132 test_interpolation({ 133 property: 'offset-rotate', 134 from: 'inherit', 135 to: '20deg', 136 }, [ 137 {at: -0.3, expect: '33deg'}, 138 {at: 0, expect: '30deg'}, 139 {at: 0.3, expect: '27deg'}, 140 {at: 0.6, expect: '24deg'}, 141 {at: 1, expect: '20deg'}, 142 {at: 1.5, expect: '15deg'}, 143 ]); 144 145 // No interpolation to an angle from the initial value 'auto'. 146 test_no_interpolation({ 147 property: 'offset-rotate', 148 from: 'unset', 149 to: '20deg', 150 }); 151 152 // Interpolation between angles. 153 test_interpolation({ 154 property: 'offset-rotate', 155 from: '10deg', 156 to: '50deg' 157 }, [ 158 {at: -0.3, expect: '-2deg'}, 159 {at: 0, expect: '10deg'}, 160 {at: 0.3, expect: '22deg'}, 161 {at: 0.6, expect: '34deg'}, 162 {at: 1, expect: '50deg'}, 163 {at: 1.5, expect: '70deg'}, 164 ]); 165 166 // Interpolation between auto angles. 167 test_interpolation({ 168 property: 'offset-rotate', 169 from: 'auto 10deg', 170 to: 'auto 50deg' 171 }, [ 172 {at: -0.3, expect: 'auto -2deg'}, 173 {at: 0, expect: 'auto 10deg'}, 174 {at: 0.3, expect: 'auto 22deg'}, 175 {at: 0.6, expect: 'auto 34deg'}, 176 {at: 1, expect: 'auto 50deg'}, 177 {at: 1.5, expect: 'auto 70deg'}, 178 ]); 179 180 // 'reverse' is like 'auto 180deg'. 181 test_interpolation({ 182 property: 'offset-rotate', 183 from: 'reverse -170deg', 184 to: 'reverse -130deg' 185 }, [ 186 {at: -0.3, expect: 'auto -2deg'}, 187 {at: 0, expect: 'auto 10deg'}, 188 {at: 0.3, expect: 'auto 22deg'}, 189 {at: 0.6, expect: 'auto 34deg'}, 190 {at: 1, expect: 'auto 50deg'}, 191 {at: 1.5, expect: 'auto 70deg'}, 192 ]); 193 194 // Interpolation between 'auto' and 'reverse'. 195 test_interpolation({ 196 property: 'offset-rotate', 197 from: 'auto 10deg', 198 to: 'reverse -130deg' 199 }, [ 200 {at: -0.3, expect: 'auto -2deg'}, 201 {at: 0, expect: 'auto 10deg'}, 202 {at: 0.3, expect: 'auto 22deg'}, 203 {at: 0.6, expect: 'auto 34deg'}, 204 {at: 1, expect: 'auto 50deg'}, 205 {at: 1.5, expect: 'auto 70deg'}, 206 ]); 207 test_interpolation({ 208 property: 'offset-rotate', 209 from: 'reverse -170deg', 210 to: 'auto 50deg' 211 }, [ 212 {at: -0.3, expect: 'auto -2deg'}, 213 {at: 0, expect: 'auto 10deg'}, 214 {at: 0.3, expect: 'auto 22deg'}, 215 {at: 0.6, expect: 'auto 34deg'}, 216 {at: 1, expect: 'auto 50deg'}, 217 {at: 1.5, expect: 'auto 70deg'}, 218 ]); 219 220 // No interpolation between auto/reverse and angle. 221 test_no_interpolation({ 222 property: 'offset-rotate', 223 from: 'auto 200deg', 224 to: '300deg' 225 }); 226 test_no_interpolation({ 227 property: 'offset-rotate', 228 from: '300deg', 229 to: 'reverse 20deg' 230 }); 231 </script> 232 </body> 233 </html>