transform-translate-composition.html (5433B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform-translate composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions"> 5 <meta name="assert" content="transform-translate 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 src="../interpolation/resources/interpolation-test.js"></script> 13 <script> 14 // ------------ Addition tests -------------- 15 16 test_composition({ 17 property: 'transform', 18 underlying: 'translate(10px, 20px)', 19 addFrom: 'translate(100px, 200px)', 20 addTo: 'translate(200px, 400px)', 21 }, [ 22 {at: -0.5, expect: 'translate(60px, 120px)'}, 23 {at: 0, expect: 'translate(110px, 220px)'}, 24 {at: 0.25, expect: 'translate(135px, 270px)'}, 25 {at: 0.5, expect: 'translate(160px, 320px)'}, 26 {at: 0.75, expect: 'translate(185px, 370px)'}, 27 {at: 1, expect: 'translate(210px, 420px)'}, 28 {at: 1.5, expect: 'translate(260px, 520px)'}, 29 ]); 30 31 test_composition({ 32 property: 'transform', 33 underlying: 'translate(10px, 20px)', 34 addFrom: 'translate(100px, 200px)', 35 replaceTo: 'translate(210px, 420px)', 36 }, [ 37 {at: -0.5, expect: 'translate(60px, 120px)'}, 38 {at: 0, expect: 'translate(110px, 220px)'}, 39 {at: 0.25, expect: 'translate(135px, 270px)'}, 40 {at: 0.5, expect: 'translate(160px, 320px)'}, 41 {at: 0.75, expect: 'translate(185px, 370px)'}, 42 {at: 1, expect: 'translate(210px, 420px)'}, 43 {at: 1.5, expect: 'translate(260px, 520px)'}, 44 ]); 45 46 // When testing translate functions in isolation, the additive and accumulation 47 // behaviors are functionally identical. This test includes a rotate to ensure 48 // both methods are implemented; add should append the from/to after the rotate. 49 test_composition({ 50 property: 'transform', 51 underlying: 'translateX(100px) rotate(90deg)', 52 addFrom: 'translateX(100px)', 53 addTo: 'translateX(200px)', 54 }, [ 55 {at: -0.5, expect: 'translateX(100px) rotate(90deg) translateX(50px)'}, 56 {at: 0, expect: 'translateX(100px) rotate(90deg) translateX(100px)'}, 57 {at: 0.25, expect: 'translateX(100px) rotate(90deg) translateX(125px)'}, 58 {at: 0.5, expect: 'translateX(100px) rotate(90deg) translateX(150px)'}, 59 {at: 0.75, expect: 'translateX(100px) rotate(90deg) translateX(175px)'}, 60 {at: 1, expect: 'translateX(100px) rotate(90deg) translateX(200px)'}, 61 {at: 1.5, expect: 'translateX(100px) rotate(90deg) translateX(250px)'}, 62 ]); 63 64 // ------------ Accumulation tests -------------- 65 66 test_composition({ 67 property: 'transform', 68 underlying: 'translateX(100px)', 69 accumulateFrom: 'translateX(50px)', 70 accumulateTo: 'translateX(250px)', 71 }, [ 72 {at: -0.5, expect: 'translateX(50px)'}, 73 {at: 0, expect: 'translateX(150px)'}, 74 {at: 0.25, expect: 'translateX(200px)'}, 75 {at: 0.5, expect: 'translateX(250px)'}, 76 {at: 0.75, expect: 'translateX(300px)'}, 77 {at: 1, expect: 'translateX(350px)'}, 78 {at: 1.5, expect: 'translateX(450px)'}, 79 ]); 80 81 test_composition({ 82 property: 'transform', 83 underlying: 'translateY(100px)', 84 accumulateFrom: 'translateY(50px)', 85 accumulateTo: 'translateY(250px)', 86 }, [ 87 {at: -0.5, expect: 'translateY(50px)'}, 88 {at: 0, expect: 'translateY(150px)'}, 89 {at: 0.25, expect: 'translateY(200px)'}, 90 {at: 0.5, expect: 'translateY(250px)'}, 91 {at: 0.75, expect: 'translateY(300px)'}, 92 {at: 1, expect: 'translateY(350px)'}, 93 {at: 1.5, expect: 'translateY(450px)'}, 94 ]); 95 96 test_composition({ 97 property: 'transform', 98 underlying: 'translateZ(100px)', 99 accumulateFrom: 'translateZ(50px)', 100 accumulateTo: 'translateZ(250px)', 101 }, [ 102 {at: -0.5, expect: 'translateZ(50px)'}, 103 {at: 0, expect: 'translateZ(150px)'}, 104 {at: 0.25, expect: 'translateZ(200px)'}, 105 {at: 0.5, expect: 'translateZ(250px)'}, 106 {at: 0.75, expect: 'translateZ(300px)'}, 107 {at: 1, expect: 'translateZ(350px)'}, 108 {at: 1.5, expect: 'translateZ(450px)'}, 109 ]); 110 111 // The translate functions all share the same primitive type (translate3d), so 112 // can be accumulated between. 113 test_composition({ 114 property: 'transform', 115 underlying: 'translate(100px, 50px)', 116 accumulateFrom: 'translateZ(50px)', 117 accumulateTo: 'translateZ(250px)', 118 }, [ 119 {at: -0.5, expect: 'translate3d(100px, 50px, -50px)'}, 120 {at: 0, expect: 'translate3d(100px, 50px, 50px)'}, 121 {at: 0.25, expect: 'translate3d(100px, 50px, 100px)'}, 122 {at: 0.5, expect: 'translate3d(100px, 50px, 150px)'}, 123 {at: 0.75, expect: 'translate3d(100px, 50px, 200px)'}, 124 {at: 1, expect: 'translate3d(100px, 50px, 250px)'}, 125 {at: 1.5, expect: 'translate3d(100px, 50px, 350px)'}, 126 ]); 127 128 // When testing translate functions in isolation, the additive and accumulation 129 // behaviors are functionally identical. This test includes a rotate to ensure 130 // both methods are implemented; accumulate should combine the transform before 131 // the rotate. 132 test_composition({ 133 property: 'transform', 134 underlying: 'translateX(100px) rotate(90deg)', 135 accumulateFrom: 'translateX(100px)', 136 accumulateTo: 'translateX(200px)', 137 }, [ 138 {at: -0.5, expect: 'translateX(150px) rotate(90deg)'}, 139 {at: 0, expect: 'translateX(200px) rotate(90deg)'}, 140 {at: 0.25, expect: 'translateX(225px) rotate(90deg)'}, 141 {at: 0.5, expect: 'translateX(250px) rotate(90deg)'}, 142 {at: 0.75, expect: 'translateX(275px) rotate(90deg)'}, 143 {at: 1, expect: 'translateX(300px) rotate(90deg)'}, 144 {at: 1.5, expect: 'translateX(350px) rotate(90deg)'}, 145 ]); 146 </script> 147 </body>