| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <title>transform-rotate composition</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms/#funcdef-transform-rotate"> |
| <meta name="assert" content="transform-rotate 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> |
| |
| <body> |
| <script> |
| // ------------ Addition tests -------------- |
| |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateX(20deg)', |
| addFrom: 'rotateX(40deg)', |
| addTo: 'rotateX(60deg)', |
| }, [ |
| {at: -0.5, expect: 'rotateX(50deg)'}, |
| {at: 0, expect: 'rotateX(60deg)'}, |
| {at: 0.25, expect: 'rotateX(65deg)'}, |
| {at: 0.5, expect: 'rotateX(70deg)'}, |
| {at: 0.75, expect: 'rotateX(75deg)'}, |
| {at: 1, expect: 'rotateX(80deg)'}, |
| {at: 1.5, expect: 'rotateX(90deg)'}, |
| ]); |
| |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateY(20deg)', |
| addFrom: 'rotateY(40deg)', |
| addTo: 'rotateY(60deg)', |
| }, [ |
| {at: -0.5, expect: 'rotateY(50deg)'}, |
| {at: 0, expect: 'rotateY(60deg)'}, |
| {at: 0.25, expect: 'rotateY(65deg)'}, |
| {at: 0.5, expect: 'rotateY(70deg)'}, |
| {at: 0.75, expect: 'rotateY(75deg)'}, |
| {at: 1, expect: 'rotateY(80deg)'}, |
| {at: 1.5, expect: 'rotateY(90deg)'}, |
| ]); |
| |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateZ(20deg)', |
| addFrom: 'rotateZ(40deg)', |
| addTo: 'rotateZ(60deg)', |
| }, [ |
| {at: -0.5, expect: 'rotateZ(50deg)'}, |
| {at: 0, expect: 'rotateZ(60deg)'}, |
| {at: 0.25, expect: 'rotateZ(65deg)'}, |
| {at: 0.5, expect: 'rotateZ(70deg)'}, |
| {at: 0.75, expect: 'rotateZ(75deg)'}, |
| {at: 1, expect: 'rotateZ(80deg)'}, |
| {at: 1.5, expect: 'rotateZ(90deg)'}, |
| ]); |
| |
| // When testing rotate functions in isolation, the additive and accumulation |
| // behaviors are functionally identical. This test includes a skew to ensure |
| // both methods are implemented; add should append the from/to after the skew. |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotate(45deg) skew(10deg, 20deg)', |
| addFrom: 'rotate(45deg)', |
| addTo: 'rotate(225deg)', |
| }, [ |
| {at: -0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(-45deg)'}, |
| {at: 0, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(45deg)'}, |
| {at: 0.25, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(90deg)'}, |
| {at: 0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(135deg)'}, |
| {at: 0.75, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(180deg)'}, |
| {at: 1, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(225deg)'}, |
| {at: 1.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(315deg)'}, |
| ]); |
| // ------------ Accumulation tests -------------- |
| |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateX(20deg)', |
| accumulateFrom: 'rotateX(40deg)', |
| accumulateTo: 'rotateX(60deg)', |
| }, [ |
| {at: -0.5, expect: 'rotateX(50deg)'}, |
| {at: 0, expect: 'rotateX(60deg)'}, |
| {at: 0.25, expect: 'rotateX(65deg)'}, |
| {at: 0.5, expect: 'rotateX(70deg)'}, |
| {at: 0.75, expect: 'rotateX(75deg)'}, |
| {at: 1, expect: 'rotateX(80deg)'}, |
| {at: 1.5, expect: 'rotateX(90deg)'}, |
| ]); |
| |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateY(20deg)', |
| accumulateFrom: 'rotateY(40deg)', |
| accumulateTo: 'rotateY(60deg)', |
| }, [ |
| {at: -0.5, expect: 'rotateY(50deg)'}, |
| {at: 0, expect: 'rotateY(60deg)'}, |
| {at: 0.25, expect: 'rotateY(65deg)'}, |
| {at: 0.5, expect: 'rotateY(70deg)'}, |
| {at: 0.75, expect: 'rotateY(75deg)'}, |
| {at: 1, expect: 'rotateY(80deg)'}, |
| {at: 1.5, expect: 'rotateY(90deg)'}, |
| ]); |
| |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateZ(20deg)', |
| accumulateFrom: 'rotateZ(40deg)', |
| accumulateTo: 'rotateZ(60deg)', |
| }, [ |
| {at: -0.5, expect: 'rotateZ(50deg)'}, |
| {at: 0, expect: 'rotateZ(60deg)'}, |
| {at: 0.25, expect: 'rotateZ(65deg)'}, |
| {at: 0.5, expect: 'rotateZ(70deg)'}, |
| {at: 0.75, expect: 'rotateZ(75deg)'}, |
| {at: 1, expect: 'rotateZ(80deg)'}, |
| {at: 1.5, expect: 'rotateZ(90deg)'}, |
| ]); |
| |
| // The rotate functions all share the same primitive type (rotate3d), so can be |
| // accumulated between. If primitive type matching is not properly being |
| // performed, this test would likely fail with a fallback to replace behavior. |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotateX(45deg)', |
| accumulateFrom: 'rotateY(30deg)', |
| accumulateTo: 'rotateY(70deg)', |
| }, [ |
| // Due to how rotation is accumulated (addition of underlying angles), the |
| // behavior is identical to concatenating the components. The expectations |
| // are expressed as concatenations for readability. |
| {at: -0.5, expect: 'rotateX(45deg) rotateY(10deg)'}, |
| {at: 0, expect: 'rotateX(45deg) rotateY(30deg)'}, |
| {at: 0.25, expect: 'rotateX(45deg) rotateY(40deg)'}, |
| {at: 0.5, expect: 'rotateX(45deg) rotateY(50deg)'}, |
| {at: 0.75, expect: 'rotateX(45deg) rotateY(60deg)'}, |
| {at: 1, expect: 'rotateX(45deg) rotateY(70deg)'}, |
| {at: 1.5, expect: 'rotateX(45deg) rotateY(90deg)'}, |
| ]); |
| |
| // When testing rotate functions in isolation, the additive and accumulation |
| // behaviors are functionally identical. This test includes a skew to ensure |
| // both methods are implemented; accumulate should combine the rotate before |
| // the skew. |
| test_composition({ |
| property: 'transform', |
| underlying: 'rotate(45deg) skew(10deg, 20deg)', |
| accumulateFrom: 'rotate(45deg)', |
| accumulateTo: 'rotate(225deg)', |
| }, [ |
| {at: -0.5, expect: 'rotate(0deg) skew(10deg, 20deg)'}, |
| {at: 0, expect: 'rotate(90deg) skew(10deg, 20deg)'}, |
| {at: 0.25, expect: 'rotate(135deg) skew(10deg, 20deg)'}, |
| {at: 0.5, expect: 'rotate(180deg) skew(10deg, 20deg)'}, |
| {at: 0.75, expect: 'rotate(225deg) skew(10deg, 20deg)'}, |
| {at: 1, expect: 'rotate(270deg) skew(10deg, 20deg)'}, |
| {at: 1.5, expect: 'rotate(360deg) skew(10deg, 20deg)'}, |
| ]); |
| </script> |
| </body> |
