perspective-origin-composition.html (2015B)
1 <!DOCTYPE html> 2 <title>perspective-origin composition</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/interpolation-testcommon.js"></script> 7 <style> 8 .target { 9 width: 200px; 10 height: 200px; 11 } 12 </style> 13 <body> 14 <script> 15 test_composition({ 16 property: 'perspective-origin', 17 underlying: '40px 60px', 18 addFrom: '60px 40px', 19 addTo: '160px 140px', 20 }, [ 21 {at: -0.25, expect: '75px 75px'}, 22 {at: 0, expect: '100px 100px'}, 23 {at: 0.25, expect: '125px 125px'}, 24 {at: 0.5, expect: '150px 150px'}, 25 {at: 0.75, expect: '175px 175px'}, 26 {at: 1, expect: '200px 200px'}, 27 {at: 1.25, expect: '225px 225px'}, 28 ]); 29 30 test_composition({ 31 property: 'perspective-origin', 32 underlying: 'top 20% left 40%', 33 addFrom: 'left 60% top 80%', 34 addTo: 'right 80% bottom 40%', 35 }, [ 36 {at: -0.25, expect: '220px 210px'}, 37 {at: 0, expect: '200px 200px'}, 38 {at: 0.25, expect: '180px 190px'}, 39 {at: 0.5, expect: '160px 180px'}, 40 {at: 0.75, expect: '140px 170px'}, 41 {at: 1, expect: '120px 160px'}, 42 {at: 1.25, expect: '100px 150px'}, 43 ]); 44 45 test_composition({ 46 property: 'perspective-origin', 47 underlying: '40px 60px', 48 replaceFrom: '100px 200px', 49 addTo: '160px 40px', 50 }, [ 51 {at: -0.25, expect: '75px 225px'}, 52 {at: 0, expect: '100px 200px'}, 53 {at: 0.25, expect: '125px 175px'}, 54 {at: 0.5, expect: '150px 150px'}, 55 {at: 0.75, expect: '175px 125px'}, 56 {at: 1, expect: '200px 100px'}, 57 {at: 1.25, expect: '225px 75px'}, 58 ]); 59 60 test_composition({ 61 property: 'perspective-origin', 62 underlying: '40px 60px', 63 addFrom: '60px 140px', 64 replaceTo: '200px 100px', 65 }, [ 66 {at: -0.25, expect: '75px 225px'}, 67 {at: 0, expect: '100px 200px'}, 68 {at: 0.25, expect: '125px 175px'}, 69 {at: 0.5, expect: '150px 150px'}, 70 {at: 0.75, expect: '175px 125px'}, 71 {at: 1, expect: '200px 100px'}, 72 {at: 1.25, expect: '225px 75px'}, 73 ]); 74 </script> 75 </body>