| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .target { |
| color: white; |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| display: inline-block; |
| overflow: hidden; |
| } |
| .expected { |
| background-color: green; |
| } |
| .target div { |
| width: 10px; |
| height: 10px; |
| display: inline-block; |
| background: orange; |
| margin: 1px; |
| } |
| .test { |
| overflow: hidden; |
| } |
| </style> |
| <body> |
| <template id="target-template"> |
| <div></div> |
| </template> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| |
| // Scale |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scale(10, 5)', |
| to: 'scale(20, 9)' |
| }, [ |
| {at: -1, is: 'scale(0, 1)'}, |
| {at: 0, is: 'scale(10, 5)'}, |
| {at: 0.25, is: 'scale(12.5, 6)'}, |
| {at: 0.75, is: 'scale(17.5, 8)'}, |
| {at: 1, is: 'scale(20, 9)'}, |
| {at: 2, is: 'scale(30, 13)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scaleX(10)', |
| to: 'scaleX(20)' |
| }, [ |
| {at: -1, is: 'scaleX(0)'}, |
| {at: 0, is: 'scaleX(10)'}, |
| {at: 0.25, is: 'scaleX(12.5)'}, |
| {at: 0.75, is: 'scaleX(17.5)'}, |
| {at: 1, is: 'scaleX(20)'}, |
| {at: 2, is: 'scaleX(30)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scaleY(5)', |
| to: 'scaleY(9)' |
| }, [ |
| {at: -1, is: 'scaleY(1)'}, |
| {at: 0, is: 'scaleY(5)'}, |
| {at: 0.25, is: 'scaleY(6)'}, |
| {at: 0.75, is: 'scaleY(8)'}, |
| {at: 1, is: 'scaleY(9)'}, |
| {at: 2, is: 'scaleY(13)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scaleZ(1)', |
| to: 'scaleZ(2)' |
| }, [ |
| {at: -1, is: 'scaleZ(0)'}, |
| {at: 0, is: 'scaleZ(1)'}, |
| {at: 0.25, is: 'scaleZ(1.25)'}, |
| {at: 0.75, is: 'scaleZ(1.75)'}, |
| {at: 1, is: 'scaleZ(2)'}, |
| {at: 2, is: 'scaleZ(3)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scale3d(10, 0.5, 1)', |
| to: 'scale3d(20, 1, 2)' |
| }, [ |
| {at: -1, is: 'scale3d(0, 0, 0)'}, |
| {at: 0, is: 'scale3d(10, 0.5, 1)'}, |
| {at: 0.25, is: 'scale3d(12.5, 0.625, 1.25)'}, |
| {at: 0.75, is: 'scale3d(17.5, 0.875, 1.75)'}, |
| {at: 1, is: 'scale3d(20, 1, 2)'}, |
| {at: 2, is: 'scale3d(30, 1.5, 3)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'none', |
| to: 'scale3d(2, 3, 5)' |
| }, [ |
| {at: -1, is: 'scale3d(0, -1, -3)'}, |
| {at: 0, is: 'scale3d(1, 1, 1)'}, |
| {at: 0.25, is: 'scale3d(1.25, 1.5, 2)'}, |
| {at: 0.75, is: 'scale3d(1.75, 2.5, 4)'}, |
| {at: 1, is: 'scale3d(2, 3, 5)'}, |
| {at: 2, is: 'scale3d(3, 5, 9)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scale3d(2, 3, 5)', |
| to: 'none' |
| }, [ |
| {at: -1, is: 'scale3d(3, 5, 9)'}, |
| {at: 0, is: 'scale3d(2, 3, 5)'}, |
| {at: 0.25, is: 'scale3d(1.75, 2.5, 4)'}, |
| {at: 0.75, is: 'scale3d(1.25, 1.5, 2)'}, |
| {at: 1, is: 'scale3d(1, 1, 1)'}, |
| {at: 2, is: 'scale3d(0, -1, -3)'}, |
| ]); |
| assertInterpolation({ |
| property: '-webkit-transform', |
| from: 'scaleX(10) scaleY(0.5) scaleZ(1)', |
| to: 'scaleX(20) scaleY(1) scaleZ(2)' |
| }, [ |
| {at: -1, is: 'scaleX(0) scaleY(0) scaleZ(0)'}, |
| {at: 0, is: 'scaleX(10) scaleY(0.5) scaleZ(1)'}, |
| {at: 0.25, is: 'scaleX(12.5) scaleY(0.625) scaleZ(1.25)'}, |
| {at: 0.75, is: 'scaleX(17.5) scaleY(0.875) scaleZ(1.75)'}, |
| {at: 1, is: 'scaleX(20) scaleY(1) scaleZ(2)'}, |
| {at: 2, is: 'scaleX(30) scaleY(1.5) scaleZ(3)'}, |
| ]); |
| </script> |
| </body> |
