perspective-interpolation.html (2609B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title> perspective interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective"> 5 <meta name="assert" content="perspective 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: 30px; 14 } 15 .target { 16 perspective: 10px; 17 } 18 .transformed { 19 width: 50px; 20 height: 50px; 21 background: black; 22 transform: rotateY(45deg); 23 } 24 .expected .transformed { 25 background: green; 26 } 27 .expected { 28 position: relative; 29 left: -50px; 30 opacity: 0.75; 31 } 32 </style> 33 <body> 34 <template id="target-template"> 35 <div><div class="transformed"></div></div> 36 </template> 37 <script> 38 test_interpolation({ 39 property: 'perspective', 40 from: neutralKeyframe, 41 to: '20px', 42 }, [ 43 {at: -20, expect: '0px'}, 44 {at: -1, expect: '0px'}, 45 {at: -0.3, expect: '7px'}, 46 {at: 0, expect: '10px'}, 47 {at: 0.3, expect: '13px'}, 48 {at: 0.6, expect: '16px'}, 49 {at: 1, expect: '20px'}, 50 {at: 1.5, expect: '25px'}, 51 ]); 52 53 test_no_interpolation({ 54 property: 'perspective', 55 from: 'initial', 56 to: '20px', 57 }); 58 59 test_interpolation({ 60 property: 'perspective', 61 from: 'inherit', 62 to: '20px', 63 }, [ 64 {at: -20, expect: '230px'}, 65 {at: -1, expect: '40px'}, 66 {at: -0.3, expect: '33px'}, 67 {at: 0, expect: '30px'}, 68 {at: 0.3, expect: '27px'}, 69 {at: 0.6, expect: '24px'}, 70 {at: 1, expect: '20px'}, 71 {at: 1.5, expect: '15px'}, 72 ]); 73 74 test_no_interpolation({ 75 property: 'perspective', 76 from: 'unset', 77 to: '20px', 78 }); 79 80 test_interpolation({ 81 property: 'perspective', 82 from: '50px', 83 to: '100px', 84 }, [ 85 {at: -20, expect: '0px'}, // perspective does not accept negative values 86 {at: -1, expect: '0px'}, // perspective does not accept negative values 87 {at: -0.3, expect: '35px'}, 88 {at: 0, expect: '50px'}, 89 {at: 0.3, expect: '65px'}, 90 {at: 0.6, expect: '80px'}, 91 {at: 1, expect: '100px'}, 92 {at: 1.5, expect: '125px'}, 93 ]); 94 95 test_interpolation({ 96 property: 'perspective', 97 from: '0px', // Test that there's no special handling of 0px, as for perspective() 98 to: '10px', 99 }, [ 100 {at: -20, expect: '0px'}, // perspective does not accept negative values 101 {at: -1, expect: '0px'}, // perspective does not accept negative values 102 {at: -0.3, expect: '0px'}, 103 {at: 0, expect: '0px'}, 104 {at: 0.3, expect: '3px'}, 105 {at: 0.6, expect: '6px'}, 106 {at: 1, expect: '10px'}, 107 {at: 1.5, expect: '15px'}, 108 ]); 109 110 test_no_interpolation({ 111 property: 'perspective', 112 from: '50px', 113 to: 'none', 114 }); 115 </script> 116 </body>