transform-origin-interpolation.html (2972B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform-origin interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> 5 <meta name="assert" content="transform supports animation by computed value"> 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 <style> 12 .parent { 13 transform-origin: 30px 10px; 14 } 15 .target { 16 display: inline-block; 17 margin-top: 50px; 18 margin-bottom: 25px; 19 width: 50px; 20 height: 50px; 21 background: red; 22 transform: scale(1.5); 23 transform-origin: 10px 30px; 24 } 25 .expected { 26 background: green; 27 position: relative; 28 left: -50px; 29 } 30 </style> 31 32 <body></body> 33 34 <script> 35 test_interpolation({ 36 property: 'transform-origin', 37 from: neutralKeyframe, 38 to: '20px 20px', 39 }, [ 40 {at: -0.3, expect: '7px 33px'}, 41 {at: 0, expect: '10px 30px'}, 42 {at: 0.3, expect: '13px 27px'}, 43 {at: 0.6, expect: '16px 24px'}, 44 {at: 1, expect: '20px 20px'}, 45 {at: 1.5, expect: '25px 15px'}, 46 ]); 47 48 test_interpolation({ 49 property: 'transform-origin', 50 from: 'initial', 51 to: '20px 20px', 52 }, [ 53 {at: -0.3, expect: '26.5px 26.5px'}, 54 {at: 0, expect: '25px 25px'}, 55 {at: 0.3, expect: '23.5px 23.5px'}, 56 {at: 0.6, expect: '22px 22px'}, 57 {at: 1, expect: '20px 20px'}, 58 {at: 1.5, expect: '17.5px 17.5px'}, 59 ]); 60 61 test_interpolation({ 62 property: 'transform-origin', 63 from: 'inherit', 64 to: '20px 20px', 65 }, [ 66 {at: -0.3, expect: '33px 7px'}, 67 {at: 0, expect: '30px 10px'}, 68 {at: 0.3, expect: '27px 13px'}, 69 {at: 0.6, expect: '24px 16px'}, 70 {at: 1, expect: '20px 20px'}, 71 {at: 1.5, expect: '15px 25px'}, 72 ]); 73 74 test_interpolation({ 75 property: 'transform-origin', 76 from: 'unset', 77 to: '20px 20px', 78 }, [ 79 {at: -0.3, expect: '26.5px 26.5px'}, 80 {at: 0, expect: '25px 25px'}, 81 {at: 0.3, expect: '23.5px 23.5px'}, 82 {at: 0.6, expect: '22px 22px'}, 83 {at: 1, expect: '20px 20px'}, 84 {at: 1.5, expect: '17.5px 17.5px'}, 85 ]); 86 87 test_interpolation({ 88 property: 'transform-origin', 89 from: 'top left', 90 to: 'bottom right', 91 }, [ 92 {at: -0.3, expect: '-15px -15px'}, 93 {at: 0, expect: '0px 0px'}, 94 {at: 0.3, expect: '15px 15px'}, 95 {at: 0.6, expect: '30px 30px'}, 96 {at: 1, expect: '50px 50px'}, 97 {at: 1.5, expect: '75px 75px'}, 98 ]); 99 100 test_interpolation({ 101 property: 'transform-origin', 102 from: 'center center', 103 to: '0% 100px', 104 }, [ 105 {at: -0.3, expect: '32.5px 2.5px'}, 106 {at: 0, expect: '25px 25px'}, 107 {at: 0.3, expect: '17.5px 47.5px'}, 108 {at: 0.6, expect: '10px 70px'}, 109 {at: 1, expect: '0px 100px'}, 110 {at: 1.5, expect: '-12.5px 137.5px'}, 111 ]); 112 113 test_interpolation({ 114 property: 'transform-origin', 115 from: '0% 50% 5px', 116 to: '100% 150% 0px' 117 }, [ 118 {at: -0.3, expect: '-30% 20% 6.5px'}, 119 {at: 0, expect: '0% 50% 5px'}, 120 {at: 0.3, expect: '30% 80% 3.5px'}, 121 {at: 0.6, expect: '60% 110% 2px'}, 122 {at: 1, expect: '100% 150% 0px'}, 123 {at: 1.5, expect: '150% 200% -2.5px'}, 124 ]); 125 </script>