clip-path-interpolation-shape-control-points.html (6242B)
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: 'shape(from top left, curve to 100% 50% with 20px 30px from origin / 40px 50px)', 41 to: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 150px from origin)', 42 }, [ 43 {at: 0, expect: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 50px)'}, 44 {at: 0.5, expect: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 100px)'}, 45 {at: 1, expect: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 150px)'}, 46 ]); 47 48 test_interpolation({ 49 property: 'clip-path', 50 from: 'shape(from top left, curve to 100% 50% with 20px 30px from start / 40px 50px)', 51 to: 'shape(from top left, curve to 100% 50% with 20px 30px from start / 40px 150px from origin)', 52 }, [ 53 {at: 0, expect: 'shape(from top left, curve to 100% 50% with 20px 30px from start / 40px 50px)'}, 54 {at: 0.5, expect: 'shape(from top left, curve to 100% 50% with 20px 30px from start / 40px 100px)'}, 55 {at: 1, expect: 'shape(from top left, curve to 100% 50% with 20px 30px from start / 40px 150px)'}, 56 ]); 57 58 test_interpolation({ 59 property: 'clip-path', 60 from: 'shape(from top left, curve by 100% 50% with 20px 30px from start / 40px 50px)', 61 to: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 150px)', 62 }, [ 63 {at: 0, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 50px)'}, 64 {at: 0.5, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 100px)'}, 65 {at: 1, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 150px)'}, 66 ]); 67 68 test_interpolation({ 69 property: 'clip-path', 70 from: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 50px from start)', 71 to: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 150px)', 72 }, [ 73 {at: 0, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 50px)'}, 74 {at: 0.5, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 100px)'}, 75 {at: 1, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 150px)'}, 76 ]); 77 78 test_interpolation({ 79 property: 'clip-path', 80 from: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 50px from origin)', 81 to: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 150px from origin)', 82 }, [ 83 {at: 0, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 50px from origin)'}, 84 {at: 0.5, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 100px from origin)'}, 85 {at: 1, expect: 'shape(from top left, curve by 100% 50% with 20px 30px / 40px 150px from origin)'}, 86 ]); 87 88 test_interpolation({ 89 property: 'clip-path', 90 from: 'shape(from top left, curve by 100% 50% with 20px 30px from end / 40px 50px)', 91 to: 'shape(from top left, curve by 100% 50% with 20px 30px from end / 40px 150px)', 92 }, [ 93 {at: 0, expect: 'shape(from top left, curve by 100% 50% with 20px 30px from end / 40px 50px)'}, 94 {at: 0.5, expect: 'shape(from top left, curve by 100% 50% with 20px 30px from end / 40px 100px)'}, 95 {at: 1, expect: 'shape(from top left, curve by 100% 50% with 20px 30px from end / 40px 150px)'}, 96 ]); 97 98 test_interpolation({ 99 property: 'clip-path', 100 from: 'shape(from top left, smooth to 100% 50% with 20px 50px)', 101 to: 'shape(from top left, smooth to 100% 50% with 20px 150px from origin)', 102 }, [ 103 {at: 0, expect: 'shape(from top left, smooth to 100% 50% with 20px 50px)'}, 104 {at: 0.5, expect: 'shape(from top left, smooth to 100% 50% with 20px 100px)'}, 105 {at: 1, expect: 'shape(from top left, smooth to 100% 50% with 20px 150px)'}, 106 ]); 107 108 test_interpolation({ 109 property: 'clip-path', 110 from: 'shape(from top left, smooth to 100% 50% with 20px 50px from start)', 111 to: 'shape(from top left, smooth to 100% 50% with 20px 150px from start)', 112 }, [ 113 {at: 0, expect: 'shape(from top left, smooth to 100% 50% with 20px 50px from start)'}, 114 {at: 0.5, expect: 'shape(from top left, smooth to 100% 50% with 20px 100px from start)'}, 115 {at: 1, expect: 'shape(from top left, smooth to 100% 50% with 20px 150px from start)'}, 116 ]); 117 118 test_no_interpolation({ 119 property: 'clip-path', 120 from: 'shape(from top left, curve to 100% 50% with 20px 30px from start / 40px 50px)', 121 to: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 150px from origin)', 122 }); 123 124 test_no_interpolation({ 125 property: 'clip-path', 126 from: 'shape(from top left, curve to 100% 50% with 20px 30px from end / 40px 50px)', 127 to: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 150px from origin)', 128 }); 129 130 test_no_interpolation({ 131 property: 'clip-path', 132 from: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 50px from end)', 133 to: 'shape(from top left, curve to 100% 50% with 20px 30px / 40px 150px from origin)', 134 }); 135 136 137 test_no_interpolation({ 138 property: 'clip-path', 139 from: 'shape(from top left, smooth to 100% 50% with 20px 50px from start)', 140 to: 'shape(from top left, smooth to 100% 50% with 20px 150px)', 141 }); 142 143 test_no_interpolation({ 144 property: 'clip-path', 145 from: 'shape(from top left, smooth by 100% 50% with 20px 50px from origin)', 146 to: 'shape(from top left, smooth by 100% 50% with 20px 150px)', 147 }); 148 149 </script> 150 </body>