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