object-position-interpolation.html (2017B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position"> 4 <meta name="test" content="object-position supports animation"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 10 <body></body> 11 12 <script> 13 // Default object-position value is 50% 50% 14 test_interpolation({ 15 property: 'object-position', 16 from: neutralKeyframe, 17 to: 'left top', 18 }, [ 19 { at: -0.25, expect: '62.5% 62.5%' }, 20 { at: 0, expect: '50% 50%' }, 21 { at: 0.25, expect: '37.5% 37.5%' }, 22 { at: 0.5, expect: '25% 25%' }, 23 { at: 0.75, expect: '12.5% 12.5%' }, 24 { at: 1, expect: '0% 0%' }, 25 { at: 1.25, expect: '-12.5% -12.5%' }, 26 ]); 27 28 // Animate x axis 29 test_interpolation({ 30 property: 'object-position', 31 from: 'initial', 32 to: 'center top', 33 }, [ 34 { at: -0.25, expect: '50% 62.5%' }, 35 { at: 0, expect: '50% 50%' }, 36 { at: 0.25, expect: '50% 37.5%' }, 37 { at: 0.5, expect: '50% 25%' }, 38 { at: 0.75, expect: '50% 12.5%' }, 39 { at: 1, expect: '50% 0%' }, 40 { at: 1.25, expect: '50% -12.5%' }, 41 ]); 42 43 // Animate y axis 44 test_interpolation({ 45 property: 'object-position', 46 from: 'initial', 47 to: 'left center', 48 }, [ 49 { at: -0.25, expect: '62.5% 50%' }, 50 { at: 0, expect: '50% 50%' }, 51 { at: 0.25, expect: '37.5% 50%' }, 52 { at: 0.5, expect: '25% 50%' }, 53 { at: 0.75, expect: '12.5% 50%' }, 54 { at: 1, expect: '0% 50%' }, 55 { at: 1.25, expect: '-12.5% 50%' }, 56 ]); 57 58 // Pixel values 59 test_interpolation({ 60 property: 'object-position', 61 from: '20px 20px', 62 to: '100px 100px', 63 }, [ 64 { at: -0.25, expect: '0px 0px' }, 65 { at: 0, expect: '20px 20px' }, 66 { at: 0.25, expect: '40px 40px' }, 67 { at: 0.5, expect: '60px 60px' }, 68 { at: 0.75, expect: '80px 80px' }, 69 { at: 1, expect: '100px 100px' }, 70 { at: 1.25, expect: '120px 120px' }, 71 ]); 72 </script>