transform-rotate-composition.html (5775B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform-rotate composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#funcdef-transform-rotate"> 5 <meta name="assert" content="transform-rotate supports animation as a transform list"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <body> 12 <script> 13 // ------------ Addition tests -------------- 14 15 test_composition({ 16 property: 'transform', 17 underlying: 'rotateX(20deg)', 18 addFrom: 'rotateX(40deg)', 19 addTo: 'rotateX(60deg)', 20 }, [ 21 {at: -0.5, expect: 'rotateX(50deg)'}, 22 {at: 0, expect: 'rotateX(60deg)'}, 23 {at: 0.25, expect: 'rotateX(65deg)'}, 24 {at: 0.5, expect: 'rotateX(70deg)'}, 25 {at: 0.75, expect: 'rotateX(75deg)'}, 26 {at: 1, expect: 'rotateX(80deg)'}, 27 {at: 1.5, expect: 'rotateX(90deg)'}, 28 ]); 29 30 test_composition({ 31 property: 'transform', 32 underlying: 'rotateY(20deg)', 33 addFrom: 'rotateY(40deg)', 34 addTo: 'rotateY(60deg)', 35 }, [ 36 {at: -0.5, expect: 'rotateY(50deg)'}, 37 {at: 0, expect: 'rotateY(60deg)'}, 38 {at: 0.25, expect: 'rotateY(65deg)'}, 39 {at: 0.5, expect: 'rotateY(70deg)'}, 40 {at: 0.75, expect: 'rotateY(75deg)'}, 41 {at: 1, expect: 'rotateY(80deg)'}, 42 {at: 1.5, expect: 'rotateY(90deg)'}, 43 ]); 44 45 test_composition({ 46 property: 'transform', 47 underlying: 'rotateZ(20deg)', 48 addFrom: 'rotateZ(40deg)', 49 addTo: 'rotateZ(60deg)', 50 }, [ 51 {at: -0.5, expect: 'rotateZ(50deg)'}, 52 {at: 0, expect: 'rotateZ(60deg)'}, 53 {at: 0.25, expect: 'rotateZ(65deg)'}, 54 {at: 0.5, expect: 'rotateZ(70deg)'}, 55 {at: 0.75, expect: 'rotateZ(75deg)'}, 56 {at: 1, expect: 'rotateZ(80deg)'}, 57 {at: 1.5, expect: 'rotateZ(90deg)'}, 58 ]); 59 60 // When testing rotate functions in isolation, the additive and accumulation 61 // behaviors are functionally identical. This test includes a skew to ensure 62 // both methods are implemented; add should append the from/to after the skew. 63 test_composition({ 64 property: 'transform', 65 underlying: 'rotate(45deg) skew(10deg, 20deg)', 66 addFrom: 'rotate(45deg)', 67 addTo: 'rotate(225deg)', 68 }, [ 69 {at: -0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(-45deg)'}, 70 {at: 0, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(45deg)'}, 71 {at: 0.25, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(90deg)'}, 72 {at: 0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(135deg)'}, 73 {at: 0.75, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(180deg)'}, 74 {at: 1, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(225deg)'}, 75 {at: 1.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(315deg)'}, 76 ]); 77 // ------------ Accumulation tests -------------- 78 79 test_composition({ 80 property: 'transform', 81 underlying: 'rotateX(20deg)', 82 accumulateFrom: 'rotateX(40deg)', 83 accumulateTo: 'rotateX(60deg)', 84 }, [ 85 {at: -0.5, expect: 'rotateX(50deg)'}, 86 {at: 0, expect: 'rotateX(60deg)'}, 87 {at: 0.25, expect: 'rotateX(65deg)'}, 88 {at: 0.5, expect: 'rotateX(70deg)'}, 89 {at: 0.75, expect: 'rotateX(75deg)'}, 90 {at: 1, expect: 'rotateX(80deg)'}, 91 {at: 1.5, expect: 'rotateX(90deg)'}, 92 ]); 93 94 test_composition({ 95 property: 'transform', 96 underlying: 'rotateY(20deg)', 97 accumulateFrom: 'rotateY(40deg)', 98 accumulateTo: 'rotateY(60deg)', 99 }, [ 100 {at: -0.5, expect: 'rotateY(50deg)'}, 101 {at: 0, expect: 'rotateY(60deg)'}, 102 {at: 0.25, expect: 'rotateY(65deg)'}, 103 {at: 0.5, expect: 'rotateY(70deg)'}, 104 {at: 0.75, expect: 'rotateY(75deg)'}, 105 {at: 1, expect: 'rotateY(80deg)'}, 106 {at: 1.5, expect: 'rotateY(90deg)'}, 107 ]); 108 109 test_composition({ 110 property: 'transform', 111 underlying: 'rotateZ(20deg)', 112 accumulateFrom: 'rotateZ(40deg)', 113 accumulateTo: 'rotateZ(60deg)', 114 }, [ 115 {at: -0.5, expect: 'rotateZ(50deg)'}, 116 {at: 0, expect: 'rotateZ(60deg)'}, 117 {at: 0.25, expect: 'rotateZ(65deg)'}, 118 {at: 0.5, expect: 'rotateZ(70deg)'}, 119 {at: 0.75, expect: 'rotateZ(75deg)'}, 120 {at: 1, expect: 'rotateZ(80deg)'}, 121 {at: 1.5, expect: 'rotateZ(90deg)'}, 122 ]); 123 124 // The rotate functions all share the same primitive type (rotate3d), so can be 125 // accumulated between. If primitive type matching is not properly being 126 // performed, this test would likely fail with a fallback to replace behavior. 127 test_composition({ 128 property: 'transform', 129 underlying: 'rotateX(45deg)', 130 accumulateFrom: 'rotateY(30deg)', 131 accumulateTo: 'rotateY(70deg)', 132 }, [ 133 // Due to how rotation is accumulated (addition of underlying angles), the 134 // behavior is identical to concatenating the components. The expectations 135 // are expressed as concatenations for readability. 136 {at: -0.5, expect: 'rotateX(45deg) rotateY(10deg)'}, 137 {at: 0, expect: 'rotateX(45deg) rotateY(30deg)'}, 138 {at: 0.25, expect: 'rotateX(45deg) rotateY(40deg)'}, 139 {at: 0.5, expect: 'rotateX(45deg) rotateY(50deg)'}, 140 {at: 0.75, expect: 'rotateX(45deg) rotateY(60deg)'}, 141 {at: 1, expect: 'rotateX(45deg) rotateY(70deg)'}, 142 {at: 1.5, expect: 'rotateX(45deg) rotateY(90deg)'}, 143 ]); 144 145 // When testing rotate functions in isolation, the additive and accumulation 146 // behaviors are functionally identical. This test includes a skew to ensure 147 // both methods are implemented; accumulate should combine the rotate before 148 // the skew. 149 test_composition({ 150 property: 'transform', 151 underlying: 'rotate(45deg) skew(10deg, 20deg)', 152 accumulateFrom: 'rotate(45deg)', 153 accumulateTo: 'rotate(225deg)', 154 }, [ 155 {at: -0.5, expect: 'rotate(0deg) skew(10deg, 20deg)'}, 156 {at: 0, expect: 'rotate(90deg) skew(10deg, 20deg)'}, 157 {at: 0.25, expect: 'rotate(135deg) skew(10deg, 20deg)'}, 158 {at: 0.5, expect: 'rotate(180deg) skew(10deg, 20deg)'}, 159 {at: 0.75, expect: 'rotate(225deg) skew(10deg, 20deg)'}, 160 {at: 1, expect: 'rotate(270deg) skew(10deg, 20deg)'}, 161 {at: 1.5, expect: 'rotate(360deg) skew(10deg, 20deg)'}, 162 ]); 163 </script> 164 </body>