offset-distance-composition.html (1633B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>offset-distance 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-distance-property"> 6 <meta name="assert" content="offset-distance 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 <body> 13 <script> 14 test_composition({ 15 property: 'offset-distance', 16 underlying: '50px', 17 addFrom: '100px', 18 addTo: '200px', 19 }, [ 20 {at: -0.3, expect: '120px'}, 21 {at: 0, expect: '150px'}, 22 {at: 0.5, expect: '200px'}, 23 {at: 1, expect: '250px'}, 24 {at: 1.5, expect: '300px'}, 25 ]); 26 27 test_composition({ 28 property: 'offset-distance', 29 underlying: '100px', 30 addFrom: '10px', 31 addTo: '2px', 32 }, [ 33 {at: -0.5, expect: '114px'}, 34 {at: 0, expect: '110px'}, 35 {at: 0.5, expect: '106px'}, 36 {at: 1, expect: '102px'}, 37 {at: 1.5, expect: '98px'}, 38 ]); 39 40 test_composition({ 41 property: 'offset-distance', 42 underlying: '10%', 43 addFrom: '100px', 44 addTo: '20%', 45 }, [ 46 {at: -0.3, expect: 'calc(130px + 4%)'}, 47 {at: 0, expect: 'calc(100px + 10%)'}, 48 {at: 0.5, expect: 'calc(50px + 20%)'}, 49 {at: 1, expect: '30%'}, 50 {at: 1.5, expect: 'calc(-50px + 40%)'}, 51 ]); 52 53 test_composition({ 54 property: 'offset-distance', 55 underlying: '50px', 56 addFrom: '100px', 57 replaceTo: '200px', 58 }, [ 59 {at: -0.3, expect: '135px'}, 60 {at: 0, expect: '150px'}, 61 {at: 0.5, expect: '175px'}, 62 {at: 1, expect: '200px'}, 63 {at: 1.5, expect: '225px'}, 64 ]); 65 </script> 66 </body>