top-interpolation.html (1499B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-position-3/#propdef-top"> 4 <meta name="assert" content="top supports animation as a length or percentage"> 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 <style> 11 .parent { 12 top: 30px; 13 margin-bottom: 40px; 14 } 15 .target { 16 position: relative; 17 width: 10px; 18 height: 10px; 19 background-color: black; 20 display: inline-block; 21 top: 10px; 22 } 23 .expected { 24 background-color: green; 25 margin-right: 10px; 26 } 27 </style> 28 29 <body></body> 30 31 <script> 32 test_interpolation({ 33 property: 'top', 34 from: neutralKeyframe, 35 to: '20px', 36 }, [ 37 {at: -0.3, expect: '7px'}, 38 {at: 0, expect: '10px'}, 39 {at: 0.5, expect: '15px'}, 40 {at: 1, expect: '20px'}, 41 {at: 1.5, expect: '25px'}, 42 ]); 43 44 test_no_interpolation({ 45 property: 'top', 46 from: 'initial', 47 to: '20px', 48 }); 49 50 test_interpolation({ 51 property: 'top', 52 from: 'inherit', 53 to: '20px', 54 }, [ 55 {at: -0.3, expect: '33px'}, 56 {at: 0, expect: '30px'}, 57 {at: 0.5, expect: '25px'}, 58 {at: 1, expect: '20px'}, 59 {at: 1.5, expect: '15px'}, 60 ]); 61 62 test_no_interpolation({ 63 property: 'top', 64 from: 'unset', 65 to: '20px', 66 }); 67 68 test_interpolation({ 69 property: 'top', 70 from: '-10px', 71 to: '10px' 72 }, [ 73 {at: -0.3, expect: '-16px'}, 74 {at: 0, expect: '-10px'}, 75 {at: 0.5, expect: '0px'}, 76 {at: 1, expect: '10px'}, 77 {at: 1.5, expect: '20px'} 78 ]); 79 </script>