padding-interpolation.html (2344B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>padding interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand"> 5 <meta name="assert" content="padding supports animation as a list of lengths"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .parent { 13 padding: 30px; 14 } 15 .target { 16 width: 1px; 17 height: 1px; 18 background-color: black; 19 display: inline-block; 20 padding: 10px; 21 } 22 .expected { 23 background-color: green; 24 margin-right: 10px; 25 } 26 </style> 27 28 <body></body> 29 30 <script> 31 test_interpolation({ 32 property: 'padding', 33 from: neutralKeyframe, 34 to: '20px', 35 }, [ 36 {at: -0.3, expect: '7px'}, 37 {at: 0, expect: '10px'}, 38 {at: 0.3, expect: '13px'}, 39 {at: 0.6, expect: '16px'}, 40 {at: 1, expect: '20px'}, 41 {at: 1.5, expect: '25px'}, 42 ]); 43 44 test_interpolation({ 45 property: 'padding', 46 from: 'initial', 47 to: '20px', 48 }, [ 49 {at: -0.3, expect: '0px'}, 50 {at: 0, expect: '0px'}, 51 {at: 0.3, expect: '6px'}, 52 {at: 0.6, expect: '12px'}, 53 {at: 1, expect: '20px'}, 54 {at: 1.5, expect: '30px'}, 55 ]); 56 57 test_interpolation({ 58 property: 'padding', 59 from: 'inherit', 60 to: '20px', 61 }, [ 62 {at: -0.3, expect: '33px'}, 63 {at: 0, expect: '30px'}, 64 {at: 0.3, expect: '27px'}, 65 {at: 0.6, expect: '24px'}, 66 {at: 1, expect: '20px'}, 67 {at: 1.5, expect: '15px'}, 68 ]); 69 70 test_interpolation({ 71 property: 'padding', 72 from: 'unset', 73 to: '20px', 74 }, [ 75 {at: -0.3, expect: '0px'}, 76 {at: 0, expect: '0px'}, 77 {at: 0.3, expect: '6px'}, 78 {at: 0.6, expect: '12px'}, 79 {at: 1, expect: '20px'}, 80 {at: 1.5, expect: '30px'}, 81 ]); 82 83 test_interpolation({ 84 property: 'padding', 85 from: '0px', 86 to: '10px' 87 }, [ 88 {at: -0.3, expect: '0px'}, // CSS padding can't be negative. 89 {at: 0, expect: '0px'}, 90 {at: 0.3, expect: '3px'}, 91 {at: 0.6, expect: '6px'}, 92 {at: 1, expect: '10px'}, 93 {at: 1.5, expect: '15px'} 94 ]); 95 96 test_interpolation({ 97 property: 'padding', 98 from: '20px 40px 60px 80px', 99 to: '30px 50px 70px 90px' 100 }, [ 101 {at: -0.3, expect: '17px 37px 57px 77px'}, 102 {at: 0, expect: '20px 40px 60px 80px'}, 103 {at: 0.3, expect: '23px 43px 63px 83px'}, 104 {at: 0.6, expect: '26px 46px 66px 86px'}, 105 {at: 1, expect: '30px 50px 70px 90px'}, 106 {at: 1.5, expect: '35px 55px 75px 95px'} 107 ]); 108 </script>