| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <title>transform interpolation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> |
| <meta name="assert" content="transform supports animation as a transform list"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/interpolation-testcommon.js"></script> |
| |
| <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> |
| </body> |
| |
| <script> |
| // Scale |
| test_interpolation({ |
| property: 'transform', |
| from: 'scale(10, 5)', |
| to: 'scale(20, 9)' |
| }, [ |
| {at: -1, expect: 'scale(0, 1)'}, |
| {at: 0, expect: 'scale(10, 5)'}, |
| {at: 0.25, expect: 'scale(12.5, 6)'}, |
| {at: 0.75, expect: 'scale(17.5, 8)'}, |
| {at: 1, expect: 'scale(20, 9)'}, |
| {at: 2, expect: 'scale(30, 13)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scaleX(10)', |
| to: 'scaleX(20)' |
| }, [ |
| {at: -1, expect: 'scaleX(0)'}, |
| {at: 0, expect: 'scaleX(10)'}, |
| {at: 0.25, expect: 'scaleX(12.5)'}, |
| {at: 0.75, expect: 'scaleX(17.5)'}, |
| {at: 1, expect: 'scaleX(20)'}, |
| {at: 2, expect: 'scaleX(30)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scaleY(5)', |
| to: 'scaleY(9)' |
| }, [ |
| {at: -1, expect: 'scaleY(1)'}, |
| {at: 0, expect: 'scaleY(5)'}, |
| {at: 0.25, expect: 'scaleY(6)'}, |
| {at: 0.75, expect: 'scaleY(8)'}, |
| {at: 1, expect: 'scaleY(9)'}, |
| {at: 2, expect: 'scaleY(13)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scaleZ(1)', |
| to: 'scaleZ(2)' |
| }, [ |
| {at: -1, expect: 'scaleZ(0)'}, |
| {at: 0, expect: 'scaleZ(1)'}, |
| {at: 0.25, expect: 'scaleZ(1.25)'}, |
| {at: 0.75, expect: 'scaleZ(1.75)'}, |
| {at: 1, expect: 'scaleZ(2)'}, |
| {at: 2, expect: 'scaleZ(3)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scale3d(10, 0.5, 1)', |
| to: 'scale3d(20, 1, 2)' |
| }, [ |
| {at: -1, expect: 'scale3d(0, 0, 0)'}, |
| {at: 0, expect: 'scale3d(10, 0.5, 1)'}, |
| {at: 0.25, expect: 'scale3d(12.5, 0.625, 1.25)'}, |
| {at: 0.75, expect: 'scale3d(17.5, 0.875, 1.75)'}, |
| {at: 1, expect: 'scale3d(20, 1, 2)'}, |
| {at: 2, expect: 'scale3d(30, 1.5, 3)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scaleX(0)', |
| to: 'scaleY(0)', |
| }, [ |
| {at: -1, expect: 'scale(-1, 2)'}, |
| {at: 0, expect: 'scale(0, 1)'}, |
| {at: 0.25, expect: 'scale(0.25, 0.75)'}, |
| {at: 0.75, expect: 'scale(0.75, 0.25)'}, |
| {at: 1, expect: 'scale(1, 0)'}, |
| {at: 2, expect: 'scale(2, -1)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'none', |
| to: 'scale3d(2, 3, 5)' |
| }, [ |
| {at: -1, expect: 'scale3d(0, -1, -3)'}, |
| {at: 0, expect: 'scale3d(1, 1, 1)'}, |
| {at: 0.25, expect: 'scale3d(1.25, 1.5, 2)'}, |
| {at: 0.75, expect: 'scale3d(1.75, 2.5, 4)'}, |
| {at: 1, expect: 'scale3d(2, 3, 5)'}, |
| {at: 2, expect: 'scale3d(3, 5, 9)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scale3d(2, 3, 5)', |
| to: 'none' |
| }, [ |
| {at: -1, expect: 'scale3d(3, 5, 9)'}, |
| {at: 0, expect: 'scale3d(2, 3, 5)'}, |
| {at: 0.25, expect: 'scale3d(1.75, 2.5, 4)'}, |
| {at: 0.75, expect: 'scale3d(1.25, 1.5, 2)'}, |
| {at: 1, expect: 'scale3d(1, 1, 1)'}, |
| {at: 2, expect: 'scale3d(0, -1, -3)'}, |
| ]); |
| test_interpolation({ |
| property: 'transform', |
| from: 'scaleX(10) scaleY(0.5) scaleZ(1)', |
| to: 'scaleX(20) scaleY(1) scaleZ(2)' |
| }, [ |
| {at: -1, expect: 'scaleX(0) scaleY(0) scaleZ(0)'}, |
| {at: 0, expect: 'scaleX(10) scaleY(0.5) scaleZ(1)'}, |
| {at: 0.25, expect: 'scaleX(12.5) scaleY(0.625) scaleZ(1.25)'}, |
| {at: 0.75, expect: 'scaleX(17.5) scaleY(0.875) scaleZ(1.75)'}, |
| {at: 1, expect: 'scaleX(20) scaleY(1) scaleZ(2)'}, |
| {at: 2, expect: 'scaleX(30) scaleY(1.5) scaleZ(3)'}, |
| ]); |
| </script> |
