clip-path-interpolation-002.html (6487B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <meta charset="UTF-8"> 4 <title>clip-path-interpolation</title> 5 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> 6 <meta name="assert" content="clip-path supports animation"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <style> 13 .parent { 14 clip-path: inset(10px); 15 padding: 10px; 16 } 17 18 .target { 19 display: inline-block; 20 width: 100px; 21 height: 100px; 22 background-color: black; 23 clip-path: inset(10px); 24 } 25 26 .expected { 27 background-color: green; 28 } 29 </style> 30 <body> 31 <script> 32 test_interpolation({ 33 property: 'clip-path', 34 from: neutralKeyframe, 35 to: 'inset(20px)', 36 }, [ 37 {at: -0.3, expect: 'inset(7px)'}, 38 {at: 0, expect: 'inset(10px)'}, 39 {at: 0.3, expect: 'inset(13px)'}, 40 {at: 0.6, expect: 'inset(16px)'}, 41 {at: 1, expect: 'inset(20px)'}, 42 {at: 1.5, expect: 'inset(25px)'}, 43 ]); 44 45 test_no_interpolation({ 46 property: 'clip-path', 47 from: 'initial', 48 to: 'inset(20px)', 49 }); 50 51 test_interpolation({ 52 property: 'clip-path', 53 from: 'inherit', 54 to: 'inset(20px)', 55 }, [ 56 {at: -0.3, expect: 'inset(7px)'}, 57 {at: 0, expect: 'inset(10px)'}, 58 {at: 0.3, expect: 'inset(13px)'}, 59 {at: 0.6, expect: 'inset(16px)'}, 60 {at: 1, expect: 'inset(20px)'}, 61 {at: 1.5, expect: 'inset(25px)'}, 62 ]); 63 64 test_no_interpolation({ 65 property: 'clip-path', 66 from: 'unset', 67 to: 'inset(20px)', 68 }); 69 70 test_no_interpolation({ 71 property: 'clip-path', 72 from: 'none', 73 to: 'circle(3px at 1px 2px)', 74 }); 75 76 test_interpolation({ 77 property: 'clip-path', 78 from: 'circle(10px at 25px 75%)', 79 to: 'circle(50px at 50px center)' 80 }, [ 81 {at: -0.3, expect: 'circle(0px at 17.5px 82.5%)'}, // radius can't be negative 82 {at: 0, expect: 'circle(10px at 25px 75%)'}, 83 {at: 0.3, expect: 'circle(22px at 32.5px 67.5%)'}, 84 {at: 0.6, expect: 'circle(34px at 40px 60%)'}, 85 {at: 1, expect: 'circle(50px at 50px 50%)'}, 86 {at: 1.5, expect: 'circle(70px at 62.5px 37.5%)'}, 87 ]); 88 89 test_no_interpolation({ 90 property: 'clip-path', 91 from: 'circle(farthest-side at 25px 75%)', 92 to: 'circle(farthest-side at 50px center)' 93 }); 94 95 test_no_interpolation({ 96 property: 'clip-path', 97 from: 'circle(closest-side at 10px 20px)', 98 to: 'circle(farthest-side at 30px 40px)', 99 }); 100 101 test_no_interpolation({ 102 property: 'clip-path', 103 from: 'circle(50px at 10px 20px)', 104 to: 'circle(farthest-side at 30px 40px)', 105 }); 106 107 test_interpolation({ 108 property: 'clip-path', 109 from: 'ellipse(10px 20px at 25px 75px)', 110 to: 'ellipse(50px 100px at 50px 50px)', 111 }, [ 112 {at: -0.3, expect: 'ellipse(0px 0px at 17.5px 82.5px)'}, // radius can't be negative 113 {at: 0, expect: 'ellipse(10px 20px at 25px 75px)'}, 114 {at: 0.3, expect: 'ellipse(22px 44px at 32.5px 67.5px)'}, 115 {at: 0.6, expect: 'ellipse(34px 68px at 40px 60px)'}, 116 {at: 1, expect: 'ellipse(50px 100px at 50px 50px)'}, 117 {at: 1.5, expect: 'ellipse(70px 140px at 62.5px 37.5px)'}, 118 ]); 119 120 test_no_interpolation({ 121 property: 'clip-path', 122 from: 'ellipse(closest-side farthest-side at 25px 75%)', 123 to: 'ellipse(closest-side farthest-side at 50px center)', 124 }); 125 126 test_no_interpolation({ 127 property: 'clip-path', 128 from: 'ellipse(closest-side farthest-side at 10px 20px)', 129 to: 'ellipse(farthest-side closest-side at 30px 40px)', 130 }); 131 132 test_no_interpolation({ 133 property: 'clip-path', 134 from: 'ellipse(50px closest-side at 10px 20px)', 135 to: 'ellipse(150px farthest-side at 30px 40px)', 136 }); 137 138 test_interpolation({ 139 property: 'clip-path', 140 from: 'inset(20px)', 141 to: 'inset(40%)', 142 }, [ 143 {at: -0.3, expect: 'inset(calc(26px + -12%))'}, 144 {at: 0, expect: 'inset(calc(20px + 0%))'}, 145 {at: 0.3, expect: 'inset(calc(14px + 12%))'}, 146 {at: 0.6, expect: 'inset(calc(8px + 24%))'}, 147 {at: 1, expect: 'inset(40%)'}, 148 {at: 1.5, expect: 'inset(calc(-10px + 60%))'}, 149 ]); 150 151 test_interpolation({ 152 property: 'clip-path', 153 from: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', 154 to: 'inset(101px 102px 103px 104px round 110px 120px 130px 140px / 150px 160px 170px 180px)', 155 }, [ 156 {at: -0.3, expect: 'inset(-29px -28px -27px -26px round 0px 0px 0px 10px / 20px 30px 40px 50px)'}, 157 {at: 0, expect: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)'}, 158 {at: 0.3, expect: 'inset(31px 32px 33px 34px round 40px 50px 60px 70px / 80px 90px 100px 110px)'}, 159 {at: 0.6, expect: 'inset(61px 62px 63px 64px round 70px 80px 90px 100px / 110px 120px 130px 140px)'}, 160 {at: 1, expect: 'inset(101px 102px 103px 104px round 110px 120px 130px 140px / 150px 160px 170px 180px)'}, 161 {at: 1.5, expect: 'inset(151px 152px 153px 154px round 160px 170px 180px 190px / 200px 210px 220px 230px)'}, 162 ]); 163 164 test_interpolation({ 165 property: 'clip-path', 166 from: 'inset(1px 2px round 100px 200px)', 167 to: 'inset(101px 102px 101px 102px)', 168 }, [ 169 {at: -0.3, expect: 'inset(-29px -28px round 130px 260px)'}, 170 {at: 0, expect: 'inset(1px 2px round 100px 200px)'}, 171 {at: 0.3, expect: 'inset(31px 32px round 70px 140px)'}, 172 {at: 0.6, expect: 'inset(61px 62px round 40px 80px)'}, 173 {at: 1, expect: 'inset(101px 102px)'}, 174 {at: 1.5, expect: 'inset(151px 152px)'}, // border radius can't be negative 175 ]); 176 177 test_interpolation({ 178 property: 'clip-path', 179 from: 'polygon(10px 20%, 30px 40%)', 180 to: 'polygon(110px 120%, 130px 140%)', 181 }, [ 182 {at: -0.3, expect: 'polygon(-20px -10%, 0px 10%)'}, 183 {at: 0, expect: 'polygon(10px 20%, 30px 40%)'}, 184 {at: 0.3, expect: 'polygon(40px 50%, 60px 70%)'}, 185 {at: 0.6, expect: 'polygon(70px 80%, 90px 100%)'}, 186 {at: 1, expect: 'polygon(110px 120%, 130px 140%)'}, 187 {at: 1.5, expect: 'polygon(160px 170%, 180px 190%)'}, 188 ]); 189 190 test_interpolation({ 191 property: 'clip-path', 192 from: 'polygon(evenodd, 10px 20px)', 193 to: 'polygon(evenodd, 110px 120px)', 194 }, [ 195 {at: -0.3, expect: 'polygon(evenodd, -20px -10px)'}, 196 {at: 0, expect: 'polygon(evenodd, 10px 20px)'}, 197 {at: 0.3, expect: 'polygon(evenodd, 40px 50px)'}, 198 {at: 0.6, expect: 'polygon(evenodd, 70px 80px)'}, 199 {at: 1, expect: 'polygon(evenodd, 110px 120px)'}, 200 {at: 1.5, expect: 'polygon(evenodd, 160px 170px)'}, 201 ]); 202 203 test_no_interpolation({ 204 property: 'clip-path', 205 from: 'polygon(evenodd, 10px 20px)', 206 to: 'polygon(nonzero, 110px 120px)', 207 }); 208 209 test_no_interpolation({ 210 property: 'clip-path', 211 from: 'polygon(evenodd, 10px 20px)', 212 to: 'polygon(110px 120px)', 213 }); 214 215 test_no_interpolation({ 216 property: 'clip-path', 217 from: 'polygon(10px 20px, 30px 40px)', 218 to: 'polygon(110px 120px)', 219 }); 220 </script> 221 </body>