transform-origin-composition.html (2149B)
1 <!DOCTYPE html> 2 <title>transform-origin composition</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-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: 'transform-origin', 17 underlying: '40px 60px', 18 addFrom: '60px 40px', 19 addTo: '160px 140px 40px', 20 }, [ 21 {at: -0.25, expect: '75px 75px -10px'}, 22 {at: 0, expect: '100px 100px'}, 23 {at: 0.25, expect: '125px 125px 10px'}, 24 {at: 0.5, expect: '150px 150px 20px'}, 25 {at: 0.75, expect: '175px 175px 30px'}, 26 {at: 1, expect: '200px 200px 40px'}, 27 {at: 1.25, expect: '225px 225px 50px'}, 28 ]); 29 30 test_composition({ 31 property: 'transform-origin', 32 underlying: 'top right 20px', 33 addFrom: 'left top 80px', 34 addTo: 'right bottom 20px', 35 }, [ 36 {at: -0.25, expect: '150px -50px 115px'}, 37 {at: 0, expect: '200px 0px 100px'}, 38 {at: 0.25, expect: '250px 50px 85px'}, 39 {at: 0.5, expect: '300px 100px 70px'}, 40 {at: 0.75, expect: '350px 150px 55px'}, 41 {at: 1, expect: '400px 200px 40px'}, 42 {at: 1.25, expect: '450px 250px 25px'}, 43 ]); 44 45 test_composition({ 46 property: 'transform-origin', 47 underlying: '40px 60px 100px', 48 replaceFrom: '100px 200px 20px', 49 addTo: '160px 40px', 50 }, [ 51 {at: -0.25, expect: '75px 225px'}, 52 {at: 0, expect: '100px 200px 20px'}, 53 {at: 0.25, expect: '125px 175px 40px'}, 54 {at: 0.5, expect: '150px 150px 60px'}, 55 {at: 0.75, expect: '175px 125px 80px'}, 56 {at: 1, expect: '200px 100px 100px'}, 57 {at: 1.25, expect: '225px 75px 120px'}, 58 ]); 59 60 test_composition({ 61 property: 'transform-origin', 62 underlying: '40px 60px 80px', 63 addFrom: '60px 140px 20px', 64 replaceTo: '200px 100px', 65 }, [ 66 {at: -0.25, expect: '75px 225px 125px'}, 67 {at: 0, expect: '100px 200px 100px'}, 68 {at: 0.25, expect: '125px 175px 75px'}, 69 {at: 0.5, expect: '150px 150px 50px'}, 70 {at: 0.75, expect: '175px 125px 25px'}, 71 {at: 1, expect: '200px 100px'}, 72 {at: 1.25, expect: '225px 75px -25px'}, 73 ]); 74 </script> 75 </body>