offset-anchor-composition.html (2126B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>offset-anchor composition</title> 4 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property"> 6 <meta name="assert" content="offset-anchor supports animation."> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <style> 13 .target { 14 width: 200px; 15 height: 200px; 16 } 17 </style> 18 <body> 19 <script> 20 test_composition({ 21 property: 'offset-anchor', 22 underlying: '40px 60px', 23 addFrom: '60px 40px', 24 addTo: '160px 140px', 25 }, [ 26 {at: -0.25, expect: '75px 75px'}, 27 {at: 0, expect: '100px 100px'}, 28 {at: 0.25, expect: '125px 125px'}, 29 {at: 0.5, expect: '150px 150px'}, 30 {at: 0.75, expect: '175px 175px'}, 31 {at: 1, expect: '200px 200px'}, 32 {at: 1.25, expect: '225px 225px'}, 33 ]); 34 35 test_composition({ 36 property: 'offset-anchor', 37 underlying: 'top 20% left 40%', 38 addFrom: 'left 60% top 80%', 39 addTo: 'right 80% bottom 40%', 40 }, [ 41 {at: -0.25, expect: '110% 105%'}, 42 {at: 0, expect: '100% 100%'}, 43 {at: 0.25, expect: '90% 95%'}, 44 {at: 0.5, expect: '80% 90%'}, 45 {at: 0.75, expect: '70% 85%'}, 46 {at: 1, expect: '60% 80%'}, 47 {at: 1.25, expect: '50% 75%'}, 48 ]); 49 50 test_composition({ 51 property: 'offset-anchor', 52 underlying: '40px 60px', 53 replaceFrom: '100px 200px', 54 addTo: '160px 40px', 55 }, [ 56 {at: -0.25, expect: '75px 225px'}, 57 {at: 0, expect: '100px 200px'}, 58 {at: 0.25, expect: '125px 175px'}, 59 {at: 0.5, expect: '150px 150px'}, 60 {at: 0.75, expect: '175px 125px'}, 61 {at: 1, expect: '200px 100px'}, 62 {at: 1.25, expect: '225px 75px'}, 63 ]); 64 65 test_composition({ 66 property: 'offset-anchor', 67 underlying: '40px 60px', 68 addFrom: '60px 140px', 69 replaceTo: '200px 100px', 70 }, [ 71 {at: -0.25, expect: '75px 225px'}, 72 {at: 0, expect: '100px 200px'}, 73 {at: 0.25, expect: '125px 175px'}, 74 {at: 0.5, expect: '150px 150px'}, 75 {at: 0.75, expect: '175px 125px'}, 76 {at: 1, expect: '200px 100px'}, 77 {at: 1.25, expect: '225px 75px'}, 78 ]); 79 </script> 80 </body>