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