clip-path-interpolation-001.html (4080B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>clip-path interpolation</title> 4 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> 5 <meta name="assert" content="clip-path supports animation"> 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 clip-path: circle(80% at 30% 10%); 14 } 15 16 .target { 17 clip-path: circle(60% at 10% 30%); 18 } 19 </style> 20 <body> 21 <script> 22 test_interpolation({ 23 property: 'clip-path', 24 from: neutralKeyframe, 25 to: 'circle(40% at 20% 20%)', 26 }, [ 27 {at: -0.3, expect: 'circle(66% at 7% 33%)'}, 28 {at: 0, expect: 'circle(60% at 10% 30%)'}, 29 {at: 0.3, expect: 'circle(54% at 13% 27%)'}, 30 {at: 0.6, expect: 'circle(48% at 16% 24%)'}, 31 {at: 1, expect: 'circle(40% at 20% 20%)'}, 32 {at: 1.5, expect: 'circle(30% at 25% 15%)'}, 33 ]); 34 35 test_no_interpolation({ 36 property: 'clip-path', 37 from: 'initial', 38 to: 'circle(40% at 20% 20%)', 39 }); 40 41 test_interpolation({ 42 property: 'clip-path', 43 from: 'inherit', 44 to: 'circle(40% at 20% 20%)', 45 }, [ 46 {at: -0.3, expect: 'circle(92% at 33% 7%)'}, 47 {at: 0, expect: 'circle(80% at 30% 10%)'}, 48 {at: 0.3, expect: 'circle(68% at 27% 13%)'}, 49 {at: 0.6, expect: 'circle(56% at 24% 16%)'}, 50 {at: 1, expect: 'circle(40% at 20% 20%)'}, 51 {at: 1.5, expect: 'circle(20% at 15% 25%)'}, 52 ]); 53 54 test_no_interpolation({ 55 property: 'clip-path', 56 from: 'unset', 57 to: 'circle(40% at 20% 20%)', 58 }); 59 60 test_interpolation({ 61 property: 'clip-path', 62 from: 'circle(100% at 0% 0%)', 63 to: 'circle(50% at 25% 25%)', 64 }, [ 65 {at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'}, 66 {at: 0, expect: 'circle(100% at 0% 0%)'}, 67 {at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'}, 68 {at: 0.6, expect: 'circle(70% at 15% 15%)'}, 69 {at: 1, expect: 'circle(50% at 25% 25%)'}, 70 {at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'} 71 ]); 72 73 test_interpolation({ 74 property: 'clip-path', 75 from: 'ellipse(100% 100% at 0% 0%)', 76 to: 'ellipse(50% 50% at 25% 25%)', 77 }, [ 78 {at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'}, 79 {at: 0, expect: 'ellipse(100% 100% at 0% 0%)'}, 80 {at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'}, 81 {at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'}, 82 {at: 1, expect: 'ellipse(50% 50% at 25% 25%)'}, 83 {at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'} 84 ]); 85 86 test_interpolation({ 87 property: 'clip-path', 88 from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)', 89 to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', 90 }, [ 91 {at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'}, 92 {at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'}, 93 {at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'}, 94 {at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'}, 95 {at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, 96 {at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'} 97 ]); 98 99 test_no_interpolation({ 100 property: 'clip-path', 101 from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)', 102 to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', 103 }); 104 105 test_interpolation({ 106 property: 'clip-path', 107 from: 'inset(100%)', 108 to: 'inset(120%)', 109 }, [ 110 {at: -0.3, expect: 'inset(94%)'}, 111 {at: 0, expect: 'inset(100%)'}, 112 {at: 0.3, expect: 'inset(106%)'}, 113 {at: 0.6, expect: 'inset(112%)'}, 114 {at: 1, expect: 'inset(120%)'}, 115 {at: 1.5, expect: 'inset(130%)'}, 116 ]); 117 118 test_no_interpolation({ 119 property: 'clip-path', 120 from: 'none', 121 to: 'ellipse(100% 100% at 0% 0%)', 122 }); 123 124 test_interpolation({ 125 property: 'clip-path', 126 from: 'circle(25% at right 5% bottom 15px)', 127 to: 'circle(45% at right 25% bottom 35px)', 128 }, [ 129 {at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'}, 130 {at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'}, 131 {at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'}, 132 ]); 133 134 test_no_interpolation({ 135 property: 'clip-path', 136 from: 'url("/clip-source")', 137 to: 'ellipse(100% 100% at 0% 0%)', 138 }); 139 140 </script> 141 </body>