offset-distance-interpolation.html (3734B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>offset-distance interpolation</title> 6 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 7 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> 8 <meta name="assert" content="offset-distance supports animation."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/interpolation-testcommon.js"></script> 12 </head> 13 <style> 14 .parent { 15 offset-distance: 30px; 16 } 17 .target { 18 width: 10px; 19 height: 10px; 20 background-color: black; 21 offset-path: path("M0 0H 400"); 22 offset-distance: 10px; 23 } 24 .expected { 25 background-color: green; 26 } 27 </style> 28 <body> 29 <script> 30 test_interpolation({ 31 property: 'offset-distance', 32 from: '-30px', 33 to: '50px', 34 }, [ 35 {at: -1, expect: '-110px'}, 36 {at: 0, expect: '-30px'}, 37 {at: 0.125, expect: '-20px'}, 38 {at: 0.875, expect: '40px'}, 39 {at: 1, expect: '50px'}, 40 {at: 2, expect: '130px'} 41 ]); 42 43 test_interpolation({ 44 property: 'offset-distance', 45 from: '20%', 46 to: '100%', 47 }, [ 48 {at: -1, expect: '-60%'}, 49 {at: 0, expect: '20%'}, 50 {at: 0.125, expect: '30%'}, 51 {at: 0.875, expect: '90%'}, 52 {at: 1, expect: '100%'}, 53 {at: 2, expect: '180%'} 54 ]); 55 56 test_interpolation({ 57 property: 'offset-distance', 58 from: 'calc(20% - 30px)', 59 to: 'calc(50px + 100%)', 60 }, [ 61 {at: -1, expect: 'calc(-110px + -60%)'}, 62 {at: 0, expect: 'calc(20% - 30px)'}, 63 {at: 0.125, expect: 'calc(-20px + 30%)'}, 64 {at: 0.875, expect: 'calc(40px + 90%)'}, 65 {at: 1, expect: 'calc(50px + 100%)'}, 66 {at: 2, expect: 'calc(130px + 180%)'} 67 ]); 68 69 test_interpolation({ 70 property: 'offset-distance', 71 from: neutralKeyframe, 72 to: '20px', 73 }, [ 74 {at: -0.3, expect: '7px'}, 75 {at: 0, expect: '10px'}, 76 {at: 0.3, expect: '13px'}, 77 {at: 0.6, expect: '16px'}, 78 {at: 1, expect: '20px'}, 79 {at: 1.5, expect: '25px'}, 80 ]); 81 82 test_interpolation({ 83 property: 'offset-distance', 84 from: 'initial', 85 to: '20px', 86 }, [ 87 {at: -0.3, expect: '-6px'}, 88 {at: 0, expect: '0px'}, 89 {at: 0.3, expect: '6px'}, 90 {at: 0.6, expect: '12px'}, 91 {at: 1, expect: '20px'}, 92 {at: 1.5, expect: '30px'}, 93 ]); 94 95 test_interpolation({ 96 property: 'offset-distance', 97 from: 'inherit', 98 to: '20px', 99 }, [ 100 {at: -0.3, expect: '33px'}, 101 {at: 0, expect: '30px'}, 102 {at: 0.3, expect: '27px'}, 103 {at: 0.6, expect: '24px'}, 104 {at: 1, expect: '20px'}, 105 {at: 1.5, expect: '15px'}, 106 ]); 107 108 test_interpolation({ 109 property: 'offset-distance', 110 from: 'unset', 111 to: '20px', 112 }, [ 113 {at: -0.3, expect: '-6px'}, 114 {at: 0, expect: '0px'}, 115 {at: 0.3, expect: '6px'}, 116 {at: 0.6, expect: '12px'}, 117 {at: 1, expect: '20px'}, 118 {at: 1.5, expect: '30px'}, 119 ]); 120 121 test_interpolation({ 122 property: 'offset-distance', 123 from: '10px', 124 to: '100%', 125 }, [ 126 {at: -0.3, expect: 'calc(13px + -30%)'}, 127 {at: 0, expect: 'calc(0% + 10px)'}, 128 {at: 0.3, expect: 'calc(7px + 30%)'}, 129 {at: 0.6, expect: 'calc(4px + 60%)'}, 130 {at: 1, expect: '100%'}, 131 {at: 1.5, expect: 'calc(-5px + 150%)'}, 132 ]); 133 </script> 134 </body> 135 </html>