| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| rotate: 90deg; |
| } |
| .target { |
| width: 40px; |
| height: 20px; |
| background-color: grey; |
| rotate: 10deg; |
| } |
| .expected { |
| background-color: green; |
| } |
| </style> |
| <template id="target-template"> |
| <div class="parent"> |
| <div class="target">Text</div> |
| </div> |
| </template> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| assertInterpolation({ |
| property: 'rotate', |
| from: 'none', |
| to: '30deg', |
| }, [ |
| {at: -1, is: '-30deg'}, |
| {at: 0, is: 'none'}, |
| {at: 0.25, is: '7.5deg'}, |
| {at: 0.75, is: '22.5deg'}, |
| {at: 1, is: '30deg'}, |
| {at: 2, is: '60deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: neutralKeyframe, |
| to: '30deg', |
| }, [ |
| {at: -1, is: '-10deg'}, |
| {at: 0, is: '10deg'}, |
| {at: 0.25, is: '15deg'}, |
| {at: 0.75, is: '25deg'}, |
| {at: 1, is: '30deg'}, |
| {at: 2, is: '50deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: 'inherit', |
| to: '270deg', |
| }, [ |
| {at: -1, is: '-90deg'}, |
| {at: 0, is: '90deg'}, |
| {at: 0.25, is: '135deg'}, |
| {at: 0.75, is: '225deg'}, |
| {at: 1, is: '270deg'}, |
| {at: 2, is: '450deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: 'unset', |
| to: '30deg', |
| }, [ |
| {at: -1, is: '-30deg'}, |
| {at: 0, is: 'none'}, |
| {at: 0.25, is: '7.5deg'}, |
| {at: 0.75, is: '22.5deg'}, |
| {at: 1, is: '30deg'}, |
| {at: 2, is: '60deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '100deg', |
| to: '-100deg', |
| }, [ |
| {at: -1, is: '300deg'}, |
| {at: 0, is: '100deg'}, |
| {at: 0.25, is: '50deg'}, |
| {at: 0.75, is: '-50deg'}, |
| {at: 1, is: '-100deg'}, |
| {at: 2, is: '-300deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '0 1 0 100deg', |
| to: '0 1 0 -100deg', |
| }, [ |
| {at: -1, is: '0 1 0 300deg'}, |
| {at: 0, is: '0 1 0 100deg'}, |
| {at: 0.25, is: '0 1 0 50deg'}, |
| {at: 0.75, is: '0 1 0 -50deg'}, |
| {at: 1, is: '0 1 0 -100deg'}, |
| {at: 2, is: '0 1 0 -300deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '1 -2.5 3.64 100deg', |
| to: '1 -2.5 3.64 -100deg', |
| }, [ |
| {at: -1, is: '1 -2.5 3.64 300deg'}, |
| {at: 0, is: '1 -2.5 3.64 100deg'}, |
| {at: 0.25, is: '1 -2.5 3.64 50deg'}, |
| {at: 0.75, is: '1 -2.5 3.64 -50deg'}, |
| {at: 1, is: '1 -2.5 3.64 -100deg'}, |
| {at: 2, is: '1 -2.5 3.64 -300deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '1 0 0 0deg', |
| to: '0 1 0 10deg', |
| }, [ |
| {at: -1, is: '0 1 0 -10deg'}, |
| {at: 0, is: '1 0 0 0deg'}, |
| {at: 0.25, is: '0 1 0 2.5deg'}, |
| {at: 0.75, is: '0 1 0 7.5deg'}, |
| {at: 1, is: '0 1 0 10deg'}, |
| {at: 2, is: '0 1 0 20deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '1 1 0 90deg', |
| to: '0 1 1 135deg', |
| }, [ |
| {at: -1, is: '0.67 -0.06 -0.74 124.97deg'}, |
| {at: 0, is: '1 1 0 90deg'}, |
| {at: 0.25, is: '0.54 0.8 0.26 94.83deg'}, |
| {at: 0.75, is: '0.17 0.78 0.61 118.68deg'}, |
| {at: 1, is: '0 1 1 135deg'}, |
| {at: 2, is: '0.52 -0.29 -0.81 151.04deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '0 1 0 0deg', |
| to: '1 0 0 450deg', |
| }, [ |
| {at: -1, is: '1 0 0 -450deg'}, |
| {at: 0, is: '0 1 0 0deg'}, |
| {at: 0.25, is: '1 0 0 112.5deg'}, |
| {at: 0.75, is: '1 0 0 337.5deg'}, |
| {at: 1, is: '1 0 0 450deg'}, |
| {at: 2, is: '1 0 0 900deg'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'rotate', |
| from: '1 0 0 450deg', |
| to: '0 1 0 0deg', |
| }, [ |
| {at: -1, is: '1 0 0 900deg'}, |
| {at: 0, is: '1 0 0 450deg'}, |
| {at: 0.25, is: '1 0 0 337.5deg'}, |
| {at: 0.75, is: '1 0 0 112.5deg'}, |
| {at: 1, is: '0 1 0 0deg'}, |
| {at: 2, is: '1 0 0 -450deg'}, |
| ]); |
| </script> |
