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