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