| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> |
| 3 <style> |
| 4 .parent { |
| 5 offset-rotate: 30deg; |
| 6 } |
| 7 .target { |
| 8 width: 80px; |
| 9 height: 80px; |
| 10 display: inline-block; |
| 11 background-color: black; |
| 12 margin-right: 5px; |
| 13 offset-rotate: 10deg; |
| 14 } |
| 15 .expected { |
| 16 background-color: green; |
| 17 margin-right: 15px; |
| 18 } |
| 19 </style> |
| 20 <body> |
| 21 <script src="resources/interpolation-test.js"></script> |
| 22 <script> |
| 23 // Neutral keyframes use the inline style. |
| 24 assertInterpolation({ |
| 25 property: 'offset-rotate', |
| 26 from: neutralKeyframe, |
| 27 to: '20deg', |
| 28 }, [ |
| 29 {at: -0.3, is: '7deg'}, |
| 30 {at: 0, is: '10deg'}, |
| 31 {at: 0.3, is: '13deg'}, |
| 32 {at: 0.6, is: '16deg'}, |
| 33 {at: 1, is: '20deg'}, |
| 34 {at: 1.5, is: '25deg'}, |
| 35 ]); |
| 36 |
| 37 // No interpolation to an angle from the initial value 'auto'. |
| 38 assertNoInterpolation({ |
| 39 property: 'offset-rotate', |
| 40 from: 'initial', |
| 41 to: '20deg', |
| 42 }); |
| 43 |
| 44 // 'inherit' keyframes use the parent style. |
| 45 assertInterpolation({ |
| 46 property: 'offset-rotate', |
| 47 from: 'inherit', |
| 48 to: '20deg', |
| 49 }, [ |
| 50 {at: -0.3, is: '33deg'}, |
| 51 {at: 0, is: '30deg'}, |
| 52 {at: 0.3, is: '27deg'}, |
| 53 {at: 0.6, is: '24deg'}, |
| 54 {at: 1, is: '20deg'}, |
| 55 {at: 1.5, is: '15deg'}, |
| 56 ]); |
| 57 |
| 58 // No interpolation to an angle from the initial value 'auto'. |
| 59 assertNoInterpolation({ |
| 60 property: 'offset-rotate', |
| 61 from: 'unset', |
| 62 to: '20deg', |
| 63 }); |
| 64 |
| 65 // Interpolation between angles. |
| 66 assertInterpolation({ |
| 67 property: 'offset-rotate', |
| 68 from: '10deg', |
| 69 to: '50deg' |
| 70 }, [ |
| 71 {at: -0.3, is: '-2deg'}, |
| 72 {at: 0, is: '10deg'}, |
| 73 {at: 0.3, is: '22deg'}, |
| 74 {at: 0.6, is: '34deg'}, |
| 75 {at: 1, is: '50deg'}, |
| 76 {at: 1.5, is: '70deg'}, |
| 77 ]); |
| 78 |
| 79 // Interpolation between auto angles. |
| 80 assertInterpolation({ |
| 81 property: 'offset-rotate', |
| 82 from: 'auto 10deg', |
| 83 to: 'auto 50deg' |
| 84 }, [ |
| 85 {at: -0.3, is: 'auto -2deg'}, |
| 86 {at: 0, is: 'auto 10deg'}, |
| 87 {at: 0.3, is: 'auto 22deg'}, |
| 88 {at: 0.6, is: 'auto 34deg'}, |
| 89 {at: 1, is: 'auto 50deg'}, |
| 90 {at: 1.5, is: 'auto 70deg'}, |
| 91 ]); |
| 92 |
| 93 // 'reverse' is like 'auto 180deg'. |
| 94 assertInterpolation({ |
| 95 property: 'offset-rotate', |
| 96 from: 'reverse -170deg', |
| 97 to: 'reverse -130deg' |
| 98 }, [ |
| 99 {at: -0.3, is: 'auto -2deg'}, |
| 100 {at: 0, is: 'auto 10deg'}, |
| 101 {at: 0.3, is: 'auto 22deg'}, |
| 102 {at: 0.6, is: 'auto 34deg'}, |
| 103 {at: 1, is: 'auto 50deg'}, |
| 104 {at: 1.5, is: 'auto 70deg'}, |
| 105 ]); |
| 106 |
| 107 // Interpolation between 'auto' and 'reverse'. |
| 108 assertInterpolation({ |
| 109 property: 'offset-rotate', |
| 110 from: 'auto 10deg', |
| 111 to: 'reverse -130deg' |
| 112 }, [ |
| 113 {at: -0.3, is: 'auto -2deg'}, |
| 114 {at: 0, is: 'auto 10deg'}, |
| 115 {at: 0.3, is: 'auto 22deg'}, |
| 116 {at: 0.6, is: 'auto 34deg'}, |
| 117 {at: 1, is: 'auto 50deg'}, |
| 118 {at: 1.5, is: 'auto 70deg'}, |
| 119 ]); |
| 120 assertInterpolation({ |
| 121 property: 'offset-rotate', |
| 122 from: 'reverse -170deg', |
| 123 to: 'auto 50deg' |
| 124 }, [ |
| 125 {at: -0.3, is: 'auto -2deg'}, |
| 126 {at: 0, is: 'auto 10deg'}, |
| 127 {at: 0.3, is: 'auto 22deg'}, |
| 128 {at: 0.6, is: 'auto 34deg'}, |
| 129 {at: 1, is: 'auto 50deg'}, |
| 130 {at: 1.5, is: 'auto 70deg'}, |
| 131 ]); |
| 132 |
| 133 // No interpolation between auto/reverse and angle. |
| 134 assertNoInterpolation({ |
| 135 property: 'offset-rotate', |
| 136 from: 'auto 200deg', |
| 137 to: '300deg' |
| 138 }); |
| 139 assertNoInterpolation({ |
| 140 property: 'offset-rotate', |
| 141 from: '300deg', |
| 142 to: 'reverse 20deg' |
| 143 }); |
| 144 </script> |
| 145 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2555543002:
CSS Motion Path: Support offset-rotate in addition to offset-rotation (Closed)
