background-image-interpolation.html (5442B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image"> 4 <meta name="test" content="background-image supports animation"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 10 <style> 11 .parent { 12 background-image: url(../resources/blue-100.png); 13 background-size: 0 0; 14 } 15 .target { 16 width: 100px; 17 height: 100px; 18 display: inline-block; 19 border: 10px solid black; 20 background-repeat: no-repeat; 21 background-image: url(../resources/blue-100.png); 22 } 23 .expected { 24 border-color: green; 25 margin-right: 2px; 26 } 27 </style> 28 29 <body> 30 <script> 31 // Neutral to image 32 var from = 'url(../resources/blue-100.png)'; 33 var to = 'url(../resources/green-100.png)'; 34 test_interpolation({ 35 property: 'background-image', 36 from: neutralKeyframe, 37 to: to, 38 }, [ 39 {at: -0.3, expect: from}, 40 {at: 0, expect: from}, 41 {at: 0.3, expect: from}, 42 {at: 0.6, expect: to}, 43 {at: 1, expect: to}, 44 {at: 1.5, expect: to}, 45 ]); 46 47 // initial to image 48 to = 'url(../resources/green-100.png)'; 49 test_interpolation({ 50 property: 'background-image', 51 from: 'initial', 52 to: to, 53 }, [ 54 {at: -0.3, expect: 'none'}, 55 {at: 0, expect: 'none'}, 56 {at: 0.3, expect: 'none'}, 57 {at: 0.6, expect: to}, 58 {at: 1, expect: to}, 59 {at: 1.5, expect: to}, 60 ]); 61 62 // inherit to image 63 from = 'url(../resources/blue-100.png)'; 64 to = 'url(../resources/green-100.png)'; 65 test_interpolation({ 66 property: 'background-image', 67 from: 'inherit', 68 to: to, 69 }, [ 70 {at: -0.3, expect: from}, 71 {at: 0, expect: from}, 72 {at: 0.3, expect: from}, 73 {at: 0.6, expect: to}, 74 {at: 1, expect: to}, 75 {at: 1.5, expect: to}, 76 ]); 77 78 // unset to image 79 test_interpolation({ 80 property: 'background-image', 81 from: 'unset', 82 to: to, 83 }, [ 84 {at: -0.3, expect: 'none'}, 85 {at: 0, expect: 'none'}, 86 {at: 0.3, expect: 'none'}, 87 {at: 0.6, expect: to}, 88 {at: 1, expect: to}, 89 {at: 1.5, expect: to}, 90 ]); 91 92 // Image to image 93 from = 'url(../resources/blue-100.png)'; 94 to = 'url(../resources/green-100.png)'; 95 test_interpolation({ 96 property: 'background-image', 97 from: from, 98 to: to, 99 }, [ 100 {at: -0.3, expect: from}, 101 {at: 0, expect: from}, 102 {at: 0.3, expect: from}, 103 {at: 0.6, expect: to}, 104 {at: 1, expect: to}, 105 {at: 1.5, expect: to}, 106 ]); 107 108 // Image to gradient 109 from = 'url(../resources/blue-100.png)'; 110 to = 'linear-gradient(45deg, blue, orange)'; 111 test_interpolation({ 112 property: 'background-image', 113 from: from, 114 to: to, 115 }, [ 116 {at: -0.3, expect: from}, 117 {at: 0, expect: from}, 118 {at: 0.3, expect: from}, 119 {at: 0.6, expect: to}, 120 {at: 1, expect: to}, 121 {at: 1.5, expect: to}, 122 ]); 123 124 // Image to crossfade 125 from = 'url(../resources/blue-100.png)'; 126 to = 'cross-fade(url(../resources/green-100.png), url(../resources/stripes-100.png), 0.5)'; 127 test_interpolation({ 128 property: 'background-image', 129 from: from, 130 to: to, 131 }, [ 132 {at: -0.3, expect: from}, 133 {at: 0, expect: from}, 134 {at: 0.3, expect: from}, 135 {at: 0.6, expect: to}, 136 {at: 1, expect: to}, 137 {at: 1.5, expect: to}, 138 ]); 139 140 // Gradient to gradient 141 from = 'linear-gradient(-45deg, red, yellow)'; 142 to = 'linear-gradient(45deg, blue, orange)'; 143 test_interpolation({ 144 property: 'background-image', 145 from: from, 146 to: to, 147 }, [ 148 {at: -0.3, expect: from}, 149 {at: 0, expect: from}, 150 {at: 0.3, expect: from}, 151 {at: 0.6, expect: to}, 152 {at: 1, expect: to}, 153 {at: 1.5, expect: to}, 154 ]); 155 156 // Keyword to image 157 from = 'none'; 158 to = 'url(../resources/green-100.png)'; 159 test_interpolation({ 160 property: 'background-image', 161 from: from, 162 to: to, 163 }, [ 164 {at: -0.3, expect: from}, 165 {at: 0, expect: from}, 166 {at: 0.3, expect: from}, 167 {at: 0.6, expect: to}, 168 {at: 1, expect: to}, 169 {at: 1.5, expect: to}, 170 ]); 171 172 // Multiple to multiple 173 var fromA = 'url(../resources/stripes-100.png)'; 174 var fromB = 'url(../resources/blue-100.png)'; 175 var toA = 'url(../resources/blue-100.png)'; 176 var toB = 'url(../resources/stripes-100.png)'; 177 from = fromA + ', ' + fromB; 178 to = toA + ', ' + toB; 179 test_interpolation({ 180 property: 'background-image', 181 from: from, 182 to: to, 183 }, [ 184 {at: -0.3, expect: from}, 185 {at: 0, expect: from}, 186 {at: 0.3, expect: from}, 187 {at: 0.6, expect: to}, 188 {at: 1, expect: to}, 189 {at: 1.5, expect: to}, 190 ]); 191 192 // Single to multiple 193 from = 'url(../resources/blue-100.png)'; 194 var toA = 'url(../resources/stripes-100.png)'; 195 var toB = 'url(../resources/green-100.png)'; 196 to = toA + ', ' + toB; 197 test_interpolation({ 198 property: 'background-image', 199 from: from, 200 to: to, 201 }, [ 202 // The interpolation of different numbers of background-images looks a bit strange here. 203 // Animating background-image is not specified to be possible however we do it for backwards compatibility. 204 // With this in mind we kept the implementation simple at the expense of this corner case because there is 205 // no official specification to support. 206 {at: -0.3, expect: from}, 207 {at: 0, expect: from}, 208 {at: 0.3, expect: from}, 209 {at: 0.6, expect: to}, 210 {at: 1, expect: to}, 211 {at: 1.5, expect: to}, 212 ]); 213 214 // Multiple mismatched types 215 from = 'url(../resources/blue-100.png), none'; 216 to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)'; 217 test_interpolation({ 218 property: 'background-image', 219 from: from, 220 to: to, 221 }, [ 222 {at: -0.3, expect: from}, 223 {at: 0, expect: from}, 224 {at: 0.3, expect: from}, 225 {at: 0.6, expect: to}, 226 {at: 1, expect: to}, 227 {at: 1.5, expect: to}, 228 ]); 229 </script> 230 </body>