| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title> rotate composition</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> |
| <meta name="assert" content="rotate supports animation"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/interpolation-testcommon.js"></script> |
| |
| <body> |
| <script> |
| test_composition({ |
| property: 'rotate', |
| underlying: '100deg', |
| addFrom: '10deg', |
| addTo: '30deg', |
| }, [ |
| {at: -1, expect: '90deg'}, |
| {at: 0, expect: '110deg'}, |
| {at: 0.25, expect: '115deg'}, |
| {at: 0.75, expect: '125deg'}, |
| {at: 1, expect: '130deg'}, |
| {at: 2, expect: '150deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 0 0 200deg', |
| addFrom: '1 0 0 -100deg', |
| replaceTo: '1 0 0 40deg', |
| }, [ |
| {at: -1, expect: '1 0 0 160deg'}, |
| {at: 0, expect: '1 0 0 100deg'}, |
| {at: 0.25, expect: '1 0 0 85deg'}, |
| {at: 0.75, expect: '1 0 0 55deg'}, |
| {at: 1, expect: '1 0 0 40deg'}, |
| {at: 2, expect: '1 0 0 -20deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '0 1 0 -40deg', |
| replaceFrom: '0 1 0 50deg', |
| addTo: '0 1 0 10deg', |
| }, [ |
| {at: -1, expect: '0 1 0 130deg'}, |
| {at: 0, expect: '0 1 0 50deg'}, |
| {at: 0.25, expect: '0 1 0 30deg'}, |
| {at: 0.75, expect: '0 1 0 -10deg'}, |
| {at: 1, expect: '0 1 0 -30deg'}, |
| {at: 2, expect: '0 1 0 -110deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 2 3 40deg', |
| addFrom: '2 4 6 10deg', |
| addTo: '3 6 9 50deg', |
| }, [ |
| {at: -1, expect: '1 2 3 10deg'}, |
| {at: 0, expect: '1 2 3 50deg'}, |
| {at: 0.25, expect: '1 2 3 60deg'}, |
| {at: 0.75, expect: '1 2 3 80deg'}, |
| {at: 1, expect: '1 2 3 90deg'}, |
| {at: 2, expect: '1 2 3 130deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 2 3 270deg', |
| addFrom: '1 2 3 90deg', |
| replaceTo: '0 1 0 100deg', |
| }, [ |
| {at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'}, |
| {at: 0, expect: '1 2 3 360deg'}, |
| {at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'}, |
| {at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'}, |
| {at: 1, expect: '0 1 0 100deg'}, |
| {at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 2 3 90deg', |
| addFrom: '2 4 6 270deg', |
| replaceTo: '0 1 0 100deg', |
| }, [ |
| {at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'}, |
| {at: 0, expect: '1 2 3 360deg'}, |
| {at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'}, |
| {at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'}, |
| {at: 1, expect: '0 1 0 100deg'}, |
| {at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 0 0 90deg', |
| addFrom: '0 1 0 180deg', |
| replaceTo: '0 0 1 90deg', |
| }, [ |
| {at: -1, expect: '-6.12323e-17 -1 1.57009e-16 90deg'}, |
| {at: 0, expect: '-4.32978e-17 -0.707107 -0.707107 180deg'}, |
| {at: 0.25, expect: '-1.48952e-16 -0.894427 -0.447214 131.81deg'}, |
| {at: 0.75, expect: '-2.94392e-17 -0.707107 0.707107 70.5288deg'}, |
| {at: 1, expect: '90deg'}, |
| {at: 2, expect: '-6.12323e-17 -1 -4.71028e-16 90deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: 'none', |
| addFrom: 'none', |
| replaceTo: '0 1 0 100deg', |
| }, [ |
| {at: -1, expect: '0 1 0 -100deg'}, |
| {at: 0, expect: 'none'}, |
| {at: 0.25, expect: '0 1 0 25deg'}, |
| {at: 0.75, expect: '0 1 0 75deg'}, |
| {at: 1, expect: '0 1 0 100deg'}, |
| {at: 2, expect: '0 1 0 200deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: 'none', |
| addFrom: '2 4 6 270deg', |
| replaceTo: 'none', |
| }, [ |
| {at: -1, expect: '2 4 6 540deg'}, |
| {at: 0, expect: '2 4 6 270deg'}, |
| {at: 0.25, expect: '2 4 6 202.5deg'}, |
| {at: 0.75, expect: '2 4 6 67.5deg'}, |
| {at: 1, expect: 'none'}, |
| {at: 2, expect: '2 4 6 -270deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 2 3 90deg', |
| addFrom: 'none', |
| replaceTo: '0 1 0 100deg', |
| }, [ |
| {at: -1, expect: '0.31 -0.22 0.92 131.66deg'}, |
| {at: 0, expect: '1 2 3 90deg'}, |
| {at: 0.25, expect: '0.21 0.73 0.64 86.72deg'}, |
| {at: 0.75, expect: '0.07 0.97 0.21 92.05deg'}, |
| {at: 1, expect: '0 1 0 100deg'}, |
| {at: 2, expect: '-0.2 0.79 -0.59 151.11deg'}, |
| ]); |
| |
| test_composition({ |
| property: 'rotate', |
| underlying: '1 2 3 90deg', |
| addFrom: '2 4 6 270deg', |
| replaceTo: 'none', |
| }, [ |
| {at: -1, expect: '1 2 3 720deg'}, |
| {at: 0, expect: '1 2 3 360deg'}, |
| {at: 0.25, expect: '1 2 3 270deg'}, |
| {at: 0.75, expect: '1 2 3 90deg'}, |
| {at: 1, expect: 'none'}, |
| {at: 2, expect: '1 2 3 -360deg'}, |
| ]); |
| </script> |
| </body> |
