transform-perspective-composition.html (2398B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform-perspective composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions"> 5 <meta name="assert" content="transform-perspective 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> 13 // Addition and accumulation of perspective values are very similar, but not 14 // identical. We can test the difference by constructing a scenario where a 15 // perspective parameter would go negative in one case (and thus be clamped 16 // to 0), and would not go negative in the other case. 17 // 18 // In the test below, the values differ at 1.5 progress. The reason for this 19 // is that at 1.5 progress, the addition case (which uses concatenation) 20 // computes to: 21 // 22 // perspective(10px) perspective(-50px) 23 // 24 // Since perspective cannot go negative, this is clamped to: 25 // 26 // perspective(10px) perspective(none) 27 // 28 // The accumulation case, on the other hand, combines the components 29 // and so ends up blending from perspective(5px) to perspective(8.33...px) at 30 // 1.5 progress, which results in perspective(12.5px) - this is what you would 31 // get with addition too, if not for the clamping behavior. 32 33 // ------------ Addition tests -------------- 34 35 test_composition({ 36 property: 'transform', 37 underlying: 'perspective(10px)', 38 addFrom: 'perspective(10px)', 39 addTo: 'perspective(50px)', 40 }, [ 41 {at: -0.5, expect: 'perspective(4.12px)'}, 42 {at: 0, expect: 'perspective(5px)'}, 43 {at: 0.25, expect: 'perspective(5.45px)'}, 44 {at: 0.5, expect: 'perspective(6.15px)'}, 45 {at: 0.75, expect: 'perspective(7.06px)'}, 46 {at: 1, expect: 'perspective(8.33px)'}, 47 {at: 1.5, expect: 'perspective(10px)'}, 48 ]); 49 50 // ------------ Accumulation tests -------------- 51 52 test_composition({ 53 property: 'transform', 54 underlying: 'perspective(10px)', 55 accumulateFrom: 'perspective(10px)', 56 accumulateTo: 'perspective(50px)', 57 }, [ 58 {at: -0.5, expect: 'perspective(4.12px)'}, 59 {at: 0, expect: 'perspective(5px)'}, 60 {at: 0.25, expect: 'perspective(5.45px)'}, 61 {at: 0.5, expect: 'perspective(6.15px)'}, 62 {at: 0.75, expect: 'perspective(7.06px)'}, 63 {at: 1, expect: 'perspective(8.33px)'}, 64 {at: 1.5, expect: 'perspective(12.5px)'}, 65 ]); 66 </script> 67 </body>