mask-border-slice-interpolation.html (4119B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>mask-border-slice interpolation</title> 4 <link rel="help" href="https://drafts.fxtf.org/css-masking/#propdef-mask-border-slice"> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <meta name="assert" content="mask-border-slice supports animation by computed value"> 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 mask-border-slice: 50%; 15 } 16 .target { 17 width: 50px; 18 height: 50px; 19 background-color: black; 20 display: inline-block; 21 border: 25px; 22 mask-border-source: linear-gradient(45deg, red, blue, green); 23 mask-border-slice: 20%; 24 } 25 .expected { 26 background-color: green; 27 margin-right: 2px; 28 } 29 </style> 30 31 <body></body> 32 33 <script> 34 test_interpolation({ 35 property: 'mask-border-slice', 36 from: neutralKeyframe, 37 to: '10%', 38 }, [ 39 {at: -0.3, expect: '23%'}, 40 {at: 0, expect: '20%'}, 41 {at: 0.3, expect: '17%'}, 42 {at: 0.5, expect: '15%'}, 43 {at: 0.6, expect: '14%'}, 44 {at: 1, expect: '10%'}, 45 {at: 1.5, expect: '5%'}, 46 ]); 47 48 test_interpolation({ 49 property: 'mask-border-slice', 50 from: 'initial', 51 to: '10', 52 }, [ 53 {at: -0.3, expect: '0'}, 54 {at: 0, expect: '0'}, 55 {at: 0.3, expect: '3'}, 56 {at: 0.5, expect: '5'}, 57 {at: 0.6, expect: '6'}, 58 {at: 1, expect: '10'}, 59 {at: 1.5, expect: '15'}, 60 ]); 61 62 test_interpolation({ 63 property: 'mask-border-slice', 64 from: 'inherit', 65 to: '10%', 66 }, [ 67 {at: -0.3, expect: '62%'}, 68 {at: 0, expect: '50%'}, 69 {at: 0.3, expect: '38%'}, 70 {at: 0.5, expect: '30%'}, 71 {at: 0.6, expect: '26%'}, 72 {at: 1, expect: '10%'}, 73 {at: 1.5, expect: '0%'}, 74 ]); 75 76 test_interpolation({ 77 property: 'mask-border-slice', 78 from: 'unset', 79 to: '10', 80 }, [ 81 {at: -0.3, expect: '0'}, 82 {at: 0, expect: '0'}, 83 {at: 0.3, expect: '3'}, 84 {at: 0.5, expect: '5'}, 85 {at: 0.6, expect: '6'}, 86 {at: 1, expect: '10'}, 87 {at: 1.5, expect: '15'}, 88 ]); 89 90 test_interpolation({ 91 property: 'mask-border-slice', 92 from: '0%', 93 to: '50%', 94 }, [ 95 {at: -0.3, expect: '0%'}, // CSS mask-border-slice can't be negative. 96 {at: 0, expect: '0%'}, 97 {at: 0.3, expect: '15%'}, 98 {at: 0.5, expect: '25%'}, 99 {at: 0.6, expect: '30%'}, 100 {at: 1, expect: '50%'}, 101 {at: 1.5, expect: '75%'}, 102 ]); 103 104 test_interpolation({ 105 property: 'mask-border-slice', 106 from: '0% 10% 20% 30%', 107 to: '40% 50% 60% 70%', 108 }, [ 109 {at: -0.5, expect: '0% 0% 0% 10%'}, 110 {at: 0, expect: '0% 10% 20% 30%'}, 111 {at: 0.3, expect: '12% 22% 32% 42%'}, 112 {at: 0.5, expect: '20% 30% 40% 50%'}, 113 {at: 0.6, expect: '24% 34% 44% 54%'}, 114 {at: 1, expect: '40% 50% 60% 70%'}, 115 {at: 1.5, expect: '60% 70% 80% 90%'}, 116 ]); 117 118 test_interpolation({ 119 property: 'mask-border-slice', 120 from: '0 10 20 30 fill', 121 to: '40 50 60 70 fill', 122 }, [ 123 {at: -0.5, expect: '0 0 0 10 fill'}, // CSS mask-border-slice can't be negative. 124 {at: 0, expect: '0 10 20 30 fill'}, 125 {at: 0.3, expect: '12 22 32 42 fill'}, 126 {at: 0.5, expect: '20 30 40 50 fill'}, 127 {at: 0.6, expect: '24 34 44 54 fill'}, 128 {at: 1, expect: '40 50 60 70 fill'}, 129 {at: 1.5, expect: '60 70 80 90 fill'}, 130 ]); 131 132 test_interpolation({ 133 property: 'mask-border-slice', 134 from: '0% 10 20% 30 fill', 135 to: '40% 50 60% 70 fill', 136 }, [ 137 {at: -0.5, expect: '0% 0 0% 10 fill'}, // CSS mask-border-slice can't be negative. 138 {at: 0, expect: '0% 10 20% 30 fill'}, 139 {at: 0.3, expect: '12% 22 32% 42 fill'}, 140 {at: 0.5, expect: '20% 30 40% 50 fill'}, 141 {at: 0.6, expect: '24% 34 44% 54 fill'}, 142 {at: 1, expect: '40% 50 60% 70 fill'}, 143 {at: 1.5, expect: '60% 70 80% 90 fill'}, 144 ]); 145 146 test_no_interpolation({ 147 property: 'mask-border-slice', 148 from: '0% fill', 149 to: '50%', 150 }); 151 152 test_no_interpolation({ 153 property: 'mask-border-slice', 154 from: '50%', 155 to: '100', 156 }); 157 158 test_no_interpolation({ 159 property: 'mask-border-slice', 160 from: '50% fill', 161 to: '100 fill', 162 }); 163 164 test_no_interpolation({ 165 property: 'mask-border-slice', 166 from: '0% 10 20% 30 fill', 167 to: '40% 50 60% 70', 168 }); 169 170 test_no_interpolation({ 171 property: 'mask-border-slice', 172 from: '0% 10 20 30 fill', 173 to: '40 50 60% 70', 174 }); 175 </script> 176 </body>