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