translate-composition.html (4110B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>translate composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> 5 <meta name="assert" content="translate supports <length> and <percentage> animation."> 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 <style> 13 .target { 14 width: 100px; 15 height: 100px; 16 } 17 </style> 18 <script> 19 test_composition({ 20 property: 'translate', 21 underlying: '100px 200px 300px', 22 addFrom: '-50px 50%', 23 addTo: '100%', 24 }, [ 25 {at: -1, expect: '-100% calc(200px + 100%) 300px'}, 26 {at: 0, expect: 'calc(50px + 0%) calc(200px + 50%) 300px'}, 27 {at: 0.25, expect: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'}, 28 {at: 0.75, expect: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'}, 29 {at: 1, expect: 'calc(100px + 100%) calc(200px + 0%) 300px'}, 30 {at: 2, expect: 'calc(150px + 200%) calc(200px - 50%) 300px'}, 31 ]); 32 33 test_composition({ 34 property: 'translate', 35 underlying: '100px 200px 300px', 36 addFrom: '50% 100px', 37 replaceTo: '200px 50% 100px', 38 }, [ 39 {at: -1, expect: '100% calc(600px - 50%) 500px'}, 40 {at: 0, expect: 'calc(100px + 50%) calc(300px + 0%) 300px'}, 41 {at: 0.25, expect: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'}, 42 {at: 0.75, expect: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'}, 43 {at: 1, expect: 'calc(200px + 0%) 50% 100px'}, 44 {at: 2, expect: 'calc(300px - 50%) calc(-300px + 100%) -100px'}, 45 ]); 46 47 test_composition({ 48 property: 'translate', 49 underlying: '100px 200px 300px', 50 replaceFrom: '50% 100px', 51 addTo: '200px 50% 100px', 52 }, [ 53 {at: -1, expect: 'calc(-300px + 100%) -50% -400px'}, 54 {at: 0, expect: '50% calc(100px + 0%)'}, 55 {at: 0.25, expect: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'}, 56 {at: 0.75, expect: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'}, 57 {at: 1, expect: 'calc(300px + 0%) calc(200px + 50%) 400px'}, 58 {at: 2, expect: 'calc(600px - 50%) calc(300px + 100%) 800px'}, 59 ]); 60 61 test_composition({ 62 property: 'translate', 63 underlying: 'none', 64 replaceFrom: 'none', 65 addTo: '100px', 66 }, [ 67 {at: -1, expect: '-100px'}, 68 {at: 0, expect: '0px'}, 69 {at: 0.25, expect: '25px'}, 70 {at: 0.75, expect: '75px'}, 71 {at: 1, expect: '100px'}, 72 {at: 2, expect: '200px'}, 73 ]); 74 75 test_composition({ 76 property: 'translate', 77 underlying: 'none', 78 addFrom: 'none', 79 addTo: '100px', 80 }, [ 81 {at: -1, expect: '-100px'}, 82 {at: 0, expect: '0px'}, 83 {at: 0.25, expect: '25px'}, 84 {at: 0.75, expect: '75px'}, 85 {at: 1, expect: '100px'}, 86 {at: 2, expect: '200px'}, 87 ]); 88 89 test_composition({ 90 property: 'translate', 91 underlying: 'none', 92 replaceFrom: '0px 40px 60px', 93 replaceTo: 'none', 94 }, [ 95 {at: -1, expect: '0px 80px 120px'}, 96 {at: 0, expect: '0px 40px 60px'}, 97 {at: 0.25, expect: '0px 30px 45px'}, 98 {at: 0.75, expect: '0px 10px 15px'}, 99 {at: 1, expect: '0px'}, 100 {at: 2, expect: '0px -40px -60px'}, 101 ]); 102 103 test_composition({ 104 property: 'translate', 105 underlying: 'none', 106 replaceFrom: '0px 40px 60px', 107 addTo: 'none', 108 }, [ 109 {at: -1, expect: '0px 80px 120px'}, 110 {at: 0, expect: '0px 40px 60px'}, 111 {at: 0.25, expect: '0px 30px 45px'}, 112 {at: 0.75, expect: '0px 10px 15px'}, 113 {at: 1, expect: '0px'}, 114 {at: 2, expect: '0px -40px -60px'}, 115 ]); 116 117 test_composition({ 118 property: 'translate', 119 underlying: '80px 20px', 120 addFrom: 'none', 121 replaceTo: '0px 40px 60px', 122 }, [ 123 {at: -1, expect: '160px 0px -60px'}, 124 {at: 0, expect: '80px 20px'}, 125 {at: 0.25, expect: '60px 25px 15px'}, 126 {at: 0.5, expect: '40px 30px 30px'}, 127 {at: 0.75, expect: '20px 35px 45px'}, 128 {at: 1, expect: '0px 40px 60px'}, 129 {at: 2, expect: '-80px 60px 120px'}, 130 ]); 131 132 test_composition({ 133 property: 'translate', 134 underlying: '80px 20px', 135 addFrom: '0px 40px 60px', 136 replaceTo: 'none', 137 }, [ 138 {at: -1, expect: '160px 120px 120px'}, 139 {at: 0, expect: '80px 60px 60px'}, 140 {at: 0.25, expect: '60px 45px 45px'}, 141 {at: 0.5, expect: '40px 30px 30px'}, 142 {at: 0.75, expect: '20px 15px 15px'}, 143 {at: 1, expect: '0px'}, 144 {at: 2, expect: '-80px -60px -60px'}, 145 ]); 146 </script> 147 </body>