offset-rotate-composition.html (2642B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>offset-rotate composition</title> 4 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> 6 <meta name="assert" content="offset-rotate supports animation."> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <body> 13 <script> 14 // Angle rotations compose. 15 test_composition({ 16 property: 'offset-rotate', 17 underlying: '20deg', 18 addFrom: '10deg', 19 addTo: '20deg', 20 }, [ 21 {at: -0.3, expect: '27deg'}, 22 {at: 0, expect: '30deg'}, 23 {at: 0.3, expect: '33deg'}, 24 {at: 0.6, expect: '36deg'}, 25 {at: 1, expect: '40deg'}, 26 {at: 1.5, expect: '45deg'}, 27 ]); 28 29 // Angle rotations don't compose with underlying 'auto'. 30 test_composition({ 31 property: 'offset-rotate', 32 underlying: 'auto 20deg', 33 addFrom: '10deg', 34 addTo: '20deg', 35 }, [ 36 {at: -0.3, expect: '7deg'}, 37 {at: 0, expect: '10deg'}, 38 {at: 0.3, expect: '13deg'}, 39 {at: 0.6, expect: '16deg'}, 40 {at: 1, expect: '20deg'}, 41 {at: 1.5, expect: '25deg'}, 42 ]); 43 44 // Auto rotations compose with underlying 'auto'. 45 test_composition({ 46 property: 'offset-rotate', 47 underlying: 'auto 20deg', 48 addFrom: 'reverse 10deg', 49 addTo: 'auto 20deg', 50 }, [ 51 {at: -0.3, expect: 'auto 261deg'}, 52 {at: 0, expect: 'auto 210deg'}, 53 {at: 0.3, expect: 'auto 159deg'}, 54 {at: 0.6, expect: 'auto 108deg'}, 55 {at: 1, expect: 'auto 40deg'}, 56 {at: 1.5, expect: 'auto -45deg'}, 57 ]); 58 59 // When we can't interpolate, we can't compose. 60 test_composition({ 61 property: 'offset-rotate', 62 underlying: '20deg', 63 addFrom: 'reverse 10deg', 64 addTo: '20deg', 65 }, [ 66 {at: -0.3, expect: 'auto 190deg'}, 67 {at: 0, expect: 'auto 190deg'}, 68 {at: 0.3, expect: 'auto 190deg'}, 69 {at: 0.6, expect: '40deg'}, 70 {at: 1, expect: '40deg'}, 71 {at: 1.5, expect: '40deg'}, 72 ]); 73 74 test_composition({ 75 property: 'offset-rotate', 76 underlying: '20deg', 77 replaceFrom: 'reverse 10deg', 78 addTo: '20deg', 79 }, [ 80 {at: -0.3, expect: 'auto 190deg'}, 81 {at: 0, expect: 'auto 190deg'}, 82 {at: 0.3, expect: 'auto 190deg'}, 83 {at: 0.6, expect: '40deg'}, 84 {at: 1, expect: '40deg'}, 85 {at: 1.5, expect: '40deg'}, 86 ]); 87 88 // Angle rotations compose with underlying angle. 89 test_composition({ 90 property: 'offset-rotate', 91 underlying: '20deg', 92 addFrom: '10deg', 93 replaceTo: '10deg', 94 }, [ 95 {at: -0.3, expect: '36deg'}, 96 {at: 0, expect: '30deg'}, 97 {at: 0.3, expect: '24deg'}, 98 {at: 0.6, expect: '18deg'}, 99 {at: 1, expect: '10deg'}, 100 {at: 1.5, expect: '0deg'}, 101 ]); 102 </script> 103 </body>