clip-path-interpolation-shape.html (17298B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>clip-path-interpolation</title> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> 6 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#interpolating-shape"> 7 <meta name="assert" content="clip-path supports animation for shape()"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/interpolation-testcommon.js"></script> 12 13 <style> 14 html { 15 font-size: 16px; 16 font-family: Ahem; 17 } 18 19 .parent { 20 clip-path: shape(from -5px 5px, move to 5% 1px); 21 padding: 10px; 22 } 23 24 .target { 25 display: inline-block; 26 width: 100px; 27 height: 100px; 28 background-color: black; 29 clip-path: shape(from 5px 5px, line to 10px 10%); 30 } 31 32 .expected { 33 background-color: green; 34 } 35 </style> 36 <body> 37 <script> 38 test_interpolation({ 39 property: 'clip-path', 40 from: neutralKeyframe, 41 to: 'shape(from -5px 5px, line to 20px 20%)', 42 }, [ 43 {at: -0.3, expect: 'shape(from 8px 5px, line to 7px 7%)'}, 44 {at: 0, expect: 'shape(from 5px 5px, line to 10px 10%)'}, 45 {at: 0.6, expect: 'shape(from -1px 5px, line to 16px 16%)'}, 46 {at: 1, expect: 'shape(from -5px 5px, line to 20px 20%)'}, 47 {at: 1.5, expect: 'shape(from -10px 5px, line to 25px 25%)'}, 48 ]); 49 50 test_no_interpolation({ 51 property: 'clip-path', 52 from: 'initial', 53 to: 'shape(from 8px 5px, line to 7px 7%)', 54 }); 55 56 test_interpolation({ 57 property: 'clip-path', 58 from: 'inherit', 59 to: 'shape(from 15% 15px, move to 20% -10px)', 60 }, [ 61 {at: -0.3, expect: 'shape(from calc(-4.5% - 6.5px) 2px, move to 0.5% 4.3px)'}, 62 {at: 0, expect: 'shape(from calc(0% - 5px) 5px, move to 5% 1px)'}, 63 {at: 0.5, expect: 'shape(from calc(7.5% - 2.5px) 10px, move to 12.5% -4.5px)'}, 64 {at: 1, expect: 'shape(from 15% 15px, move to 20% -10px'}, 65 {at: 1.5, expect: 'shape(from calc(22.5% + 2.5px) 20px, move to 27.5% -15.5px)'}, 66 ]); 67 68 test_no_interpolation({ 69 property: 'clip-path', 70 from: 'unset', 71 to: 'shape(from 10px 10px, close)', 72 }); 73 74 test_no_interpolation({ 75 property: 'clip-path', 76 from: 'none', 77 to: 'shape(from 10px 10px, close)', 78 }); 79 80 test_no_interpolation({ 81 property: 'clip-path', 82 from: 'shape(from 10px 10px, move to 10% 10%)', 83 to: 'shape(from 10px 10px, close)', 84 }); 85 86 test_interpolation({ 87 property: 'clip-path', 88 from: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)', 89 to: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)', 90 }, [ 91 {at: -0.3, expect: 'shape(from 2% 2px, hline to -1%, vline to -2px, close)'}, 92 {at: 0, expect: 'shape(from 5% 5px, hline to 5%, vline to -5px, close)'}, 93 {at: 0.5, expect: 'shape(from 10% 10px, hline to 15% , vline to -10px, close)'}, 94 {at: 1, expect: 'shape(from 15% 15px, hline to 25%, vline to -15px, close)'}, 95 {at: 1.5, expect: 'shape(from 20% 20px, hline to 35%, vline to -20px, close)'}, 96 ]); 97 98 test_interpolation({ 99 property: 'clip-path', 100 from: 'shape(from 5% 5px, curve to 10% 10px with 0% 80px, curve to 30% 20px with 20% 50px / 25% 70px)', 101 to: 'shape(from 15% 15px, curve to 20% 0px with 10% 60px, curve to 20% 30px with 30% 40px / -5% 100px)', 102 }, [ 103 {at: -0.3, expect: 'shape(from 2% 2px, curve to 7% 13px with -3% 86px, curve to 33% 17px with 17% 53px / 34% 61px)'}, 104 {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px with 0% 80px, curve to 30% 20px with 20% 50px / 25% 70px)'}, 105 {at: 0.5, expect: 'shape(from 10% 10px, curve to 15% 5px with 5% 70px, curve to 25% 25px with 25% 45px / 10% 85px)'}, 106 {at: 1, expect: 'shape(from 15% 15px, curve to 20% 0px with 10% 60px, curve to 20% 30px with 30% 40px / -5% 100px)'}, 107 {at: 1.5, expect: 'shape(from 20% 20px, curve to 25% -5px with 15% 50px, curve to 15% 35px with 35% 35px / -20% 115px)'}, 108 ]); 109 110 test_interpolation({ 111 property: 'clip-path', 112 from: 'shape(from 5% 5px, curve by 10% 10px with 0% 80px, curve by 30% 20px with 20% 50px / 25% 70px)', 113 to: 'shape(from 15% 15px, curve by 20% 0px with 10% 60px, curve by 20% 30px with 30% 40px / -5% 100px)', 114 }, [ 115 {at: -0.3, expect: 'shape(from 2% 2px, curve by 7% 13px with -3% 86px, curve by 33% 17px with 17% 53px / 34% 61px)'}, 116 {at: 0, expect: 'shape(from 5% 5px, curve by 10% 10px with 0% 80px, curve by 30% 20px with 20% 50px / 25% 70px)'}, 117 {at: 0.5, expect: 'shape(from 10% 10px, curve by 15% 5px with 5% 70px, curve by 25% 25px with 25% 45px / 10% 85px)'}, 118 {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px with 10% 60px, curve by 20% 30px with 30% 40px / -5% 100px)'}, 119 {at: 1.5, expect: 'shape(from 20% 20px, curve by 25% -5px with 15% 50px, curve by 15% 35px with 35% 35px / -20% 115px)'}, 120 ]); 121 122 test_interpolation({ 123 property: 'clip-path', 124 from: 'shape(from 5% 5px, smooth to 10% 10px with 0% 80px, smooth to 30% 20px)', 125 to: 'shape(from 15% 15px, smooth to 20% 0px with 10% 60px, smooth to 20% 30px)', 126 }, [ 127 {at: -0.3, expect: 'shape(from 2% 2px, smooth to 7% 13px with -3% 86px, smooth to 33% 17px)'}, 128 {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px with 0% 80px, smooth to 30% 20px)'}, 129 {at: 0.5, expect: 'shape(from 10% 10px, smooth to 15% 5px with 5% 70px, smooth to 25% 25px)'}, 130 {at: 1, expect: 'shape(from 15% 15px, smooth to 20% 0px with 10% 60px, smooth to 20% 30px)'}, 131 {at: 1.5, expect: 'shape(from 20% 20px, smooth to 25% -5px with 15% 50px, smooth to 15% 35px)'}, 132 ]); 133 134 test_interpolation({ 135 property: 'clip-path', 136 from: 'shape(from 5% 5px, smooth by 10% 10px with 0% 80px, smooth by 30% 20px)', 137 to: 'shape(from 15% 15px, smooth by 20% 0px with 10% 60px, smooth by 20% 30px)', 138 }, [ 139 {at: -0.3, expect: 'shape(from 2% 2px, smooth by 7% 13px with -3% 86px, smooth by 33% 17px)'}, 140 {at: 0, expect: 'shape(from 5% 5px, smooth by 10% 10px with 0% 80px, smooth by 30% 20px)'}, 141 {at: 0.5, expect: 'shape(from 10% 10px, smooth by 15% 5px with 5% 70px, smooth by 25% 25px)'}, 142 {at: 1, expect: 'shape(from 15% 15px, smooth by 20% 0px with 10% 60px, smooth by 20% 30px)'}, 143 {at: 1.5, expect: 'shape(from 20% 20px, smooth by 25% -5px with 15% 50px, smooth by 15% 35px)'}, 144 ]); 145 146 test_interpolation({ 147 property: 'clip-path', 148 from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', 149 to: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px 20px cw rotate 270deg small, arc to 25% 20px of 10px 5px small cw)' 150 }, [ 151 {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of 7px 17px, arc by 12% -2px of 33px 33px rotate -42deg cw large , arc to 25% 20px of 10px 5px)'}, 152 {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px)'}, 153 {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of 13px 23px, arc by 18% -8px of 27px 27px rotate 102deg cw large, arc to 25% 20px of 10px 5px cw)'}, 154 {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of 15px 25px, arc by 20% -10px of 25px 25px rotate 150deg cw large, arc to 25% 20px of 10px 5px cw)'}, 155 {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 20px 30px, arc by 25% -15px of 20px 20px rotate 270deg cw, arc to 25% 20px of 10px 5px cw)'}, 156 {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of 25px 35px, arc by 30% -20px of 15px 15px rotate 390deg cw, arc to 25% 20px of 10px 5px cw)'}, 157 ]); 158 159 test_interpolation({ 160 property: 'clip-path', 161 from: 'shape(from 5% 5px, arc to 15% -15px of 10px, arc by 15% -5px of 30% cw rotate 30deg large, arc to 25% 20px of 10% small)', 162 to: 'shape(from 15% 15px, arc to 5% -25px of 15%, arc by 25% -15px of 12rem cw rotate 270deg small, arc to 15% 20px of 20% small cw)' 163 }, [ 164 {at: -0.3, expect: 'shape(from 2% 2px, arc to 18% -12px of calc(-4.5% + 13px), arc by 12% -2px of calc(39% - 57.6px) cw large rotate -42deg, arc to 28% 20px of 7%)'}, 165 {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of calc(0% + 10px), arc by 15% -5px of 30% cw large rotate 30deg, arc to 25% 20px of 10%)'}, 166 {at: 0.3, expect: 'shape(from 8% 8px, arc to 12% -18px of calc(4.5% + 7px), arc by 18% -8px of calc(21% + 57.6px) rotate 102deg cw large, arc to 22% 20px of 13% cw)'}, 167 {at: 0.5, expect: 'shape(from 10% 10px, arc to 10% -20px of calc(7.5% + 5px), arc by 20% -10px of calc(15% + 96px) cw large rotate 150deg, arc to 20% 20px of 15% cw)'}, 168 {at: 1, expect: 'shape(from 15% 15px, arc to 5% -25px of 15%, arc by 25% -15px of calc(0% + 192px) cw rotate 270deg, arc to 15% 20px of 20% cw)'}, 169 {at: 1.5, expect: 'shape(from 20% 20px, arc to 0% -30px of calc(22.5% - 5px), arc by 30% -20px of calc(-15% + 288px) cw rotate 390deg, arc to 10% 20px of 25% cw)'}, 170 ]); 171 172 test_interpolation({ 173 property: 'clip-path', 174 from: 'shape(from 5px -5%, hline to 10px, vline by 10rem, hline by 8.25px, close, vline by 3pt)', 175 to: 'shape(from -5px 5px, hline to 20px, vline by 10%, hline by 1em, close, vline by 6pt)', 176 }, [ 177 {at: -0.3, expect: 'shape(from 8px calc(-6.5% - 1.5px), hline to 7px, vline by calc(-3% + 208px), hline by 5.92px, close, vline by 2.8px)'}, 178 {at: 0, expect: 'shape(from 5px -5%, hline to 10px, vline by calc(0% + 160px), hline by 8.25px, close, vline by 4px)'}, 179 {at: 0.6, expect: 'shape(from -1px calc(-2% + 3px), hline to 16px, vline by calc(6% + 64px), hline by 12.9px, close ,vline by 6.4px)'}, 180 {at: 1, expect: 'shape(from -5px calc(0% + 5px), hline to 20px, vline by 10%, hline by 16px, close, vline by 8px)'}, 181 {at: 1.5, expect: 'shape(from -10px calc(2.5% + 7.5px), hline to 25px, vline by calc(15% - 80px), hline by 19.88px, close, vline by 10px)'}, 182 ]); 183 184 test_no_interpolation({ 185 property: 'clip-path', 186 from: 'shape(from 10px 10px, move to 10% 10%)', 187 to: 'path("M10 10 z")', 188 }); 189 190 test_no_interpolation({ 191 property: 'clip-path', 192 from: 'path("M10 10 M10 10")', 193 to: 'shape(from 10px 10px, close)', 194 }); 195 196 test_no_interpolation({ 197 property: 'clip-path', 198 from: 'path("M10 10 h 5")', 199 to: 'shape(from 10px 10px, hline to 5px)', 200 }); 201 202 test_no_interpolation({ 203 property: 'clip-path', 204 from: 'shape(nonzero from 10px 10px, move to 10% 10%)', 205 to: 'path(evenodd, "M0 0 M20 20")', 206 }); 207 208 test_interpolation({ 209 property: 'clip-path', 210 from: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)', 211 to: 'path("M 15 15 H 25 V -15 Z")', 212 }, [ 213 {at: -0.3, expect: 'shape(from 2px 2px, hline to -1px, vline to -2px, close)'}, 214 {at: 0, expect: 'shape(from 5px 5px, hline to 5px, vline to -5px, close)'}, 215 {at: 0.5, expect: 'shape(from 10px 10px, hline to 15px, vline to -10px, close)'}, 216 {at: 1, expect: 'shape(from 15px 15px, hline to 25px, vline to -15px, close)'}, 217 {at: 1.5, expect: 'shape(from 20px 20px, hline to 35px, vline to -20px, close)'}, 218 ]); 219 220 test_interpolation({ 221 property: 'clip-path', 222 from: 'shape(from 5% 5px, curve to 10% 10px with 0% 80px, curve to 30% 20px with 20% 50px / 25% 70px)', 223 to: 'path("M 15 15 Q 10 60 20 0 C 30 40 -5 100 20 30")', 224 }, [ 225 {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, curve to calc(13% - 6px) 13px with calc(0% - 3px) 86px, curve to calc(39% - 6px) 17px with calc(26% - 9px) 53px / calc(32.5% + 1.5px) 61px)'}, 226 {at: 0, expect: 'shape(from 5% 5px, curve to 10% 10px with 0% 80px, curve to 30% 20px with 20% 50px / 25% 70px)'}, 227 {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, curve to calc(5% + 10px) 5px with calc(0% + 5px) 70px, curve to calc(15% + 10px) 25px with calc(10% + 15px) 45px / calc(12.5% - 2.5px) 85px)'}, 228 {at: 1, expect: 'shape(from calc(0% + 15px) 15px, curve to calc(0% + 20px) 0px with calc(0% + 10px) 60px, curve to calc(0% + 20px) 30px with calc(0% + 30px) 40px / calc(0% - 5px) 100px)'}, 229 {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, curve to calc(-5% + 30px) -5px with calc(0% + 15px) 50px, curve to calc(-15% + 30px) 35px with calc(-10% + 45px) 35px / calc(-12.5% - 7.5px) 115px)'}, 230 ]); 231 232 test_interpolation({ 233 property: 'clip-path', 234 from: 'path("M 5 5 q 0 80 10 10 c 20 50 25 70 30 20")', 235 to: 'shape(from 15% 15px, curve by 20% 0px with 10% 60px, curve by 20% 30px with 30% 40px / -5% 100px)', 236 }, [ 237 {at: -0.3, expect: 'shape(from calc(-4.5% + 6.5px) 2px, curve by calc(-6% + 13px) 13px with -3% 86px, curve by calc(-6% + 39px) 17px with calc(-9% + 26px) 53px / calc(1.5% + 32.5px) 61px)'}, 238 {at: 0, expect: 'shape(from calc(0% + 5px) 5px, curve by calc(0% + 10px) 10px with 0% 80px, curve by calc(0% + 30px) 20px with calc(0% + 20px) 50px / calc(0% + 25px) 70px)'}, 239 {at: 0.5, expect: 'shape(from calc(7.5% + 2.5px) 10px, curve by calc(10% + 5px) 5px with 5% 70px, curve by calc(10% + 15px) 25px with calc(15% + 10px) 45px / calc(-2.5% + 12.5px) 85px)'}, 240 {at: 1, expect: 'shape(from 15% 15px, curve by 20% 0px with 10% 60px, curve by 20% 30px with 30% 40px / -5% 100px)'}, 241 {at: 1.5, expect: 'shape(from calc(22.5% - 2.5px) 20px, curve by calc(30% - 5px) -5px with 15% 50px, curve by calc(30% - 15px) 35px with calc(45% - 10px) 35px / calc(-7.5% - 12.5px) 115px)'}, 242 ]); 243 244 test_interpolation({ 245 property: 'clip-path', 246 from: 'shape(from 5% 5px, smooth to 10% 10px with 0% 80px, smooth to 30% 20px)', 247 to: 'path("M 15 15 S 10 60 20 0 T 20 30")', 248 }, [ 249 {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, smooth to calc(13% - 6px) 13px with calc(0% - 3px) 86px, smooth to calc(39% - 6px) 17px)'}, 250 {at: 0, expect: 'shape(from 5% 5px, smooth to 10% 10px with 0% 80px, smooth to 30% 20px)'}, 251 {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, smooth to calc(5% + 10px) 5px with calc(0% + 5px) 70px, smooth to calc(15% + 10px) 25px)'}, 252 {at: 1, expect: 'shape(from calc(0% + 15px) 15px, smooth to calc(0% + 20px) 0px with calc(0% + 10px) 60px, smooth to calc(0% + 20px) 30px)'}, 253 {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, smooth to calc(-5% + 30px) -5px with calc(0% + 15px) 50px, smooth to calc(-15% + 30px) 35px)'}, 254 ]); 255 256 test_interpolation({ 257 property: 'clip-path', 258 from: 'path("M 5 5 s 0 80 10 10 t 30 20")', 259 to: 'shape(from 15px 15px, smooth by 20px 0px with 10px 60px, smooth by 20px 30px)', 260 }, [ 261 {at: -0.3, expect: 'shape(from 2px 2px, smooth by 7px 13px with -3px 86px, smooth by 33px 17px)'}, 262 {at: 0, expect: 'shape(from 5px 5px, smooth by 10px 10px with 0px 80px, smooth by 30px 20px)'}, 263 {at: 0.5, expect: 'shape(from 10px 10px, smooth by 15px 5px with 5px 70px, smooth by 25px 25px)'}, 264 {at: 1, expect: 'shape(from 15px 15px, smooth by 20px 0px with 10px 60px, smooth by 20px 30px)'}, 265 {at: 1.5, expect: 'shape(from 20px 20px, smooth by 25px -5px with 15px 50px, smooth by 15px 35px)'}, 266 ]); 267 268 test_interpolation({ 269 property: 'clip-path', 270 from: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)', 271 to: 'path("M 15 15 A 20,30 0 0,0 5,-25 a 20,20 270 0,1 25,-15 A 10,5 0 0,0 25 20")', 272 }, [ 273 {at: -0.3, expect: 'shape(from calc(6.5% - 4.5px) 2px, arc to calc(19.5% - 1.5px) -12px of 7px 17px, arc by calc(19.5% - 7.5px) -2px of 33px 33px cw large rotate -42deg, arc to calc(32.5% - 7.5px) 20px of 10px 5px)'}, 274 {at: 0, expect: 'shape(from 5% 5px, arc to 15% -15px of 10px 20px, arc by 15% -5px of 30px 30px cw rotate 30deg large, arc to 25% 20px of 10px 5px small)'}, 275 {at: 0.3, expect: 'shape(from calc(3.5% + 4.5px) 8px, arc to calc(10.5% + 1.5px) -18px of 13px 23px, arc by calc(10.5% + 7.5px) -8px of 27px 27px cw large rotate 102deg, arc to calc(17.5% + 7.5px) 20px of 10px 5px)'}, 276 {at: 0.5, expect: 'shape(from calc(2.5% + 7.5px) 10px, arc to calc(7.5% + 2.5px) -20px of 15px 25px, arc by calc(7.5% + 12.5px) -10px of 25px 25px cw large rotate 150deg, arc to calc(12.5% + 12.5px) 20px of 10px 5px)'}, 277 {at: 1, expect: 'shape(from calc(0% + 15px) 15px, arc to calc(0% + 5px) -25px of 20px 30px, arc by calc(0% + 25px) -15px of 20px 20px cw rotate 270deg, arc to calc(0% + 25px) 20px of 10px 5px)'}, 278 {at: 1.5, expect: 'shape(from calc(-2.5% + 22.5px) 20px, arc to calc(-7.5% + 7.5px) -30px of 25px 35px, arc by calc(-7.5% + 37.5px) -20px of 15px 15px cw rotate 390deg, arc to calc(-12.5% + 37.5px) 20px of 10px 5px)'}, 279 ]); 280 281 test_interpolation({ 282 property: 'clip-path', 283 from: 'path("M 5 5 A 10,20 0 0,0 15,-15 a 30,30 30 1,1 15,-5 A 10,5 0 0,0 25 20")', 284 to: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px 20px cw rotate 270deg small, arc to 25px 20px of 10px 5px small cw)' // ccw, cw, cw 285 }, [ 286 {at: -0.3, expect: 'shape(from 2px 2px, arc to 18px -12px of 7px 17px, arc by 12px -2px of 33px 33px rotate -42deg cw large, arc to 25px 20px of 10px 5px)'}, 287 {at: 0, expect: 'shape(from 5px 5px, arc to 15px -15px of 10px 20px, arc by 15px -5px of 30px 30px cw rotate 30deg large, arc to 25px 20px of 10px 5px)'}, 288 {at: 0.3, expect: 'shape(from 8px 8px, arc to 12px -18px of 13px 23px, arc by 18px -8px of 27px 27px rotate 102deg cw large, arc to 25px 20px of 10px 5px cw)'}, 289 {at: 0.5, expect: 'shape(from 10px 10px, arc to 10px -20px of 15px 25px, arc by 20px -10px of 25px 25px rotate 150deg cw large, arc to 25px 20px of 10px 5px cw)'}, 290 {at: 1, expect: 'shape(from 15px 15px, arc to 5px -25px of 20px 30px, arc by 25px -15px of 20px 20px rotate 270deg cw, arc to 25px 20px of 10px 5px cw)'}, 291 {at: 1.5, expect: 'shape(from 20px 20px, arc to 0px -30px of 25px 35px, arc by 30px -20px of 15px 15px rotate 390deg cw, arc to 25px 20px of 10px 5px cw)'}, 292 ]); 293 294 </script> 295 </body>